/* MyBWAI Pre-Questions Platform v2.0.9 */
.mybwai-preq-v2{
    --preq-border:rgba(148,163,184,.18);
    --preq-soft:rgba(148,163,184,.055);
    --preq-blue:rgba(96,165,250,.15);
    width:min(100%,860px);
    min-width:0;
    margin:2px auto 0;
    color:inherit;
    position:relative;
}
.mybwai-preq-v2 *{box-sizing:border-box}
.mybwai-preq-v2__category-row{
    position:relative;

    display:flex;
    align-items:center;

    gap:8px;

    min-width:0;

    /*
     * Espacio reservado para el divisor.
     */
    padding-bottom:11px;
    margin-bottom:8px;
}


/*
 * Divisor visual entre categorías y preguntas.
 *
 * Se dibuja sobre la propia fila de categorías para que:
 * - no forme parte del scroll de preguntas;
 * - siga correctamente la altura de las categorías expandidas;
 * - funcione tanto en modo row como en modo categorías desplegadas.
 */
.mybwai-preq-v2__category-row::after{
    content:'';

    position:absolute;

    left:5px;
    right:5px;
    bottom:0;

    height:1px;

    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(96,165,250,.16) 12%,
            rgba(148,163,184,.24) 42%,
            rgba(200,145,58,.18) 78%,
            transparent 100%
        );

    box-shadow:
        0 1px 8px
        rgba(96,165,250,.06);

    opacity:.95;
}
.mybwai-preq-v2__categories{
    display:flex;flex:1;min-width:0;gap:7px;overflow:auto hidden;
    padding:5px 5px 7px;scrollbar-width:none;overscroll-behavior-x:contain;
}
.mybwai-preq-v2__categories::-webkit-scrollbar{display:none}
.mybwai-preq-v2__cat,
.mybwai-preq-v2__expand,
.mybwai-preq-v2__more,
.mybwai-preq-v2__question,
.mybwai-preq-v2__suggestion{
    appearance:none;-webkit-appearance:none;font:inherit;color:inherit;
}
.mybwai-preq-v2__cat{
    /*
     * Tamaño uniforme calculado por JS:
     * - width = el mínimo ancho común que permite que TODOS los títulos
     *   quepan en un máximo de 2 líneas.
     * - height = la altura del botón más alto una vez aplicado ese ancho.
     */
    flex:0 0 var(--preq-cat-uniform-width, auto);
    width:var(--preq-cat-uniform-width, auto);
    min-width:var(--preq-cat-uniform-width, 0);
    height:var(--preq-cat-uniform-height, auto);

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;

    border:1px solid var(--preq-border);
    background:var(--preq-soft);
    border-radius:999px;
    padding:7px 11px;

    font-size:12px;
    line-height:1.15;
    text-align:center;

    cursor:pointer;
    overflow:hidden;

    transition:background .16s ease,border-color .16s ease,transform .16s ease;
}
/*
 * EXCEPCIÓN: categoría automática "Todas"
 *
 * En modo normal/row:
 * - mantiene exactamente la misma altura que las demás;
 * - pero ocupa únicamente el ancho natural necesario.
 *
 * En modo expanded:
 * esta regla deja de aplicarse y "Todas" recupera
 * exactamente el mismo ancho uniforme que el resto.
 */
.mybwai-preq-v2:not(.is-categories-grid)
.mybwai-preq-v2__cat[data-category-id="0"] {

    flex: 0 0 auto;
    width:auto;
    padding: 0 15px;
    min-width:0;
    /*
     * Conservamos expresamente la altura uniforme.
     */
    height: var(--preq-cat-uniform-height, auto);
}
.mybwai-preq-v2__cat:hover,
.mybwai-preq-v2__cat.is-active{
    background:var(--preq-blue);border-color:rgba(96,165,250,.54);color:#c8913a!important;transform:translateY(-1px);
}
.mybwai-preq-v2__cat-icon{
    flex:0 0 auto;
    margin:0;
    line-height:1;
}

.mybwai-preq-v2__cat-label{
    display:-webkit-box;
    min-width:0;
    max-width:100%;

    white-space:normal;
    overflow:hidden;

    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    line-clamp:2;

    overflow-wrap:normal;
    word-break:normal;

    line-height:1.15;
    text-align:center;
}
.mybwai-preq-v2__expand{
    flex:0 0 34px;width:34px;height:34px;border-radius:50%;border:1px solid var(--preq-border);
    background:rgba(255,255,255,.045);cursor:pointer;font-size:18px;line-height:1;
    display:flex;align-items:center;justify-content:center;padding:0;
    transition:transform .24s ease,background .18s ease;
}
.mybwai-preq-v2__expand svg{
    display:block;width:18px;height:18px;flex:0 0 auto;
}
.mybwai-preq-v2__expand:hover{background:rgba(96,165,250,.10)}
.mybwai-preq-v2__questions{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;
    max-height:150px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:1px;
}
.mybwai-preq-v2__question{
    display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;
    min-height:48px;border:1px solid var(--preq-border);background:var(--preq-soft);
    border-radius:14px;padding:10px 12px;text-align:left;cursor:pointer;
    transition:transform .16s ease,background .16s ease,border-color .16s ease;
}
.mybwai-preq-v2__question:hover{
    transform:translateY(-1px);background:rgba(96,165,250,.09);color:#c8913a!important;border-color:rgba(96,165,250,.43);
}
.mybwai-preq-v2__question-copy{font-size:12.5px;line-height:1.35}
.mybwai-preq-v2__question-arrow{font-size:20px;line-height:1;opacity:.46}
.mybwai-preq-v2__more{
    display:block;margin:8px auto 0;border:0;border-radius:25px;background:transparent;color:#60a5fa;
    padding:4px 10px;font-size:12px;font-weight:700;cursor:pointer;
}

/*
 * El atributo hidden debe ganar siempre sobre display:block.
 * Sin una página siguiente, el botón no ocupa espacio ni se muestra.
 */
.mybwai-preq-v2__more[hidden]{
    display:none !important;
}
.mybwai-preq-v2__status{min-height:15px;margin-top:3px;text-align:center;font-size:11px;opacity:.7}
.mybwai-preq-v2__status.is-error{color:#ff9b9b;opacity:1}

.mybwai-preq-v2__suggestions{
    position:fixed;z-index:5100;box-sizing:border-box;margin:0;padding:10px;
    min-width:260px;max-width:calc(100vw - 16px);max-height:min(42vh,320px);overflow:auto;
    border:1px solid rgba(96,165,250,.24);background:rgba(7,12,28,.98);color:#e5e7eb;
    border-radius:14px;box-shadow:0 16px 48px rgba(0,0,0,.34);
    -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}
.mybwai-preq-v2__suggestions[hidden]{display:none !important}
.mybwai-preq-v2__suggestions-head{
    display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;
}
.mybwai-preq-v2__suggestions-title{
    margin:0;font-size:10px;text-transform:uppercase;letter-spacing:.12em;opacity:.65;
}
.mybwai-preq-v2__suggestions-close{
    appearance:none;-webkit-appearance:none;display:inline-grid;place-items:center;
    width:28px;height:28px;flex:0 0 28px;margin:-5px -4px -4px 0;padding:0;
    border:0;border-radius:999px;background:transparent;color:inherit;
    font-size:20px;line-height:1;cursor:pointer;opacity:.72;
}
.mybwai-preq-v2__suggestions-close:hover,
.mybwai-preq-v2__suggestions-close:focus-visible{
    opacity:1;background:rgba(255,255,255,.08);outline:none;
}
.mybwai-preq-v2__suggestions-list{display:grid;gap:5px}
.mybwai-preq-v2__suggestion{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    width:100%;border:1px solid transparent;background:rgba(255,255,255,.04);color:inherit;
    border-radius:10px;padding:8px 10px;text-align:left;cursor:pointer;font-size:12px;
}
.mybwai-preq-v2__suggestion-copy{min-width:0;line-height:1.35}
.mybwai-preq-v2__suggestion-score{
    flex:0 0 auto;font-size:10px;font-variant-numeric:tabular-nums;opacity:.52;
}
.mybwai-preq-v2__suggestion:hover,
.mybwai-preq-v2__suggestion:focus-visible{
    border-color:rgba(96,165,250,.34);background:rgba(96,165,250,.08);outline:none;
}


/* ==========================================================================
 * ESTADOS DEL EXPLORER
 *
 * mbw-preq-expanded:
 *   pantalla completa (propiedad del FRONT).
 *
 * is-categories-grid:
 *   nombre histórico del estado expandido de categorías.
 *   Visualmente ahora es un bloque flex-wrap con scroll vertical.
 *
 * Son estados independientes: el botón de categorías NO cierra fullscreen.
 * ========================================================================== */

#mbw-wrap.mbw-preq-expanded .mybwai-preq-v2{
    flex:1 1 auto;
    width:100%;
    max-width:1120px;
    min-height:0;
    display:flex;
    flex-direction:column;
    margin:0 auto;
}

#mbw-wrap.mbw-preq-expanded .mybwai-preq-v2__category-row{
    flex:0 0 auto;
}

/*
 * Las filas NO se estiran para rellenar el alto disponible.
 * Cada botón conserva la altura que necesita su propio contenido.
 */
#mbw-wrap.mbw-preq-expanded .mybwai-preq-v2__questions{
    flex:1 1 auto;
    min-height:0;
    max-height:none;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:max-content;
    align-content:start;
    align-items:start;
    padding:6px 2px 18px;
}

#mbw-wrap.mbw-preq-expanded .mybwai-preq-v2__question{
    height:auto;
    align-self:start;
}

#mbw-wrap.mbw-preq-expanded .mybwai-preq-v2__more{
    padding:9px 16px;
}

/*
 * Categorías expandidas:
 *
 * Conservamos la clase histórica `is-categories-grid` únicamente para
 * no romper el JS existente. Visualmente ya NO es una cuadrícula:
 *
 * - los chips conservan su ancho natural;
 * - hacen wrap de izquierda a derecha;
 * - el bloque crece hasta unas 3,5 filas;
 * - si existen más categorías, se usa scroll vertical;
 * - no se oculta ninguna categoría y no existe botón "Ver todas".
 */
.mybwai-preq-v2.is-categories-grid .mybwai-preq-v2__category-row{
    align-items:flex-start;
}

.mybwai-preq-v2.is-categories-grid .mybwai-preq-v2__categories{
    /*
     * La altura máxima ya NO es fija.
     *
     * JS calcula:
     *   3,5 × altura uniforme de categoría
     *   + separaciones entre filas
     *   + padding vertical.
     *
     * Así seguimos mostrando unas 3 filas y media aunque los títulos
     * necesiten dos líneas y los chips sean más altos.
     *
     * Si hay menos categorías, el bloque conserva su altura natural.
     */
    max-height:var(
        --preq-cat-expanded-max-height,
        168px
    );

    display:flex;
    flex-wrap:wrap;
    align-content:flex-start;
    align-items:flex-start;

    gap:7px;

    overflow-x:hidden;
    overflow-y:auto;

    padding:2px 5px 7px;

    overscroll-behavior-y:contain;
    scrollbar-width:thin;
    scrollbar-color:rgba(96,165,250,.34) transparent;
}

.mybwai-preq-v2.is-categories-grid
.mybwai-preq-v2__categories::-webkit-scrollbar{
    display:block;
    width:4px;
    height:0;
}

.mybwai-preq-v2.is-categories-grid
.mybwai-preq-v2__categories::-webkit-scrollbar-track{
    background:transparent;
}

.mybwai-preq-v2.is-categories-grid
.mybwai-preq-v2__categories::-webkit-scrollbar-thumb{
    background:rgba(96,165,250,.34);
    border-radius:999px;
}

.mybwai-preq-v2.is-categories-grid .mybwai-preq-v2__cat{
    /*
     * En el bloque expandido se conserva EXACTAMENTE el mismo tamaño
     * uniforme que en la fila horizontal.
     */
    flex:0 0 var(--preq-cat-uniform-width, auto);
    width:var(--preq-cat-uniform-width, auto);
    min-width:var(--preq-cat-uniform-width, 0);
    max-width:100%;
    height:var(--preq-cat-uniform-height, auto);

    white-space:normal;
}

.mybwai-preq-v2.is-categories-grid .mybwai-preq-v2__expand{
    transform:rotate(180deg);
}

@media(max-width:700px){
    .mybwai-preq-v2__questions{
        grid-template-columns:1fr;
        max-height:136px;
    }

    #mbw-wrap.mbw-preq-expanded .mybwai-preq-v2__questions{
        grid-template-columns:1fr;
    }

    .mybwai-preq-v2__question{
        min-height:46px;
    }

}
@media(prefers-reduced-motion:reduce){
    .mybwai-preq-v2 *,
    .mybwai-preq-v2 *::before,
    .mybwai-preq-v2 *::after{
        animation-duration:.001ms!important;
        transition-duration:.001ms!important;
    }
}