/*
 * TOKENS DE DISEÑO — la capa base del sistema visual del admin.
 *
 * REFERENCIA: el dashboard que pasó el usuario (Dribbble, 2026-09-13).
 * Los colores NO están estimados a ojo: se muestrearon de la imagen con PIL,
 * promediando regiones para no caer en un borde ni en el antialias. El script
 * quedó en el scratchpad de la sesión (muestrear2.py) por si hay que repetirlo
 * contra otra referencia.
 *
 * OJO con una corrección: antes esta hoja estaba calibrada contra Stripe, que
 * usa grises FRÍOS (tirando a azul pizarra). Esta referencia NO: sus neutros
 * son grises PUROS (#f1f1f1, #ececec, #717171). Lo único frío es el fondo de
 * página detrás del shell (#c7cfd7). Es una diferencia real entre las dos
 * referencias y manda la nueva.
 *
 * Se carga DESPUÉS de amplecss/style.css (el tema) y ANTES de los archivos de
 * componentes, que solo consumen estos tokens y no vuelven a inventar valores.
 */

:root {
  /* ==================================================================
     TIPOGRAFÍA
     ================================================================== */

  /* Stack del sistema: en macOS cae en SF Pro, en Windows en Segoe UI, en
     Android en Roboto. Cero peticiones de red, cero latencia, se ve nativo.
     Si algún día la marca pide fuente propia, se cambia ESTA línea. */
  --sol-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  /* Monoespaciada para códigos de cuenta, RUC, claves de acceso: cadenas que
     el contador COMPARA de a pares, y comparar exige dígitos en columna. */
  --sol-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* Escala tipográfica. La referencia tiene un salto grande entre el dato y
     el título ("Welcome back, Joshua!" es casi el doble del cuerpo): ese
     contraste es buena parte de por qué se ve ordenada. Antes esta escala
     terminaba en 20px y no llegaba a producirlo. */
  --sol-text-2xs: 0.6875rem; /* 11px — sufijos, metadatos */
  --sol-text-xs: 0.75rem;    /* 12px — labels, chips */
  --sol-text-sm: 0.8125rem;  /* 13px — celdas de tablas densas */
  --sol-text-md: 0.875rem;   /* 14px — cuerpo por defecto */
  --sol-text-lg: 1rem;       /* 16px — títulos de card */
  --sol-text-xl: 1.25rem;    /* 20px — subtítulos */
  --sol-text-2xl: 1.5rem;    /* 24px — valor de KPI, título de sección */
  --sol-text-3xl: 1.75rem;   /* 28px — título de página */

  /* Interlineado: más aire en texto corrido, más apretado en tablas. Un solo
     line-height para todo es lo que hace que las tablas se lean "infladas". */
  --sol-leading-tight: 1.3;
  --sol-leading-normal: 1.45;

  /* Tracking. El texto GRANDE necesita negativo para no verse suelto; el
     chico en mayúsculas, positivo. Por eso son dos tokens y no uno. */
  --sol-tracking-caps: 0.04em;
  --sol-tracking-tight: -0.015em;

  --sol-weight-normal: 400;
  --sol-weight-medium: 500;
  --sol-weight-semibold: 600;
  --sol-weight-bold: 700;

  /* ==================================================================
     ESPACIADO — escala de 4px
     ================================================================== */

  --sol-space-1: 0.25rem; /* 4  */
  --sol-space-2: 0.5rem;  /* 8  */
  --sol-space-3: 0.75rem; /* 12 */
  --sol-space-4: 1rem;    /* 16 */
  --sol-space-5: 1.5rem;  /* 24 */
  --sol-space-6: 2rem;    /* 32 */

  /* Densidad de las tablas. DECISIÓN DELIBERADA: la referencia usa filas de
     ~62px de alto, bellísimas y con muchísimo aire. Pero ese mockup muestra
     SIETE filas; un asiento contable de este sistema tiene cuarenta. Copiar
     esa densidad literal deja al contador viendo seis renglones por pantalla
     y scrolleando todo el día. Se toma el lenguaje visual y se sube la
     densidad: 0.5rem es el punto medio entre la referencia y una grilla
     apretada. Si te parece muy junto, este valor es el único que hay que
     tocar y se mueve TODO el admin. */
  --sol-cell-padding-y: 0.5rem;
  --sol-cell-padding-x: 0.75rem;

  /* ==================================================================
     FORMA
     ================================================================== */

  /* La referencia es notoriamente más redondeada que Stripe: cards ~12px,
     controles ~8px, píldoras completas. El radio comunica tono -- grande lee
     "cercano", chico lee "preciso". Esta referencia eligió cercano. */
  --sol-radius-sm: 6px;     /* chips, celdas */
  --sol-radius-md: 8px;     /* inputs, botones */
  --sol-radius-lg: 12px;    /* cards, paneles */
  --sol-radius-pill: 999px; /* etiquetas de estado */

  /* ==================================================================
     ELEVACIÓN
     ================================================================== */

  /* En la referencia las cards casi no tienen sombra: se separan por un
     hairline y el peso lo lleva el fondo. La sombra aparece solo en lo que
     de verdad flota (el item de nav activo, el tooltip del gráfico). */
  --sol-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04);
  --sol-shadow-2: 0 2px 4px rgba(0, 0, 0, 0.05), 0 8px 16px rgba(0, 0, 0, 0.06);
  --sol-shadow-focus: 0 0 0 3px rgba(22, 124, 187, 0.25);

  /* ==================================================================
     SUPERFICIES — muestreadas de la referencia
     ================================================================== */

  --sol-surface: #ffffff;         /* cards, filas, área principal */
  --sol-surface-sunken: #fafafa;  /* encabezado de tabla, pie de totales */
  --sol-surface-sidebar: #f5f6f7; /* barra lateral */
  --sol-surface-page: #c7cfd7;    /* fondo detrás del shell */

  /* Tinta. Grises PUROS, no fríos (ver nota de cabecera). */
  --sol-ink: #1a1a1a;           /* texto principal */
  --sol-ink-secondary: #4a4a4a; /* texto de apoyo */
  --sol-ink-muted: #717171;     /* metadatos, placeholders — 4.88:1 sobre
                                   blanco, pasa AA para texto chico */

  /* Dos pesos de borde, y en la referencia el separador de filas es MÁS
     CLARO que el borde de una card. Suena contraintuitivo y es correcto: el
     borde delimita un objeto, el separador solo ordena filas adentro de él. */
  --sol-border: #ececec;        /* borde de card/panel */
  --sol-border-subtle: #f1f1f1; /* separador entre filas */
  --sol-border-strong: #d9d9d9; /* separadores que sí tienen que leerse */

  /* ==================================================================
     COLOR SEMÁNTICO — por SIGNIFICADO, no por nombre de framework
     ================================================================== */

  /* ACENTO: muestreado del botón primario Y de la barra destacada del
     gráfico, que dieron el mismo valor. Es un azul de dashboard, no la marca
     registrada de nadie (por eso sí se adopta, a diferencia del violeta de
     Stripe). Es más calmo que el #0d6efd de Bootstrap. */
  --sol-accent: #167cbb;
  --sol-accent-rgb: 22, 124, 187;
  --sol-accent-ink: #ffffff; /* texto sobre el acento — 4.53:1, pasa AA */

  /* El admin usaba `text-danger` tanto para "saldo negativo" como para
     "error de validación". Son cosas distintas: una es un DATO (legítimo, se
     lee sin alarmarse) y la otra un PROBLEMA (exige acción). Pintarlas igual
     entrena al usuario a ignorar el rojo. */

  /* Dinero. Tonos profundos, no saturados: un importe no es un semáforo. */
  --sol-debit: #4a4a4a;    /* debe   — se lee como texto, no como estado */
  --sol-credit: #005151;   /* haber  — el verde azulado de la referencia */
  --sol-negative: #c0123c; /* saldo en contra: es un DATO, no una alarma */

  /* Estados de documento. En este sistema son cuatro cosas independientes
     (documento, pago, contable, SRI — ver docs/AI_CONTEXT.md); un token por
     estado evita que cada pantalla invente su color.
     El par de la referencia es teal/naranja, no verde/ámbar. */
  --sol-state-draft: #717171;
  --sol-state-draft-surface: #f4f4f4;
  --sol-state-pending: #c63d00;
  --sol-state-pending-surface: #fef3e7;
  --sol-state-ok: #005151;
  --sol-state-ok-surface: #ecf3f3;
  --sol-state-void: #a1a1a1;
  --sol-state-void-surface: #f4f4f4;

  /* NOTA DE ACCESIBILIDAD: el naranja de la referencia es #e94800, que sobre
     su propio fondo da 3.56:1 -- NO pasa WCAG AA para texto chico (4.5:1).
     Un shot de Dribbble no tiene que ser accesible; un sistema que se mira
     ocho horas por día, sí. --sol-state-pending mantiene EL MISMO TONO (19°)
     y la misma saturación, solo bajándole luminosidad hasta 4.72:1. A ojo es
     el mismo naranja; en un monitor barato es la diferencia entre leerlo y
     adivinarlo. */

  /* Problemas reales que piden acción de una persona. */
  --sol-alert: #c0123c;
  --sol-alert-surface: #fdf2f5;
  --sol-warn: #c63d00;
  --sol-warn-surface: #fef3e7;

  /* ==================================================================
     MOVIMIENTO
     ================================================================== */

  /* Corto y con salida suave. En una herramienta de trabajo la animación
     confirma que algo pasó; no es espectáculo. Cualquier cosa de más de
     ~200ms se siente lenta a la décima vez, y el contador la ve doscientas
     veces por día. */
  --sol-motion-fast: 120ms;
  --sol-motion-base: 160ms;
  --sol-motion-ease: cubic-bezier(0.2, 0, 0, 1);
}

/* Los colores son literales a propósito: derivarlos del tema con color-mix()
   era elegante pero imposible de calibrar contra una referencia concreta, y
   ahora hay una referencia. El costo es que el modo oscuro ya no se hereda
   solo. Este bloque es el ÚNICO lugar a ajustar; si el conmutador del tema
   (amplejs/app-style-switcher.js) usa otro selector, se agrega acá al lado. */
[data-bs-theme="dark"] {
  --sol-surface: #1c1c1e;
  --sol-surface-sunken: #242426;
  --sol-surface-sidebar: #161618;
  --sol-surface-page: #0e0e10;
  --sol-ink: #f5f5f5;
  --sol-ink-secondary: #c4c4c4;
  --sol-ink-muted: #9a9a9a;
  --sol-border: #333336;
  --sol-border-subtle: #2a2a2d;
  --sol-border-strong: #4a4a4e;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --sol-motion-fast: 0ms;
    --sol-motion-base: 0ms;
  }
}