/* ==========================================================================
   JURISIA - Capa neobrutalista compartida
   --------------------------------------------------------------------------
   Este archivo se carga EL ULTIMO en cada pagina, despues de las hojas
   heredadas. Asi gana la cascada sobre los bloques :root antiguos sin tener
   que borrarlos de golpe, y la migracion puede avanzar archivo por archivo.

   Contiene, en este orden: tokens, base (foco, seleccion, scrollbar), tema
   claro de resaltado de codigo y los componentes compartidos entre paginas.

   Los tokens son dos capas:
     1) Primitivas --nb-*  : la paleta real. Solo se edita aqui.
     2) Puente heredado    : los 110 nombres que ya usaban las hojas del chat
                             (--color-gold, --bg-dark, --text-primary...),
                             reapuntados a la paleta clara.

   Las custom properties se resuelven en tiempo de uso, asi que los tokens
   derivados de los modulos (--quiz-gold: var(--color-gold), --sust-text:
   var(--text-high), etc.) heredan el valor nuevo sin tocar sus archivos.
   ========================================================================== */

:root {
    /* ---------------------------------------------------------------- */
    /* 1. Primitivas                                                     */
    /* ---------------------------------------------------------------- */

    /* Superficies. Crema y negro calidos: conservan la temperatura dorada
       de la marca en lugar de recurrir al #fff / #000 puros. */
    --nb-paper: #FBF3E4;
    --nb-paper-2: #F2E5CB;
    --nb-paper-3: #E8D7B4;
    --nb-white: #FFFFFF;
    --nb-ink: #14120F;
    --nb-ink-2: #2B2620;
    --nb-ink-soft: #5A5046;
    /* Oscurecido de #857B70 a #6B625A: el anterior daba 3.3:1 sobre crema y
       no pasaba AA en texto pequeno. Ahora da 5.4:1 sobre --nb-paper y
       4.8:1 sobre --nb-paper-2. */
    --nb-ink-faint: #6B625A;

    /* Dorado. DOS tokens distintos a proposito: en el tema oscuro el dorado
       servia para relleno y para texto indistintamente, pero sobre crema el
       dorado brillante como texto da ~1.6:1 y es ilegible. Por eso:
         --nb-gold       -> SOLO fondos, con texto tinta encima
         --nb-amber-text -> SOLO texto/iconos/bordes de acento (6.7:1) */
    --nb-gold: #F5B72E;
    --nb-gold-deep: #E09B12;
    --nb-amber-text: #8A5A12;
    --nb-amber-text-strong: #5E3C08;

    /* Acentos de estado */
    --nb-terracotta: #E2552B;
    --nb-azure: #2F6FED;
    --nb-green: #12803F;
    --nb-green-bg: #D8F5E3;
    --nb-red: #B3261E;
    --nb-red-bg: #FBE0DE;

    /* Trazo y fisica. --nb-sx es el desplazamiento de la sombra dura: hover y
       :active se derivan de el para que el bloque "toque" la pagina al pulsar. */
    /* Calibrado 2026-09-21: 3px de borde + 5px de sombra + esquina redondeada
       daban un aire de juguete. Se adelgaza el trazo, se acorta la sombra y la
       esquina pasa a recta: el sistema sigue siendo neobrutalista, pero serio. */
    --nb-bd: 2px;
    --nb-bd-thick: 3px;
    --nb-bd-hair: 1px;
    --nb-radius: 8px;
    --nb-sx: 3px;
    --nb-ease: cubic-bezier(0.2, 0.9, 0.3, 1);

    /* Tipografia */
    --nb-font-display: "Archivo Black", "Arial Black", "Helvetica Neue", Helvetica, sans-serif;
    --nb-font-ui: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* ---------------------------------------------------------------- */
    /* 2. Puente sobre los nombres heredados                             */
    /* ---------------------------------------------------------------- */

    /* Dorado heredado. En el tema oscuro estos nombres se usaban sobre todo
       como color de TEXTO y de borde de acento, asi que apuntan al ambar
       legible; --color-gold-pale queda como el relleno brillante. */
    --color-gold: var(--nb-amber-text);
    --color-gold-light: #B87A17;
    --color-gold-dark: var(--nb-amber-text-strong);
    --color-gold-pale: var(--nb-gold);
    --color-gold-muted: #8A7B63;
    --color-gold-glow: rgba(245, 183, 46, .20);
    --accent-gold: var(--nb-amber-text);
    --accent-gold-hover: var(--nb-amber-text-strong);

    /* Mismos nombres en info_pages.css */
    --gold: var(--nb-amber-text);
    --gold-soft: #B87A17;
    --gold-deep: var(--nb-amber-text-strong);
    --gold-pale: var(--nb-gold);
    --gold-muted: #8A7B63;
    --gold-glow: rgba(245, 183, 46, .20);
    --gold-glow-strong: rgba(245, 183, 46, .38);

    /* Fondos: lo que era casi negro pasa a crema; lo que era un velo blanco
       translucido (rgba(255,255,255,.02)) pasa a blanco solido, porque sobre
       claro un velo asi es literalmente invisible. */
    --bg-dark: var(--nb-paper);
    --bg-darker: var(--nb-paper-2);
    --bg-primary: var(--nb-paper);
    --bg-sidebar: var(--nb-paper-2);
    --bg-elevated: var(--nb-white);
    --bg-card: var(--nb-white);
    --bg-card-hover: var(--nb-paper-2);
    --bg-glass: rgba(251, 243, 228, .94);
    --input-bg: var(--nb-white);

    /* Texto: se invierte la escala. Lo que era blanco al 90/60/35% pasa a
       tinta al 100/soft/faint, manteniendo la misma jerarquia de tres pasos. */
    --text-primary: var(--nb-ink);
    --text-high: var(--nb-ink);
    --text-secondary: var(--nb-ink-soft);
    --text-tertiary: var(--nb-ink-faint);
    --text-muted: var(--nb-ink-faint);

    /* Bordes: se conserva la jerarquia sutil/activo/hover del tema oscuro.
       Los bordes estructurales (3px tinta) los pone cada componente. */
    --border-color: rgba(20, 18, 15, .16);
    --border-subtle: rgba(20, 18, 15, .14);
    --border-active: var(--nb-ink);
    --border-hover: var(--nb-ink);
    --border-glow: var(--nb-ink);

    /* Mensajes del chat */
    --user-msg-bg: #FDEFC9;
    --user-msg-border: var(--nb-ink);
    --user-msg-accent: var(--nb-gold-deep);
    --ai-msg-bg: transparent;

    /* Superficies translucidas de los modulos (sustanciacion, tutela,
       derecho de peticion, liquidacion, quiz). Eran veladuras blancas sobre
       negro; sobre crema tienen que ser superficies solidas. */
    --sust-surface: var(--nb-white);
    --sust-card: var(--nb-white);
    --tutela-surface: var(--nb-white);
    --tutela-card: var(--nb-white);
    --dp-surface: var(--nb-white);
    --dp-card: var(--nb-white);
    --la-surface: var(--nb-white);
    --la-card: var(--nb-white);
    --quiz-surface: var(--nb-white);
    --quiz-card: var(--nb-white);

    /* Estados del quiz: el verde/rojo del tema oscuro no pasa contraste
       sobre crema, asi que bajan de luminosidad y ganan fondo solido. */
    --quiz-correct: var(--nb-green);
    --quiz-correct-bg: var(--nb-green-bg);
    --quiz-wrong: var(--nb-red);
    --quiz-wrong-bg: var(--nb-red-bg);

    /* Radios de los modulos: el neobrutalismo es de esquina casi recta. */
    --sust-radius: var(--nb-radius);
    --tutela-radius: var(--nb-radius);
    --dp-radius: var(--nb-radius);
    --la-radius: var(--nb-radius);
    --quiz-radius: var(--nb-radius);

    /* Tipografia heredada */
    --font-sans: var(--nb-font-ui);
    --font-serif: var(--nb-font-display);
    --font-primary: var(--nb-font-ui);
    --font-secondary: var(--nb-font-ui);
    --font-body: var(--nb-font-ui);
    --font-display: var(--nb-font-display);

    /* Curvas: se sustituyen las salidas largas y elasticas por la curva corta
       y seca del sistema. El movimiento neobrutalista es mecanico. */
    --ease-out-expo: var(--nb-ease);
    --ease-out-quart: var(--nb-ease);
}

/* El esquema es claro y fijo: se declara para que los controles nativos
   (scrollbars, selects, autofill) no se pinten en oscuro. */
:root {
    color-scheme: light;
}

/* Seleccion y foco coherentes en todo el sitio */
::selection {
    background: var(--nb-gold);
    color: var(--nb-ink);
}

:focus-visible {
    outline: var(--nb-bd) solid var(--nb-azure);
    outline-offset: 3px;
}

/* Scrollbar macizo, en la misma gramatica que los bloques */
* {
    scrollbar-color: var(--nb-ink) var(--nb-paper-2);
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}

::-webkit-scrollbar-track {
    background: var(--nb-paper-2);
}

::-webkit-scrollbar-thumb {
    background: var(--nb-ink);
    border: var(--nb-bd) solid var(--nb-paper-2);
}

/* Ninguna pagina debe desplazarse en horizontal en ningun ancho.
   OJO con el valor: 'hidden' convierte el documento en contenedor de scroll y
   eso ROMPE position:sticky en todos los descendientes (la cabecera de
   about/terms se iba con el scroll y dejaba la barra de lectura flotando a
   media pagina). 'clip' recorta igual pero no crea contenedor de scroll, asi
   que sticky sigue funcionando. Se declara 'hidden' antes como reserva para
   navegadores que no entiendan 'clip'. */
html,
body {
    max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   Resaltado de codigo (highlight.js) - tema claro propio
   --------------------------------------------------------------------------
   Sustituye a atom-one-dark.min.css, que venia de cdnjs y era un tema oscuro
   dentro de un chat claro. Hacerlo aqui elimina una dependencia externa, evita
   tener que recalcular el hash SRI y deja el bloque de codigo en la misma
   gramatica que el resto: borde tinta, sombra dura, esquina casi recta.
   Todos los tonos pasan 4.5:1 sobre --nb-paper-2.
   ========================================================================== */
.hljs {
    display: block;
    overflow-x: auto;
    padding: 16px 18px;
    background: var(--nb-paper-2);
    color: var(--nb-ink);
    border: var(--nb-bd) solid var(--nb-ink);
    border-radius: var(--nb-radius);
    box-shadow: var(--nb-sx) var(--nb-sx) 0 var(--nb-ink);
    font-family: "JetBrains Mono", "Fira Code", Consolas, "Courier New", monospace;
    font-size: 13px;
    line-height: 1.6;
}

.hljs-comment,
.hljs-quote {
    color: #625950;
    font-style: italic;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-type,
.hljs-tag {
    color: #A0341B;
    font-weight: 600;
}

.hljs-string,
.hljs-addition,
.hljs-regexp,
.hljs-attribute {
    color: #1D6B3F;
}

.hljs-number,
.hljs-bullet,
.hljs-symbol,
.hljs-link {
    color: #8A5A12;
}

.hljs-title,
.hljs-name,
.hljs-section,
.hljs-built_in {
    color: #1D4FBF;
    font-weight: 600;
}

.hljs-attr,
.hljs-variable,
.hljs-params,
.hljs-subst,
.hljs-template-variable {
    color: var(--nb-ink-soft);
}

.hljs-meta,
.hljs-doctag {
    color: #6B4A9E;
}

.hljs-deletion {
    background: var(--nb-red-bg);
    color: var(--nb-red);
}

.hljs-emphasis {
    font-style: italic;
}

.hljs-strong {
    font-weight: 700;
}

/* ==========================================================================
   Componentes compartidos
   --------------------------------------------------------------------------
   Piezas que aparecen en varias paginas y cuyo estilo no pertenece a ninguna
   hoja heredada concreta. Viven aqui porque esta hoja se carga la ultima en
   todas las paginas.
   ========================================================================== */

/* Insignia del monograma: cuadrado tinta con la marca en dorado, la inversa
   exacta del favicon. Se usa en la barra lateral del chat y en recents. */
.brand-mark {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    background: var(--nb-ink);
    color: var(--nb-gold);
    border: var(--nb-bd-hair) solid var(--nb-ink);
    border-radius: var(--nb-radius);
}

.brand-mark svg {
    width: 22px;
    height: 22px;
    display: block;
}

/* En ambas cabeceras la insignia se alinea en fila con el nombre. */
.sidebar .brand,
.recents-back {
    display: flex;
    align-items: center;
    gap: 10px;
}