/* Marca de Rednacer v2. ÚNICA fuente de colores, tipografías y medidas: el resto del código solo usa var(--…).
   Paleta semántica: 1 color de marca + 1 acento + neutros + estados. Si hace falta otro tono, se agrega AQUÍ
   con su uso, y aparece solo en /marca/. */
/* Style comprometido de GetLayers: «Forma®» (forma-style) llevado a la marca. Suelo casi blanco, tinta azul medianoche
   (no negro), filetes finos, tarjetas blancas y UNA superficie lavanda de énfasis. Claro por omisión; el oscuro solo
   con el conmutador (html[data-modo="oscuro"], js/tema.js). */
:root{
  color-scheme:light;
  /* Marca */
  --marca:#3B3FB6;            /* añil: botones principales, enlaces, selección */
  --marca-hover:#2F3296;      /* al pasar el mouse o tocar un botón principal */
  --marca-suave:color-mix(in srgb,var(--marca) 10%,var(--superficie)); /* fondos de avisos y chips de la marca */
  --marca-suave-2:color-mix(in srgb,var(--marca) 16%,var(--superficie)); /* píldora de la pestaña activa, chips */
  --marca-oscura:#2A2D8A;     /* texto de marca sobre fondos suaves (≥ 4.5:1) */
  --sobre-marca:#FFFFFF;      /* texto encima de --marca */
  --acento:#F2A33A;           /* cempasúchil: el siguiente paso, insignias, la corriente cálida. Nunca texto largo */
  --sobre-acento:#1A1408;     /* texto encima de --acento */
  --enfasis:#DAD7F7;          /* lavanda de Forma: UNA superficie destacada por pantalla */
  --sobre-enfasis:#14164A;    /* texto sobre --enfasis */
  /* Neutros */
  --fondo:#F3F3F5;            /* fondo de página */
  --superficie:#FFFFFF;       /* tarjetas, diálogos */
  --tinta:#0B0C2F;            /* texto principal (azul medianoche) */
  --tinta-2:#55566E;          /* texto secundario (≥ 4.5:1 sobre --superficie y --fondo) */
  --linea:#DCDCE4;            /* filetes y bordes */
  --vidrio-fuerte:color-mix(in srgb,var(--superficie) 88%,transparent); /* cabecera y barra (esmerilado) */
  --noche:#14164A;            /* bandas oscuras del Sitio (texto --sobre-marca encima) */
  /* Estados */
  --ok:#157F3B;      /* competente, hecho */
  --aviso:#A85A00;   /* atención, falta algo */
  --error:#C2410C;   /* error, todavía no competente */
  --info:#1D4ED8;    /* información */
  /* Tipografía: máximo 2 familias */
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --sans:'Figtree',system-ui,sans-serif;
  --t-1:2.5rem; --t-2:1.75rem; --t-3:1.25rem; --t-texto:1rem; --t-chico:.875rem;
  /* Sitio público (index, estadísticas): Style «Halden» de GetLayers llevado a la marca (encargo #118). Papel cálido,
     el añil gastado en superficies enteras, el cempasúchil solo en lo vivo. Las apps por rol no usan estos tokens. */
  --papel:#EEEAE1;            /* suelo del Sitio */
  --papel-2:#F6F3EC;          /* superficie sobre el papel (tarjetas, hoja) */
  --arena:#D9D2C0;            /* filetes, chips, píldoras del Sitio */
  --piedra:#5E5A50;           /* texto secundario del Sitio (≥ 4.5:1 sobre --papel) */
  --tinta-papel:#121133;      /* texto principal del Sitio */
  --superficie-marca:#3B3FB6; /* pantallas añil (roles, pie) */
  --sobre-superficie-marca:#F6F3EC;
  --senal:#B45F00;            /* cempasúchil oscurecido para TEXTO sobre papel (≥ 4.5:1) */
  --f-display:'Bebas Neue','Arial Narrow',Impact,sans-serif;  /* titulares, etiquetas, códigos */
  --f-habla:'Instrument Serif',Georgia,serif;                  /* lo que habla: subtítulos, entradillas */
  --f-funcional:'Manrope',system-ui,sans-serif;                /* texto funcional ≥ 14 px */
  /* Forma */
  --radio:14px; --radio-chico:10px; --sombra:0 1px 0 rgba(11,12,47,.04),0 10px 30px -18px rgba(11,12,47,.28);
  --radio-tarjeta:20px; --radio-accion:999px; --sombra-alta:0 24px 60px -24px rgba(11,12,47,.45);
  /* Movimiento (transiciones CSS; los resortes viven en js/motor.js) */
  --dur-normal:250ms; --curva:cubic-bezier(.2,0,0,1);
}
html[data-modo="oscuro"]{
  color-scheme:dark;
  --marca:#9A9EF7; --marca-hover:#B3B6FA; --marca-oscura:#C4C6FF; --sobre-marca:#0B0C2F;
  --acento:#F2A33A; --sobre-acento:#1A1408; --enfasis:#2B2E6E; --sobre-enfasis:#ECECFF;
  --fondo:#0B0C1E; --superficie:#15172E; --tinta:#ECECF6; --tinta-2:#A9ABC7; --linea:#2A2D4D; --noche:#06071A;
  --ok:#4ADE80; --aviso:#FBBF24; --error:#FB923C; --info:#93C5FD;
  --papel:#13152F; --papel-2:#1B1E42; --arena:#33376A; --piedra:#C6C8E6; --tinta-papel:#EEEAF6;
  --superficie-marca:#22256E; --sobre-superficie-marca:#F6F3EC; --senal:#F2A33A;
  --sombra:0 1px 0 rgba(0,0,0,.3),0 10px 30px -18px rgba(0,0,0,.7); --sombra-alta:0 24px 60px -24px rgba(0,0,0,.8);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent} /* sin destello gris al tocar: el foco visible es propio */
body{margin:0;min-height:100dvh;background:var(--fondo);color:var(--tinta);font:400 var(--t-texto)/1.5 var(--sans);touch-action:manipulation;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
@media (pointer:coarse){input,select,textarea{font-size:16px}}
:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
img{max-width:100%;height:auto}
/* Controles: no se selecciona su texto al mantener presionado (el contenido sí se puede copiar). */
button,[role=button],[role=tab],[role=switch],summary{-webkit-user-select:none;user-select:none}
/* Instalada (inicio del celular) vs. navegador: .solo-navegador (p. ej. «Instalar») desaparece al instalarla.
   pwa.js pone html.instalada también en iOS (navigator.standalone). */
@media (display-mode:standalone){.solo-navegador{display:none!important}}
html.instalada .solo-navegador{display:none!important}
html:not(.instalada) .solo-instalada{display:none!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}