/*
|--------------------------------------------------------------------------
| SWALU Mobile Safe Fix
|--------------------------------------------------------------------------
| Corrige desplazamiento lateral en móviles y ordena elementos flotantes:
| - chat / prompt del asistente
| - banner de cookies
| - botones flotantes
| - contenedores que pueden exceder el ancho real del celular
|
| Cargar después de common.css, estilos de página y swalu-dark.css.
|--------------------------------------------------------------------------
*/

html,
body{
    width:100%;
    max-width:100%;
    overscroll-behavior-x:none;
}

html{
    overflow-x:clip!important;
}

body{
    overflow-x:clip!important;
}

@supports not (overflow:clip){
    html,
    body{
        overflow-x:hidden!important;
    }
}

*,
*::before,
*::after{
    box-sizing:border-box;
}

img,
picture,
svg,
video,
iframe{
    max-width:100%;
}

.sw-container,
.container,
main,
section,
header,
footer{
    min-width:0;
}

.sw-title,
.sw-lead,
h1,
h2,
h3,
p,
a,
button{
    overflow-wrap:break-word;
}

@media(max-width:768px){

    html,
    body{
        width:100%!important;
        max-width:100%!important;
        overflow-x:hidden!important;
    }

    body{
        position:relative;
    }

    main,
    section,
    header,
    footer,
    .sw-section,
    .sw-container,
    .container{
        max-width:100vw!important;
        min-width:0!important;
    }

    .sw-container,
    .container{
        width:100%!important;
        padding-left:clamp(14px,4vw,18px)!important;
        padding-right:clamp(14px,4vw,18px)!important;
        margin-left:auto!important;
        margin-right:auto!important;
    }

    [class*="__grid"],
    [class*="__layout"],
    [class*="__row"],
    [class*="grid"],
    [class*="layout"]{
        min-width:0!important;
    }

    [class*="__visual"],
    [class*="visual"],
    [class*="panel"],
    [class*="card"]{
        max-width:100%!important;
        min-width:0!important;
    }

    /*
     * Banner de cookies:
     * En el video se ve duplicado/cortado porque la página permite scroll horizontal.
     * Esta regla lo ancla siempre dentro del viewport real del celular.
     */
    #sw-cookie-consent,
    .sw-cookie-consent{
        position:fixed!important;
        left:12px!important;
        right:12px!important;
        bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;
        top:auto!important;
        width:auto!important;
        max-width:none!important;
        min-width:0!important;
        transform:none!important;
        z-index:99998!important;
    }

    .sw-cookie-consent__panel{
        width:100%!important;
        max-width:100%!important;
        max-height:calc(100dvh - 112px)!important;
        overflow:auto!important;
        -webkit-overflow-scrolling:touch;
        border-radius:20px!important;
    }

    .sw-cookie-consent__actions{
        display:grid!important;
        grid-template-columns:1fr!important;
        gap:9px!important;
    }

    .sw-cookie-consent__actions .sw-btn,
    .sw-cookie-consent__actions button{
        width:100%!important;
        justify-content:center!important;
        min-height:42px!important;
        white-space:normal!important;
    }

    .sw-cookie-settings-trigger{
        left:12px!important;
        right:auto!important;
        bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;
        z-index:9990!important;
    }

    /*
     * Chatbot:
     * El mensaje debe calcularse en móvil sobre la cabecita/botón del asistente
     * y nunca debe empujar el ancho de la página.
     */
    .swalu-assistant-prompt,
    .sw-chat-prompt,
    .assistant-prompt,
    .chatbot-prompt,
    .chatbot-floating-message,
    .chatbot-welcome,
    .bot-welcome-message{
        position:fixed!important;
        left:auto!important;
        right:12px!important;
        bottom:calc(92px + env(safe-area-inset-bottom,0px))!important;
        width:min(310px,calc(100vw - 24px))!important;
        max-width:calc(100vw - 24px)!important;
        min-width:0!important;
        transform:none!important;
        z-index:9996!important;
        box-sizing:border-box!important;
        white-space:normal!important;
        overflow-wrap:break-word!important;
    }

    .swalu-assistant-prompt::after,
    .sw-chat-prompt::after,
    .assistant-prompt::after,
    .chatbot-prompt::after,
    .chatbot-floating-message::after,
    .chatbot-welcome::after,
    .bot-welcome-message::after{
        right:22px!important;
        left:auto!important;
    }

    .swalu-assistant,
    .swalu-chat,
    .swalu-chatbot,
    .chatbot-floating,
    .chatbot-widget,
    .assistant-widget{
        max-width:calc(100vw - 24px)!important;
    }

    .swalu-assistant-toggle,
    .swalu-chat-toggle,
    .chatbot-toggle,
    .chatbot-button,
    .chatbot-float-button,
    .assistant-toggle,
    .assistant-avatar-button{
        position:fixed!important;
        right:12px!important;
        left:auto!important;
        bottom:calc(22px + env(safe-area-inset-bottom,0px))!important;
        transform:none!important;
        z-index:9997!important;
    }

    /*
     * Panel abierto del chat.
     * Se evita que el panel se salga de pantalla en celulares.
     */
    .swalu-chat-window,
    .swalu-assistant-window,
    .chatbot-window,
    .chat-window,
    .assistant-window{
        position:fixed!important;
        left:12px!important;
        right:12px!important;
        bottom:calc(92px + env(safe-area-inset-bottom,0px))!important;
        width:auto!important;
        max-width:none!important;
        max-height:calc(100dvh - 118px)!important;
        overflow:hidden!important;
        transform:none!important;
        z-index:9999!important;
    }

    /*
     * Botón WhatsApp y botón subir.
     * Se mantienen dentro del viewport y no generan ancho extra.
     */
    .whatsapp,
    .whatsapp-float,
    .whatsapp_float,
    .float-whatsapp,
    .sw-whatsapp,
    .top{
        max-width:calc(100vw - 24px)!important;
        transform:none!important;
    }

    .top{
        right:12px!important;
        left:auto!important;
    }

    /*
     * Cualquier elemento fijo que por estilos antiguos mida más que la pantalla
     * queda limitado sin afectar escritorio.
     */
    body > [style*="position: fixed"],
    body > [class*="fixed"],
    body > [class*="floating"]{
        max-width:calc(100vw - 24px)!important;
    }
}

@media(max-width:420px){
    .swalu-assistant-prompt,
    .sw-chat-prompt,
    .assistant-prompt,
    .chatbot-prompt,
    .chatbot-floating-message,
    .chatbot-welcome,
    .bot-welcome-message{
        right:10px!important;
        width:min(292px,calc(100vw - 20px))!important;
        max-width:calc(100vw - 20px)!important;
        bottom:calc(88px + env(safe-area-inset-bottom,0px))!important;
        font-size:.86rem!important;
        line-height:1.35!important;
    }

    .swalu-assistant-toggle,
    .swalu-chat-toggle,
    .chatbot-toggle,
    .chatbot-button,
    .chatbot-float-button,
    .assistant-toggle,
    .assistant-avatar-button{
        right:10px!important;
        bottom:calc(20px + env(safe-area-inset-bottom,0px))!important;
    }

    #sw-cookie-consent,
    .sw-cookie-consent{
        left:10px!important;
        right:10px!important;
        bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;
    }
}