/* ============================================================
   CAPA DE CASCADA: `overrides`
   ============================================================
   Todo este fichero vive en la capa `overrides`. El orden de capas se
   declara una sola vez en estilos.css:

       @layer base, componentes, modulos, overrides;

   Con capas, QUIEN GANA lo decide la capa, no la especificidad del
   selector. Eso elimina la guerra de especificidad ENTRE ficheros, que
   es la que obligaba a escribir selectores sobrecualificados del tipo
   `main#admin-main.admin-main` solo para poder pisar a estilos.css.

   OJO con `!important`: entre capas su precedencia se INVIERTE (gana la
   capa mas TEMPRANA). Se comprobo que no hay dos ficheros declarando
   !important sobre el mismo selector+propiedad con valores distintos;
   antes de anadir uno nuevo, pasar scripts/frontend/check_important.py.
   ============================================================ */
@layer overrides {
/* ============================================================
   SIA - Capa responsive y tactil
   ============================================================
   Se carga SIEMPRE la ultima (ver chat.html / index.html): aqui
   solo hay reglas que deben pisar a estilos.css y notifications.css.

   Escala de breakpoints del proyecto (ver cabecera de estilos.css):
     <= 580px   movil
     <= 900px   tablet vertical / ventana a media pantalla
     <= 1200px  portatil
     >  1200px  escritorio
   El ORDEN importa: los bloques van de mas ancho a mas estrecho.

   Ademas de los anchos, hay dos ejes independientes que NO son el
   tamano de pantalla y que antes no se contemplaban:
     - `pointer: coarse`  -> dedo en vez de raton (tamano de objetivo,
                             zoom de iOS al enfocar campos)
     - `hover: hover`     -> si el dispositivo puede hacer hover
                             (las reglas :hover de estilos.css ya van
                             envueltas en el)
   ============================================================ */


/* ================================================================
   1. ALTURA DE VIEWPORT Y AREAS SEGURAS
   ================================================================ */

/* 100vh en moviles NO es el area visible: incluye la barra de URL, que
   se retrae al hacer scroll. El resultado era que la zona de entrada
   quedaba por debajo del borde inferior de la pantalla. `dvh` mide el
   viewport dinamico real. Se aplica dentro de @supports para no tocar
   nada en navegadores que no lo entienden (ahi sigue valiendo 100vh). */
/* --teclado lo fija app.js desde visualViewport: en iOS el teclado NO
   reduce el layout por si solo y la zona de entrada quedaba debajo de el.
   En escritorio la variable vale 0 y esto no cambia nada. */
@supports (height: 100dvh) {
    body {
        height: calc(100dvh - var(--teclado, 0px));
        max-height: calc(100dvh - var(--teclado, 0px));
    }
}

/* Muescas y barra de gestos: sin esto el boton de enviar caia debajo
   del "home indicator" del iPhone y la cabecera se metia en la muesca
   en horizontal. Se usa max() para no reducir el padding existente. */
.header {
    padding-left: max(32px, env(safe-area-inset-left));
    padding-right: max(32px, env(safe-area-inset-right));
}

.input-area {
    position: relative;   /* ancla de #btn-scroll-bottom */
    padding-bottom: calc(32px + env(safe-area-inset-bottom));
    padding-left: max(32px, env(safe-area-inset-left));
    padding-right: max(32px, env(safe-area-inset-right));
}

/* El boton "ir al final" se ancla al borde superior de la zona de
   entrada: asi acompana al textarea cuando crece, sin numeros magicos. */
.btn-scroll-bottom {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: -6px;
}


/* ================================================================
   2. DISPOSITIVOS TACTILES  (independiente del ancho)
   ================================================================ */

@media (pointer: coarse) {

    /* Safari iOS hace zoom automatico al enfocar un campo con
       font-size < 16px, y NO deshace el zoom al salir: la pagina se
       queda descuadrada. 16px es el minimo que lo evita. */
    #pregunta,
    .input-capsule textarea,
    .input-capsule input,
    .categoria-select,
    .thread-search,
    .input-group input,
    .modal-body textarea,
    input[type='text'],
    input[type='search'],
    input[type='password'],
    input[type='email'],
    input[type='number'],
    select,
    textarea {
        font-size: 16px;
    }

    /* Objetivos tactiles: 44px es la referencia de las guias de Apple y
       el minimo comodo real. Estaban entre 34 y 36. */
    .btn-icon {
        min-width: 44px;
        min-height: 44px;
    }

    .btn-action,
    .btn-feedback {
        width: 44px;
        height: 44px;
    }

    .btn-action svg,
    .btn-feedback svg {
        width: 18px;
        height: 18px;
    }

    #btn-enviar,
    .btn-stop {
        width: 44px;
        height: 44px;
    }

    .thread-item {
        padding: 14px 12px;
    }

    .fuente-header {
        min-height: 44px;
    }

    .btn-download-source {
        min-width: 44px;
        min-height: 44px;
        justify-content: center;
    }

    /* Las entidades del transcript solo tenian tooltip en hover: en
       tactil eran texto muerto. UI las hace pulsables; aqui se les da
       area suficiente para acertar con el dedo. */
    .vt-ent {
        padding: 2px 3px;
    }

    /* Deslizar en horizontal dentro de las tiras de imagenes y del
       timeline no debe arrastrar la pagina entera. */
    .imagenes-contexto div,
    .vt-timeline {
        touch-action: pan-x;
    }
}


/* ================================================================
   3. <= 900px  — TABLET / VENTANA ESTRECHA
   ================================================================ */

@media (max-width: 900px) {

    /* La sidebar era de ancho fijo (260px, con min-width y max-width)
       dentro de un flex: a 375px se comia el 70% de la pantalla y el
       chat quedaba en una columna inservible. Por debajo de 900px pasa
       a ser un panel superpuesto que se desliza sobre el contenido. */
    .thread-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: var(--z-modal);
        width: min(84vw, 300px);
        min-width: 0;
        max-width: none;
        opacity: 1;
        transform: translateX(0);
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
        border-right: 1px solid var(--glass-border);
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* En modo panel, "colapsada" es estar fuera de pantalla, no tener
       ancho 0: asi la animacion es limpia y el contenido no se aplasta
       mientras sale. Pisa a la regla de estilos.css (misma
       especificidad, fichero posterior). */
    .thread-sidebar.collapsed {
        width: min(84vw, 300px);
        min-width: 0;
        max-width: none;
        opacity: 1;
        transform: translateX(-100%);
        pointer-events: none;
        border-right: 1px solid var(--glass-border);
    }

    .thread-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: var(--z-overlay);
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(2px);
        animation: fadeIn 0.2s ease-out;
    }

    /* Con la sidebar superpuesta, el aspa de dentro es la unica salida
       visible: el boton hamburguesa queda tapado por el panel. */
    .btn-close-sidebar {
        display: flex;
    }

    .header {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }

    .input-area {
        padding: 16px 20px calc(20px + env(safe-area-inset-bottom));
    }

    #chat-box {
        padding: 1.5rem 1rem;
        gap: 1.5rem;
    }

    .msg.bot {
        padding: 1.25rem;
    }
}


/* ================================================================
   4. <= 580px  — MOVIL
   ================================================================ */

@media (max-width: 580px) {

    /* --- Cabecera ---
       Cabian logo + tema + campana + admin + avatar + nombre + "Salir"
       con gap 1.5rem: ~430px de contenido en 375px de pantalla. Se
       recorta lo redundante en vez de encoger todo hasta lo ilegible. */
    :root {
        --alto-cabecera: 58px;
    }

    .header {
        height: var(--alto-cabecera);
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }

    .header-group {
        gap: 4px;
    }

    .header-group-end {
        gap: 2px;
    }

    .app-title {
        font-size: 1.05rem;
    }

    .user-avatar {
        width: 32px;
        height: 32px;
        font-size: 0.78rem;
    }

    /* Con el avatar a 32px y el padding de 4px el disparador quedaba en 42px
       de alto: dos por debajo del minimo tactil que se le exige al resto de
       los botones, y es la UNICA puerta al tema, las notificaciones, el panel
       y el salir. Se agranda el AREA, no el avatar: encogerlo era deliberado
       (la cabecera no cabe de otra forma). */
    .menu-usuario-trigger {
        min-height: 44px;
    }

    /* --- Conversacion --- */
    #chat-box {
        padding: 1rem 0.75rem;
        gap: 1.25rem;
    }

    .msg {
        max-width: 100%;
    }

    .msg.user {
        max-width: 90%;
        padding: 0.85rem 1rem;
        font-size: 0.92rem;
    }

    .msg.bot {
        padding: 1rem 0.9rem 1.1rem;
        border-radius: 16px;
    }

    /* .top-actions es position:absolute en la esquina: sobre un ancho
       de movil se montaba encima del texto de la respuesta. Pasa a ser
       una fila normal al principio del mensaje. */
    .top-actions {
        position: static;
        justify-content: flex-end;
        margin-bottom: 0.75rem;
    }

    .bot-content {
        font-size: 0.92rem;
    }

    /* Tablas y bloques de codigo del markdown: no deben ensanchar la
       pagina, hacen scroll dentro de su caja. */
    .bot-content pre,
    .bot-content table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }

    .latencia-info {
        text-align: left;
        font-size: 0.7rem;
    }

    /* --- Zona de entrada ---
       El select ya no compite con el campo de texto: la caja es una
       columna (fila de escritura + fila de estado) y en movil los ajustes
       se van enteros a la hoja inferior, asi que aqui solo queda apretar
       margenes. Las reglas que ocultan la fila de ajustes y sacan el
       engranaje viven en estilos.css, en su tramo SIN CAPA: desde aqui
       (@layer overrides) no se puede pisar lo no-capado. */
    .input-area {
        padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
    }

    .input-capsule {
        border-radius: 20px;
        padding: 6px 8px 8px;
    }

    .input-fila-texto {
        padding: 2px 2px 0 10px;
    }

    /* flex-basis 0 (no `auto`): con base automatica el textarea reclamaba el
       ancho de su contenido y el boton de detener caia a una fila propia. */
    #pregunta {
        flex: 1 1 0;
        min-width: 0;
        padding: 8px 6px;
        max-height: 7rem;
    }

    .btn-stop,
    #btn-enviar {
        flex-shrink: 0;
    }

    /* La pista de teclado no aplica en movil (no hay Mayus+Enter). */
    .input-hint {
        display: none;
    }

    /* La descripcion de la coleccion tampoco: cada linea bajo la capsula
       roba alto util al chat y aqui llegaba a desbordar por debajo del
       viewport. En movil se lee en la pantalla de bienvenida, que es donde
       hace falta para decidir en que coleccion preguntar. */
    .coleccion-descripcion {
        display: none;
    }

    /* --- Estado inicial --- */
    .chat-empty {
        padding: 1rem 0.5rem;
    }

    .chat-empty-title {
        font-size: 1.25rem;
    }

    .chat-empty-sub {
        font-size: 0.87rem;
    }

    /* Cuatro insignias centradas dan tres filas irregulares en estrecho.
       Se aprieta el hueco antes que dejarlas envolver. */
    .chat-empty-insignias {
        gap: 4px;
    }

    /* --- Modal de feedback: hoja inferior a pantalla completa --- */
    .modal-feedback {
        top: auto;
        bottom: 0;
        left: 0;
        transform: none;
        width: 100%;
        max-width: none;
        max-height: 88vh;
        overflow-y: auto;
        border-radius: 22px 22px 0 0;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .modal-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .btn-modal-primary,
    .btn-modal-cancel {
        width: 100%;
        padding: 14px 24px;
    }

    /* --- Fuentes citadas y video --- */
    .fuentes {
        margin-top: 1rem;
        padding-top: 1rem;
    }

    .video-split-right {
        height: 180px;
    }

    /* --- Panel de notificaciones a ancho completo --- */
    .notif-panel {
        top: 58px;
        right: 8px;
        left: 8px;
        width: auto;
        max-height: 70vh;
    }

    /* --- Login --- */
    .login-card {
        padding: 2rem 1.5rem;
        border-radius: 20px;
    }
}


/* ================================================================
   5. MOVIL EN HORIZONTAL
   ================================================================
   Con el teclado abierto en apaisado quedan ~200px de alto util: la
   cabecera y el estado inicial se comen la conversacion entera. */

@media (max-height: 480px) and (orientation: landscape) {
    :root {
        --alto-cabecera: 48px;
    }

    .header {
        height: var(--alto-cabecera);
    }

    .chat-empty {
        padding: 0.5rem;
    }

    /* En muy estrecho lo que tiene que caber sobre el pliegue es la caja y
       los hilos, no la promesa de citar fuentes. */
    .chat-empty-sub {
        display: none;
    }

    .input-area {
        padding-top: 8px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom));
    }

    .input-capsule textarea {
        max-height: 4.5rem;
    }
}

/* ══════════════════════════════════════════════════════════════════
   Ajustes de la conversacion y panel de documentacion
   ══════════════════════════════════════════════════════════════════
   Aqui y no en estilos.css: es donde viven las reglas responsive del
   proyecto, y esta capa (`overrides`) pisa a la `base` de estilos.css.

   Por que la hoja inferior y no chips mas pequenos: en 375 px la fila de
   controles lleva colección + Recordar + Pensar + memoria + contador +
   enviar. No caben, y recortarlos a iconos sin etiqueta destruye el motivo
   de que lleven etiqueta — son ESTADOS que hay que leer antes de escribir,
   y en tactil no hay raton con el que descubrir un icono.
   ══════════════════════════════════════════════════════════════════ */
    @media (max-width: 580px) {
        /* Los ajustes no se ocultan con display:none cuando estan en la hoja:
           UI.reubicarAjustes los MUEVE de nodo padre. Esta regla solo aplica
           mientras siguen dentro de la caja (por ejemplo si el JS no ha corrido
           aun): sin ella se verian los chips desbordando. */
        .input-controles > .ajustes-chat {
            display: none;
        }

        /* Este boton SOLO existe en movil, o sea que solo se pulsa con el
           dedo, y con el padding de escritorio se quedaba en 34px de alto.
           44px lo alinea con el minimo tactil del resto y con la altura del
           boton de enviar, que esta justo al lado. */
        .btn-ajustes-chat {
            display: inline-flex;
            min-height: 44px;
        }

        .input-controles {
            gap: 6px;
            padding: 2px 4px 0 6px;
        }
    }

    /* En pantalla ancha la hoja no existe: si el JS la dejara abierta al
       agrandar la ventana, quedaria un dialogo huerfano sobre el chat. */
    @media (min-width: 581px) {
        .hoja-ajustes,
        .hoja-fondo {
            display: none !important;
        }
    }

    /* El panel de documentacion no cabe al lado por debajo de 900 px: se
       superpone a pantalla completa. Misma decision que toma la sidebar de
       conversaciones en ese mismo escalon. */
    @media (max-width: 900px) {
        .panel-fuente {
            position: fixed;
            inset: 0;
            width: 100%;
            min-width: 0;
            border-left: none;
            z-index: var(--z-modal);
            padding-bottom: env(safe-area-inset-bottom);
        }
    }
}