/* ============================================================
   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).

   - Interfaz 2.0 (rediseño del 29/10/2026, el mismo para SoleGo y el
     Tablero): OSCURO grafito con ámbar Sole; CLARO con los neutros cálidos
     de siempre (piedra/papel) y los semánticos del Tablero. Reemplaza a la
     paleta índigo de la Guía Sole 2026 v2.0.
   - El ámbar de Sole es el fondo de la acción principal y del ítem activo.
     En claro, como texto no alcanza contraste sobre blanco (2:1), así que el
     texto "de acento" usa --accent-text. Sobre el ámbar va texto oscuro
     (--on-accent), nunca blanco.
   - Significado de los colores, igual en todos los sitios:
       ámbar   acción principal, activo, título de pantalla
       verde   bien, aceptado, entregado, ingresos       (--ok-*, --green)
       amarillo atención, pendiente, poco stock          (--warn-*, --yellow)
       rojo    crítico, rechazado, sin stock, egresos     (--err-*, --red)
       azul    información, saldos, enviado, ARS          (--tag-*, --blue)
       violeta especial: IVA, discontinuados, CCC         (--purple)
   - 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".
   ============================================================ */

/* Tipografía del sistema: se ve igual con y sin señal. Las cifras van con
   tabular-nums (ver body, más abajo). Monoespaciada sólo para códigos. */
:root {
  --font-ui: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: var(--font-ui);
  --font-code: Consolas, ui-monospace, 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: #1E8A4C;
  --ok-border: #B5DDBF;
  --warn-bg: #FDF1DC;
  --warn-text: #B7791F;
  --warn-border: #F1D29A;
  --err-bg: #FCEBE8;
  --err-text: #C8321F;
  --err-border: #F4C7C0;
  --tag-bg: #EAF2FA;
  --tag-text: #2F6FB5;
  --tag-border: #C2D8EE;
  --purple: #6E56CF;
  --purple-bg: #EFEBFB;
  --orange: #C7631A;
  --orange-bg: #FCEEE3;
  --darkred: #8A1C1C;
  --grey: #8F8A84;
  --track: #ECE8E1;
  --notify: #C8321F;
  --online: #1E8A4C;
  --tab-alt: #2F6FB5;
  --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: #1B1C21;
    --canvas: #1B1C21;
    --surface: #25262C;
    --surface-2: #2C2D34;
    --statusbar: #212228;
    --btn: #2C2D34;
    --chip: #2C2D34;
    --tile: #2C2D34;
    --border: #35363E;
    --border-strong: #43454E;
    --text-1: #ECECEE;
    --text-2: #A8A9B0;
    --text-3: #7C7D85;
    --text-4: #6A6B73;
    --on-accent: #1B1C21;
    --chrome: #212228;
    --chrome-text: #D6D7DC;
    --accent: #F5A623;
    --accent-press: #F7B54A;
    --accent-hover: #F5A623;
    --accent-text: #F5A623;
    --accent-soft: rgba(245, 166, 35, .13);
    --row-active: rgba(245, 166, 35, .13);
    --row-active-edge: #F5A623;
    --active-border: color-mix(in srgb, #F5A623 35%, transparent);
    --ok-bg: rgba(76, 183, 130, .13);
    --ok-text: #4CB782;
    --ok-border: color-mix(in srgb, #4CB782 35%, transparent);
    --warn-bg: rgba(245, 166, 35, .13);
    --warn-text: #E9B63F;
    --warn-border: color-mix(in srgb, #E9B63F 35%, transparent);
    --err-bg: rgba(229, 83, 75, .14);
    --err-text: #E5534B;
    --err-border: color-mix(in srgb, #E5534B 35%, transparent);
    --tag-bg: rgba(91, 155, 213, .15);
    --tag-text: #5B9BD5;
    --tag-border: color-mix(in srgb, #5B9BD5 35%, transparent);
    --purple: #9B87F5;
    --purple-bg: rgba(155, 135, 245, .15);
    --orange: #E8833A;
    --orange-bg: rgba(232, 131, 58, .15);
    --darkred: #9E2B2B;
    --grey: #8A8B92;
    --track: #34353D;
    --notify: #E5534B;
    --online: #4CB782;
    --tab-alt: #5B9BD5;
    --scrim: rgba(10, 10, 14, .6);
    --horizonte: rgba(236, 236, 238, .12);
    --resplandor: rgba(245, 166, 35, .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(--statusbar);
    --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: #1B1C21;
  --canvas: #1B1C21;
  --surface: #25262C;
  --surface-2: #2C2D34;
  --statusbar: #212228;
  --btn: #2C2D34;
  --chip: #2C2D34;
  --tile: #2C2D34;
  --border: #35363E;
  --border-strong: #43454E;
  --text-1: #ECECEE;
  --text-2: #A8A9B0;
  --text-3: #7C7D85;
  --text-4: #6A6B73;
  --on-accent: #1B1C21;
  --chrome: #212228;
  --chrome-text: #D6D7DC;
  --accent: #F5A623;
  --accent-press: #F7B54A;
  --accent-hover: #F5A623;
  --accent-text: #F5A623;
  --accent-soft: rgba(245, 166, 35, .13);
  --row-active: rgba(245, 166, 35, .13);
  --row-active-edge: #F5A623;
  --active-border: color-mix(in srgb, #F5A623 35%, transparent);
  --ok-bg: rgba(76, 183, 130, .13);
  --ok-text: #4CB782;
  --ok-border: color-mix(in srgb, #4CB782 35%, transparent);
  --warn-bg: rgba(245, 166, 35, .13);
  --warn-text: #E9B63F;
  --warn-border: color-mix(in srgb, #E9B63F 35%, transparent);
  --err-bg: rgba(229, 83, 75, .14);
  --err-text: #E5534B;
  --err-border: color-mix(in srgb, #E5534B 35%, transparent);
  --tag-bg: rgba(91, 155, 213, .15);
  --tag-text: #5B9BD5;
  --tag-border: color-mix(in srgb, #5B9BD5 35%, transparent);
  --purple: #9B87F5;
  --purple-bg: rgba(155, 135, 245, .15);
  --orange: #E8833A;
  --orange-bg: rgba(232, 131, 58, .15);
  --darkred: #9E2B2B;
  --grey: #8A8B92;
  --track: #34353D;
  --notify: #E5534B;
  --online: #4CB782;
  --tab-alt: #5B9BD5;
  --scrim: rgba(10, 10, 14, .6);
  --horizonte: rgba(236, 236, 238, .12);
  --resplandor: rgba(245, 166, 35, .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(--statusbar);
  --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);

  /* Nombres cortos por color, los mismos en los dos modos (los toman los
     gráficos y las píldoras del Tablero y de SoleGo). */
  --amber: var(--accent);
  --amber-tx: var(--accent-text);
  --amber-bg: var(--accent-soft);
  --green: var(--ok-text);
  --green-bg: var(--ok-bg);
  --yellow: var(--warn-text);
  --red: var(--err-text);
  --red-bg: var(--err-bg);
  --blue: var(--tag-text);
  --blue-bg: var(--tag-bg);
}

body { font-family: var(--font-ui); font-variant-numeric: tabular-nums; }
a { color: var(--accent-text); }
code, kbd, pre, samp { font-family: var(--font-code); }

.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; }
}

/* ============================================================
   COMPONENTES — Interfaz 2.0
   Cada componente se dibuja UNA vez, acá, para todos los sitios. Como cada
   sitio nació con sus propios nombres, cada regla junta los tres:
       base.css (Ayuda, Intranet) · SoleGo · Tablero
   Las hojas propias sólo acomodan (grillas, márgenes, orden): no vuelven a
   poner fondo, borde, radio, sombra ni tipografía de estos componentes.
   ============================================================ */

/* ---- Título y bajada de cada pantalla ---- */
.page-title, .hoja h2, .titulo-pantalla, .seccion-titulo {
  font-size: 1.65rem;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.2;
  color: var(--accent-text);
  margin: 0 0 .3rem;
}
.page-sub, .hoja p.ayuda, .bajada-pantalla, .seccion-sub {
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--text-2);
  max-width: 70ch;
}

/* ---- Rótulo de grupo, en versalitas ---- */
.section-label, .rotulo-grupo, .subseccion-titulo {
  font-size: .78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--text-2);
}
.rotulo-grupo { display: block; margin: 30px 0 12px; }

/* ---- Tarjeta y panel: fondo, filete fino, radio 10, sin sombra ---- */
.card, .stat, .tarjeta, .panel-card, .kpi-card, .metrica-card, .acceso-card,
.producto-card, .tarjeta-hero-cli {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: none;
}
.card-pad, .stat, .tarjeta, .panel-card, .kpi-card, .metrica-card { padding: 18px 20px; }
/* Título de tarjeta o de panel. */
.panel-card__header h3, .tarjeta h3, .hoja .tarjeta h3, .card h3, .tarjeta-titulo {
  font-size: .95rem;
  font-weight: 400;
  color: var(--text-2);
}
.panel-card__header { border-bottom: 0; padding-bottom: 0; }
/* Nota al pie de tarjeta. */
.nota, .panel-nota {
  font-size: .85rem;
  font-style: italic;
  color: var(--text-3);
}

/* ---- Tarjeta KPI: filete superior de 4px del color del dato ----
   El color se elige con un modificador; sin él, ámbar. */
.kpi-card, .metrica-card, .stat { border-top: 4px solid var(--filete, var(--accent)); }
.filete--ambar    { --filete: var(--accent); }
.filete--verde    { --filete: var(--green); }
.filete--azul     { --filete: var(--blue); }
.filete--rojo     { --filete: var(--red); }
.filete--amarillo { --filete: var(--yellow); }
.filete--violeta  { --filete: var(--purple); }
.metrica-card--alerta { --filete: var(--yellow); }
.kpi-card__titulo, .metrica-card__titulo, .stat .label {
  font-size: .95rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-2);
}
.kpi-card__valor, .metrica-card__valor, .stat .value {
  font-family: var(--font-ui);
  font-size: clamp(1.55rem, 2.6vw, 2.05rem);
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--text-1);
}
/* Color de la cifra según el dato. */
.cifra--ambar    { color: var(--accent-text); }
.cifra--verde    { color: var(--green); }
.cifra--azul     { color: var(--blue); }
.cifra--rojo     { color: var(--red); }
.cifra--amarillo { color: var(--yellow); }
.cifra--violeta  { color: var(--purple); }
.kpi-card__sub, .metrica-card__sub {
  font-size: .88rem;
  color: var(--text-2);
}
/* Punto de estado de 11px (arriba a la derecha de la KPI). */
.punto-estado {
  width: 11px; height: 11px;
  border-radius: 50%;
  display: inline-block;
  flex: none;
  background: var(--punto, var(--grey));
}
.punto--verde { --punto: var(--green); }
.punto--ambar { --punto: var(--accent); }
.punto--amarillo { --punto: var(--yellow); }
.punto--rojo { --punto: var(--red); }

/* ---- Tarjeta clickeable (accesos) ---- */
.acceso-card { transition: border-color .15s; }
.acceso-card:hover, .kpi-card--clickable:hover { border-color: var(--accent); background: var(--surface); }
.acceso-card__icon {
  width: 42px; height: 42px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-text);
}
.acceso-card__titulo { font-size: 1rem; font-weight: 500; }
.acceso-card__texto { color: var(--text-2); }
.acceso-card > svg, .acceso-card:hover > svg { color: var(--accent-text); }

/* ---- Botones ---- */
/* Principal: ámbar con texto oscuro en negrita. */
.btn-primary, .boton {
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid transparent;
  border-radius: 8px;
  font-weight: 700;
  box-shadow: none;
}
.btn-primary:hover, .boton:hover { background: var(--accent-press); }
.btn:disabled, .boton[disabled], .boton:disabled { opacity: .45; }
/* Secundario: sin fondo, con borde; al pasar, borde ámbar. */
.btn-secondary, .btn-ghost, .boton--suave, .boton--acento {
  background: transparent;
  color: var(--text-1);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font-weight: 500;
  box-shadow: none;
}
.btn-secondary:hover, .btn-ghost:hover, .boton--suave:hover, .boton--acento:hover {
  background: transparent;
  border-color: var(--accent);
}
.boton--acento { color: var(--accent-text); font-weight: 700; }
/* Peligro: el secundario con texto rojo; al pasar, borde rojo. */
.btn-danger, .boton--peligro {
  background: transparent;
  color: var(--red);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font-weight: 500;
  box-shadow: none;
}
.btn-danger:hover, .boton--peligro:hover { background: transparent; border-color: var(--red); filter: none; }

/* ---- Botones segmentados (conmutadores y filtros) ---- */
.conmutador, .control-grupo {
  display: inline-flex;
  gap: .35rem;
  flex-wrap: wrap;
  background: none;
  border: 0;
  padding: 0;
  overflow: visible;
}
.conmutador__op, .btn-periodo, .control-radio, .chip-estado {
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  box-shadow: none;
  cursor: pointer;
}
.conmutador__op:hover, .btn-periodo:hover, .control-radio:hover, .chip-estado:hover {
  color: var(--text-1);
  border-color: var(--accent);
}
.conmutador__op[aria-pressed="true"], .btn-periodo.activo, .control-radio:has(input:checked),
.chip-estado--activo {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  box-shadow: none;
}
.chip-estado--activo .chip-estado__n { color: var(--on-accent); }

/* ---- Campos ---- */
.form-control, .input, .campo input, .campo select, .campo textarea,
.campo-input-wrap > input, .campo-simple {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  min-height: 40px;
  color: var(--text-1);
}
.form-control:focus, .input:focus, .campo input:focus, .campo select:focus, .campo textarea:focus,
.campo-input-wrap > input:focus, .campo-simple:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.campo input:disabled, .form-control:disabled { color: var(--text-3); }
.campo-input-wrap svg.input-icon { color: var(--text-3); }
.campo-input-wrap:focus-within svg.input-icon { color: var(--accent-text); }
/* El rótulo, encima del campo. */
.campo > span, .etiqueta-campo, .form-group > label {
  font-size: .82rem;
  font-weight: 500;
  color: var(--text-2);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
.interruptor { color: var(--text-2); }

/* ---- Píldoras de estado: texto de color sobre su fondo suave ---- */
.badge, .etiqueta, .panel-tag, .badge-riesgo, .kpi-card__badge-modulo, .pildora {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .76rem;
  font-weight: 500;
  line-height: 1.35;
  padding: .12rem .45rem;
  border: 0;
  border-radius: 5px;
  white-space: nowrap;
  background: var(--surface-2);
  color: var(--text-2);
}
.badge-success, .etiqueta--activa, .badge-riesgo--bajo, .pildora--verde { background: var(--ok-bg); color: var(--ok-text); }
.badge-warning, .etiqueta--pendiente, .badge-riesgo--medio, .pildora--amarillo { background: var(--warn-bg); color: var(--warn-text); }
.badge-danger, .etiqueta--roja, .badge-riesgo--alto, .pildora--rojo { background: var(--err-bg); color: var(--err-text); }
.badge-info, .etiqueta--azul, .pildora--azul { background: var(--tag-bg); color: var(--tag-text); }
.etiqueta--violeta, .pildora--violeta { background: var(--purple-bg); color: var(--purple); }
.badge-primary, .panel-tag, .kpi-card__badge-modulo, .pildora--ambar { background: var(--accent-soft); color: var(--accent-text); }
.badge-muted, .etiqueta--esta, .etiqueta--apagada, .pildora--gris { background: var(--surface-2); color: var(--text-2); border: 0; }
.etiqueta--apagada { color: var(--text-3); }

/* ---- Tablas ---- */
.tabla th, table.data thead th, .tabla-datos th {
  background: none;
  font-size: .8rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-2);
  border-bottom: 1px solid var(--border);
}
.tabla td, table.data td, .tabla-datos td {
  font-size: .9rem;
  color: var(--text-1);
  border-bottom: 1px solid var(--border);
}
.tabla-wrap { border-radius: 10px; }

/* ---- Vacío: recuadro punteado ---- */
.estado-vacio, .vacio {
  background: none;
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  color: var(--text-3);
  text-align: center;
}