/* =========================================================
   MEXTLI IA — Tema visual AURUM
   ========================================================= */

:root {
    /* Paleta oficial */
    --mextli-yohualli: #08213D;
    --mextli-meztli: #1F3B57;
    --mextli-citlalli: #BB8640;
    --mextli-blanco: #FFFFFF;
    --mextli-pergamino: #F4F1EA;
    --mextli-plata: #C8CDD4;

    /* Estados */
    --mextli-jade: #2E6E5E;
    --mextli-ambar: #C9962E;
    --mextli-granate: #9C3B2E;

    /* Texto */
    --mextli-texto: #10243A;
    --mextli-texto-secundario: #687385;

    /* Forma */
    --mextli-radio-sm: 10px;
    --mextli-radio-md: 16px;
    --mextli-radio-lg: 22px;

    /* Sombras */
    --mextli-sombra-suave:
        0 2px 8px rgba(8, 33, 61, .05),
        0 10px 30px rgba(8, 33, 61, .07);

    --mextli-sombra-hover:
        0 8px 30px rgba(8, 33, 61, .12);

    /* Tipografías */
    --mextli-font-ui: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mextli-font-display: 'Cormorant Garamond', Georgia, serif;
    --mextli-font-legal: 'Source Serif 4', Georgia, serif;
}


/* =========================================================
   BASE
   ========================================================= */

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--mextli-font-ui);
    background: #F8F9FB;
    color: var(--mextli-texto);
}

::selection {
    background: rgba(187, 134, 64, .22);
    color: var(--mextli-yohualli);
}


/* =========================================================
   TITULARES
   ========================================================= */

h1,
h2,
h3 {
    color: var(--mextli-yohualli);
}

.mextli-display {
    font-family: var(--mextli-font-display);
    font-weight: 600;
    letter-spacing: -.02em;
}

.mextli-legal-text {
    font-family: var(--mextli-font-legal);
}


/* =========================================================
   HEADER / NAVEGACIÓN
   ========================================================= */

header.barra {
    background: var(--mextli-yohualli);
    border-bottom: 1px solid rgba(255,255,255,.08);
}

header.barra .marca {
    font-weight: 700;
    letter-spacing: .14em;
}

header.barra .marca strong {
    color: var(--mextli-citlalli);
}

header.barra nav a,
header.barra nav button {
    color: rgba(255,255,255,.88);
}

header.barra nav a:hover,
header.barra nav button:hover {
    color: var(--mextli-citlalli);
}


/* =========================================================
   TARJETAS
   ========================================================= */

.tarjeta {
    background: var(--mextli-blanco);
    border: 1px solid rgba(200, 205, 212, .55);
    border-radius: var(--mextli-radio-md);
    box-shadow: var(--mextli-sombra-suave);
}

.tarjeta-modulo {
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.tarjeta-modulo:hover {
    transform: translateY(-3px);
    box-shadow: var(--mextli-sombra-hover);
    border-color: rgba(187, 134, 64, .35);
}


/* =========================================================
   BOTONES
   ========================================================= */

.boton {
    background: var(--mextli-yohualli);
    color: #fff;
    border-radius: 12px;
    font-weight: 600;
}

.boton:hover {
    background: var(--mextli-meztli);
}

.boton-terracota {
    background: var(--mextli-citlalli);
    color: var(--mextli-yohualli);
}

.boton-terracota:hover {
    background: #C99552;
}


/* =========================================================
   FORMULARIOS
   ========================================================= */

input[type=email],
input[type=password],
input[type=search],
input[type=text],
textarea.campo,
select.campo-select {
    border: 1px solid var(--mextli-plata);
    border-radius: 10px;
    background: #fff;
    color: var(--mextli-texto);
}

input:focus,
textarea.campo:focus,
select.campo-select:focus {
    outline: none;
    border-color: var(--mextli-meztli);
    box-shadow: 0 0 0 3px rgba(31, 59, 87, .12);
}


/* =========================================================
   TABLAS
   ========================================================= */

table.lista {
    border-radius: var(--mextli-radio-md);
    box-shadow: var(--mextli-sombra-suave);
}

table.lista th {
    background: var(--mextli-yohualli);
    color: #fff;
    font-weight: 600;
}

table.lista td {
    border-bottom: 1px solid #EDF0F3;
}


/* =========================================================
   BADGES / ESTADOS
   ========================================================= */

.badge {
    font-weight: 600;
}

.badge-azul {
    background: var(--mextli-meztli);
}

.badge-verde {
    background: var(--mextli-jade);
}

.badge-terracota {
    background: var(--mextli-ambar);
}

.badge-rojo {
    background: var(--mextli-granate);
}

.badge-gris {
    background: #7B8490;
}


/* =========================================================
   CHAT
   ========================================================= */

.burbuja-user {
    background: var(--mextli-yohualli);
    color: #fff;
    border-radius: 16px 16px 5px 16px;
}

.burbuja-ia {
    background: #fff;
    border: 1px solid rgba(200,205,212,.65);
    border-radius: 16px 16px 16px 5px;
}


/* =========================================================
   FOOTER
   ========================================================= */

footer {
    background: var(--mextli-yohualli);
    color: rgba(255,255,255,.72);
}


/* =========================================================
   UTILIDADES
   ========================================================= */

.mextli-gold {
    color: var(--mextli-citlalli);
}

.mextli-muted {
    color: var(--mextli-texto-secundario);
}

.mextli-section {
    padding: 2rem;
    border-radius: var(--mextli-radio-lg);
}

.mextli-section-light {
    background: var(--mextli-blanco);
}

.mextli-section-dark {
    background: var(--mextli-yohualli);
    color: #fff;
}

.mextli-panel-pattern {
    background-image:
        linear-gradient(rgba(8,33,61,.94), rgba(8,33,61,.94)),
        url('/mextli/banners/mextli-inicio-fondo-patron-azul-v1.jpg');
    background-size: cover;
    background-position: center;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {
    .mextli-section {
        padding: 1.25rem;
    }
}

/* =========================================================
   BRAND / LOGOTIPO
   ========================================================= */

.mextli-brand-logo {
    display: block !important;
    width: auto !important;
    height: 46px !important;
    max-width: 180px !important;
    max-height: 46px !important;
    object-fit: contain !important;
}

.mextli-brand {
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    height: 54px !important;
    overflow: hidden !important;
    flex-shrink: 0;
}


@media (max-width: 768px) {
    .mextli-brand-logo {
        height: 38px !important;
        max-height: 38px !important;
        max-width: 145px !important;
    }

    .mextli-brand {
        height: 46px !important;
    }
}
/* ===== BARRA SUPERIOR MEZTLI ===== */
.barra {
    background: #24466f !important;
}

/* ===== IDENTIDAD MEZTLI EN BARRA ===== */

.mextli-brand {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    white-space: nowrap;
    text-decoration: none !important;
}

.mextli-brand-logo {
    width: 32px !important;
    height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

.mextli-brand-divider {
    display: block;
    width: 1px;
    height: 30px;
    background: rgba(255,255,255,.75);
    margin-left: 14px;
    margin-right: 16px;
    flex-shrink: 0;
}

.mextli-brand-name {
    display: inline-block;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: .16em;
    line-height: 1;
}

.mextli-brand-version {
    display: inline-block;
    color: #D6A043 !important;
    font-size: .62rem;
    font-weight: 700;
    line-height: 1;
    margin-left: 10px;
    position: relative;
    top: 2px;
}
/* ===== CORRECCION FINAL HEADER MEZTLI ===== */

.barra .meztli-brand {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.barra .meztli-brand-logo {
    display: block !important;
    width: 42px !important;
    height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    margin: 0 !important;
    flex: 0 0 42px !important;
}

.barra .meztli-brand-divider {
    height: 34px !important;
    margin: 0 18px !important;
    margin-left: 20px !important;
    margin-right: 20px !important;
}

.barra .meztli-brand-name {
    display: block !important;
    margin: 0 !important;
    color: #fff !important;
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    letter-spacing: .16em !important;
    line-height: 1 !important;
}

.barra .meztli-brand-version {
    margin-left: 14px !important;
    color: #D6A043 !important;
    font-size: .68rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    position: static !important;
}

/* =========================================================
   PORTAL — resources/views/portal/inicio.blade.php
   v2 — segunda pasada de corrección (distribución/espaciado)

   Todo lo de aquí abajo es EXCLUSIVO del Portal. Nada en esta
   sección modifica .tarjeta, .boton, .campo, .tarjeta-modulo
   ni ninguna otra clase compartida con el resto del sistema.
   ========================================================= */

/* --- 1. Bienvenida (compacta, alto contraste) --- */
.portal-bienvenida {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.75rem;
    margin-bottom: 2rem;
    border-radius: var(--mextli-radio-lg);
    overflow: hidden;
    position: relative;
}

.portal-bienvenida::after {
    content: "";
    position: absolute;
    left: 1.75rem;
    right: 1.75rem;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(187,134,64,.55), rgba(187,134,64,0));
}

.portal-bienvenida__logo {
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    padding: 6px;
}

/* Especificidad de clase > h1 de etiqueta: gana siempre sobre
   cualquier "h1{color:...}" compartido, sin usar !important. */
.portal-bienvenida__titulo {
    margin: 0;
    color: #FFFFFF;
    font-family: var(--mextli-font-display);
    font-weight: 600;
    font-size: 1.7rem;
    line-height: 1.15;
    letter-spacing: -.01em;
}

.portal-bienvenida__subtitulo {
    margin: .25rem 0 0;
    color: rgba(255,255,255,.82);
    font-size: .92rem;
}

/* --- Avisos (código vencido / mensajes de sesión) --- */
.portal-aviso {
    margin-bottom: 1.5rem;
}

.portal-aviso--pendiente {
    border-left: 4px solid var(--mextli-ambar);
}

.portal-aviso--ok {
    border-left: 4px solid var(--mextli-jade);
}

/* --- 2. Plan actual + código: fila de dos columnas ---
   minmax(0, ...) evita que el contenido interno (chips que no
   deben partirse) empuje el track más allá de su fracción. */
.portal-info-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
    align-items: start;
}

@media (max-width: 860px) {
    .portal-info-grid {
        grid-template-columns: 1fr;
    }
}

.portal-plan {
    background: var(--mextli-pergamino);
}

.portal-plan__cabecera {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin-bottom: 1rem;
}

.portal-plan__glifo {
    flex-shrink: 0;
}

.portal-plan__etiqueta {
    display: block;
    color: var(--mextli-texto-secundario);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: .3rem;
}

.portal-plan-opciones {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.portal-chip-plan {
    padding: .5rem .9rem;
    font-size: .85rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
}

.portal-badge-oro {
    display: inline-block;
    background: rgba(187,134,64,.16);
    color: var(--mextli-citlalli);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .1rem .45rem;
    border-radius: 999px;
    white-space: nowrap;
}

.portal-plan__cancelar {
    margin-top: 1rem;
}

.portal-plan__cancelar summary {
    cursor: pointer;
    font-size: .85rem;
    color: var(--mextli-texto-secundario);
}

/* --- Código promocional: input flexible + botón de ancho
   automático en la misma línea; solo se apila en móvil. --- */
.portal-codigo__form {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: .75rem;
}

.portal-codigo__form .campo {
    flex: 1 1 auto;
    min-width: 0;
}

.portal-codigo__form button {
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .portal-codigo__form {
        flex-wrap: wrap;
    }
    .portal-codigo__form .campo,
    .portal-codigo__form button {
        flex-basis: 100%;
    }
}

/* --- 3. Título "Tu despacho digital" --- */
.portal-despacho-titulo {
    text-align: center;
    max-width: 480px;
    margin: 0 auto 1.125rem;
}

.portal-antetitulo {
    display: block;
    color: var(--mextli-citlalli);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-bottom: .4rem;
}

.portal-despacho-titulo h2 {
    margin: 0;
    font-size: 1.5rem;
}

.portal-despacho-titulo p {
    margin: .5rem 0 0;
    color: var(--mextli-texto-secundario);
    font-size: .92rem;
}

/* --- 4. Grid de herramientas: CSS Grid real ---
   Base = escritorio grande: 3 columnas.
   1099px es el punto de corte "tablet": 2 columnas.
   699px es el punto de corte "móvil": 1 columna. */
.portal-herramientas {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: 1.5rem;
    row-gap: 1.125rem;
    margin-bottom: 2.5rem;
}

/* Fila 1: tres tarjetas de 2/6 columnas cada una. */
.portal-modulo:nth-child(1) { grid-column: 1 / 3; }
.portal-modulo:nth-child(2) { grid-column: 3 / 5; }
.portal-modulo:nth-child(3) { grid-column: 5 / 7; }

/* Fila 2: dos tarjetas de 2/6 columnas, desplazadas para quedar
   centradas (columna 1 y 6 quedan libres como margen simétrico).
   Mismo ancho que las de arriba: sin hueco de "sexta tarjeta". */
.portal-modulo:nth-child(4) { grid-column: 2 / 4; }
.portal-modulo:nth-child(5) { grid-column: 4 / 6; }

@media (max-width: 1099px) {
    .portal-herramientas {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .portal-modulo:nth-child(1),
    .portal-modulo:nth-child(2),
    .portal-modulo:nth-child(3),
    .portal-modulo:nth-child(4),
    .portal-modulo:nth-child(5) {
        grid-column: auto;
    }
}

@media (max-width: 699px) {
    .portal-herramientas {
        grid-template-columns: 1fr;
    }
}

.portal-modulo {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.75rem;
}

.portal-modulo__icono {
    margin-bottom: .875rem;
}

.portal-modulo__titulo {
    margin: 0 0 .5rem;
    font-size: 1.05rem;
}

.portal-modulo__descripcion {
    margin: 0;
    color: var(--mextli-texto-secundario);
    font-size: .9rem;
    line-height: 1.5;
    max-width: 30ch;
}

.portal-modulo__accion {
    margin: 0;
    margin-top: auto;
    padding-top: 1.375rem;
}

/* --- 5. Enlaces secundarios --- */
.portal-footer-links {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    padding-top: 1.5rem;
    margin-top: 1.5rem;
    border-top: 1px solid rgba(200,205,212,.5);
    color: var(--mextli-texto-secundario);
    font-size: .85rem;
}

.portal-footer-links__separador {
    color: var(--mextli-plata);
}

/* --- 6. Luna decorativa: scoped, sin cruzar contenido ---
   position:fixed a propósito: los navegadores excluyen los
   elementos fixed del cálculo de overflow del documento, así
   que un right negativo no genera scroll horizontal (algo que
   sí ocurre con position:absolute sin contenedor relative). */
.portal-luna {
    position: fixed;
    top: 90px;
    right: -150px;
    width: 380px;
    z-index: 0;
}

/* =========================================================
   RESPONSIVE MÓVIL DEL PORTAL — <= 699px
   ========================================================= */
@media (max-width: 699px) {
    /* Banner: más compacto, tamaños dentro del rango pedido */
    .portal-bienvenida {
        padding: 1.25rem;
        gap: .85rem;
    }
    .portal-bienvenida__logo {
        width: 38px;
        height: 38px;
    }
    .portal-bienvenida__titulo {
        font-size: 1.7rem;
    }
    .portal-bienvenida__subtitulo {
        font-size: .95rem;
    }

    /* Plan: tarjeta compacta, chips que nunca desbordan */
    .portal-plan.tarjeta,
    .portal-codigo.tarjeta {
        padding: 1.25rem;
    }
    .portal-chip-plan {
        white-space: normal;
        flex-wrap: wrap;
        max-width: 100%;
    }

    /* Código: input + botón ocupan todo el ancho, apilados,
       con altura táctil mínima en el botón */
    .portal-codigo__form {
        flex-wrap: wrap;
        gap: .65rem;
    }
    .portal-codigo__form .campo,
    .portal-codigo__form button {
        flex-basis: 100%;
        width: 100%;
    }
    .portal-codigo__form button {
        min-height: 44px;
    }

    /* Título "Tu despacho digital" */
    .portal-despacho-titulo {
        margin-bottom: 1rem;
    }

    /* Herramientas: tarjetas más compactas, una columna */
    .portal-herramientas {
        row-gap: 1rem;
    }
    .portal-modulo {
        padding: 1.25rem;
    }
    .portal-modulo__icono {
        width: 38px;
        height: 38px;
        margin-bottom: .65rem;
    }
    .portal-modulo__titulo {
        margin-bottom: .375rem;
    }
    .portal-modulo__descripcion {
        max-width: none;
        font-size: .95rem;
        line-height: 1.5;
    }
    .portal-modulo__accion {
        padding-top: 1.1rem;
    }

    /* Enlaces secundarios: apilados, sin separador flotando */
    .portal-footer-links {
        flex-direction: column;
        align-items: flex-start;
        gap: .5rem;
    }
    .portal-footer-links__separador {
        display: none;
    }
}

/* =========================================================
   HEADER MÓVIL — barra superior compartida (layouts/meztli.blade.php)

   ÚNICA excepción a la regla ".portal-*": esta sección toca la
   barra superior porque en esta pasada se autorizó explícitamente
   corregir su comportamiento en móvil. Afecta a TODAS las vistas
   del sistema (la barra es compartida), no solo al Portal. La
   identidad LOGO | MEZTLI 2.0 y su comportamiento en escritorio
   (>= 769px) no se modifican: el botón de menú permanece oculto
   ahí y la navegación conserva su forma horizontal actual.
   ========================================================= */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}

.menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
}

@media (max-width: 768px) {
    .menu-toggle {
        display: flex;
    }

    header.barra {
        flex-wrap: nowrap;
        min-height: 64px;
        padding: .7rem 1rem;
        position: relative;
    }

    header.barra .meztli-brand {
        min-width: 0;
        flex-shrink: 1;
    }

    .barra .meztli-brand-logo {
        width: 32px !important;
        height: 32px !important;
        max-width: 32px !important;
        max-height: 32px !important;
        flex: 0 0 32px !important;
    }

    .barra .meztli-brand-divider {
        height: 26px !important;
        margin-left: 10px !important;
        margin-right: 10px !important;
    }

    .barra .meztli-brand-name {
        font-size: 1.05rem !important;
    }

    .barra .meztli-brand-version {
        font-size: .6rem !important;
        margin-left: 8px !important;
    }

    /* Nav: oculto por defecto, se abre como panel vertical
       debajo de la barra al activar el botón de menú. Misma
       rutas/acciones existentes, solo cambia su presentación. */
    header.barra nav {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #24466f;
        padding: .5rem 1rem 1rem;
        box-shadow: var(--mextli-sombra-suave);
        z-index: 40;
    }

    header.barra nav.nav-abierta {
        display: flex;
    }

    header.barra nav a,
    header.barra nav button {
        width: 100%;
        text-align: left;
        padding: .65rem 0;
        font-size: 1rem;
    }

    header.barra nav span {
        display: none;
    }
}

/* =========================================================
   FOOTER MÓVIL — pie compartido (layouts/meztli.blade.php)
   Ya está centrado y usa ancho fluido; solo se ajusta el
   padding lateral en móvil para más aire, mismo contenido y
   enlaces.
   ========================================================= */
@media (max-width: 699px) {
    footer {
        padding: 1rem 1.25rem;
    }
}

/* =========================================================
   CHAT JURÍDICO — resources/views/chat/show.blade.php

   Todo lo de aquí abajo es EXCLUSIVO del Chat. No modifica
   .tarjeta, .boton, .campo, .fila-acciones, .badge, .lista,
   .enlace, .burbuja, .burbuja-user, .burbuja-ia. Donde hace
   falta variar una de esas, se usa selector contextual
   (.chat-message.burbuja-ia) en vez de tocar la regla global.
   ========================================================= */

:root {
    /* Altura real de la barra superior compartida (layouts/meztli.blade.php):
       0.9rem de padding vertical (28.8px) + 42px del logo, el elemento
       más alto del header. Redefinida a 64px en el media móvil, donde
       el header tiene min-height:64px explícito. */
    --chat-header-alto: 71px;
}

@media (max-width: 768px) {
    :root {
        --chat-header-alto: 64px;
    }
}

/* --- Contenedor de altura completa: cancela el padding vertical, el
   max-width (1100px) y el centrado (margin:auto) de <main> (compartido)
   solo cuando contiene el layout de chat, vía selector contextual y sin
   márgenes negativos ni tocar la regla de main. --- */
main:has(.chat-layout) {
    padding: 0;
    max-width: none;
    margin: 0;
}

.chat-layout {
    display: flex;
    height: calc(100dvh - var(--chat-header-alto));
    min-height: 420px;
    overflow: hidden;
    position: relative;
}

/* --- Sidebar de expedientes --- */
.chat-sidebar {
    flex: 0 0 280px;
    display: flex;
    flex-direction: column;
    background: var(--mextli-yohualli);
    color: rgba(255,255,255,.88);
    overflow-y: auto;
}

.chat-sidebar-header {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.12);
}

.chat-sidebar-titulo {
    font-family: var(--mextli-font-display);
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: .01em;
    color: #fff;
}

.chat-nuevo-expediente {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .6rem .9rem;
    border-radius: 10px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(187,134,64,.4);
    color: #fff;
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .18s ease, border-color .18s ease;
}

.chat-nuevo-expediente:hover {
    background: rgba(187,134,64,.16);
    border-color: var(--mextli-citlalli);
}

.chat-sidebar-nota {
    margin: 0;
    padding: .6rem 1.25rem 0;
    font-size: .74rem;
    color: rgba(255,255,255,.45);
    line-height: 1.4;
}

.chat-expedientes-etiqueta {
    padding: 1rem 1.25rem .5rem;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255,255,255,.45);
}

.chat-expedientes {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: 0 .6rem .75rem;
}

.chat-expediente {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .6rem .65rem;
    border-radius: 8px;
    border-left: 2px solid transparent;
    color: rgba(255,255,255,.8);
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}

.chat-expediente:hover {
    background: rgba(255,255,255,.06);
}

/* Estado activo: acento de color Y peso tipográfico Y aria-current
   (ver sección 4) — nunca comunicado solo por color. */
.chat-expediente-activo {
    background: rgba(255,255,255,.08);
    border-left-color: var(--mextli-citlalli);
    color: #fff;
    font-weight: 700;
}

.chat-expediente-titulo {
    font-size: .87rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-expediente-fecha {
    font-size: .73rem;
    color: rgba(255,255,255,.5);
}

.chat-expedientes-vacio {
    margin: 0;
    padding: .5rem 1.25rem;
    font-size: .85rem;
    color: rgba(255,255,255,.5);
}

.chat-expediente:focus-visible,
.chat-nuevo-expediente:focus-visible {
    outline: 2px solid var(--mextli-citlalli);
    outline-offset: 2px;
}

/* --- Panel principal --- */
.chat-main {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--mextli-blanco);
    overflow: hidden;
}

.chat-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(200,205,212,.5);
}

.chat-header-titulo {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--mextli-yohualli);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-header-modo {
    flex: 0 0 auto;
}

.chat-drawer-toggle {
    display: none; /* visible solo en móvil, ver media query abajo */
}

/* --- Conversación: header fijo / mensajes con scroll interno / composer --- */
.chat-conversation {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chat-messages {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: .8rem;
    padding: 1.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Ancho de lectura fijo (~75ch) en vez de porcentual: con el panel ahora
   a ancho completo, un % del contenedor daba líneas de ~150 caracteres
   en pantallas anchas. El tope va en cada burbuja, no en el contenedor,
   así el usuario queda pegado a la derecha y MEZTLI a la izquierda vía
   align-self:flex-end/flex-start ya heredado de .burbuja-user/.burbuja-ia
   (global, sin tocar). No se centra: cada bubble crece según su propio
   contenido hasta el tope de 75ch, pegada a su borde real. */
.chat-message.burbuja-ia,
.chat-message.burbuja-user {
    max-width: 75ch;
}

.chat-message.burbuja-ia {
    line-height: 1.65;
}

/* --- Estado vacío: visible solo mientras sea el único hijo de #mensajes.
   Se oculta solo en cuanto el JS agrega la primera burbuja — sin JS,
   sin removeChild. --- */
.chat-vacio {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 1.5rem;
}

.chat-vacio:not(:only-child) {
    display: none;
}

.chat-vacio-luna {
    width: 52px;
    height: 52px;
    margin-bottom: 1rem;
    opacity: .85;
    animation: chat-luna-respirar 8s ease-in-out infinite;
}

@keyframes chat-luna-respirar {
    0%, 100% { opacity: .7; }
    50% { opacity: 1; }
}

.chat-vacio-titulo {
    margin: 0 0 .4rem;
    color: var(--mextli-yohualli);
    font-weight: 700;
    font-size: 1.1rem;
}

.chat-vacio-subtitulo {
    margin: 0;
    max-width: 360px;
    font-size: .92rem;
    color: var(--mextli-texto-secundario);
}

/* --- Indicador "MEZTLI está analizando…": tres fases lunares en CSS
   puro, un solo @keyframes con tres animation-delay escalonados. --- */
.chat-indicador {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.chat-indicador-texto {
    font-size: .85rem;
    color: var(--mextli-texto-secundario);
}

.chat-luna-fase {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mextli-plata);
    box-shadow: inset 6px 0 0 0 var(--mextli-citlalli);
    animation: chat-fase-lunar 1.8s ease-in-out infinite;
}

.chat-luna-fase:nth-child(2) { animation-delay: .25s; }
.chat-luna-fase:nth-child(3) { animation-delay: .5s; }

@keyframes chat-fase-lunar {
    0%   { box-shadow: inset 6px 0 0 0 var(--mextli-citlalli); }
    50%  { box-shadow: inset 0 0 0 0 var(--mextli-citlalli); }
    100% { box-shadow: inset -6px 0 0 0 var(--mextli-citlalli); }
}

@media (prefers-reduced-motion: reduce) {
    .chat-vacio-luna,
    .chat-luna-fase {
        animation: none;
    }
}

/* --- Error: Granate como texto (6.4:1 sobre blanco, válido), siempre
   acompañado de icono, nunca solo color. Sin emojis. --- */
.chat-error {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    color: var(--mextli-granate);
}

.chat-error-icono {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: .1rem;
    border-radius: 50%;
    border: 2px solid var(--mextli-granate);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    font-weight: 800;
    line-height: 1;
}

.chat-error--limite {
    /* mismo tratamiento base; se distingue por el CTA que lo acompaña */
}

.chat-cta-upgrade {
    display: inline-block;
    margin-top: .5rem;
    color: var(--mextli-citlalli);
    font-weight: 700;
    font-size: .85rem;
    text-decoration: underline;
}

/* --- Avisos de mensaje parcial / huérfano puro (pendiente 26).
   Informativo, no error: acento Ámbar solo en el icono/borde, texto en
   Azul Meztli — el Ámbar sobre blanco falla contraste como color de
   texto. Nunca solo color: siempre icono + texto. Alineados con la
   burbuja que acompañan (flex-start con la de MEZTLI, flex-end con la
   del usuario) para leerse pegados a ella, no como un mensaje aparte. */
.chat-aviso {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    max-width: 75ch;
    margin-top: -.35rem;
    padding: 0 .2rem;
    font-size: .82rem;
    line-height: 1.4;
    color: var(--mextli-meztli);
}

.chat-aviso-icono {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: .15rem;
    border-radius: 50%;
    border: 1.5px solid var(--mextli-ambar);
    color: var(--mextli-ambar);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .62rem;
    font-weight: 800;
    font-style: normal;
    line-height: 1;
}

.chat-aviso-parcial {
    align-self: flex-start;
}

.chat-aviso-huerfano {
    align-self: flex-end;
}

/* --- Contenido Markdown de las respuestas (pendiente 2). Todo scopeado
   a la burbuja de MEZTLI (.chat-message.burbuja-ia) — no toca ninguna
   etiqueta HTML fuera de este contexto ni las reglas globales
   .tarjeta/.boton/.campo/.badge/.lista/.enlace. Los enlaces del modelo
   se renderizan como texto plano (ver JS), así que no hay estilo de
   <a> aquí. --- */
.chat-message.burbuja-ia p {
    margin: 0 0 .85em;
}

.chat-message.burbuja-ia p:last-child {
    margin-bottom: 0;
}

.chat-message.burbuja-ia h3,
.chat-message.burbuja-ia h4 {
    /* La serif display (Cormorant) es de trazo muy fino — a este tamaño
       se lee gris claro aunque el color sea Azul Yohualli. Inter en
       semibold/bold es lo que realmente ancla la sección. Más margen
       arriba que abajo: el encabezado debe leerse pegado a lo que
       introduce y separado de la sección anterior. */
    margin: 1.3em 0 .45em;
    color: var(--mextli-yohualli);
    font-family: var(--mextli-font-ui);
    font-weight: 700;
    line-height: 1.3;
}

.chat-message.burbuja-ia h3:first-child,
.chat-message.burbuja-ia h4:first-child {
    margin-top: 0;
}

.chat-message.burbuja-ia h3 {
    font-size: 1.15rem;
}

.chat-message.burbuja-ia h4 {
    font-size: 1.05rem;
}

.chat-message.burbuja-ia strong {
    font-weight: 700;
    color: var(--mextli-yohualli);
}

.chat-message.burbuja-ia ul,
.chat-message.burbuja-ia ol {
    margin: 0 0 .85em;
    padding-left: 1.3em;
}

.chat-message.burbuja-ia ul:last-child,
.chat-message.burbuja-ia ol:last-child {
    margin-bottom: 0;
}

.chat-message.burbuja-ia li {
    margin-bottom: .3em;
}

.chat-message.burbuja-ia li:last-child {
    margin-bottom: 0;
}

/* Separador horizontal: discreto, Plata Lunar, margen generoso —
   es lo que más se repite entre secciones de una respuesta larga. */
.chat-message.burbuja-ia hr {
    margin: 1.4em 0;
    border: none;
    border-top: 1px solid var(--mextli-plata);
}

/* Dos (o más) --- consecutivos sin contenido real entre ellos -- pasa en
   respuestas parciales donde el contenido intermedio no llegó a tiempo --
   dejaban un hueco vacío raro (1.4em + 1.4em de margen sin nada en medio).
   Colapsa la corrida completa a un solo separador visible: el <hr>
   inmediatamente precedido por otro <hr> se oculta, sin importar cuántos
   se repitan en fila (el selector encadena sobre el <hr> anterior en el
   DOM, esté oculto o no). Solo CSS -- el renderer sigue generando un
   <hr> por cada "---", esto es puramente de presentación. */
.chat-message.burbuja-ia hr + hr {
    display: none;
}

/* Blockquote: borde izquierdo Oro Citlalli, fondo Crema Pergamino muy
   sutil (rgba de --mextli-pergamino a media opacidad), sin comillas
   decorativas — el navegador no las agrega por defecto en <blockquote>,
   así que no hace falta anularlas. */
.chat-message.burbuja-ia blockquote {
    margin: 0 0 .85em;
    padding: .6em 1em;
    border-left: 3px solid var(--mextli-citlalli);
    background: rgba(244, 241, 234, .55);
    border-radius: 0 var(--mextli-radio-sm) var(--mextli-radio-sm) 0;
}

.chat-message.burbuja-ia blockquote:last-child {
    margin-bottom: 0;
}

.chat-message.burbuja-ia code {
    font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
    font-size: .88em;
    background: var(--mextli-pergamino);
    padding: .15em .4em;
    border-radius: 4px;
}

.chat-message.burbuja-ia pre {
    margin: 0 0 .85em;
    padding: .85em 1em;
    border-radius: var(--mextli-radio-sm);
    background: var(--mextli-pergamino);
    overflow-x: auto;
}

.chat-message.burbuja-ia pre:last-child {
    margin-bottom: 0;
}

.chat-message.burbuja-ia pre code {
    background: none;
    padding: 0;
    font-size: .85em;
    white-space: pre;
}

/* Scroll horizontal dentro de su propio contenedor, nunca overflow de
   página — la tabla puede ser más ancha que la burbuja en móvil. */
.chat-md-tabla-scroll {
    margin: 0 0 .85em;
    max-width: 100%;
    overflow-x: auto;
    border-radius: var(--mextli-radio-sm);
    border: 1px solid rgba(200,205,212,.6);
}

.chat-md-tabla-scroll:last-child {
    margin-bottom: 0;
}

.chat-message.burbuja-ia table {
    width: 100%;
    border-collapse: collapse;
    font-size: .92em;
}

.chat-message.burbuja-ia th,
.chat-message.burbuja-ia td {
    padding: .5em .7em;
    text-align: left;
    border-bottom: 1px solid rgba(200,205,212,.5);
    vertical-align: top;
}

.chat-message.burbuja-ia thead th {
    background: var(--mextli-pergamino);
    color: var(--mextli-yohualli);
    font-weight: 700;
    white-space: nowrap;
}

.chat-message.burbuja-ia tbody tr:last-child td {
    border-bottom: none;
}

/* --- Composer: tercera zona del flex, sin position:sticky. Compactado:
   gap y padding reducidos, disclaimer más pequeño y pegado al input
   (ver también .chat-composer-disclaimer). --- */
.chat-composer {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .85rem 1.5rem;
    padding-bottom: calc(.85rem + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(200,205,212,.5);
    background: #fff;
}

/* Fila única: textarea + botón, alineados al fondo del textarea (que
   crece hacia arriba). Sustituye la fila separada del botón. */
.chat-composer-campo {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
}

.chat-composer-textarea {
    resize: none;
    min-height: 44px;
    max-height: 160px;
    border-radius: 14px;
    flex: 1;
    min-width: 0;
}

.chat-composer-enviar {
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
}

.chat-composer-disclaimer {
    margin: 0;
    font-size: 11px;
    line-height: 1.35;
    color: var(--mextli-texto-secundario);
}

.chat-sidebar-backdrop {
    display: none;
}

/* =========================================================
   RESPONSIVE — CHAT
   Desktop >=1100px: sidebar fijo. Tablet 700-1099px: sidebar
   angosto. Móvil <=699px: sidebar se vuelve drawer.
   ========================================================= */
@media (max-width: 1099px) and (min-width: 700px) {
    .chat-sidebar {
        flex-basis: 220px;
    }
}

@media (max-width: 699px) {
    .chat-sidebar {
        position: fixed;
        top: var(--chat-header-alto);
        left: 0;
        bottom: 0;
        width: 82%;
        max-width: 320px;
        transform: translateX(-100%);
        transition: transform .25s ease;
        z-index: 45;
        box-shadow: var(--mextli-sombra-hover);
    }

    .chat-sidebar.chat-sidebar-abierto {
        transform: translateX(0);
    }

    .chat-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: var(--chat-header-alto) 0 0 0;
        background: rgba(8,33,61,.45);
        z-index: 44;
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }

    .chat-sidebar-backdrop.chat-sidebar-abierto {
        opacity: 1;
        pointer-events: auto;
    }

    .chat-drawer-toggle {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        min-height: 44px;
        padding: .4rem .7rem;
        border-radius: 8px;
        border: 1px solid rgba(200,205,212,.6);
        background: #fff;
        color: var(--mextli-yohualli);
        font-size: .82rem;
        font-weight: 600;
        flex: 0 0 auto;
    }

    .chat-drawer-toggle:focus-visible {
        outline: 2px solid var(--mextli-citlalli);
        outline-offset: 2px;
    }

    .chat-drawer-icono {
        width: 18px;
        height: 16px;
        flex-shrink: 0;
    }

    .chat-header {
        padding: .75rem 1rem;
        gap: .5rem;
    }

    .chat-header-titulo {
        font-size: .92rem;
    }

    /* Margen de seguridad: con el ícono ya corregido (18px, uno solo)
       esto no debería hacer falta, pero evita overflow incluso con el
       valor de "modo" más largo (p. ej. "Tlanextia"). */
    .chat-header-modo {
        font-size: .68rem;
        padding: .1rem .45rem;
    }

    .chat-messages {
        padding: 1rem;
    }

    .chat-composer {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* =========================================================
   CHAT INDEX — resources/views/chat/index.blade.php

   Exclusivo de la vista de índice del chat. No modifica .tarjeta,
   .boton, .campo, .campo-select, .lista, .badge, .enlace,
   .fila-acciones, .burbuja*, .luna-marca. Donde hace falta variar
   una de esas, selector contextual (p. ej. .chat-index-expediente
   .badge) en vez de tocar la regla global.
   ========================================================= */

/* --- Banner: wrapper de refinamiento local, sin tocar el
   componente ni sus props — compacto, no hero gigante. --- */
.chat-index-banner {
    margin-bottom: 1.75rem;
}

.chat-index-banner > div {
    min-height: 130px;
    border: 1px solid rgba(200, 205, 212, .4);
}

/* --- Tarjeta única "Nueva consulta" + "Próximamente", dos
   columnas separadas por un divisor vertical. --- */
.chat-index-tarjeta-cols {
    display: flex;
    align-items: stretch;
    gap: 28px;
    margin-top: .5rem;
}

.chat-index-col-form {
    flex: 1 1 70%;
    min-width: 0;
}

.chat-index-divisor {
    flex: 0 0 1px;
    background: var(--mextli-plata);
    align-self: stretch;
}

.chat-index-col-proximamente {
    flex: 1 1 30%;
    min-width: 0;
    padding-top: .2rem;
}

/* --- Encabezados con icono --- */
.chat-index-titulo-icono {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.chat-index-icono-circular {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--mextli-yohualli);
    flex-shrink: 0;
}

.chat-index-icono-carpeta {
    color: var(--mextli-citlalli);
    flex-shrink: 0;
}

/* --- Formulario "Nueva consulta": jerarquía real, sin tocar
   name/action/method/csrf/option (viven en el blade). --- */
.chat-index-form {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.chat-index-campos {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.chat-index-campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 220px;
    min-width: 0;
}

.chat-index-etiqueta {
    font-size: .82rem;
    font-weight: 600;
    color: var(--mextli-yohualli);
}

.chat-index-campo .campo-select {
    width: 100%;
}

.chat-index-accion .boton {
    min-height: 44px;
    padding-left: 1.8rem;
    padding-right: 1.8rem;
}

/* Destello estático (sin animación) antes del texto del botón. */
.chat-index-boton-enviar {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.chat-index-boton-destello {
    flex-shrink: 0;
}

.chat-index-ayuda {
    margin-top: 1rem;
    font-size: .85rem;
    color: var(--mextli-texto-secundario);
}

/* --- Próximamente: secundario y con menos peso visual que el
   formulario. El botón "Avísame" SÍ es funcional (postea a una
   ruta real), así que no se le quita el cursor ni el hover — solo
   se reduce su prominencia a chip informativo. --- */
.chat-index-col-proximamente h3 {
    font-size: .85rem;
    font-weight: 600;
    color: var(--mextli-texto-secundario);
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* !important solo en las 3 propiedades que partials/proximamente.blade.php
   fija por style="" inline (background, font-size, padding) — un inline
   style siempre gana sobre una clase externa sin !important, y no se
   puede tocar el partial. border-radius/color/border no chocan con nada
   inline, así que van sin !important. */
.chat-index-col-proximamente button {
    background: var(--mextli-pergamino) !important;
    font-size: .75rem !important;
    padding: .35rem .7rem !important;
    border-radius: 999px;
    color: var(--mextli-texto-secundario);
    border: 1px solid var(--mextli-plata);
}

.chat-index-col-proximamente button:hover {
    background: var(--mextli-plata) !important;
    color: var(--mextli-texto);
}

/* --- Expedientes recientes --- */
.chat-index-expedientes-seccion {
    margin-top: 2.5rem;
}

.chat-index-expedientes-titulo {
    margin: 0;
    font-size: 1.15rem;
}

.chat-index-expedientes-subtitulo {
    margin: .3rem 0 1rem;
    font-size: .9rem;
    color: var(--mextli-texto-secundario);
}

.chat-index-expedientes {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Borde izquierdo dorado permanente (no solo hover); el hover lo
   intensifica ensanchándolo, sin introducir un tono nuevo fuera
   de la paleta aprobada. */
.chat-index-expediente {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
        "icono info    chevron"
        "icono meta    chevron";
    align-items: center;
    column-gap: 14px;
    row-gap: 4px;
    padding: 14px 16px;
    background: var(--mextli-blanco);
    border: 1px solid var(--mextli-plata);
    border-left: 3px solid var(--mextli-citlalli);
    border-radius: var(--mextli-radio-sm);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, border-left-width .15s ease, box-shadow .15s ease, background .15s ease, transform .15s ease;
}

.chat-index-expediente:hover {
    border-left-width: 4px;
    background: var(--mextli-pergamino);
    box-shadow: var(--mextli-sombra-suave);
    transform: translateY(-1px);
}

.chat-index-expediente:focus-visible {
    outline: 2px solid var(--mextli-citlalli);
    outline-offset: 2px;
}

/* Fase lunar en CSS puro — misma mecánica que el indicador de tres
   lunas de chat/show (box-shadow:inset desplazado sobre un círculo
   base). Sin border/outline en ningún estado.

   Dirección correcta (el intento anterior la tenía invertida): con
   box-shadow:inset, el oro cubre "círculo menos superposición" con
   la sombra desplazada, y el azul de fondo asoma en la zona de
   superposición — que se ENCOGE al CRECER el offset. Por eso subir
   el offset de más oro, no de menos. Para una porción minoritaria
   de oro hay que BAJAR el offset, acercándolo a 0 (sin llegar a 0,
   que es 100% oro = luna llena).

   offset=8px sobre 16px de radio -> área de superposición (fórmula
   de lente circular) ~68.5% del círculo -> ~32% oro, ~68% azul:
   masa azul con una porción dorada minoritaria, no mitad y mitad.

   Blur subido de 1px a 2px: 1px no alcanzó a suavizar el borde
   duro entre oro y azul. En hover/focus, offset=0 -> llena de oro
   (sin cambios ahí, solo el blur). */
.chat-index-expediente-icono-circulo {
    grid-area: icono;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--mextli-yohualli);
    box-shadow: inset 8px 0 2px 0 var(--mextli-citlalli);
    flex-shrink: 0;
    transition: box-shadow .4s ease;
}

.chat-index-expediente-info {
    grid-area: info;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.chat-index-expediente-titulo {
    font-weight: 700;
    color: var(--mextli-yohualli);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-index-expediente-area {
    font-size: .82rem;
    color: var(--mextli-texto-secundario);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-index-expediente-meta {
    grid-area: meta;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* Variantes por modo — .badge (global) da la forma/tamaño base;
   aquí solo se sobreescribe color, sin tocar la regla global. */
.chat-index-badge {
    flex: 0 0 auto;
}

.chat-index-badge--online {
    background: var(--mextli-yohualli);
    color: #fff;
}

.chat-index-badge--hibrido {
    background: var(--mextli-pergamino);
    color: var(--mextli-yohualli);
    border: 1.5px solid var(--mextli-citlalli);
}

/* Oro Citlalli de fondo + texto Azul Yohualli: 5.1:1, pasa AA
   (>=4.5:1) para texto normal — verificado con la fórmula de
   luminancia relativa WCAG antes de usarlo. */
.chat-index-badge--tlanextia {
    background: var(--mextli-citlalli);
    color: var(--mextli-yohualli);
}

.chat-index-expediente-fecha {
    font-size: .78rem;
    color: var(--mextli-texto-secundario);
    white-space: nowrap;
}

.chat-index-expediente-chevron {
    grid-area: chevron;
    color: var(--mextli-citlalli);
    font-size: 1.5rem;
    line-height: 1;
}

/* --- Bloque de confianza: icono de escudo a la izquierda, luna
   tenue a la derecha (.luna-marca global, sin tocarla), margen
   inferior amplio para no quedar pegado al footer. --- */
.chat-index-confianza {
    position: relative;
    overflow: hidden;
    margin-top: 2rem;
    margin-bottom: 32px;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    background: var(--mextli-pergamino);
    border-left: 3px solid var(--mextli-citlalli);
    border-radius: var(--mextli-radio-sm);
}

.chat-index-confianza-icono {
    flex-shrink: 0;
    margin-top: .15rem;
    color: var(--mextli-yohualli);
}

.chat-index-confianza p {
    position: relative;
    margin: 0;
    font-size: .85rem;
    color: var(--mextli-texto-secundario);
    line-height: 1.55;
}

.chat-index-confianza-luna {
    width: 130px;
    right: -30px;
    top: -20px;
}

/* =========================================================
   RESPONSIVE — CHAT INDEX
   Desktop >=1100px: tarjeta con dos columnas lado a lado,
   expedientes en fila con columnas alineadas entre sí (CSS Grid
   + subgrid). Tablet 700-1099px: columnas se apilan dentro de la
   misma tarjeta, divisor se oculta; expedientes en tarjeta a
   partir de 900px hacia abajo. Móvil <=699px: todo en una columna.
   ========================================================= */

/* Expedientes en fila alineada por columnas — grid + subgrid en
   vez de display:table-row: transform/box-shadow en el hover no
   se aplican de forma confiable sobre table-row en varios motores
   (limitación conocida de CSS Tables), y el hover pedido (elevar
   1-2px + sombra) los necesita. subgrid da la misma alineación
   entre filas sin esa limitación — un solo @foreach, cero
   duplicación, un solo <a> por expediente. */
@media (min-width: 900px) {
    .chat-index-expedientes {
        display: grid;
        grid-template-columns: auto 1fr auto auto;
        row-gap: 8px;
    }

    .chat-index-expediente {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: subgrid;
        grid-template-rows: auto;
        grid-template-areas: "icono info meta chevron";
        column-gap: 20px;
    }

    .chat-index-expediente-meta {
        grid-area: meta;
        justify-content: flex-end;
        gap: 20px;
    }

    .chat-index-expediente-fecha {
        min-width: 11ch;
    }
}

@media (max-width: 1099px) {
    .chat-index-tarjeta-cols {
        flex-wrap: wrap;
    }

    .chat-index-col-form {
        flex-basis: 100%;
    }

    .chat-index-divisor {
        display: none;
    }

    .chat-index-col-proximamente {
        flex-basis: 100%;
        padding-top: 1rem;
        border-top: 1px solid rgba(200, 205, 212, .5);
    }
}

@media (max-width: 699px) {
    .chat-index-banner > div {
        min-height: 110px;
    }

    .chat-index-campos {
        flex-direction: column;
    }

    .chat-index-campo {
        flex-basis: auto;
    }

    .chat-index-accion .boton {
        width: 100%;
    }

    .chat-index-expediente {
        padding: 12px;
        column-gap: 10px;
    }

    .chat-index-confianza-luna {
        display: none;
    }
}

/* Interactividad de la fase lunar: solo por encima del breakpoint
   móvil, para que en ≤699px (sin hover real) el círculo jamás quede
   en un estado a medio camino — se queda fijo en la fase de reposo
   definida arriba, sin overrides de tamaño (32px en todos los
   anchos, así la fila no cambia de alto entre breakpoints). Se
   dispara desde la fila completa (.chat-index-expediente), no
   desde el círculo. */
@media (min-width: 700px) {
    .chat-index-expediente:hover .chat-index-expediente-icono-circulo,
    .chat-index-expediente:focus-visible .chat-index-expediente-icono-circulo {
        box-shadow: inset 0 0 2px 0 var(--mextli-citlalli);
    }
}

@media (prefers-reduced-motion: reduce) {
    .chat-index-expediente-icono-circulo {
        transition: none;
    }
}

/* =========================================================
   CONSTRUCTOR DOCUMENTAL — resources/views/constructor/index.blade.php,
   resources/views/constructor/show.blade.php

   Todo lo de aquí abajo es EXCLUSIVO del Constructor. No modifica
   .tarjeta, .boton, .campo, .fila-acciones, .badge, .lista, .enlace.
   Donde hace falta variar una de esas, se usa selector contextual
   en vez de tocar la regla global.
   ========================================================= */

/* --- Índice: encabezado compacto (alto del banner ya se pasa por
   prop desde la vista) + menú de áreas como enlaces reales, sin
   depender de JS para cambiar de área (antes era un <select
   onchange="submit()">). --- */
.constructor-header {
    margin-bottom: .4rem;
}

.constructor-areas {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1rem 0 1.2rem;
}

.constructor-area {
    display: inline-flex;
    align-items: center;
    padding: .5rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(200,205,212,.65);
    background: #fff;
    color: var(--mextli-texto);
    text-decoration: none;
    font-size: .88rem;
    font-weight: 600;
    transition: border-color .18s ease, background .18s ease, color .18s ease;
}

.constructor-area:hover {
    border-color: var(--mextli-citlalli);
}

.constructor-area:focus-visible {
    outline: 2px solid var(--mextli-citlalli);
    outline-offset: 2px;
}

/* Estado activo: fondo + peso ya lo distinguen sin depender de aria-current
   solo, que también está en el markup (mismo criterio que .chat-expediente-activa). */
.constructor-area-activa {
    background: var(--mextli-yohualli);
    border-color: var(--mextli-yohualli);
    color: #fff;
}

.constructor-area-activa:hover {
    border-color: var(--mextli-citlalli);
}

/* --- Show: layout con panel lateral + formulario --- */
.constructor-layout {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-top: 1.2rem;
}

.constructor-panel {
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem;
    position: sticky;
    top: 1.5rem;
}

.constructor-panel-dato {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.constructor-panel-etiqueta {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--mextli-texto-secundario);
}

/* Jade explícito en vez de heredar .badge-verde (global, dos definiciones
   distintas en pugna entre el <style> de layouts/meztli.blade.php y este
   archivo -- no se toca esa regla compartida, se evita depender de ella). */
.constructor-badge-exito {
    background: var(--mextli-jade);
}

.constructor-form {
    flex: 1;
    min-width: 0;
}

/* --- Formulario: grid de 12 pistas, ancho por tipo de dato del propio
   campo (un RFC no necesita el mismo espacio que una razón social). Sin
   grid-auto-flow:dense -- los campos se acomodan en el orden en que
   vienen, uno pasa a la siguiente fila solo si no cabe en la actual (así
   funciona el flow "row" por defecto, no hace falta forzarlo). Fila
   vertical (row-gap) más separada que la columna (column-gap) para que
   se lea agrupado en filas. --- */
.constructor-campos {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 1.2rem;
    row-gap: 1.7rem;
}

/* El <label> global (layout/meztli.blade.php) ya trae margin-top:1rem;
   se cancela aquí para que el row-gap del grid sea la única fuente de
   separación vertical entre filas (si no, la primera fila del grid
   quedaría con menos aire que las siguientes). */
.constructor-campo label {
    margin-top: 0;
}

.constructor-campo--completo {
    grid-column: span 12;
}

.constructor-campo--medio {
    grid-column: span 6;
}

.constructor-campo--tercio {
    grid-column: span 4;
}

.constructor-campo--cuarto {
    grid-column: span 3;
}

/* Sin las flechas del type="number": además de verse mal, permiten
   cambiar un monto de contrato por accidente con la rueda del mouse. */
.constructor-campos input[type="number"]::-webkit-outer-spin-button,
.constructor-campos input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.constructor-campos input[type="number"] {
    -moz-appearance: textfield;
}

/* --- Aviso de privacidad del autoguardado local (no hay borrador en
   servidor: fuera de alcance de esta entrega, ver decisiones del
   Constructor). --- */
.constructor-autoguardado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    flex-wrap: wrap;
    margin-top: 1.4rem;
    padding: .6rem .9rem;
    border-radius: 10px;
    background: var(--mextli-pergamino);
    font-size: .78rem;
    line-height: 1.4;
    color: var(--mextli-texto-secundario);
}

.constructor-borrar-borrador {
    flex: 0 0 auto;
    background: none;
    border: 1px solid rgba(200,205,212,.8);
    border-radius: 8px;
    padding: .35rem .75rem;
    font-size: .76rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--mextli-texto);
    cursor: pointer;
}

.constructor-borrar-borrador:hover {
    border-color: var(--mextli-granate);
    color: var(--mextli-granate);
}

.constructor-borrar-borrador:focus-visible {
    outline: 2px solid var(--mextli-citlalli);
    outline-offset: 2px;
}

/* --- Barra inferior sticky: se pega al fondo del viewport mientras el
   formulario largo hace scroll, sin salirse de la tarjeta (el bleed
   negativo iguala el padding de 1.75rem de .tarjeta, definido en el
   <style> de layouts/meztli.blade.php). --- */
.constructor-barra-inferior {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1.5rem -1.75rem 0;
    padding: 1rem 1.75rem;
    background: rgba(255,255,255,.96);
    border-top: 1px solid rgba(200,205,212,.6);
    border-radius: 0 0 var(--mextli-radio-md) var(--mextli-radio-md);
}

/* --- Aviso de borrador recuperable: recuperar/descartar explícito,
   nunca restauración silenciosa (ver script en show.blade.php). --- */
.constructor-borrador-aviso:not([hidden]) {
    display: flex;
}

.constructor-borrador-aviso {
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.2rem;
    padding: .8rem 1rem;
    border-radius: 10px;
    border: 1px solid rgba(187,134,64,.4);
    background: rgba(187,134,64,.08);
    font-size: .85rem;
    color: var(--mextli-texto);
}

.constructor-borrador-aviso-acciones {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
}

/* =========================================================
   RESPONSIVE — CONSTRUCTOR
   ========================================================= */
@media (max-width: 899px) {
    .constructor-layout {
        flex-direction: column;
    }

    .constructor-panel {
        flex-basis: auto;
        width: 100%;
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1.4rem;
    }
}

@media (max-width: 599px) {
    .constructor-campos {
        grid-template-columns: 1fr;
    }

    /* Con 1 sola pista explícita, un span de 12/6/4/3 crearía columnas
       implícitas en vez de colapsar -- se fuerza fila completa. */
    .constructor-campo--completo,
    .constructor-campo--medio,
    .constructor-campo--tercio,
    .constructor-campo--cuarto {
        grid-column: 1 / -1;
    }
}

/* =========================================================
   DOCUMENTOS — resources/views/documentos/index.blade.php,
   resources/views/documentos/show.blade.php

   Todo lo de aquí abajo es EXCLUSIVO de Documentos. No modifica
   .tarjeta, .boton, .boton-terracota, .campo, .fila-acciones,
   .badge, .lista, .enlace, .aviso-error ni components.estado-vacio.
   Donde hace falta variar una de esas, se usa selector contextual
   o una clase propia en vez de tocar la regla global.
   ========================================================= */

.documentos-titulo {
    font-size: 1.4rem;
}

.documentos-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem 1rem;
    margin-top: .6rem;
}

/* --- Riesgo global (pendiente 20/3). Bloque propio, siempre icono +
   texto (nunca solo color). Ámbar solo en icono/borde para "medio": como
   color de texto sobre blanco falla contraste (mismo criterio ya
   aplicado en los avisos del Chat) -- Granate sí se usa también como
   texto porque ya está verificado en 6.4:1 (ver .chat-error). alto y
   critico comparten color a propósito: la etiqueta de texto es lo que
   distingue uno de otro. no_determinado lleva su propio color
   (Yohualli) para no leerse como "bajo". --- */
.documentos-riesgo {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin: .75rem 0 1.1rem;
    padding: .7rem 1rem;
    border: 1px solid;
    border-radius: var(--mextli-radio-sm);
    font-size: .92rem;
}

.documentos-riesgo-icono {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 800;
    line-height: 1;
}

.documentos-riesgo-texto strong {
    display: block;
    margin-bottom: .1rem;
}

.documentos-riesgo-texto a {
    font-size: .85rem;
    font-weight: 600;
    color: inherit;
    text-decoration: underline;
}

.documentos-riesgo--bajo {
    border-color: var(--mextli-jade);
    color: var(--mextli-jade);
    background: rgba(46,110,94,.06);
}

.documentos-riesgo--medio {
    border-color: var(--mextli-ambar);
    color: var(--mextli-texto);
}

.documentos-riesgo--medio .documentos-riesgo-icono {
    color: var(--mextli-ambar);
}

.documentos-riesgo--alto,
.documentos-riesgo--critico {
    border-color: var(--mextli-granate);
    color: var(--mextli-granate);
    background: rgba(156,59,46,.06);
}

.documentos-riesgo--no-determinado {
    border-color: var(--mextli-yohualli);
    color: var(--mextli-yohualli);
    background: rgba(8,33,61,.05);
}

/* .badge-gris (global, sin tocar) es #8a8171 -- gris sin relación con
   la paleta de marca. Se sobreescribe solo para en_proceso con una
   clase propia, mismo patrón que .constructor-badge-exito: no toca
   la regla global, así que el resto de badge-gris del sitio (si los
   hay en otras vistas) no cambia. Azul Yohualli sólido, no outline,
   para quedar visualmente consistente con el resto de los badges de
   estado (verde/rojo/terracota/azul son todos rellenos, no hay
   ningún outline en la familia .badge-*). El color de texto blanco
   ya lo pone la regla base .badge, no hace falta repetirlo. */
.documentos-badge-en-proceso {
    background: var(--mextli-yohualli);
}

.documentos-informe-revision {
    margin-top: 1rem;
    border-left: 4px solid var(--mextli-citlalli);
}

.documentos-informe-firma {
    margin-top: .4rem;
    font-size: .9rem;
    color: var(--mextli-texto-secundario);
}

.documentos-informe-cuerpo {
    margin-top: .8rem;
    line-height: 1.6;
    white-space: pre-wrap;
}

/* --- Estado en_proceso: cola y generación se muestran hoy como una
   sola fase (el backend no distingue "en cola" de "tomado por el
   worker" -- ver nota en la memoria del proyecto). Fase lunar en CSS
   puro, misma mecánica que .chat-luna-fase pero duplicada bajo su
   propio prefijo para no acoplar este módulo a Chat.

   Esta es la única pantalla cuyo propósito es esperar -- a diferencia
   de la luna de Chat (decorativa dentro de una burbuja), aquí el
   indicador es el centro visual: tarjeta centrada horizontal y
   verticalmente, ancho tope 520px para que no se estire en pantallas
   anchas. El aviso duplicado de sesión (.aviso-ok con el mismo texto,
   ver layouts/meztli.blade.php) se descarta con session()->forget()
   desde la vista antes de que el layout lo pinte -- la línea útil
   ("esta página se actualizará sola") pasó a vivir aquí, dentro de la
   tarjeta, como única fuente de ese mensaje. --- */
.documentos-estado-generando-envoltura {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 55vh;
}

.documentos-estado-tarjeta {
    margin-top: 0;
}

.documentos-estado-tarjeta--generando {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 520px;
    text-align: center;
    background: var(--mextli-pergamino);
    border-left: 3px solid var(--mextli-citlalli);
}

.documentos-indicador {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    margin-bottom: 1rem;
}

.documentos-luna-fase {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--mextli-plata);
    box-shadow: inset 12px 0 0 0 var(--mextli-citlalli);
    animation: documentos-fase-lunar 1.8s ease-in-out infinite;
}

.documentos-luna-fase:nth-child(2) { animation-delay: .25s; }
.documentos-luna-fase:nth-child(3) { animation-delay: .5s; }

@keyframes documentos-fase-lunar {
    0%   { box-shadow: inset 12px 0 0 0 var(--mextli-citlalli); }
    50%  { box-shadow: inset 0 0 0 0 var(--mextli-citlalli); }
    100% { box-shadow: inset -12px 0 0 0 var(--mextli-citlalli); }
}

.documentos-estado-titulo {
    margin: 0 0 .4rem;
    font-size: 1.05rem;
}

.documentos-estado-texto {
    margin: 0;
    color: var(--mextli-texto-secundario);
}

.documentos-estado-secundario {
    margin: .3rem 0 0;
    font-size: .85rem;
    color: var(--mextli-texto-secundario);
}

/* Sin icono (a diferencia de .documentos-estado-tarjeta--error), así
   que no necesita display:flex propio -- por default un <p> ya es
   block, y sin una regla de display de autor no hay nada que le gane
   al [hidden] del navegador. Mismo principio que el fix de
   e71f439, aplicado evitando la colisión en vez de tener que
   resolverla con :not([hidden]). align-self:stretch sí hace falta:
   el contenedor padre es flex con align-items:center (para centrar
   lunas/título/texto, que son más angostos que la tarjeta), y este
   aviso sí debe ocupar el ancho completo. */
.documentos-estado-espera {
    align-self: stretch;
    margin: .8rem 0 0;
    padding: .6rem .8rem;
    background: var(--mextli-blanco);
    border: 1px solid var(--mextli-plata);
    border-radius: var(--mextli-radio-sm);
    font-size: .85rem;
    color: var(--mextli-texto-secundario);
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .documentos-luna-fase {
        animation: none;
    }
}

.documentos-estado-tarjeta--error {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}

.documentos-error-icono {
    flex-shrink: 0;
    margin-top: .1rem;
    color: currentColor;
}

/* Mismo lugar que documentos-estado-tarjeta--generando dentro de la
   envoltura centrada, pero con la paleta de .aviso-error (global, sin
   tocar) para el estado de fallo del sondeo tras MAX_FALLOS. A
   diferencia de .documentos-estado-espera (que evita display propio),
   aquí sí hace falta flex para poner icono + texto + botón en fila --
   por eso el :not([hidden]), mismo principio del fix de e71f439 pero
   resolviéndolo en vez de evitarlo, porque el layout lo exige. */
.documentos-polling-error {
    width: 100%;
    max-width: 520px;
    margin-top: .8rem;
    align-items: flex-start;
    gap: .6rem;
    text-align: left;
}

.documentos-polling-error:not([hidden]) {
    display: flex;
}

.documentos-polling-error-texto {
    margin: 0 0 .5rem;
}

.documentos-polling-error-boton {
    padding: .45rem 1rem;
    font-size: .9rem;
}

.documentos-descargas {
    margin-top: 1.2rem;
}

.documentos-descargas-acciones {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .7rem;
    margin-top: .8rem;
}

.documentos-descarga-primaria {
    font-size: 1rem;
    font-weight: 700;
    padding: .8rem 1.4rem;
    box-shadow: var(--mextli-sombra-suave);
}

.documentos-descargas-secundarias {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.documentos-descarga-secundaria {
    padding: .5rem .9rem;
    border: 1px solid var(--mextli-plata);
    border-radius: var(--mextli-radio-sm);
    color: var(--mextli-texto-secundario);
    text-decoration: none;
    font-size: .88rem;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.documentos-descarga-secundaria:hover {
    background: var(--mextli-pergamino);
    color: var(--mextli-yohualli);
    border-color: var(--mextli-citlalli);
}

.documentos-nota-borrador {
    margin-top: .8rem;
    font-size: .85rem;
    color: var(--mextli-texto-secundario);
}

.documentos-revision {
    margin-top: 1.2rem;
}

.documentos-revision-estado {
    margin-top: .6rem;
}

.documentos-revision-copy {
    margin: 0 0 .5rem;
}

/* Son metadatos del ticket (número, fecha, servicio, monto, abogado), no
   pasos de un procedimiento -- una lista con viñetas los hacía leer como
   instrucciones. Apilados sin viñeta, tono más discreto que el copy del
   estado (.documentos-revision-copy, arriba). */
.documentos-revision-datos {
    list-style: none;
    margin: 0 0 .5rem;
    padding: 0;
    font-size: .84rem;
    color: var(--mextli-texto-secundario);
}

.documentos-revision-datos li {
    margin-bottom: .2rem;
}

.documentos-revision-nota {
    margin: .5rem 0 0;
    padding: .6rem .8rem;
    background: var(--mextli-pergamino);
    border-radius: var(--mextli-radio-sm);
    font-size: .88rem;
}

.documentos-revision-cancelado {
    margin: 0 0 .8rem;
    font-size: .88rem;
    color: var(--mextli-texto-secundario);
}

.documentos-aval-form {
    margin-top: .8rem;
}

.documentos-aval-titulo {
    font-weight: 700;
    margin-bottom: .3rem;
}

.documentos-aval-precio {
    font-weight: 400;
    color: var(--mextli-texto-secundario);
}

.documentos-aval-descripcion {
    font-size: .88rem;
    color: var(--mextli-texto-secundario);
    margin-bottom: .5rem;
}

.documentos-aval-check {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    font-size: .85rem;
    margin-top: .5rem;
}

.documentos-aval-boton {
    margin-top: .8rem;
}

.documentos-aval-proximamente {
    font-size: .88rem;
    color: var(--mextli-texto-secundario);
    margin-top: .8rem;
}

/* --- Histórico (documentos/index.blade.php): mismo tratamiento que
   .chat-index-expedientes -- fila completa clickeable, grid+subgrid
   a partir de 900px, chevron aria-hidden. Duplicado bajo su propio
   prefijo por la misma razón que la fase lunar de arriba: no acoplar
   Documentos a que Chat no cambie su CSS. --- */
.documentos-historial-seccion {
    margin-top: 1.2rem;
}

/* Título de sección + conteo de resultados, mismo patrón que
   .chat-index-expedientes-titulo. El conteo lo actualiza el JS del
   filtro (buscador/select) -- arranca en "Mostrando total de total",
   coherente con que nada empieza filtrado. */
.documentos-historial-seccion-titulo {
    margin: 0;
    font-size: 1.15rem;
}

.documentos-historial-conteo {
    margin: .3rem 0 1rem;
    font-size: .85rem;
    color: var(--mextli-texto-secundario);
}

.documentos-historial {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.documentos-historial-fila {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
        "icono info    chevron"
        "icono meta    chevron";
    align-items: center;
    column-gap: 14px;
    row-gap: 4px;
    padding: 14px 16px;
    background: var(--mextli-blanco);
    border: 1px solid var(--mextli-plata);
    border-left: 3px solid var(--mextli-citlalli);
    border-radius: var(--mextli-radio-sm);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, border-left-width .15s ease, box-shadow .15s ease, background .15s ease, transform .15s ease;
}

/* display separado de la regla base a propósito: si va junto, le gana
   a la regla [hidden] del user-agent sin importar especificidad (los
   orígenes de la cascada se comparan antes) y el filtro JS del listado
   (buscador/chips de estado) dejaría de ocultar filas -- mismo
   principio que .constructor-borrador-aviso / .documentos-polling-error
   / .auditoria-polling-error. */
.documentos-historial-fila:not([hidden]) {
    display: grid;
}

.documentos-historial-fila:hover {
    border-left-width: 4px;
    background: var(--mextli-pergamino);
    box-shadow: var(--mextli-sombra-suave);
    transform: translateY(-1px);
}

.documentos-historial-fila:focus-visible {
    outline: 2px solid var(--mextli-citlalli);
    outline-offset: 2px;
}

/* Recuadro con el ícono real de documento (pendiente 65) -- reemplaza
   la fase lunar decorativa que traía antes (mismo mecanismo cosmético
   de Chat/Constructor, pero sin ícono real dentro; aquí sí hay uno
   literal, así que ese motivo para el círculo dejó de aplicar). Solo
   toca esta fila del histórico -- .chat-index-expediente-icono-circulo
   se queda igual, es otro módulo. */
.documentos-historial-icono-recuadro {
    grid-area: icono;
    width: 32px;
    height: 32px;
    border-radius: var(--mextli-radio-sm);
    background: var(--mextli-yohualli);
    color: var(--mextli-blanco);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.documentos-historial-info {
    grid-area: info;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.documentos-historial-titulo {
    font-weight: 700;
    color: var(--mextli-yohualli);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.documentos-historial-plantilla {
    font-size: .82rem;
    color: var(--mextli-texto-secundario);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.documentos-historial-meta {
    grid-area: meta;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.documentos-historial-fecha {
    font-size: .78rem;
    color: var(--mextli-texto-secundario);
    white-space: nowrap;
}

.documentos-historial-chevron {
    grid-area: chevron;
    color: var(--mextli-citlalli);
    font-size: 1.5rem;
    line-height: 1;
}

/* Puntito dentro del badge -- decorativo, no redunda el color como
   segundo canal (el fondo sólido del badge ya es el color real, ver
   pendiente 15). No toca .badge/.badge-* globales. */
.documentos-badge-punto {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
    margin-right: .35rem;
    vertical-align: middle;
}

/* Encabezado propio (pendiente 65) -- mismo patrón que .auditoria-header
   (icono en círculo Azul Yohualli + título/subtítulo), sin botón de
   "nuevo documento": el Constructor ya vive en el menú. */
.documentos-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.4rem;
}

.documentos-header-icono {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--mextli-yohualli);
    color: var(--mextli-blanco);
    display: flex;
    align-items: center;
    justify-content: center;
}

.documentos-header-titulo {
    margin: 0;
    font-family: var(--mextli-font-display);
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--mextli-yohualli);
}

.documentos-header-subtitulo {
    margin: .3rem 0 0;
    font-size: .92rem;
    color: var(--mextli-texto-secundario);
    max-width: 640px;
}

/* Conteo de una sola línea -- reemplaza las tarjetas de conteo por
   estado (pendiente 65): con el volumen de hoy (unidades, no cientos)
   el desglose de 5 estados no aportaba, solo ocupaba espacio. */
.documentos-conteo-linea {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 1.2rem;
    font-size: .92rem;
    color: var(--mextli-texto-secundario);
}

.documentos-conteo-linea-icono {
    flex-shrink: 0;
    color: var(--mextli-citlalli);
}

/* Buscador + filtro por estado en su propia tarjeta blanca -- antes
   flotaban sueltos sobre el fondo. Fila en pantallas anchas, columna
   en móvil (mismo punto de corte 699px que el resto del listado). JS
   puro, degradan a "todo visible" sin JS (ningún documento arranca
   oculto en el HTML; sin JS el <select> no filtra nada). */
.documentos-historial-controles {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    padding: 1rem 1.2rem;
    margin-bottom: 1.4rem;
}

@media (min-width: 700px) {
    .documentos-historial-controles {
        flex-direction: row;
        align-items: center;
    }
}

/* La lupa NO va como background-image del <input> -- se probó así y
   no se veía (ver commit anterior); descartado tras diagnóstico: el
   CSS llegaba íntegro al navegador (regla única en todo el archivo,
   sin ninguna otra que la pisara después, sintaxis del data-URI
   válida) -- confirmado con el CSS servido en vivo, no solo leyendo
   el archivo local. La causa que queda, y es un problema documentado
   de varios motores: input[type=search] conserva por dentro los
   elementos de decoración nativos de "campo de búsqueda" aunque
   appearance:none los desactive visualmente -- en algunos Chrome/
   WebKit siguen reservando/recortando el área de fondo del propio
   input, así que un background-image ahí es frágil de por sí, no
   específico de este archivo. Fix robusto: la lupa es un <svg> real,
   hermano del input dentro de un contenedor position:relative
   (.documentos-buscador-envoltura) -- ya no depende en absoluto de
   cómo cada motor pinte el fondo de un campo de búsqueda. */
.documentos-buscador-envoltura {
    position: relative;
    display: flex;
    align-items: center;
}

.documentos-buscador-icono {
    position: absolute;
    left: .95rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--mextli-texto-secundario);
    pointer-events: none;
}

/* appearance:none apaga el chrome nativo de type=search (la píldora
   redondeada y el placeholder centrado) -- eso en sí seguía intacto,
   no era la causa del regreso a la píldora del round anterior. La
   causa real de esa: input[type=search] nunca tuvo su propio ancho/
   alto. La regla legacy del <style> inline del layout (layouts/
   meztli.blade.php, selector "input[type=email], input[type=password],
   input[type=text]") es la que da width:100%+padding a los campos de
   texto del sistema, y ese selector deliberadamente NO incluye
   [type=search] -- nunca lo tuvo. En la fila de chips (flex-direction:
   column) no se notaba: el align-items:stretch por defecto de una
   columna flex estira a sus hijos al ancho completo del contenedor
   "gratis", sin que hiciera falta un width:100% propio. Al pasar la
   barra a flex-direction:row (arriba) para poner el <select> a la
   derecha, esa columna dejó de estirarlo -- el buscador volvió a su
   ancho intrínseco de ~20 caracteres con el padding vertical mínimo
   del navegador. Fix: ancho y alto explícitos aquí, ya no depender
   del stretch implícito de ningún layout padre. */
.documentos-buscador {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 44px;
    padding: 0 1rem 0 2.5rem;
    font-family: var(--mextli-font-ui);
    font-size: .92rem;
    text-align: left;
}

.documentos-buscador::placeholder {
    color: var(--mextli-texto-secundario);
}

/* La "x" nativa de limpiar es parte del chrome de searchfield que
   apagamos arriba -- se va con él. No se repone con una propia: ningún
   otro .campo del sistema trae botón de limpiar (se borra con
   teclado), y ya existe "Limpiar filtro" para el caso de cero
   resultados. Se oculta explícito, no se confía en que appearance:none
   sobre el input alcance a quitarla en todos los navegadores. */
.documentos-buscador::-webkit-search-cancel-button {
    -webkit-appearance: none;
    display: none;
}

/* select.campo-select SÍ tiene una regla propia en el <style> legacy
   del layout (selector "select.campo-select", con padding:0.5rem
   0.7rem) -- por eso el select y el buscador se veían de alturas
   distintas (el buscador no tenía ninguna regla equivalente, ver
   arriba). border/border-radius ya coinciden (ambos los heredan del
   mismo bloque compartido de este archivo, input[type=search]/
   select.campo-select, que carga después del <style> inline y le
   gana ahí). Selector con las 2 clases (.campo-select.documentos-
   filtro-select, ambas ya están en el <select> del HTML) para
   ganarle en especificidad al padding legacy sin tocar esa regla
   global compartida por el resto del sitio. */
select.campo-select.documentos-filtro-select {
    height: 44px;
    padding: 0 .9rem;
    font-family: var(--mextli-font-ui);
    font-size: .92rem;
}

@media (min-width: 700px) {
    /* Buscador se lleva 2/3+ del ancho, el select conserva el suyo
       propio -- proporción 3:1 de crecimiento sobre una base que ya
       cumple el mínimo, no un % fijo, para que siga viéndose bien en
       cualquier ancho de pantalla desde 700px hacia arriba. El flex
       va en la envoltura (el input ya es 100% ancho de su envoltura),
       no en el input directo. */
    .documentos-buscador-envoltura {
        flex: 3 1 280px;
    }

    select.campo-select.documentos-filtro-select {
        flex: 1 1 160px;
        max-width: 240px;
    }
}

/* Aviso de "sin resultados" tras filtrar: arranca oculto con [hidden]
   en el HTML (el estado por defecto siempre es "todo visible", nunca
   hay 0 resultados sin que el usuario haya filtrado). display separado
   de la regla base por el mismo motivo que .documentos-historial-fila
   más arriba: junto, le ganaría a [hidden] del user-agent. */
.documentos-historial-sin-resultados {
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--mextli-texto-secundario);
}

.documentos-historial-sin-resultados:not([hidden]) {
    display: flex;
}

.documentos-limpiar-boton {
    font-family: var(--mextli-font-ui);
    font-size: .85rem;
    font-weight: 600;
    padding: .4rem 1rem;
    border-radius: var(--mextli-radio-sm);
    border: 1px solid var(--mextli-citlalli);
    background: var(--mextli-blanco);
    color: var(--mextli-yohualli);
    cursor: pointer;
}

.documentos-limpiar-boton:hover {
    background: var(--mextli-pergamino);
}

@media (min-width: 900px) {
    .documentos-historial {
        display: grid;
        grid-template-columns: auto 1fr auto auto;
        row-gap: 8px;
    }

    .documentos-historial-fila {
        grid-column: 1 / -1;
        grid-template-columns: subgrid;
        grid-template-rows: auto;
        grid-template-areas: "icono info meta chevron";
        column-gap: 20px;
    }

    .documentos-historial-meta {
        grid-area: meta;
        justify-content: flex-end;
        gap: 20px;
    }

    .documentos-historial-fecha {
        min-width: 11ch;
    }
}

@media (max-width: 699px) {
    .documentos-historial-fila {
        padding: 12px;
        column-gap: 10px;
    }

    .documentos-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =========================================================
   ORIENTADOR — resources/views/livewire/orientador/asistente.blade.php

   Livewire, no Blade tradicional (ver memoria del proyecto). Todo lo
   de aquí abajo es EXCLUSIVO del Orientador. No modifica .tarjeta,
   .boton, .aviso-error, .aviso-ok, .enlace, .fila-acciones — donde
   hace falta variar una de esas, selector contextual, nunca la regla
   global.

   Entrega 1 del rediseño: gate de plan (pendiente 50) + pantalla de
   selección de tema. La entrevista y el diagnóstico conservan su
   estilo inline de hoy (Entregas 2/3 del rediseño) salvo el estado
   deshabilitado que exige el gate — resuelto con :disabled, no
   apagando la tarjeta completa, para no bloquear "cambiar tema".
   ========================================================= */

.orientador-header {
    margin-bottom: 1.5rem;
}

.orientador-titulo {
    font-family: var(--mextli-font-display);
    font-weight: 600;
    font-size: 1.6rem;
    color: var(--mextli-yohualli);
    margin: 0 0 .5rem;
}

.orientador-intro {
    max-width: 62ch;
    color: var(--mextli-texto-secundario);
    line-height: 1.6;
}

/* --- Aviso de error/gate. Ámbar solo en icono/borde -- como texto
   sobre blanco falla contraste (2.66:1), mismo criterio ya aplicado
   en el Chat y en documentos/show. El de error genérico (no de plan)
   usa Granate, ya verificado en 6.4:1 sobre blanco. --- */
.orientador-aviso {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid;
    border-radius: var(--mextli-radio-sm);
}

.orientador-aviso-icono {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .82rem;
    font-weight: 800;
    line-height: 1;
}

.orientador-aviso-cuerpo {
    flex: 1;
    min-width: 200px;
}

.orientador-aviso-cuerpo p {
    margin: 0;
    line-height: 1.5;
}

.orientador-aviso-form {
    flex: 0 0 auto;
}

.orientador-aviso--plan {
    border-color: var(--mextli-ambar);
    color: var(--mextli-texto);
}

.orientador-aviso--plan .orientador-aviso-icono {
    color: var(--mextli-ambar);
}

.orientador-aviso--error {
    border-color: var(--mextli-granate);
    color: var(--mextli-granate);
    background: rgba(156, 59, 46, .05);
}

/* --- Pantalla de selección de tema --- */
.orientador-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
    align-items: start;
}

.orientador-temas-titulo {
    font-family: var(--mextli-font-display);
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--mextli-yohualli);
    margin: 0 0 1rem;
}

.orientador-temas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.orientador-tema {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    text-align: left;
    background: var(--mextli-blanco);
    border: 1px solid var(--mextli-plata);
    border-radius: var(--mextli-radio-md);
    padding: 1.25rem;
    cursor: pointer;
    font-family: inherit;
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

.orientador-tema:hover {
    box-shadow: var(--mextli-sombra-hover);
    transform: translateY(-2px);
    border-color: var(--mextli-citlalli);
}

.orientador-tema:focus-visible {
    outline: 2px solid var(--mextli-citlalli);
    outline-offset: 2px;
}

.orientador-tema-icono {
    margin-bottom: .25rem;
}

.orientador-tema-badge {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: 999px;
    background: var(--mextli-pergamino);
    color: var(--mextli-yohualli);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.orientador-tema-titulo {
    font-size: 1rem;
    color: var(--mextli-yohualli);
}

.orientador-tema-descripcion {
    /* Recorte por línea (nunca a la mitad de una palabra): el navegador
       ya envuelve el texto en los espacios; esto solo oculta las líneas
       sobrantes, en vez de cortar por caracteres como hacía Str::limit(). */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    font-size: .88rem;
    color: var(--mextli-texto-secundario);
    line-height: 1.5;
}

.orientador-tema-cta {
    /* Empuja el CTA al pie de la tarjeta sin importar cuánto midan el
       título o la descripción -- .orientador-tema ya es flex-column y
       el grid ya estira cada tarjeta a la altura de su fila. */
    margin-top: auto;
    padding-top: .5rem;
    font-size: .85rem;
    font-weight: 700;
    color: var(--mextli-meztli);
}

.orientador-panel-como {
    background: var(--mextli-pergamino);
    border-radius: var(--mextli-radio-md);
    padding: 1.5rem;
}

.orientador-panel-titulo {
    font-family: var(--mextli-font-display);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--mextli-yohualli);
    margin: 0 0 1rem;
}

.orientador-pasos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.orientador-paso {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.orientador-paso-numero {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--mextli-yohualli);
    color: var(--mextli-blanco);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .82rem;
    font-weight: 700;
}

.orientador-paso strong {
    display: block;
    color: var(--mextli-yohualli);
    font-size: .92rem;
    margin-bottom: .2rem;
}

.orientador-paso p {
    margin: 0;
    font-size: .84rem;
    color: var(--mextli-texto-secundario);
    line-height: 1.5;
}

.orientador-nota-sencillez {
    margin-top: 1.5rem;
    padding: .85rem 1.1rem;
    background: var(--mextli-pergamino);
    border-radius: var(--mextli-radio-sm);
    font-size: .88rem;
    color: var(--mextli-texto-secundario);
    text-align: center;
}

/* --- Entrevista: encabezado, indicador de progreso y preguntas
   (Entrega 2). El indicador NUNCA muestra un total -- el árbol se
   ramifica según la respuesta y "Pregunta 3 de 5" mentiría en cuanto
   la ruta tomada fuera otra. Solo "Pregunta N" + una línea de contexto
   derivada del nodo actual (ver getProgresoEntrevistaProperty). --- */
.orientador-entrevista-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.orientador-entrevista-identidad {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.orientador-entrevista-icono {
    flex: 0 0 auto;
}

.orientador-entrevista-titulo {
    margin: .3rem 0 0;
    font-size: 1.05rem;
    color: var(--mextli-yohualli);
}

.orientador-entrevista-cambiar {
    font-size: .85rem;
    color: var(--mextli-meztli);
    white-space: nowrap;
}

.orientador-progreso {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--mextli-plata);
    font-size: .85rem;
}

.orientador-progreso-numero {
    font-weight: 700;
    color: var(--mextli-yohualli);
}

.orientador-progreso-contexto {
    color: var(--mextli-texto-secundario);
}

.orientador-pregunta {
    margin-top: 1.25rem;
}

.orientador-pregunta-texto {
    display: block;
    color: var(--mextli-yohualli);
    font-size: .98rem;
}

.orientador-pregunta-ayuda {
    margin: .35rem 0 0;
    font-size: .85rem;
    color: var(--mextli-texto-secundario);
}

.orientador-opciones {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: .75rem;
}

.orientador-opcion {
    margin: 0;
}

/* Selección marcada por más que el color: azul (sin elegir) vs dorado
   (elegida) no se distingue de forma confiable solo por matiz -- check
   + borde, redundante a propósito. */
.orientador-opcion--seleccionada {
    border: 2px solid var(--mextli-yohualli);
}

.orientador-opcion-check {
    margin-right: .3rem;
    font-weight: 700;
}

.orientador-campo-fecha {
    display: block;
    margin-top: .5rem;
}

.orientador-entrevista-envio {
    margin-top: 1.5rem;
}

/* --- Resumen colapsado: reemplaza la entrevista completa en cuanto hay
   diagnóstico, para que "Recibir mi orientación" no siga a la vista y
   listo para dispararse otra vez sobre el mismo resultado. "Modificar
   respuestas" es un enlace chico al pie a propósito, no un botón junto
   al resultado -- debe ser una acción que el usuario busca, no con la
   que se topa. --- */
.orientador-resumen {
    margin-top: 1rem;
}

.orientador-resumen-lista {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.orientador-resumen-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .55rem .75rem;
    background: var(--mextli-pergamino);
    border-radius: var(--mextli-radio-sm);
    font-size: .88rem;
}

.orientador-resumen-pregunta {
    color: var(--mextli-texto-secundario);
}

.orientador-resumen-respuesta {
    font-weight: 600;
    color: var(--mextli-yohualli);
    text-align: right;
}

.orientador-resumen-modificar {
    display: inline-block;
    margin-top: .9rem;
    font-size: .85rem;
    color: var(--mextli-meztli);
}

/* --- Tipografía del diagnóstico (Entrega 3). {!! $diagnosticoHtml !!} sin
   esta clase heredaba la regla global h1/h2/h3 (Cormorant Garamond, la
   serif display del proyecto) -- de trazo muy fino, se lee gris claro a
   este tamaño aunque el color sea correcto. Mismo problema y mismo fix
   que el Chat (commit 617c607): Inter en vez de serif, más margen arriba
   que abajo para que el encabezado ancle la sección en vez de mezclarse
   con el párrafo anterior. Valores reutilizados tal cual, sin inventar
   nuevos. h4/br no aparecieron en la muestra real capturada pero siguen
   en la whitelist del sanitizador (OrientadorService::HTML_ETIQUETAS_
   PERMITIDAS) -- h4 sí tiene tratamiento aquí por si aparece; br no
   necesita ninguno. --- */
.orientador-diagnostico p {
    margin: 0 0 .85em;
}

.orientador-diagnostico p:last-child {
    margin-bottom: 0;
}

.orientador-diagnostico h3,
.orientador-diagnostico h4 {
    margin: 1.3em 0 .45em;
    color: var(--mextli-yohualli);
    font-family: var(--mextli-font-ui);
    font-weight: 700;
    line-height: 1.3;
}

.orientador-diagnostico h3:first-child,
.orientador-diagnostico h4:first-child {
    margin-top: 0;
}

.orientador-diagnostico h3 {
    font-size: 1.15rem;
}

.orientador-diagnostico h4 {
    font-size: 1.05rem;
}

.orientador-diagnostico strong {
    font-weight: 700;
    color: var(--mextli-yohualli);
}

.orientador-diagnostico ul,
.orientador-diagnostico ol {
    margin: 0 0 .85em;
    padding-left: 1.3em;
}

.orientador-diagnostico ul:last-child,
.orientador-diagnostico ol:last-child {
    margin-bottom: 0;
}

.orientador-diagnostico li {
    margin-bottom: .3em;
}

.orientador-diagnostico li:last-child {
    margin-bottom: 0;
}

/* --- Bloque de plazo (Entrega 3): antes decidía su color con un array
   PHP inline con solo 2 de los 4 valores reales de nivel -- 'vigente' y
   'atencion' caían los dos al mismo verde por defecto, aunque el texto
   de 'atencion' ("no dejes pasar tiempo") no tiene nada de tranquilo.
   Mismo patrón ya resuelto en .documentos-riesgo y .orientador-aviso:
   icono en círculo + borde, Ámbar solo en icono/borde (como texto sobre
   blanco falla contraste, mismo criterio en todo el sitio), Granate sí
   puede ir en texto (ya verificado en 6.4:1). --neutro (Yohualli) es el
   fallback para cualquier nivel no contemplado -- nunca Jade por
   accidente, esa fue la lección del default que envejeció mal en el
   Chat. --- */
.orientador-plazo {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-top: 1rem;
    padding: .9rem 1.1rem;
    border: 1px solid;
    border-radius: var(--mextli-radio-sm);
}

.orientador-plazo-icono {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .82rem;
    font-weight: 800;
    line-height: 1;
}

.orientador-plazo-cuerpo {
    flex: 1;
    min-width: 200px;
}

.orientador-plazo-cuerpo strong {
    display: block;
    margin-bottom: .3rem;
}

.orientador-plazo-cuerpo p {
    margin: 0;
    font-size: .95rem;
    line-height: 1.5;
}

.orientador-plazo-cuerpo em {
    display: block;
    margin-top: .4rem;
    font-size: .8rem;
    color: var(--mextli-texto-secundario);
}

.orientador-plazo--vencido {
    border-color: var(--mextli-granate);
    color: var(--mextli-granate);
    background: rgba(156, 59, 46, .05);
}

.orientador-plazo--urgente {
    border-color: var(--mextli-ambar);
    color: var(--mextli-texto);
}

.orientador-plazo--urgente .orientador-plazo-icono {
    color: var(--mextli-ambar);
}

.orientador-plazo--vigente {
    border-color: var(--mextli-jade);
    color: var(--mextli-jade);
    background: rgba(46, 110, 94, .06);
}

.orientador-plazo--neutro {
    border-color: var(--mextli-yohualli);
    color: var(--mextli-yohualli);
    background: rgba(8, 33, 61, .05);
}

/* --- Teaser adversarial + CTA de "¿Y ahora qué sigue?" (Entrega 3):
   mismo tratamiento de icono+borde que .orientador-aviso, Ámbar solo en
   icono/borde por la misma razón de contraste. El número mostrado
   siempre es real (nunca un valor por defecto, ver comentario en el
   blade) -- que falle en silencio ~89% de las veces es un problema de
   fondo del servicio, no de este rediseño (pendiente 47/58). --- */
.orientador-teaser {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-top: 1rem;
    padding: .9rem 1.1rem;
    border: 1px solid var(--mextli-ambar);
    border-radius: var(--mextli-radio-sm);
}

.orientador-teaser-icono {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    color: var(--mextli-ambar);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .82rem;
    font-weight: 800;
    line-height: 1;
}

.orientador-teaser-cuerpo {
    flex: 1;
    min-width: 200px;
}

.orientador-teaser-conteo {
    margin: 0;
    font-weight: 700;
    color: var(--mextli-texto);
}

.orientador-teaser-detalle {
    margin: .4rem 0 0;
    font-size: .92rem;
    color: var(--mextli-texto-secundario);
}

.orientador-teaser-boton {
    margin-top: .6rem;
}

.orientador-siguiente {
    border-top-color: var(--mextli-meztli);
}

/* --- Pantalla de análisis: la entrevista pide 2 llamadas síncronas a
   Anthropic (~1100-1800 tokens de salida cada una) -- la espera es
   real y la pantalla queda quieta. Sin barra de 4 etapas (el sistema
   no puede reportar avance real; fingirlo sería mentir): la fase
   lunar solo comunica "algo sigue vivo", con más presencia que la de
   Chat (mismo mecanismo box-shadow:inset, prefijo propio para no
   acoplar el módulo) porque aquí ES el centro de la espera. El aviso
   de no cerrar la ventana es más importante que en Constructor: allá
   el documento sobrevive en cola; aquí el diagnóstico vive solo en el
   snapshot de Livewire y cerrar lo pierde por completo.

   El wire:loading que antes solo envolvía el botón de envío ahora
   envuelve toda la entrevista (header/progreso/preguntas): mientras
   orientar() corre, esta pantalla REEMPLAZA la entrevista dentro de
   la misma tarjeta en vez de aparecer pegada al fondo, debajo de
   todas las preguntas ya respondidas -- es el único momento en que el
   usuario espera sin poder hacer nada, así que debe ser el centro de
   atención, mismo criterio que .documentos-estado-generando-envoltura
   en Constructor. min-height más chico que ahí (40vh vs 55vh) porque
   aquí sigue viviendo dentro de una tarjeta con título de página
   arriba, no en una pantalla completa aparte. --- */
.orientador-analizando-envoltura {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
}

.orientador-analizando {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 480px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem;
    background: var(--mextli-pergamino);
    border-left: 3px solid var(--mextli-citlalli);
    border-radius: var(--mextli-radio-md);
}

.orientador-analizando-indicador {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    margin-bottom: 1rem;
}

.orientador-luna-fase {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--mextli-plata);
    box-shadow: inset 10px 0 0 0 var(--mextli-citlalli);
    animation: orientador-fase-lunar 1.8s ease-in-out infinite;
}

.orientador-luna-fase:nth-child(2) { animation-delay: .25s; }
.orientador-luna-fase:nth-child(3) { animation-delay: .5s; }

@keyframes orientador-fase-lunar {
    0%   { box-shadow: inset 10px 0 0 0 var(--mextli-citlalli); }
    50%  { box-shadow: inset 0 0 0 0 var(--mextli-citlalli); }
    100% { box-shadow: inset -10px 0 0 0 var(--mextli-citlalli); }
}

@media (prefers-reduced-motion: reduce) {
    .orientador-luna-fase {
        animation: none;
    }
}

.orientador-analizando-titulo {
    margin: 0 0 .4rem;
    font-size: 1.02rem;
    color: var(--mextli-yohualli);
}

.orientador-analizando-texto {
    margin: 0;
    font-size: .9rem;
    color: var(--mextli-texto-secundario);
}

.orientador-analizando-aviso {
    margin: .75rem 0 0;
    font-size: .82rem;
    color: var(--mextli-texto-secundario);
}

/* --- Entrevista: aviso de solo-lectura + controles deshabilitados
   cuando el gate bloquea (pendiente 50). Icono + texto, nunca solo
   color/opacidad -- y solo los controles reales quedan grises, no la
   tarjeta completa, para no confundir "deshabilitado" con "cambiar
   tema" (ese enlace nunca se deshabilita). --- */
.orientador-entrevista-solo-lectura {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .85rem 0 0;
    padding: .6rem .9rem;
    background: var(--mextli-pergamino);
    border-radius: var(--mextli-radio-sm);
    font-size: .85rem;
    color: var(--mextli-texto-secundario);
}

.orientador-entrevista .boton:disabled,
.orientador-entrevista input:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* =========================================================
   RESPONSIVE — ORIENTADOR
   ========================================================= */
@media (max-width: 1099px) {
    .orientador-layout {
        grid-template-columns: 1fr 260px;
    }

    .orientador-temas-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 699px) {
    .orientador-layout {
        grid-template-columns: 1fr;
    }

    .orientador-temas-grid {
        grid-template-columns: 1fr;
    }

    .orientador-panel-como {
        margin-top: 1.5rem;
    }

    .orientador-entrevista-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .orientador-resumen-item {
        flex-direction: column;
        gap: .15rem;
    }

    .orientador-resumen-respuesta {
        text-align: left;
    }
}

/* =========================================================
   AUDITORÍA — resources/views/auditoria/{index,show}.blade.php

   Entrega 1 (pantalla de subida). Encabezado propio, no
   .banner-despacho: el mockup pide un icono en círculo, que no
   encaja en el formato de foto-hero del banner compartido (sí lo
   usan Chat/Constructor). Mismo criterio que el Orientador, que
   tampoco usa el banner. Sin tocar .tarjeta/.boton/.badge*/.lista/
   .enlace/.campo-select/.fila-acciones (globales) ni los partials
   compartidos banner-despacho/selector-area/proximamente.
   ========================================================= */

.auditoria-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.4rem;
}

.auditoria-header-icono {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--mextli-yohualli);
    color: var(--mextli-blanco);
    display: flex;
    align-items: center;
    justify-content: center;
}

.auditoria-header-titulo {
    margin: 0;
    font-family: var(--mextli-font-display);
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--mextli-yohualli);
}

.auditoria-header-subtitulo {
    margin: .3rem 0 0;
    font-size: .92rem;
    color: var(--mextli-texto-secundario);
    max-width: 640px;
}

/* Indicador de 3 pasos: Subir · Analizando · Resultados. Los 3
   estados existen de verdad en el modelo (en_proceso/completado/
   error) -- no es un progreso fingido, a diferencia de los
   subpasos del mockup que sí se descartaron. Activo = círculo
   relleno + texto en negrita; completado = círculo con check;
   pendiente = círculo solo con borde -- la forma distingue el
   estado, no solo el color. */
.auditoria-pasos {
    list-style: none;
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 1.6rem;
    padding: 0;
}

.auditoria-paso {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
    color: var(--mextli-texto-secundario);
}

.auditoria-paso:not(:last-child)::after {
    content: '';
    width: 28px;
    height: 1px;
    background: var(--mextli-plata);
    margin-left: .6rem;
}

.auditoria-paso-numero {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid var(--mextli-plata);
    color: var(--mextli-texto-secundario);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 700;
}

.auditoria-paso--activo {
    color: var(--mextli-yohualli);
    font-weight: 700;
}

.auditoria-paso--activo .auditoria-paso-numero {
    background: var(--mextli-yohualli);
    border-color: var(--mextli-yohualli);
    color: var(--mextli-blanco);
}

.auditoria-paso--completado {
    color: var(--mextli-yohualli);
}

.auditoria-paso--completado .auditoria-paso-numero {
    background: var(--mextli-blanco);
    border-color: var(--mextli-jade);
    color: var(--mextli-jade);
}

.auditoria-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
    align-items: start;
}

.auditoria-subida-titulo {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    font-size: 1.1rem;
    color: var(--mextli-yohualli);
}

.auditoria-subida-numero {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--mextli-citlalli);
    color: var(--mextli-yohualli);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 700;
}

.auditoria-subida-info {
    margin: .5rem 0 0;
    font-size: .88rem;
    color: var(--mextli-texto-secundario);
}

.auditoria-form {
    margin-top: 1rem;
}

.auditoria-campo-label {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .9rem;
    color: var(--mextli-texto);
    margin-bottom: .4rem;
}

.auditoria-campo-icono {
    color: var(--mextli-meztli);
    display: inline-flex;
}

/* Zona de arrastre: envuelve el <input type=file> real, nunca lo
   oculta -- debe seguir siendo usable con el selector clásico y
   sin JS. El drag&drop es una mejora encima, no un reemplazo. */
.auditoria-zona-archivo {
    margin-top: 1rem;
    padding: 1.2rem 1rem;
    border: 1.5px dashed var(--mextli-plata);
    border-radius: var(--mextli-radio-md);
    text-align: center;
    transition: border-color .15s ease, background .15s ease;
}

.auditoria-zona-archivo--activa {
    border-color: var(--mextli-meztli);
    background: var(--mextli-pergamino);
}

.auditoria-zona-archivo-icono {
    display: flex;
    justify-content: center;
    color: var(--mextli-meztli);
    margin-bottom: .4rem;
}

.auditoria-zona-archivo-texto {
    margin: 0 0 .6rem;
    font-size: .88rem;
    color: var(--mextli-texto-secundario);
}

/* Oculto visualmente, NO con display:none/hidden -- sigue en el árbol de
   accesibilidad, enfocable por teclado, y la <label for> lo dispara sin
   JS. El motivo: la etiqueta nativa del navegador ("Ningún archivo
   seleccionado") se trunca a media palabra en este ancho; el texto
   propio de abajo (#archivo-elegido) la reemplaza por completo. */
.auditoria-input-archivo {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.auditoria-boton-elegir {
    display: inline-block;
    min-height: 44px;
    padding: .65rem 1.1rem;
    cursor: pointer;
}

.auditoria-archivo-elegido {
    margin: .7rem 0 0;
    font-size: .85rem;
    font-weight: 600;
    color: var(--mextli-yohualli);
}

.auditoria-boton-enviar {
    display: block;
    width: 100%;
    margin-top: 1.2rem;
    min-height: 44px;
}

/* Deshabilitado: opacidad + cursor, además del atributo real -- mismo
   criterio que .orientador-entrevista .boton:disabled, nunca solo el
   estilo por defecto del navegador (poco visible). */
.auditoria-boton-enviar:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.auditoria-aviso-privacidad {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 1rem 0 0;
    font-size: .82rem;
    color: var(--mextli-texto-secundario);
}

.auditoria-panel-que-revisa {
    background: var(--mextli-pergamino);
    border-radius: var(--mextli-radio-md);
    padding: 1.5rem;
}

.auditoria-panel-titulo {
    margin: 0 0 1rem;
    font-family: var(--mextli-font-display);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--mextli-yohualli);
}

.auditoria-panel-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.auditoria-panel-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.auditoria-panel-item-numero {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--mextli-yohualli);
    color: var(--mextli-blanco);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .82rem;
    font-weight: 700;
}

.auditoria-panel-item strong {
    display: block;
    color: var(--mextli-yohualli);
    font-size: .92rem;
    margin-bottom: .2rem;
}

.auditoria-panel-item p {
    margin: 0;
    font-size: .84rem;
    color: var(--mextli-texto-secundario);
    line-height: 1.5;
}

.auditoria-anteriores-titulo {
    margin-top: 2rem;
    font-size: 1.15rem;
    color: var(--mextli-yohualli);
}

.auditoria-vacio {
    margin-top: .8rem;
    padding: 1.2rem;
    background: var(--mextli-pergamino);
    border-radius: var(--mextli-radio-md);
    text-align: center;
}

.auditoria-vacio p {
    margin: 0;
    color: var(--mextli-texto-secundario);
    font-size: .92rem;
}

/* Wrapper de scroll horizontal -- .lista (global) no se toca. */
.auditoria-tabla-envoltura {
    margin-top: .8rem;
    overflow-x: auto;
}

.auditoria-tabla {
    min-width: 560px;
}

/* --- Entrega 2: tarjeta del archivo (nombre/área/fecha), visible durante
   el análisis. --- */
.auditoria-archivo-info {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    margin-top: 1.2rem;
}

.auditoria-archivo-info-icono {
    flex: 0 0 auto;
    color: var(--mextli-meztli);
    margin-top: .1rem;
}

.auditoria-archivo-info strong {
    display: block;
    color: var(--mextli-yohualli);
    font-size: .95rem;
}

.auditoria-archivo-info p {
    margin: .2rem 0 0;
    font-size: .85rem;
    color: var(--mextli-texto-secundario);
}

/* --- Pantalla de análisis: mismo mecanismo box-shadow:inset que Chat,
   Constructor, Documentos y Orientador, prefijo propio para no acoplar
   el módulo. Sin barra de etapas ni subpasos falsos -- el Job no reporta
   progreso intermedio (auditar() escribe todo de una vez al final),
   fingirlo sería el mismo error que ya se evitó a propósito en el
   Orientador. El aviso de cerrar la pestaña es una afirmación, no una
   posibilidad ("es posible que puedas" como en Documentos): verificado
   con evidencia real de infraestructura (QUEUE_CONNECTION=database +
   worker meztli-worker corriendo) que el Job es 100% independiente del
   navegador -- a diferencia del Orientador (síncrono), aquí sí se puede
   prometer sin matices. --- */
.auditoria-analizando-envoltura {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
}

.auditoria-analizando {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 480px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem;
    background: var(--mextli-pergamino);
    border-left: 3px solid var(--mextli-citlalli);
    border-radius: var(--mextli-radio-md);
}

.auditoria-luna-indicador {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    margin-bottom: 1rem;
}

.auditoria-luna-fase {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--mextli-plata);
    box-shadow: inset 10px 0 0 0 var(--mextli-citlalli);
    animation: auditoria-fase-lunar 1.8s ease-in-out infinite;
}

.auditoria-luna-fase:nth-child(2) { animation-delay: .25s; }
.auditoria-luna-fase:nth-child(3) { animation-delay: .5s; }

@keyframes auditoria-fase-lunar {
    0%   { box-shadow: inset 10px 0 0 0 var(--mextli-citlalli); }
    50%  { box-shadow: inset 0 0 0 0 var(--mextli-citlalli); }
    100% { box-shadow: inset -10px 0 0 0 var(--mextli-citlalli); }
}

.auditoria-analizando-titulo {
    margin: 0 0 .4rem;
    font-size: 1.02rem;
    color: var(--mextli-yohualli);
}

.auditoria-analizando-texto {
    margin: 0;
    font-size: .9rem;
    color: var(--mextli-texto-secundario);
}

.auditoria-analizando-secundario {
    margin: .75rem 0 0;
    font-size: .82rem;
    color: var(--mextli-texto-secundario);
}

/* Aviso de fallo de conexión del sondeo: mismo patrón que
   .documentos-polling-error (pendiente 18) -- display solo en la
   variante :not([hidden]), nunca en la regla base. Si se declarara
   display:flex en .auditoria-polling-error directamente, empataría en
   especificidad con la hoja de estilos del user-agent para [hidden] y
   el orden de aparición decidiría el ganador -- así, con [hidden]
   presente no hay ninguna regla de autor que compita con display:none. */
.auditoria-polling-error {
    width: 100%;
    max-width: 480px;
    margin: .8rem auto 0;
    align-items: flex-start;
    gap: .6rem;
    text-align: left;
}

.auditoria-polling-error:not([hidden]) {
    display: flex;
}

.auditoria-polling-error-texto {
    margin: 0 0 .5rem;
}

.auditoria-polling-error-boton {
    padding: .45rem 1rem;
    font-size: .9rem;
}

/* --- Estado de error (Entrega 2): icono + Granate en el texto + acción
   clara, no solo una línea de aviso plana. .aviso-error (global) da el
   fondo/borde; aquí se ajusta layout + color de texto a Granate. --- */
.auditoria-error {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    margin-top: 1.2rem;
    color: var(--mextli-granate);
}

.auditoria-error-icono {
    flex-shrink: 0;
    margin-top: .1rem;
    color: currentColor;
}

.auditoria-error-titulo {
    display: block;
    font-size: .98rem;
}

.auditoria-error-texto {
    margin: .3rem 0 .8rem;
    font-size: .9rem;
    color: var(--mextli-texto);
}

.auditoria-error-boton {
    display: inline-block;
}

/* --- Entrega 3: pantalla de resultados. --- */
.auditoria-resultado-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.2rem;
}

.auditoria-resultado-titulo {
    margin: 0;
    font-family: var(--mextli-font-display);
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--mextli-yohualli);
}

.auditoria-resultado-info {
    margin: .3rem 0 0;
    font-size: .85rem;
    color: var(--mextli-texto-secundario);
}

.auditoria-resultado-acciones {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.auditoria-resultado-descargar {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.auditoria-resultado-nueva {
    font-size: .88rem;
    color: var(--mextli-meztli);
}

/* Riesgo global: mismo criterio de .documentos-riesgo -- icono en círculo
   + borde, nunca solo color. alto y critico comparten Granate (la
   etiqueta de texto los distingue); medio es Ámbar solo en icono/borde
   (como texto sobre blanco falla contraste); bajo es Jade; --neutro
   (Yohualli) es el fallback para no_determinado o cualquier valor no
   contemplado -- nunca cae al verde de "bajo" por accidente. */
.auditoria-riesgo {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-top: 1.2rem;
    padding: .7rem 1rem;
    border: 1px solid;
    border-radius: var(--mextli-radio-sm);
    font-size: .95rem;
}

.auditoria-riesgo-icono {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .82rem;
    font-weight: 800;
    line-height: 1;
}

.auditoria-riesgo--alto {
    border-color: var(--mextli-granate);
    color: var(--mextli-granate);
    background: rgba(156, 59, 46, .06);
}

.auditoria-riesgo--medio {
    border-color: var(--mextli-ambar);
    color: var(--mextli-texto);
}

.auditoria-riesgo--medio .auditoria-riesgo-icono {
    color: var(--mextli-ambar);
}

.auditoria-riesgo--bajo {
    border-color: var(--mextli-jade);
    color: var(--mextli-jade);
    background: rgba(46, 110, 94, .06);
}

.auditoria-riesgo--neutro {
    border-color: var(--mextli-yohualli);
    color: var(--mextli-yohualli);
    background: rgba(8, 33, 61, .05);
}

/* Tarjetas de conteo: solo las 2 reales (secciones/hallazgos), con el
   desglose por severidad reutilizando los mismos badges globales. */
.auditoria-conteos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 1.2rem;
}

.auditoria-conteo-tarjeta {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .3rem;
    padding: 1.1rem 1rem;
}

.auditoria-conteo-numero {
    /* Un número grande necesita Inter, no la serif display -- mismo
       criterio que los encabezados de burbuja del Chat/Orientador
       (617c607/51b2100): Cormorant es de trazo muy fino y a este
       tamaño se lee sin peso, no como un dato. */
    font-family: var(--mextli-font-ui);
    font-weight: 700;
    font-size: 2rem;
    color: var(--mextli-yohualli);
    line-height: 1;
}

.auditoria-conteo-texto {
    font-size: .85rem;
    color: var(--mextli-texto-secundario);
}

.auditoria-conteo-desglose {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: .3rem;
}

/* Secciones (ficha/checklist/hallazgos): jerarquía tipográfica propia,
   ninguna hereda ya el <ul style="margin:..."> suelto de antes. */
.auditoria-seccion {
    margin-top: 1.2rem;
}

.auditoria-seccion-titulo {
    /* Mismos valores de Inter/700 ya verificados en burbuja-ia h3/h4
       (Chat, 617c607) y .orientador-diagnostico h3/h4 (Orientador,
       51b2100) -- la serif display se lee gris/sin peso a estos
       tamaños de encabezado de sección. */
    margin: 0 0 .9rem;
    font-family: var(--mextli-font-ui);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--mextli-yohualli);
}

.auditoria-ficha-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.auditoria-ficha-lista strong {
    color: var(--mextli-yohualli);
}

/* Checklist: tarjeta por ítem, no viñeta suelta -- el icono de check/cruz
   además del color de fondo (nunca solo color). */
.auditoria-checklist-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.auditoria-checklist-item {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .7rem .85rem;
    border-radius: var(--mextli-radio-sm);
    background: var(--mextli-pergamino);
}

.auditoria-checklist-icono {
    flex: 0 0 auto;
    font-weight: 700;
    margin-top: .05rem;
}

.auditoria-checklist-item--presente .auditoria-checklist-icono {
    color: var(--mextli-jade);
}

.auditoria-checklist-item--ausente .auditoria-checklist-icono {
    color: var(--mextli-granate);
}

.auditoria-checklist-item strong {
    display: block;
    color: var(--mextli-yohualli);
    font-size: .92rem;
}

.auditoria-checklist-item p {
    margin: .2rem 0 0;
    font-size: .87rem;
    color: var(--mextli-texto-secundario);
}

/* Hallazgos: tarjeta propia por hallazgo, borde izquierdo del color de
   severidad (redundante con el badge, nunca la única señal) y la
   recomendación en su propio bloque, separada del detalle. */
.auditoria-hallazgos-lista {
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

.auditoria-hallazgo {
    padding: .9rem 1rem;
    border: 1px solid var(--mextli-plata);
    border-left: 3px solid var(--mextli-plata);
    border-radius: var(--mextli-radio-sm);
}

.auditoria-hallazgo--alto {
    border-left-color: var(--mextli-granate);
}

.auditoria-hallazgo--medio {
    border-left-color: var(--mextli-ambar);
}

.auditoria-hallazgo--bajo {
    border-left-color: var(--mextli-jade);
}

.auditoria-hallazgo-encabezado {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}

.auditoria-hallazgo-encabezado strong {
    color: var(--mextli-yohualli);
    font-size: .95rem;
}

.auditoria-hallazgo-detalle {
    margin: .55rem 0 0;
    font-size: .92rem;
    line-height: 1.55;
}

.auditoria-hallazgo-recomendacion {
    margin-top: .7rem;
    padding: .6rem .8rem;
    background: var(--mextli-pergamino);
    border-radius: var(--mextli-radio-sm);
}

.auditoria-hallazgo-recomendacion strong {
    display: block;
    font-size: .8rem;
    color: var(--mextli-meztli);
    margin-bottom: .2rem;
}

.auditoria-hallazgo-recomendacion p {
    margin: 0;
    font-size: .88rem;
    color: var(--mextli-texto);
}

.auditoria-aviso-legal {
    margin-top: 1.2rem;
    font-size: .85rem;
    color: var(--mextli-texto-secundario);
}

/* Análisis adversarial: mismo criterio de badges de severidad que
   hallazgos (aunque los valores propios sean otros -- critico/
   importante/menor), sin los hex sueltos que tenía antes. */
.auditoria-adversarial {
    margin-top: 1.2rem;
    border-left: 4px solid var(--mextli-granate);
}

.auditoria-adversarial-titulo {
    margin: 0;
    font-size: 1.1rem;
    color: var(--mextli-yohualli);
}

.auditoria-adversarial-intro {
    margin: .4rem 0 0;
    font-size: .9rem;
    color: var(--mextli-texto-secundario);
}

.auditoria-adversarial-punto {
    margin-top: .8rem;
    padding: .7rem .9rem;
    border: 1px solid var(--mextli-plata);
    border-left: 3px solid var(--mextli-plata);
    border-radius: var(--mextli-radio-sm);
}

.auditoria-adversarial-punto--critico {
    border-left-color: var(--mextli-granate);
}

.auditoria-adversarial-punto--importante {
    border-left-color: var(--mextli-ambar);
}

.auditoria-adversarial-punto--menor {
    border-left-color: var(--mextli-jade);
}

.auditoria-adversarial-punto strong {
    margin-left: .4rem;
    color: var(--mextli-yohualli);
}

.auditoria-adversarial-detalle {
    margin: .3rem 0 0;
    font-size: .92rem;
}

.auditoria-adversarial-fundamento {
    margin: .35rem 0 0;
    font-size: .85rem;
    color: var(--mextli-texto-secundario);
}

.auditoria-adversarial-remedio {
    margin: .3rem 0 0;
    font-size: .88rem;
}

.auditoria-adversarial-vista-cliente {
    margin-top: 1rem;
    white-space: pre-wrap;
    line-height: 1.6;
    font-size: .92rem;
}

@media (prefers-reduced-motion: reduce) {
    .auditoria-zona-archivo {
        transition: none;
    }

    .auditoria-luna-fase {
        animation: none;
    }
}

/* =========================================================
   RESPONSIVE — AUDITORÍA
   ========================================================= */
@media (max-width: 1099px) {
    .auditoria-layout {
        grid-template-columns: 1fr;
    }

    .auditoria-panel-que-revisa {
        margin-top: 1.5rem;
    }
}

@media (max-width: 699px) {
    .auditoria-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .auditoria-pasos {
        flex-wrap: wrap;
        row-gap: .5rem;
    }

    .auditoria-paso-texto {
        display: none;
    }

    .auditoria-resultado-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .auditoria-conteos {
        grid-template-columns: 1fr;
    }

    .auditoria-tabla {
        min-width: 480px;
    }
}


/* =========================================================
   BIBLIOTECA — resources/views/biblioteca/index.blade.php

   Entrega 1 del rediseño (catálogo). Encabezado propio, no
   .banner-despacho: mismo criterio que Orientador/Auditoría -- el
   mockup pide icono en círculo, no el formato foto-hero del banner
   compartido (que sigue usándolo Chat/Constructor, sin tocar). No
   modifica .tarjeta/.boton/.lista/.badge*/.enlace/.campo-select
   globales -- donde hace falta variar una de esas, selector
   contextual o clase propia, nunca la regla global.
   ========================================================= */

.biblioteca-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.4rem;
}

.biblioteca-header-icono {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--mextli-yohualli);
    color: var(--mextli-blanco);
    display: flex;
    align-items: center;
    justify-content: center;
}

.biblioteca-header-titulo {
    margin: 0;
    font-family: var(--mextli-font-display);
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--mextli-yohualli);
}

.biblioteca-header-subtitulo {
    margin: .3rem 0 0;
    font-size: .92rem;
    color: var(--mextli-texto-secundario);
    max-width: 680px;
}

/* Los 3 modos: mismo texto ya verificado contra ChatService.php:14-17
   (docblock real del comportamiento), solo se les da identidad visual
   -- borde+icono por acento, nunca el acento como color de texto (Oro
   Citlalli y Ámbar fallan AA sobre blanco, confirmado). */
.biblioteca-modos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.biblioteca-modo {
    padding: 1.2rem;
    border-left: 3px solid var(--mextli-plata);
}

.biblioteca-modo--online {
    border-left-color: var(--mextli-meztli);
}

.biblioteca-modo--online .biblioteca-modo-icono {
    color: var(--mextli-meztli);
}

.biblioteca-modo--hibrido {
    border-left-color: var(--mextli-ambar);
}

.biblioteca-modo--hibrido .biblioteca-modo-icono {
    color: var(--mextli-ambar);
}

.biblioteca-modo--tlanextia {
    border-left-color: var(--mextli-jade);
}

.biblioteca-modo--tlanextia .biblioteca-modo-icono {
    color: var(--mextli-jade);
}

.biblioteca-modo-icono {
    margin-bottom: .5rem;
}

.biblioteca-modo-titulo {
    margin: 0;
    font-size: 1.05rem;
    color: var(--mextli-yohualli);
}

.biblioteca-modo-texto {
    margin: .5rem 0 0;
    font-size: .9rem;
    line-height: 1.55;
    color: var(--mextli-texto-secundario);
}

/* Conteos: un dato principal que domina (validadas) + desglose por
   tipo como información secundaria (4 valores tal cual, sin fusionar
   "ley" con "ley_federal"/"NOM" -- el dato no distingue con certeza si
   esas 48 filas son federales o estatales, decisión explícita del
   usuario). La tarjeta de pendientes es condicional (Blade) y solo
   aparece cuando hay algo que contar; mismo criterio que Documentos
   (pendiente 65): sin ceros ocupando espacio. */
.biblioteca-conteos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 1.4rem;
}

.biblioteca-conteo {
    padding: 1rem 1.2rem;
}

.biblioteca-conteo-numero {
    display: block;
    font-family: var(--mextli-font-ui);
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 1.2;
    color: var(--mextli-yohualli);
}

/* Tarjeta destacada: número principal más grande y acento de marca,
   para que domine visualmente sobre el desglose secundario. */
.biblioteca-conteo--destacado {
    border-left: 3px solid var(--mextli-citlalli);
}

.biblioteca-conteo--destacado .biblioteca-conteo-numero {
    font-size: 2.3rem;
}

.biblioteca-conteo-texto {
    font-size: .82rem;
    color: var(--mextli-texto-secundario);
}

.biblioteca-conteo--tipo .biblioteca-conteo-texto {
    display: block;
    margin-bottom: .5rem;
}

.biblioteca-conteo-tipo-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .85rem;
    color: var(--mextli-texto-secundario);
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.biblioteca-conteo-tipo-lista strong {
    color: var(--mextli-texto);
    font-weight: 700;
}

/* Buscador + filtros -- mismo patrón ya corregido en Documentos
   (rediseno/documentos-listado, commits 1f61105/433f720): alto/ancho
   explícitos en el input (nunca depender del stretch implícito de un
   layout padre), lupa como <svg> real en un contenedor
   position:relative (nunca background-image sobre type="search", esa
   combinación fue la causa real de la regresión de aquel módulo). */
.biblioteca-controles {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    padding: 1rem 1.2rem;
    margin-bottom: 1.4rem;
}

@media (min-width: 700px) {
    .biblioteca-controles {
        flex-direction: row;
        align-items: center;
    }

    .biblioteca-buscador-envoltura {
        flex: 3 1 280px;
    }

    .biblioteca-filtro-select {
        flex: 1 1 160px;
        max-width: 220px;
    }
}

.biblioteca-buscador-envoltura {
    position: relative;
    display: flex;
    align-items: center;
}

.biblioteca-buscador-icono {
    position: absolute;
    left: .95rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--mextli-texto-secundario);
    pointer-events: none;
}

.biblioteca-buscador {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 44px;
    padding: 0 1rem 0 2.5rem;
    font-family: var(--mextli-font-ui);
    font-size: .92rem;
    text-align: left;
}

.biblioteca-buscador::placeholder {
    color: var(--mextli-texto-secundario);
}

.biblioteca-buscador::-webkit-search-cancel-button {
    -webkit-appearance: none;
    display: none;
}

.biblioteca-filtro-select {
    height: 44px;
    padding: 0 .9rem;
    font-family: var(--mextli-font-ui);
    font-size: .92rem;
}

/* Las 2 secciones (validadas / pendientes) -- separadas a propósito,
   ver decisión del usuario: no se oculta nada, pero nadie confunde
   una fuente pendiente con una validada. */
.biblioteca-seccion {
    margin-top: 2rem;
}

.biblioteca-seccion-titulo {
    margin: 0;
    font-size: 1.15rem;
    color: var(--mextli-yohualli);
}

.biblioteca-seccion-explicacion {
    margin: .4rem 0 0;
    font-size: .88rem;
    color: var(--mextli-texto-secundario);
    max-width: 680px;
}

.biblioteca-seccion-conteo {
    margin: .3rem 0 1rem;
    font-size: .85rem;
    color: var(--mextli-texto-secundario);
}

.biblioteca-seccion-vacio {
    font-size: .9rem;
    color: var(--mextli-texto-secundario);
}

/* Wrapper de scroll -- .lista en sí no se toca, mismo patrón que
   .auditoria-tabla-envoltura/.auditoria-tabla. Sin nowrap/ellipsis en
   el nombre: pedido explícito, nombres largos deben envolver, nunca
   truncar a media palabra. */
.biblioteca-tabla-envoltura {
    overflow-x: auto;
}

.biblioteca-tabla {
    min-width: 560px;
}

.biblioteca-tabla-th-icono {
    width: 32px;
}

.biblioteca-fila-icono {
    color: var(--mextli-texto-secundario);
}

.biblioteca-fila-nombre {
    font-weight: 600;
    color: var(--mextli-yohualli);
    white-space: normal;
}

/* Selector contextual, no toca .badge-verde/.badge-gris globales --
   mismos valores de color que ya heredan hoy (mextli.css los define
   después del <style> legacy del layout y gana ahí), esto es un
   blindaje explícito pedido por el usuario contra cualquier cambio
   futuro de ese orden de carga, no un fix de un bug activo. */
.biblioteca-tabla .badge-verde {
    background: var(--mextli-jade);
}

.biblioteca-tabla .badge-gris {
    background: #7B8490;
}

/* "Pendiente" en vez de "Pendiente de validación" -- el encabezado de
   la sección ya da el contexto completo, no hace falta repetirlo en
   cada una de las 62 filas. nowrap explícito, no solo confiar en que
   el texto corto quepa por sí mismo. */
.biblioteca-tabla .badge {
    white-space: nowrap;
}

/* Enlace a la fuente oficial -- vivió en la columna "Oficial" de cada
   fila hasta la Entrega 2 (visor); ahora es la acción secundaria del
   encabezado de biblioteca/show.blade.php, la fila ya no tiene enlace
   propio (toda la fila navega al visor, ver .biblioteca-fila[data-href]
   más abajo). Azul Meztli, no Oro Citlalli: ese acento falla AA como
   texto legible (3.18:1 sobre blanco, mismo límite ya aplicado a los 3
   modos de la Entrega 1), y aquí sí es texto funcional, no solo
   borde/icono. Ícono de salida (flecha fuera de recuadro) para que se
   lea como abandonar el sitio. Clase propia, no toca .enlace global
   (color: var(--terracota), usado en todo el sistema). */
.biblioteca-enlace-oficial {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: var(--mextli-meztli);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 600;
    white-space: nowrap;
}

.biblioteca-enlace-oficial:hover {
    text-decoration: underline;
}

/* Fila clickeable hacia el visor (Entrega 2), mismo criterio de
   degradación del resto del módulo: el <a> real vive en el nombre
   (funciona sin JS, con teclado, con lector de pantalla); el resto de
   la fila navega por JS delegando a data-href (ver el <script> de
   abajo), sin duplicar el destino. */
.biblioteca-fila[data-href] {
    cursor: pointer;
}

.biblioteca-fila[data-href]:hover {
    background: var(--mextli-pergamino);
}

.biblioteca-fila-enlace {
    color: inherit;
    text-decoration: none;
}

.biblioteca-fila-enlace:hover {
    text-decoration: underline;
}

.biblioteca-sin-resultados {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--mextli-texto-secundario);
}

.biblioteca-sin-resultados:not([hidden]) {
    display: flex;
}

.biblioteca-limpiar-boton {
    font-family: var(--mextli-font-ui);
    font-size: .85rem;
    font-weight: 600;
    padding: .4rem 1rem;
    border-radius: var(--mextli-radio-sm);
    border: 1px solid var(--mextli-citlalli);
    background: var(--mextli-blanco);
    color: var(--mextli-yohualli);
    cursor: pointer;
}

.biblioteca-limpiar-boton:hover {
    background: var(--mextli-pergamino);
}

@media (max-width: 699px) {
    .biblioteca-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .biblioteca-tabla {
        min-width: 480px;
    }
}

/* Visor de artículos (Entrega 2, biblioteca/show.blade.php). */
.biblioteca-visor-volver {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: 1.2rem;
    color: var(--mextli-texto-secundario);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 600;
}

.biblioteca-visor-volver:hover {
    color: var(--mextli-yohualli);
}

.biblioteca-visor-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.2rem;
    margin-bottom: 1.6rem;
}

.biblioteca-visor-titulo {
    font-family: var(--mextli-font-ui);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--mextli-yohualli);
    margin: 0 0 .4rem;
}

.biblioteca-visor-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    color: var(--mextli-texto-secundario);
    font-size: .9rem;
}

.biblioteca-visor-oficial {
    flex-shrink: 0;
}

.biblioteca-visor-paginacion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 1.4rem 0;
}

.biblioteca-visor-paginacion-boton {
    font-family: var(--mextli-font-ui);
    font-size: .85rem;
    font-weight: 600;
    padding: .4rem 1rem;
    border-radius: var(--mextli-radio-sm);
    border: 1px solid var(--mextli-citlalli);
    background: var(--mextli-blanco);
    color: var(--mextli-yohualli);
    text-decoration: none;
}

.biblioteca-visor-paginacion-boton:hover {
    background: var(--mextli-pergamino);
}

.biblioteca-visor-paginacion-texto {
    font-size: .85rem;
    color: var(--mextli-texto-secundario);
}

.biblioteca-visor-articulos {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

/* Cada artículo en su propia tarjeta blanca (.tarjeta) -- antes el
   texto flotaba directo sobre el fondo gris, sin leerse como
   documento. El espacio entre tarjetas ya separa un artículo de otro,
   no hace falta borde/divisor adicional. */
.biblioteca-visor-articulo {
    padding: 1.4rem 1.6rem;
}

/* La serif display global (h1/h2/h3, Cormorant Garamond) se lee gris
   claro a este tamaño -- mismo fix ya aplicado en Chat/Orientador/
   Auditoría para encabezados dentro de contenido dinámico largo. */
.biblioteca-visor-etiqueta {
    font-family: var(--mextli-font-ui);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--mextli-yohualli);
    margin: 0 0 .6rem;
}

/* Texto legal: ancho de línea cómodo (~70ch), interlineado generoso
   dentro de cada párrafo. Párrafos reales (ver $parrafos en la vista),
   no white-space:pre-line -- ese enfoque hacía que cada salto de línea
   del PDF original (que corta a media frase, no en límites de párrafo)
   heredara el mismo interlineado que un párrafo completo, lo que se
   leía como demasiado aire. El margen entre <p> se controla aparte del
   interlineado, mucho más angosto que una línea completa. Siempre
   {{ }} por párrafo en la vista, nunca {!! !!}. */
.biblioteca-visor-cuerpo {
    max-width: 70ch;
    font-size: 1.02rem;
    line-height: 1.75;
    color: var(--mextli-texto);
}

.biblioteca-visor-cuerpo p {
    margin: 0 0 .7em;
}

.biblioteca-visor-cuerpo p:last-child {
    margin-bottom: 0;
}

@media (max-width: 699px) {
    .biblioteca-visor-header {
        flex-direction: column;
    }
}

/* =========================================================
   CONSTRUCTOR PROCESAL -- Entrega 1 (procesal/index.blade.php)
   ========================================================= */

.procesal-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.6rem;
}

.procesal-header-icono {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--mextli-yohualli);
    color: var(--mextli-blanco);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.procesal-header-titulo {
    font-family: var(--mextli-font-ui);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--mextli-yohualli);
    margin: 0 0 .3rem;
}

.procesal-header-subtitulo {
    color: var(--mextli-texto-secundario);
    font-size: .92rem;
    max-width: 640px;
    margin: 0;
}

.procesal-seccion {
    margin-top: 1.8rem;
}

.procesal-seccion-titulo {
    font-family: var(--mextli-font-ui);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--mextli-yohualli);
    margin: 0 0 .9rem;
}

.procesal-seccion-vacio {
    color: var(--mextli-texto-secundario);
}

.procesal-rutas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.procesal-ruta {
    padding: 1.2rem 1.3rem;
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

/* Bloqueada por plan: el estado se lee ANTES de llegar al botón --
   borde Ámbar (mismo color que su propio badge, nunca como texto) y
   fondo apagado, para que no tenga el mismo peso visual que una ruta
   disponible. El CTA de estas ya dice "Solicitar", nunca "Iniciar". */
.procesal-ruta--bloqueada {
    border-left: 3px solid var(--mextli-ambar);
    background: var(--mextli-pergamino);
}

.procesal-ruta-encabezado {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
}

.procesal-ruta-icono {
    flex-shrink: 0;
}

.procesal-ruta-nombre {
    font-family: var(--mextli-font-ui);
    font-weight: 700;
    font-size: 1rem;
    color: var(--mextli-yohualli);
    margin: 0 0 .15rem;
}

.procesal-ruta-materia {
    font-size: .82rem;
    color: var(--mextli-texto-secundario);
    margin: 0;
}

.procesal-ruta-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.procesal-ruta-descripcion {
    font-size: .88rem;
    color: var(--mextli-texto-secundario);
    margin: 0;
    flex-grow: 1;
}

.procesal-ruta-form {
    margin: 0;
}

.procesal-ruta-form .boton {
    width: 100%;
    margin: 0;
}

.procesal-expedientes {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.procesal-expediente-fila {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 14px 16px;
    background: var(--mextli-blanco);
    border: 1px solid rgba(200, 205, 212, .55);
    border-radius: var(--mextli-radio-md);
}

.procesal-expediente-icono {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--mextli-radio-sm);
    background: var(--mextli-yohualli);
    color: var(--mextli-blanco);
    display: flex;
    align-items: center;
    justify-content: center;
}

.procesal-expediente-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.procesal-expediente-titulo {
    font-weight: 700;
    color: var(--mextli-yohualli);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.procesal-expediente-ruta {
    font-size: .82rem;
    color: var(--mextli-texto-secundario);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.procesal-expediente-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.procesal-expediente-fecha {
    font-size: .78rem;
    color: var(--mextli-texto-secundario);
    white-space: nowrap;
}

.procesal-expediente-badge-punto {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
    margin-right: .35rem;
    vertical-align: middle;
}

/* .enlace no tiene ninguna regla real en este archivo (solo aparece
   citada en comentarios de otros módulos) -- estilo propio en vez de
   depender de una clase fantasma. Azul Meztli, no Oro/Ámbar: ambos
   fallan AA como texto legible sobre blanco. */
.procesal-expediente-acciones {
    display: flex;
    gap: .8rem;
    flex-shrink: 0;
}

.procesal-expediente-acciones a {
    font-size: .85rem;
    font-weight: 600;
    color: var(--mextli-meztli);
    text-decoration: none;
    white-space: nowrap;
}

.procesal-expediente-acciones a:hover {
    text-decoration: underline;
}

@media (max-width: 699px) {
    .procesal-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .procesal-expediente-meta,
    .procesal-expediente-acciones {
        flex-basis: 100%;
        justify-content: space-between;
    }
}

/* =========================================================
   CONSTRUCTOR PROCESAL -- Entrega 2 (wizard, 5 etapas)
   ========================================================= */

.procesal-wizard-meta {
    margin-top: .3rem;
    font-size: .85rem;
    color: var(--mextli-texto-secundario);
}

.procesal-texto-secundario {
    color: var(--mextli-texto-secundario);
}

.procesal-subtitulo {
    margin-top: 1.2rem;
    color: var(--mextli-yohualli);
}

.procesal-requerido {
    color: var(--mextli-granate);
}

/* Indicador de 5 pasos, mismo mecanismo que .auditoria-pasos (círculo+
   número, línea conectora, completado=check en borde jade, activo=
   relleno) -- con una diferencia real: aquí los pasos completados SÍ
   navegan (irA() ya lo permitía desde antes de este rediseño), así que
   siguen siendo <button>. Un paso futuro es un <span> sin wire:click,
   no un botón deshabilitado -- estructuralmente no responde al clic,
   no solo "se ve apagado". */
.procesal-pasos {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
    margin: 1rem 0 0;
    padding: 0;
}

.procesal-paso {
    display: flex;
    align-items: center;
}

.procesal-paso:not(:last-child)::after {
    content: '';
    width: 28px;
    height: 1px;
    background: var(--mextli-plata);
    margin-left: .6rem;
}

.procesal-paso-boton {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: inherit;
    font-size: .85rem;
    color: var(--mextli-texto-secundario);
    background: none;
    border: none;
    padding: .25rem .4rem;
    border-radius: var(--mextli-radio-sm);
    cursor: pointer;
}

.procesal-paso-boton:hover {
    background: var(--mextli-pergamino);
}

.procesal-paso-boton--inerte {
    cursor: default;
    opacity: .5;
}

.procesal-paso-boton--inerte:hover {
    background: none;
}

.procesal-paso-numero {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid var(--mextli-plata);
    color: var(--mextli-texto-secundario);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 700;
}

.procesal-paso--activo .procesal-paso-boton {
    color: var(--mextli-yohualli);
    font-weight: 700;
}

.procesal-paso--activo .procesal-paso-numero {
    background: var(--mextli-yohualli);
    border-color: var(--mextli-yohualli);
    color: var(--mextli-blanco);
}

.procesal-paso--completado .procesal-paso-boton {
    color: var(--mextli-yohualli);
}

.procesal-paso--completado .procesal-paso-numero {
    background: var(--mextli-blanco);
    border-color: var(--mextli-jade);
    color: var(--mextli-jade);
}

.procesal-arbol-paso {
    display: flex;
    gap: .9rem;
    margin-top: 1.4rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--mextli-plata);
}

.procesal-arbol-paso:first-child {
    margin-top: 1rem;
    padding-top: 0;
    border-top: none;
}

/* Número de paso ("01", "02"...) -- mismo tratamiento en el árbol y en
   las narrativas (.procesal-narrativa-numero lo reutiliza tal cual). */
.procesal-arbol-numero {
    flex-shrink: 0;
    font-family: var(--mextli-font-ui);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--mextli-plata);
    line-height: 1.4;
    min-width: 1.6rem;
}

.procesal-arbol-contenido {
    flex: 1 1 auto;
    min-width: 0;
}

.procesal-arbol-pregunta {
    display: block;
    color: var(--mextli-yohualli);
}

/* Nota informativa (💡 ayuda del árbol, 📎 nota de procedencia de un
   campo) -- ícono propio en vez de emoji, mismo criterio que el resto
   del sitio. Tamaño reducido a propósito (Entrega B): en la rejilla de
   2 columnas del Expediente, el texto completo de la nota + cita legal
   se queda tal cual (nunca se recorta -- es información jurídica, no
   decorativa) pero ocupa menos alto por línea para no romper el ritmo
   de las 2 columnas contra los campos que no tienen nota. */
.procesal-nota-info {
    display: flex;
    align-items: flex-start;
    gap: .35rem;
    font-size: .78rem;
    line-height: 1.4;
    color: var(--mextli-texto-secundario);
    margin: .25rem 0 .35rem;
}

.procesal-nota-info-icono {
    flex-shrink: 0;
    margin-top: .15rem;
    color: var(--mextli-meztli);
}

/* La explicación y la cita legal (si existe) viven en un solo span --
   evita que la cita se separe como columna aparte cuando la
   explicación es larga y ocupa más de una línea. */
.procesal-nota-info-texto {
    min-width: 0;
}

/* Opciones del árbol: botones anchos apilados, no pastillas en línea --
   la marcada lleva check + relleno, nunca solo un cambio de color
   (mismo principio ya aplicado en el Orientador). */
.procesal-arbol-opciones {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: .7rem;
}

.procesal-arbol-opcion {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    text-align: left;
    padding: .75rem 1rem;
    border: 1.5px solid var(--mextli-plata);
    border-radius: var(--mextli-radio-sm);
    background: var(--mextli-blanco);
    color: var(--mextli-texto);
    font-family: inherit;
    font-size: .95rem;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.procesal-arbol-opcion:hover {
    border-color: var(--mextli-citlalli);
}

.procesal-arbol-opcion--activa {
    border-color: var(--mextli-yohualli);
    background: var(--mextli-pergamino);
    font-weight: 600;
    color: var(--mextli-yohualli);
}

.procesal-arbol-opcion-check {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--mextli-plata);
    display: flex;
    align-items: center;
    justify-content: center;
}

.procesal-arbol-opcion--activa .procesal-arbol-opcion-check {
    border-color: var(--mextli-yohualli);
    background: var(--mextli-yohualli);
    color: var(--mextli-blanco);
}

.procesal-confirmacion {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    font-size: .85rem;
    color: var(--mextli-jade);
    margin-top: .6rem;
    background: rgba(46, 110, 94, .08);
    padding: .55rem .8rem;
    border-radius: 4px;
}

.procesal-confirmacion-icono {
    flex-shrink: 0;
    margin-top: .15rem;
}

/* Checklist de procedibilidad: tarjeta real por ítem (antes un <div>
   con borde suelto), con el badge "Requisito clave" vs "Informativo"
   explícito en los dos casos -- antes solo el bloqueante tenía badge,
   así que el contraste dependía de que faltara uno, no de que
   estuvieran los dos. */
.procesal-checklist-item {
    margin-top: 1rem;
    padding: .9rem 1rem;
}

.procesal-checklist-item--clave {
    border-left: 3px solid var(--mextli-ambar);
}

.procesal-checklist-label {
    margin: 0;
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    cursor: pointer;
}

.procesal-checklist-checkbox {
    margin-top: .25rem;
    flex-shrink: 0;
    /* Objetivo táctil >=24px propio + el <label> completo también es
       clickeable (envuelve todo el contenido), así que el área real de
       toque es la tarjeta entera, no solo el cuadrito. */
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.procesal-checklist-encabezado {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

/* Explicación de incumplimiento -- antes ➜ dorado como texto (falla AA,
   mismo límite que Oro/Ámbar en cualquier otro lado del sitio). El
   ícono de alerta es la señal, no el color: texto en gris normal. */
.procesal-aviso-inline {
    display: inline-flex;
    align-items: flex-start;
    gap: .35rem;
    color: var(--mextli-texto);
    font-size: .85rem;
}

.procesal-aviso-inline svg {
    flex-shrink: 0;
    margin-top: .1rem;
    color: var(--mextli-ambar);
}

.procesal-boton-volver {
    background: var(--mextli-texto-secundario);
}

.procesal-boton-volver:hover {
    background: var(--mextli-yohualli);
}

/* El bloque más importante del wizard: avisa que el semáforo va a
   salir en rojo. Clase propia en vez de .aviso-error -- esa vive en el
   <style> de layouts/meztli.blade.php con hex de la paleta vieja
   (#f7e6e6/#d3a5a5/#7d2727), fuera de alcance tocar el layout
   compartido. Ícono de alerta grande (no solo color) para que se lea
   como advertencia seria, no como una nota más. */
.procesal-alerta-bloqueante {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    margin-top: .8rem;
    padding: 1rem 1.1rem;
    background: rgba(156, 59, 46, .07);
    border: 1px solid var(--mextli-granate);
    border-radius: var(--mextli-radio-sm);
    color: var(--mextli-texto);
}

.procesal-alerta-bloqueante-icono {
    flex-shrink: 0;
    color: var(--mextli-granate);
    margin-top: .1rem;
}

.procesal-alerta-bloqueante-lista {
    margin: .5rem 0 0 1.2rem;
    font-size: .9rem;
}

.procesal-alerta-bloqueante-nota {
    margin-top: .5rem;
    font-size: .85rem;
    color: var(--mextli-texto-secundario);
}

/* "Datos del expediente" en Revisión final: 2 columnas, etiqueta y
   valor diferenciados (etiqueta chica arriba, valor debajo) -- no
   etiqueta/valor lado a lado, que en la mitad del ancho aprieta
   demasiado con valores largos (domicilios, montos). */
.procesal-resumen {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .8rem 1.5rem;
    margin-top: .6rem;
}

.procesal-resumen-fila {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--mextli-plata);
    font-size: .9rem;
}

.procesal-resumen-etiqueta {
    font-size: .78rem;
    color: var(--mextli-texto-secundario);
}

.procesal-resumen-valor {
    color: var(--mextli-texto);
    font-weight: 600;
    word-break: break-word;
}

/* "Camino elegido": una tarjeta chica por pregunta respondida, con
   check -- reemplaza la lista etiqueta/valor de la Entrega 2 (esa se
   queda solo para "Datos del expediente", que sí es un listado largo
   de pares). */
.procesal-camino-tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: .7rem;
    margin-top: .6rem;
}

.procesal-camino-tarjeta {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .7rem .9rem;
    background: var(--mextli-pergamino);
    border-radius: var(--mextli-radio-sm);
}

.procesal-camino-tarjeta-icono {
    flex-shrink: 0;
    margin-top: .15rem;
    color: var(--mextli-jade);
}

.procesal-camino-tarjeta-pregunta {
    display: block;
    font-size: .78rem;
    color: var(--mextli-texto-secundario);
}

.procesal-camino-tarjeta-respuesta {
    display: block;
    font-weight: 600;
    color: var(--mextli-yohualli);
}

/* Contraparte verde de .procesal-alerta-bloqueante: mismo tamaño de
   ícono y mismo peso visual, para que "todo listo" se lea con la misma
   seriedad que "falta algo", no como una nota al margen. */
.procesal-alerta-completo {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: .8rem;
    padding: .8rem 1.1rem;
    background: rgba(46, 110, 94, .07);
    border: 1px solid var(--mextli-jade);
    border-radius: var(--mextli-radio-sm);
    color: var(--mextli-yohualli);
    font-size: .92rem;
}

.procesal-alerta-completo svg {
    flex-shrink: 0;
    color: var(--mextli-jade);
}

/* ---------- Etapa Expediente: rejilla de 2 columnas ---------- */

.procesal-leyenda-requerido {
    font-size: .8rem;
    color: var(--mextli-texto-secundario);
    margin-top: .3rem;
}

.procesal-seccion-campos {
    margin-top: 1.6rem;
}

.procesal-seccion-campos:first-of-type {
    margin-top: 1.2rem;
}

.procesal-seccion-campos-titulo {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--mextli-font-ui);
    font-weight: 700;
    font-size: .95rem;
    color: var(--mextli-yohualli);
    margin: 0 0 .9rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--mextli-plata);
}

.procesal-seccion-campos-titulo svg {
    flex-shrink: 0;
    color: var(--mextli-citlalli);
}

/* 2 columnas para campos cortos (texto/fecha/moneda/número); el
   textarea es la excepción, siempre ancho completo
   (.procesal-campo-item--ancho, grid-column:1/-1). align-items:start +
   sin altura de fila forzada -- un campo con nota de procedencia larga
   queda más alto que su vecino sin romper el resto de la rejilla. */
.procesal-campos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.1rem 1.4rem;
    align-items: start;
}

.procesal-campo-item--ancho {
    grid-column: 1 / -1;
}

@media (max-width: 699px) {
    .procesal-campos-grid {
        grid-template-columns: 1fr;
    }
}

/* Símbolo de moneda: puro adorno CSS (::before), nunca forma parte del
   valor -- el campo sigue siendo type="text" con el número limpio, el
   "$" solo se dibuja encima con padding-left en el input. */
.procesal-input-moneda {
    position: relative;
}

.procesal-input-moneda::before {
    content: '$';
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--mextli-texto-secundario);
    font-weight: 600;
    pointer-events: none;
}

.procesal-input-moneda .procesal-campo {
    padding-left: 1.75rem;
}

/* Narrativas numeradas -- mismo número/columna que el árbol
   (.procesal-arbol-numero/.procesal-arbol-contenido, reutilizados). */
.procesal-narrativa {
    display: flex;
    gap: .9rem;
    margin-top: 1.4rem;
}

.procesal-narrativa:first-child {
    margin-top: 1rem;
}

/* .enlace (definido en layouts/meztli.blade.php, no en este archivo)
   usa var(--terracota) = #c97c2c como color de texto -- mismo problema
   de contraste AA ya corregido en Biblioteca para Oro/Ámbar, así que
   no se hereda aquí. Azul Meztli. */
.procesal-enlace {
    color: var(--mextli-meztli);
    font-weight: 600;
    text-decoration: none;
}

.procesal-enlace:hover {
    text-decoration: underline;
}

/* Estado "generando" del ensamblador -- misma mecánica de fase lunar que
   Chat/Constructor/Auditoría/Orientador (box-shadow:inset animado, sin
   rebote, prefers-reduced-motion respetado). Quedó fuera en la Entrega
   2 original, se agrega aparte. */
.procesal-generando {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 480px;
    margin: 1rem auto 0;
    padding: 1.5rem 1.25rem;
    background: var(--mextli-pergamino);
    border-left: 3px solid var(--mextli-citlalli);
    border-radius: var(--mextli-radio-md);
}

.procesal-luna-indicador {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    margin-bottom: 1rem;
}

.procesal-luna-fase {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--mextli-plata);
    box-shadow: inset 10px 0 0 0 var(--mextli-citlalli);
    animation: procesal-fase-lunar 1.8s ease-in-out infinite;
}

.procesal-luna-fase:nth-child(2) { animation-delay: .25s; }
.procesal-luna-fase:nth-child(3) { animation-delay: .5s; }

@keyframes procesal-fase-lunar {
    0%   { box-shadow: inset 10px 0 0 0 var(--mextli-citlalli); }
    50%  { box-shadow: inset 0 0 0 0 var(--mextli-citlalli); }
    100% { box-shadow: inset -10px 0 0 0 var(--mextli-citlalli); }
}

@media (prefers-reduced-motion: reduce) {
    .procesal-luna-fase {
        animation: none;
    }
}

.procesal-generando-titulo {
    margin: 0 0 .4rem;
    font-size: 1.02rem;
    color: var(--mextli-yohualli);
}

.procesal-generando-texto {
    margin: 0;
    font-size: .9rem;
    color: var(--mextli-texto-secundario);
}

.procesal-generando-secundario {
    margin: .75rem 0 0;
    font-size: .82rem;
    color: var(--mextli-texto-secundario);
}

/* Validación de formato (pendiente 71, Entrega A -- solo lo funcional;
   el tratamiento visual completo de los campos es la Entrega B). Los
   <input> de este wizard no traen clase .campo hoy (solo el textarea),
   así que el borde va autocontenido, no depende de heredar nada. */
.campo--invalido {
    border: 1.5px solid var(--mextli-granate) !important;
    border-radius: 4px;
}

/* Los <input> de texto/fecha/moneda del wizard no tenían ninguna clase
   propia -- heredaban el ancho por defecto del navegador, que para
   type="number" en particular queda visiblemente más angosto que el
   resto (el hueco de las flechas incrementadoras reduce el área de
   texto). Mismo ancho que el textarea (.campo, legacy, solo aplica a
   <textarea> por selector, no a <input>). */
.procesal-campo {
    width: 100%;
    padding: .55rem .75rem;
    border: 1px solid #cfc7b8;
    border-radius: 4px;
    font-family: inherit;
    font-size: .95rem;
    background: #fff;
    box-sizing: border-box;
}

.procesal-campo:focus {
    outline: none;
    border-color: var(--mextli-meztli);
    box-shadow: 0 0 0 3px rgba(31, 59, 87, .14);
}

.procesal-campo-error {
    margin: .3rem 0 0;
    font-size: .82rem;
    color: var(--mextli-granate);
}

.procesal-narrativa-pie {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .6rem;
    margin-top: .3rem;
}

.procesal-contador {
    flex-shrink: 0;
    font-size: .78rem;
    color: var(--mextli-texto-secundario);
    white-space: nowrap;
}

/* =========================================================
   CONSTRUCTOR PROCESAL -- Entrega B (accesibilidad + móvil)
   ========================================================= */

/* Ningún control propio de este módulo traía :focus-visible -- los
   nativos (checkbox, <input>) ya lo tienen del navegador, estos son
   los que se construyeron a mano. */
.procesal-paso-boton:focus-visible,
.procesal-arbol-opcion:focus-visible {
    outline: 2px solid var(--mextli-citlalli);
    outline-offset: 2px;
}

@media (max-width: 699px) {
    .procesal-arbol-paso,
    .procesal-narrativa {
        gap: .6rem;
    }

    /* Objetivos táctiles >=44px: el botón de paso (arriba/abajo del
       stepper) y las opciones del árbol quedaban cómodos en desktop
       pero ajustados al dedo en móvil. */
    .procesal-paso-boton {
        padding: .5rem .6rem;
        min-height: 44px;
    }

    .procesal-arbol-opcion {
        padding: .9rem 1rem;
        min-height: 44px;
    }

    .procesal-campos-grid {
        gap: .9rem;
    }

    .procesal-resumen,
    .procesal-camino-tarjetas {
        grid-template-columns: 1fr;
    }
}