/* Overlay del modal - MÁS ESPECÍFICO para evitar interferencias */
.wa-wrapper .wa-modal{
    position:fixed; 
    inset:0;
    background:rgba(0,0,0,.45);
    display:none;
    z-index: calc(var(--evabot-z) + 1);
    pointer-events: none; /* No interfiere con otros elementos cuando está oculto */
}
.wa-wrapper .wa-modal[aria-hidden="false"]{ 
    display:grid; 
    place-items:center;
    pointer-events: auto; /* Permite interacción cuando está visible */
}

/* Tarjeta del modal */
.wa-wrapper .wa-modal__card{
    position: relative;
    z-index: calc(var(--evabot-z) + 2);
    background:#fff; width:min(92vw,420px);
    border-radius:16px; 
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    padding:20px 20px 16px;
}

.wa-wrapper .wa-modal__header{
    display: flex;
    align-items: center;
    justify-content: flex-end;   /* botón a la derecha */
    gap: 12px;
    margin-bottom: 8px;          /* un poco menos, el subtítulo va debajo */
    position: relative;
    padding-inline: 12px;        /* aire a los lados */
    min-height: 40px;            /* asegura altura mínima del header */
}

.wa-wrapper .wa-modal__title{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font: 600 25px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial;
    margin: 0;

    /* Evita solaparse con el botón de cerrar y recorta si es largo */
    max-width: calc(100% - 120px);  /* 2×(botón+espacio) ≈ 120px */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    /* Por si alguna vez se cruza con el botón, no bloquea clics */
    pointer-events: none;
}

.wa-wrapper .wa-modal__close{
    border: 0; background: transparent; cursor: pointer;
    font-size: 25px; line-height: 1; padding: 6px; border-radius: 8px;
}
.wa-wrapper .wa-modal__close:focus{ outline: 2px solid #888; outline-offset: 2px; }

.wa-wrapper .wa-modal__subtitle{
    text-align: center;
    margin: 4px clamp(16px, 4vw, 32px) 16px;   /* respira a los lados y abajo */
    font: 400 16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Arial;
    opacity: .85;                               /* jerarquía visual */
}

.wa-wrapper .wa-modal__hint{
    font: 16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Arial;
    opacity: .8;
}
.wa-wrapper .wa-modal__body{
    display: grid;
    gap: 12px;
    justify-items: center;
    text-align: center;
    margin-top: 4px;
}

.wa-wrapper .wa-modal__qr{
    width: min(70vw, 320px);
    height: auto;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
    background: #fff;
    margin-bottom: 10px;
}

/* Ajustes suaves en móviles */
@media (max-width: 480px){
    .wa-wrapper .wa-modal__title{
        font-size: 18px;
        max-width: calc(100% - 88px);
    }
    .wa-wrapper .wa-modal__subtitle{
        font-size: 12px;
        margin: 2px 16px 12px;
    }
}

/* Altura del botón - Z-INDEX MÁS RAZONABLE */
:root{
    --evabot-size: 56px;             /* 48/56/64… */
    --evabot-pill-bg: #CFFF59;
    --evabot-text: #0A46FF;
    --evabot-z: 1050; /* Valor razonable que no interfiere con modales de Moodle */
}

/* Píldora: logo a la izq + texto a la dcha (NO círculo) */
.wa-fab.wa-fab--pill{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: var(--evabot-size) !important;
    width: auto !important;
    padding: 0 16px 0 12px;
    background: var(--evabot-pill-bg) !important;
    border-radius: 9999px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    text-decoration: none;
}

/* Fuerza el tamaño del logo y evita que las reglas globales lo encojan */
.wa-fab.wa-fab--pill img.wa-logo{
    width: calc(var(--evabot-size) - 14px) !important;
    height: calc(var(--evabot-size) - 14px) !important;
    max-width: none !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    display: block;
    object-fit: contain;
}

/* Texto a la derecha */
.wa-fab.wa-fab--pill .wa-label{
    color: var(--evabot-text);
    font: 700 16px/1.1 system-ui,-apple-system,Segoe UI,Roboto,Arial;
    white-space: nowrap;
}

/* Posición en pantalla (derecha por defecto; login usa .wa-left) */
.wa-fab{
    position: fixed;
    right: calc(32px + env(safe-area-inset-right, 0));
    bottom: calc(32px + env(safe-area-inset-bottom, 0));
    z-index: var(--evabot-z);
}
.wa-fab.wa-left{
    right: auto;
    left: calc(32px + env(safe-area-inset-left, 0));
}