/* ============================================================
   LOGYNEX / JoathiVA — brand.css  ·  CAPA 1: PRIMITIVOS + CAPA 2 (claro)
   Servida en /joathiva/brand.css

   CL-28 (2026-08-14) — Qué es este archivo, de verdad:

   1. La CAPA DE PRIMITIVOS `--lgx-*`: cada valor de color, radio, sombra y
      tipografía del sistema vive UNA sola vez, acá. Sin opinión de uso.
   2. La CAPA SEMÁNTICA `--jv-*` en su variante CLARA, que es la que usa el
      login. `theme_auros.css` la reasigna a la variante oscura (midnight).

   El encabezado anterior decía «HOJA ÚNICA DE TOKENS (fuente de verdad)».
   No lo era: hasta CL-28 lo cargaban 2 archivos de 33. Ahora sí lo cargan
   todos, y por eso pasa a ser cierto.

   ORDEN DE CARGA: este archivo va TEMPRANO en el <head>, antes del <style>
   propio de cada módulo. Así los primitivos quedan disponibles sin que las
   cuatro reglas globales del final pisen los estilos locales de cada portal.
   `theme_auros.css` se carga DESPUÉS y reasigna los semánticos.

   Aplica a JoathiVA. NUNCA a OlaverryVA.
   Documentación: docs/CL-28_SISTEMA_DISENO.md
   ============================================================ */

/* Tipografías de marca. theme_auros.css las nombra desde el 13/08 pero nunca
   las importó: solo 8 de 33 HTML traían el <link> por su cuenta, así que en
   los otros 25 los títulos caían a fuente de sistema. Se importa acá una sola
   vez y quedan en los 33.
   Nota: `modules/opinova/index.html` tiene CSP `style-src 'self'` y bloquea
   este @import — ahí sigue cayendo al fallback, igual que hoy. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  /* ══════════════════════════════════════════════════════════════════
     CAPA 1 — PRIMITIVOS (--lgx-*)
     Valores crudos. No se usan directamente en un componente: se usan
     a través de la capa semántica.
     ══════════════════════════════════════════════════════════════════ */

  /* --- Stack oscuro «midnight» (el del home, vigente desde el 13/08) --- */
  --lgx-midnight:#05060f;              /* lienzo */
  --lgx-indigo-900:#0b0e1a;            /* superficie profunda */
  --lgx-indigo-800:#111526;            /* superficie de tarjeta */
  --lgx-frost:#d1e4fa;                 /* texto principal */
  --lgx-platinum:#ffffff;              /* texto de máximo contraste */
  --lgx-mist:#9db0cf;                  /* texto secundario */
  --lgx-mist-dim:#7d90b0;              /* texto terciario */
  --lgx-hairline:rgba(186,215,247,.12);
  --lgx-hairline-soft:rgba(186,215,247,.07);

  /* --- Verde de acción (el del home) --- */
  --lgx-green-500:#1f8a4c;
  --lgx-green-300:#6fd393;
  --lgx-green-ok:#2fbf71;

  /* --- Dorado / ámbar de firma --- */
  --lgx-gold:#e0a83a;
  --lgx-gold-dark:#c98a1b;

  /* --- Estado --- */
  --lgx-blue:#52a4ff;
  --lgx-red:#ff6b5e;

  /* --- Acentos de los contenedores del hub (COLORES_CONT) --- */
  --lgx-accent-violet:#bc8cff;
  --lgx-accent-teal:#2fbfae;
  --lgx-accent-clay:#d98a3d;

  /* --- Verde institucional. Escala derivada de #0E3B2E.
         Es el verde del LOGOTIPO, distinto del verde de acción de arriba. --- */
  --lgx-brand-green-900:#071b15;
  --lgx-brand-green-800:#0b2a20;
  --lgx-brand-green-700:#0e3b2e;       /* PRIMARIO de marca */
  --lgx-brand-green-600:#14503d;
  --lgx-brand-green-500:#1f8558;
  --lgx-brand-green-400:#2aa564;
  --lgx-brand-green-300:#7fe3a9;
  --lgx-brand-green-100:#eaf6ef;
  --lgx-brand-green-50:#f4f9f6;

  /* --- Dorado institucional --- */
  --lgx-brand-gold:#fedc00;            /* ACENTO de marca */
  --lgx-brand-gold-600:#e3c400;
  --lgx-brand-gold-100:#fff7cc;

  /* --- Ámbar de acción secundaria --- */
  --lgx-brand-amber:#f5a623;
  --lgx-brand-amber-100:#fff6e6;

  /* --- Neutros del stack claro --- */
  --lgx-ink:#0d1c17;
  --lgx-slate:#20302b;
  --lgx-sage:#667b70;
  --lgx-line-light:#d9e2dd;
  --lgx-white:#ffffff;
  --lgx-mint-50:#eff8f3;

  /* --- Estado, stack claro --- */
  --lgx-danger-700:#b03a2e;
  --lgx-danger-50:#fdecec;
  --lgx-info-700:#2f6f8f;
  --lgx-info-50:#e8f2f6;
  --lgx-success-50:#eafff3;

  /* --- Forma --- */
  --lgx-radius:12px;
  --lgx-radius-sm:8px;
  --lgx-radius-lg:14px;
  --lgx-radius-pill:999px;

  /* --- Elevación --- */
  --lgx-shadow-1:0 1px 3px rgba(7,27,21,.08);
  --lgx-shadow-2:0 4px 14px rgba(7,27,21,.10);

  /* --- Tipografía --- */
  --lgx-font-sans:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --lgx-font-display:'Space Grotesk','Archivo','Inter',system-ui,'Segoe UI',sans-serif;
  --lgx-font-mono:'JetBrains Mono',ui-monospace,'Cascadia Code',Consolas,monospace;
  --lgx-font-system:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --lgx-font-mono-system:ui-monospace,'Cascadia Code',Consolas,monospace;


  /* ══════════════════════════════════════════════════════════════════
     CAPA 2 — SEMÁNTICOS (--jv-*), variante CLARA
     Los nombres son los que el código YA consume: no se renombra ninguno.
     `theme_auros.css` reasigna estos mismos nombres al stack oscuro.
     ══════════════════════════════════════════════════════════════════ */

  /* Escala de marca — se conservan los nombres históricos */
  --jv-green-900:var(--lgx-brand-green-900);
  --jv-green-800:var(--lgx-brand-green-800);
  --jv-green-700:var(--lgx-brand-green-700);
  --jv-green-600:var(--lgx-brand-green-600);
  --jv-green-500:var(--lgx-brand-green-500);
  --jv-green-400:var(--lgx-brand-green-400);
  --jv-green-300:var(--lgx-brand-green-300);
  --jv-green-100:var(--lgx-brand-green-100);
  --jv-green-50:var(--lgx-brand-green-50);

  --jv-gold:var(--lgx-brand-gold);
  --jv-gold-600:var(--lgx-brand-gold-600);
  --jv-gold-100:var(--lgx-brand-gold-100);

  --jv-amber:var(--lgx-brand-amber);
  --jv-amber-100:var(--lgx-brand-amber-100);

  /* Neutros */
  --jv-ink:var(--lgx-ink);
  --jv-text:var(--lgx-slate);
  --jv-muted:var(--lgx-sage);
  --jv-line:var(--lgx-line-light);
  --jv-surface:var(--lgx-white);
  --jv-surface-2:var(--lgx-brand-green-50);
  --jv-bg:var(--lgx-mint-50);

  /* Estados semánticos */
  --jv-success:var(--lgx-brand-green-500);
  --jv-success-bg:var(--lgx-success-50);
  --jv-warning:var(--lgx-brand-amber);
  --jv-warning-bg:var(--lgx-brand-amber-100);
  --jv-danger:var(--lgx-danger-700);
  --jv-danger-bg:var(--lgx-danger-50);
  --jv-info:var(--lgx-info-700);
  --jv-info-bg:var(--lgx-info-50);

  /* Forma / elevación / foco */
  --jv-radius:var(--lgx-radius);
  --jv-radius-sm:var(--lgx-radius-sm);
  --jv-radius-pill:var(--lgx-radius-pill);
  --jv-shadow-1:var(--lgx-shadow-1);
  --jv-shadow-2:var(--lgx-shadow-2);
  --jv-focus-ring:0 0 0 3px rgba(254,220,0,.55);  /* anillo dorado sobre claro */

  /* Tipografía */
  --jv-font:var(--lgx-font-system);
  --jv-font-mono:var(--lgx-font-mono-system);
}

/* --- Accesibilidad base: foco visible por teclado en todo el portal --- */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid transparent;
  box-shadow:var(--jv-focus-ring);
  border-radius:var(--jv-radius-sm);
}
/* Solo oculta el foco cuando NO viene de teclado (respeta a11y) */
:where(a,button,input,select,textarea,[tabindex]):focus:not(:focus-visible){outline:none}

/* Contenido solo para lectores de pantalla */
.jv-sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
/* "Saltar al contenido" (aparece al enfocar) */
.jv-skip{
  position:absolute;left:8px;top:-48px;z-index:9999;
  background:var(--jv-green-700);color:#fff;padding:10px 14px;
  border-radius:var(--jv-radius-sm);transition:top .15s ease;
}
.jv-skip:focus{top:8px}

/* Respeta usuarios con reducción de movimiento */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
