/* ============================================================
   SOLE · TEMA COMPARTIDO — la ÚNICA fuente de estilo visual

   Lo cargan SoleGo, la Ayuda y (cuando se migre) la Intranet, siempre
   DESPUÉS de base.css y ANTES de la hoja propia de cada sitio:

       base.css  ->  tema.css  ->  app.css / ayuda.css / ...

   Acá viven los colores (claro y oscuro), las fuentes, las medidas comunes,
   el logo animado, el horizonte con resplandor y el interruptor de modo
   oscuro. Cambiar algo acá lo cambia en todos los sitios: no hay copias.
   Su compañero es js/tema.js (aplica el tema guardado y dibuja el logo).

   - Claro: neutros cálidos (piedra/papel). OSCURO: la paleta normativa de la
     Guía de Diseño Sole 2026 v2.0 (índigo #14152A, acento #D9A05C), tal cual
     — pedido expreso del usuario el 2026-09-30; no reemplazarla.
   - El naranja de Sole (#F5A421, sacado del logo) es SÓLO fondo de la acción
     principal y marcas. Como texto no alcanza contraste sobre blanco (2:1),
     así que el texto "de acento" usa --accent-hover. Sobre el naranja va
     texto oscuro (--on-accent), nunca blanco.
   - Los nombres --c-* son los de base.css: esta hoja los redefine, así que
     todo lo que base.css ya pinta toma estos colores sin tocarlo.
   - El tema lo elige: data-tema="claro|oscuro" (elegido a mano) o, sin eso,
     el sistema operativo. tema.js además pone data-theme="light|dark".
   ============================================================ */

/* Fira Sans para el texto, Fira Code para números y códigos. Si no hay
   señal y el navegador no las tiene, cae a la del sistema. */
@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Fira+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

:root {
  --font-ui: "Fira Sans", "Segoe UI", system-ui, sans-serif;
  --font-num: "Fira Code", ui-monospace, Consolas, monospace;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --alto-barra: 3.5rem;
  --curva: cubic-bezier(.2, .8, .2, 1);
}

:root, :root[data-theme="light"], :root[data-tema="claro"] {
  --frame: #F7F5F1;
  --canvas: #FBFAF7;
  --surface: #FFFFFF;
  --surface-2: #F4F2ED;
  --statusbar: #F4F2ED;
  --btn: #F4F2ED;
  --chip: #EFECE6;
  --border: #E7E3DB;
  --border-strong: #D6D0C4;
  --text-1: #1C1917;
  --text-2: #57534E;
  --text-3: #736B64;
  --text-4: #A8A29E;
  --on-accent: #1C1917;
  --accent: #F5A421;
  --accent-press: #E8951A;
  --accent-hover: #A85A06;
  --accent-text: #A85A06;
  --accent-soft: #FDF0DA;
  --row-active: #FEF6E7;
  --row-active-edge: #F5A421;
  --active-border: #F3D19B;
  --ok-bg: #E9F5EC;
  --ok-text: #1E6B34;
  --ok-border: #B5DDBF;
  --warn-bg: #FDF1DC;
  --warn-text: #8F5400;
  --warn-border: #F1D29A;
  --err-bg: #FCEBE8;
  --err-text: #B42318;
  --err-border: #F4C7C0;
  --tag-bg: #EAF2FA;
  --tag-text: #1D5E9E;
  --tag-border: #C2D8EE;
  --notify: #D92D20;
  --online: #2F8F46;
  --tab-alt: #2F74C0;
  --scrim: rgba(28, 25, 23, .45);
  --horizonte: rgba(28, 25, 23, .14);
  --resplandor: rgba(245, 164, 33, .16);
  --c-bg: var(--frame);
  --c-surface: var(--surface);
  --c-surface-2: var(--surface-2);
  --c-border: var(--border);
  --c-border-strong: var(--border-strong);
  --c-text: var(--text-1);
  --c-text-soft: var(--text-2);
  --c-muted: var(--text-3);
  --c-placeholder: var(--text-4);
  --c-primary: var(--accent);
  --c-primary-600: var(--accent-hover);
  --c-primary-100: var(--accent-soft);
  --c-accent: var(--accent);
  --c-accent-text: var(--accent-text);
  --c-success: var(--ok-text);
  --c-success-bg: var(--ok-bg);
  --c-success-border: var(--ok-border);
  --c-warning: var(--warn-text);
  --c-warning-bg: var(--warn-bg);
  --c-warning-border: var(--warn-border);
  --c-danger: var(--err-text);
  --c-danger-bg: var(--err-bg);
  --c-danger-border: var(--err-border);
  --c-info: var(--tag-text);
  --c-info-bg: var(--tag-bg);
  --c-sidebar-bg: var(--canvas);
  --c-sidebar-text: var(--text-2);
  --c-sidebar-strong: var(--text-1);
  --c-sidebar-border: var(--border);
  --c-sidebar-hover: var(--surface-2);
  --c-sidebar-active-bg: var(--row-active);
  --c-sidebar-active-fg: var(--accent-hover);
  --c-velo: var(--scrim);
  --foco-anillo: var(--accent-hover);
  --shadow-sm: 0 1px 2px rgba(28, 25, 23, .05);
  --shadow: 0 1px 2px rgba(28, 25, 23, .04), 0 6px 20px -8px rgba(28, 25, 23, .12);
  --shadow-lg: 0 24px 60px -20px rgba(28, 25, 23, .28);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-tema="claro"]) {
    --frame: #14152A;
    --canvas: #1A1B30;
    --surface: #222340;
    --surface-2: #282A49;
    --statusbar: #1F2038;
    --btn: #262848;
    --chip: #282A49;
    --tile: #2F3158;
    --border: #34375E;
    --border-strong: #414576;
    --text-1: #EDEEF5;
    --text-2: #A3A7C2;
    --text-3: #8388A8;
    --text-4: #6E7292;
    --on-accent: #1A1B30;
    --chrome: #1F2038;
    --chrome-text: #D4D7EA;
    --accent: #D9A05C;
    --accent-press: #E4B072;
    --accent-hover: #E4B072;
    --accent-text: #E6BB80;
    --accent-soft: #382D17;
    --row-active: #2C2E52;
    --row-active-edge: #D9A05C;
    --active-border: #4C4A84;
    --ok-bg: #15302A;
    --ok-text: #6FD6A4;
    --ok-border: #276050;
    --warn-bg: #352A12;
    --warn-text: #E8BC6B;
    --warn-border: #6A5423;
    --err-bg: #3A2436;
    --err-text: #F58C9C;
    --err-border: #5E3252;
    --tag-bg: #1B2F4A;
    --tag-text: #7FB6E8;
    --tag-border: #2E5378;
    --notify: #E8697A;
    --online: #6FD6A4;
    --tab-alt: #6FA8E0;
    --scrim: rgba(12, 13, 26, .72);
    --horizonte: rgba(237, 238, 245, .12);
    --resplandor: rgba(217, 160, 92, .12);
    --c-bg: var(--canvas);
    --c-surface: var(--surface);
    --c-surface-2: var(--surface-2);
    --c-border: var(--border);
    --c-border-strong: var(--border-strong);
    --c-text: var(--text-1);
    --c-text-soft: var(--text-2);
    --c-muted: var(--text-3);
    --c-placeholder: var(--text-4);
    --c-primary: var(--accent);
    --c-primary-600: var(--accent-hover);
    --c-primary-100: var(--accent-soft);
    --c-accent: var(--accent);
    --c-accent-text: var(--accent-text);
    --c-success: var(--ok-text);
    --c-success-bg: var(--ok-bg);
    --c-success-border: var(--ok-border);
    --c-warning: var(--warn-text);
    --c-warning-bg: var(--warn-bg);
    --c-warning-border: var(--warn-border);
    --c-danger: var(--err-text);
    --c-danger-bg: var(--err-bg);
    --c-danger-border: var(--err-border);
    --c-info: var(--tag-text);
    --c-info-bg: var(--tag-bg);
    --c-sidebar-bg: var(--frame);
    --c-sidebar-text: var(--text-2);
    --c-sidebar-strong: var(--text-1);
    --c-sidebar-border: var(--border);
    --c-sidebar-hover: var(--surface-2);
    --c-sidebar-active-bg: var(--row-active);
    --c-sidebar-active-fg: var(--accent-text);
    --c-velo: var(--scrim);
    --foco-anillo: var(--accent-text);
    --shadow-sm: none;
    --shadow: 0 4px 16px rgba(0, 0, 0, .45);
    --shadow-lg: 0 18px 50px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}

:root[data-theme="dark"], :root[data-tema="oscuro"] {
  --frame: #14152A;
  --canvas: #1A1B30;
  --surface: #222340;
  --surface-2: #282A49;
  --statusbar: #1F2038;
  --btn: #262848;
  --chip: #282A49;
  --tile: #2F3158;
  --border: #34375E;
  --border-strong: #414576;
  --text-1: #EDEEF5;
  --text-2: #A3A7C2;
  --text-3: #8388A8;
  --text-4: #6E7292;
  --on-accent: #1A1B30;
  --chrome: #1F2038;
  --chrome-text: #D4D7EA;
  --accent: #D9A05C;
  --accent-press: #E4B072;
  --accent-hover: #E4B072;
  --accent-text: #E6BB80;
  --accent-soft: #382D17;
  --row-active: #2C2E52;
  --row-active-edge: #D9A05C;
  --active-border: #4C4A84;
  --ok-bg: #15302A;
  --ok-text: #6FD6A4;
  --ok-border: #276050;
  --warn-bg: #352A12;
  --warn-text: #E8BC6B;
  --warn-border: #6A5423;
  --err-bg: #3A2436;
  --err-text: #F58C9C;
  --err-border: #5E3252;
  --tag-bg: #1B2F4A;
  --tag-text: #7FB6E8;
  --tag-border: #2E5378;
  --notify: #E8697A;
  --online: #6FD6A4;
  --tab-alt: #6FA8E0;
  --scrim: rgba(12, 13, 26, .72);
  --horizonte: rgba(237, 238, 245, .12);
  --resplandor: rgba(217, 160, 92, .12);
  --c-bg: var(--canvas);
  --c-surface: var(--surface);
  --c-surface-2: var(--surface-2);
  --c-border: var(--border);
  --c-border-strong: var(--border-strong);
  --c-text: var(--text-1);
  --c-text-soft: var(--text-2);
  --c-muted: var(--text-3);
  --c-placeholder: var(--text-4);
  --c-primary: var(--accent);
  --c-primary-600: var(--accent-hover);
  --c-primary-100: var(--accent-soft);
  --c-accent: var(--accent);
  --c-accent-text: var(--accent-text);
  --c-success: var(--ok-text);
  --c-success-bg: var(--ok-bg);
  --c-success-border: var(--ok-border);
  --c-warning: var(--warn-text);
  --c-warning-bg: var(--warn-bg);
  --c-warning-border: var(--warn-border);
  --c-danger: var(--err-text);
  --c-danger-bg: var(--err-bg);
  --c-danger-border: var(--err-border);
  --c-info: var(--tag-text);
  --c-info-bg: var(--tag-bg);
  --c-sidebar-bg: var(--frame);
  --c-sidebar-text: var(--text-2);
  --c-sidebar-strong: var(--text-1);
  --c-sidebar-border: var(--border);
  --c-sidebar-hover: var(--surface-2);
  --c-sidebar-active-bg: var(--row-active);
  --c-sidebar-active-fg: var(--accent-text);
  --c-velo: var(--scrim);
  --foco-anillo: var(--accent-text);
  --shadow-sm: none;
  --shadow: 0 4px 16px rgba(0, 0, 0, .45);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

/* Foco de teclado normativo (§6) */
:focus-visible {
  outline: 2px solid var(--foco-anillo);
  outline-offset: 2px;
}

/* ============================================================
   EL LOGO ANIMADO

   Copiado tal cual de la página de la red de oficinas
   (red-oficinas/servidor/static/index.html): nueve capas PNG apiladas y CSS
   puro. Lo arma App.logo() en app-core.js; el tamaño lo pone cada lugar con
   su modificador (logo--arranque, logo--acceso, logo--menu, logo--carga).

   .anim   entrada (~1,5 s): el sol sube, el anillo gira y aparece, los rayos
           brotan escalonados y las ondas transmiten desde la esquina.
   .senal  en reposo: las ondas titilan suave cada 6 s.
   .carga  (propio de SoleGo) las ondas transmiten en bucle mientras algo
           carga. Usa los mismos keyframes, más seguido.
   ============================================================ */

.logo { position: relative; display: block; width: 72px; height: 72px; flex: none; }
.logo img { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; pointer-events: none; }
/* .espera: la entrada todavía no arrancó porque faltan capas (ver tema.js). */
.logo.espera img { opacity: 0; }
/* SIN will-change en las capas: con él Chrome rasteriza el PNG al tamaño en
   que arranca la animación (55 %) y lo agranda pixelado hasta el final. Se
   probó el 2026-09-30 y era justamente lo que se veía "tosco" en la Ayuda. */

.anim .disco { animation: sol .7s cubic-bezier(.2,.8,.2,1.15) both; }
.anim .base { animation: aparece .6s .12s cubic-bezier(.2,.8,.2,1) both; }
.anim .rayo { animation: rayo .45s cubic-bezier(.3,1.5,.5,1) both; }
.anim .rayo1 { animation-delay: .55s; } .anim .rayo2 { animation-delay: .62s; } .anim .rayo3 { animation-delay: .48s; }
.anim .rayo4 { animation-delay: .41s; } .anim .rayo5 { animation-delay: .34s; }
.anim .onda2 { animation: onda .5s .85s cubic-bezier(.2,.8,.2,1) both; }
.anim .onda3 { animation: onda .5s 1.0s cubic-bezier(.2,.8,.2,1) both; }
.logo .disco, .logo .base { transform-origin: 52% 52%; }
.logo .rayo { transform-origin: 52% 52%; }
.logo .onda2, .logo .onda3 { transform-origin: 98% 98%; }
.senal .onda2 { animation: pulso 6s 2s ease-in-out infinite; }
.senal .onda3 { animation: pulso 6s 2.15s ease-in-out infinite; }
.carga .onda2 { animation: pulso 1.4s ease-in-out infinite; }
.carga .onda3 { animation: pulso 1.4s .18s ease-in-out infinite; }
@keyframes sol { from { opacity: 0; transform: translateY(18%) scale(.55); } to { opacity: 1; transform: none; } }
@keyframes aparece { from { opacity: 0; transform: scale(.8) rotate(-25deg); } to { opacity: 1; transform: none; } }
@keyframes rayo { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: none; } }
@keyframes onda { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes pulso { 0%, 84%, 100% { opacity: 1; } 90% { opacity: .35; } }

/* Los tamaños, según dónde va. */
.logo--arranque { width: 104px; height: 104px; }
.logo--acceso   { width: 128px; height: 128px; }
.logo--menu     { width: 32px;  height: 32px; }
.logo--carga    { width: 28px;  height: 28px; }
/* Igual que el login de SoleGo: a 96px el PNG de 384 queda a un cuarto y
   los trazos se ven ásperos, sobre todo en la entrada, que parte del 55 %. */
.logo--portada  { width: 128px; height: 128px; }
@media (max-width: 30rem) { .logo--portada { width: 96px; height: 96px; } }

@media (prefers-reduced-motion: reduce) {
  .logo img, .cargando__texto { animation: none !important; }
}

/* El logo que dibuja tema.js dentro de un .sidebar-brand o un .login-logo:
   base.css le pone a ".logo" fondo naranja, bordes redondeados y una letra
   blanca (era el cuadradito con la "S"). Al logo en capas no le va nada de eso. */
.logo[data-sole-logo] { background: none; border-radius: 0; color: inherit; }

/* ============================================================
   LO QUE BASE.CSS PINTA Y ACÁ SE AJUSTA AL TEMA
   (sidebar, topbar, botón principal: los usan Ayuda e Intranet)
   ============================================================ */

:root {
  /* La barra superior y el encabezado del menú lateral miden LO MISMO, así
     las dos líneas de abajo se siguen de una columna a la otra. En SoleGo el
     logo de 32px más el padding estiraban el encabezado a 62px contra 56. */
  --header-h: var(--alto-barra);
  --font: var(--font-ui);
}

body { font-family: var(--font-ui); }
a { color: var(--accent-hover); }
code, kbd, pre, samp { font-family: var(--font-num); }

.sidebar-brand {
  height: var(--alto-barra);
  padding-top: 0;
  padding-bottom: 0;
  align-items: center;
  box-sizing: border-box;
  flex-shrink: 0;
}
.topbar { height: var(--alto-barra); background: var(--c-bg); }

/* La entrada activa del menú: fondo tibio y raya naranja a la izquierda. */
.nav-item.active { color: var(--c-sidebar-strong); box-shadow: inset 3px 0 0 var(--accent); }

.btn-primary { color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-press); }

/* ============================================================
   HORIZONTE Y RESPLANDOR
   El logo es un sol que sale: se apoya sobre una línea de horizonte que se
   desvanece en los bordes, con un resplandor apenas insinuado detrás.
     .sole-horizonte   en el contenedor del logo (la línea va debajo)
     .sole-resplandor  en el bloque de la página (el brillo va arriba)
   ============================================================ */

.sole-horizonte { position: relative; padding-bottom: 2px; }
.sole-horizonte::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(44rem, 100vw);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--horizonte) 25%, var(--horizonte) 75%, transparent);
  pointer-events: none;
}
.sole-resplandor { position: relative; }
.sole-resplandor::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 36rem;
  background: radial-gradient(46rem 22rem at 50% 8rem, var(--resplandor), transparent 72%);
  pointer-events: none;
}

/* ============================================================
   INTERRUPTOR DE MODO OSCURO
   <label class="tema-interruptor">
     <input type="checkbox" data-sole-tema-check>
     <span class="tema-interruptor__pista" aria-hidden="true"></span>
     <span class="tema-interruptor__texto">Modo oscuro</span>
   </label>
   tema.js lo conecta solo: marcado = oscuro, desmarcado = claro.
   ============================================================ */

.tema-interruptor {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 2.75rem;
  cursor: pointer;
  font-size: 13px;
  color: var(--c-text-soft);
  user-select: none;
  white-space: nowrap;
}
.tema-interruptor input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.tema-interruptor__pista {
  position: relative;
  width: 36px;
  height: 20px;
  flex: none;
  border-radius: 999px;
  background: var(--c-border-strong);
  transition: background-color .18s var(--curva);
}
.tema-interruptor__pista::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--c-surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  transition: transform .18s var(--curva);
}
.tema-interruptor input:checked + .tema-interruptor__pista { background: var(--accent); }
.tema-interruptor input:checked + .tema-interruptor__pista::after { transform: translateX(16px); }
.tema-interruptor input:focus-visible + .tema-interruptor__pista {
  outline: 2px solid var(--foco-anillo);
  outline-offset: 2px;
}
.tema-interruptor:hover { color: var(--c-text); }
/* En la barra superior va a la derecha de todo. */
.topbar .tema-interruptor { margin-left: auto; flex-shrink: 0; }
/* En el teléfono queda sólo la llave; el texto sigue para el lector de pantalla. */
@media (max-width: 600px) {
  .tema-interruptor__texto {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tema-interruptor__pista, .tema-interruptor__pista::after { transition: none; }
}