/* ==========================================================================
   Fruit Color — Brand tokens (override sobre sh-tokens.css)
   Cargar SIEMPRE después de sh-tokens.css en base.html.

   Origen de la paleta: los cuatro archivos de marca reales que mandó Braulio
   el 2026-08-27 (`OneDrive/25. Fruit Color/02. Material gráfico/`,
   referencia-01/04/07/08). No hay manual de marca ni vectorial — los hex de
   abajo se muestrearon pixel a pixel de esos PNG/JPG:

     · oro     #DDAF43 — idéntico en los cuatro archivos. Es EL color de marca.
     · navy    #273270 — fondo del lockup de referencia-01.
     · royal   #0053A6 — fondo del lockup de referencia-07.

   Decisión 2026-08-28 (Joaquín): navy estructural, royal interactivo, oro de
   acento. El royal solo, sostenido, cansa en pantallas de tabla densa; el oro
   no llega a contraste AA sobre blanco, así que como TEXTO se usa `gold-ink`.

   Tipografía: Helvetica en todo, incluidos titulares. La display setentera del
   logo ("Fruit Color" en la manzana) es una licenciada que no tenemos, no
   sobrevive a tablas densas ni a los PDF de aduana, y no tiene glifos CJK.
   Vive únicamente en el lockup, como imagen.
   ========================================================================== */

:root {
  /* ---- Paleta principal Fruit Color ---- */
  --fc-navy:   #273270;   /* estructural — sidebar, login, headers */
  --fc-royal:  #0053A6;   /* interactivo — botones, links, focus */
  --fc-gold:   #DDAF43;   /* acento — KPIs, highlights, estados destacados */
  --fc-white:  #FFFFFF;

  /* Escala navy (estructural) */
  --fc-navy-50:   #EFF1F8;
  --fc-navy-100:  #DCDFEE;
  --fc-navy-200:  #B4BADA;
  --fc-navy-300:  #8790C1;
  --fc-navy-400:  #5A67A6;
  --fc-navy-500:  #37458A;
  --fc-navy-600:  var(--fc-navy);
  --fc-navy-700:  #202A60;
  --fc-navy-800:  #1B2450;
  --fc-navy-900:  #141A3B;

  /* Escala royal (interactivo) */
  --fc-royal-300: #85B3E5;
  --fc-royal-400: #4C87C9;
  --fc-royal-500: #1A6DC4;
  --fc-royal-600: var(--fc-royal);
  --fc-royal-700: #003D7A;

  /* Escala oro (acento).
     `--fc-gold-ink` es la única variante apta para TEXTO sobre superficie
     clara: el oro de marca da ~1.9:1 sobre blanco, muy por debajo de AA.
     Para fills, bordes y barras de gráfico usar el oro de marca sin miedo. */
  --fc-gold-100: #FAF1DC;
  --fc-gold-300: #F0DAA6;
  --fc-gold-400: #E8C574;
  --fc-gold-500: var(--fc-gold);
  --fc-gold-600: #B98F26;
  --fc-gold-ink: #8A6A10;

  /* ---- Override de tokens Springhead semánticos ---- */
  /* La identidad de Fruit Color reemplaza el navy/teal/yellow de Springhead.
     El mapeo es 1:1 con la estructura del kit: navy→estructura,
     teal→interacción, yellow→acento. Ningún componente necesita cambiar. */
  --sh-navy:        var(--fc-navy);
  --sh-navy-deep:   var(--fc-navy-800);
  --sh-teal:        var(--fc-royal);
  --sh-teal-soft:   var(--fc-royal-400);
  --sh-yellow:      var(--fc-gold);
  --sh-yellow-soft: var(--fc-gold-400);
  --sh-yellow-ink:  var(--fc-gold-ink);

  /* Escala ink: gris frío derivado del navy, para que el texto no pelee
     con la marca (un gris neutro al lado del navy se ve verdoso). */
  --sh-ink-900: #1A1E2E;
  --sh-ink-800: #2E3448;
  --sh-ink-700: #434C63;
  --sh-ink-600: #5C6680;
  --sh-ink-500: #78829A;
  --sh-ink-400: #98A1B4;
  --sh-ink-300: #BCC3D0;
  --sh-ink-200: #DADEE6;
  --sh-ink-100: #ECEEF2;
  --sh-ink-50:  #F6F7F9;

  /* Backgrounds neutros — blanco + gris azulado. Nunca papel cálido: el kit
     Springhead es crema, y el crema sobre oro se lee sucio. */
  --sh-paper:      #F4F5F8;
  --sh-paper-warm: #EDEFF4;
  --sh-off-white:  var(--fc-white);
  --sh-cream:      #E4E7EF;

  /* Semánticos — valores de estado del kit, no son identidad de marca.
     `warning` se corre del ámbar del kit para no confundirse con el oro. */
  --sh-positive: #2E7D5B;
  --sh-negative: #B14B3F;
  --sh-warning:  #C2751F;

  /* Superficies oscuras (dark-mode / sidebar) — derivadas del navy */
  --sh-navy-surface:   #1F294F;
  --sh-navy-surface-2: #26315D;
  --sh-navy-sidebar:   #141A3B;

  /* Foco / sombras — recalibradas al royal */
  --sh-teal-glow: 0 0 0 3px rgba(0, 83, 166, 0.16);
  --sh-shadow-sm:  0 4px 12px rgba(20, 26, 59, 0.08);
  --sh-shadow-pop: 0 4px 12px rgba(20, 26, 59, 0.16);
  --sh-hairline:   rgba(20, 26, 59, 0.10);

  /* Washes de estado sobre superficies claras */
  --sh-teal-bg:      rgba(0, 83, 166, 0.10);
  --sh-teal-bg-soft: rgba(0, 83, 166, 0.04);
  --fc-gold-bg:      rgba(221, 175, 67, 0.16);

  /* ---- Tipografías ----
     Helvetica en todo. `PingFang SC` (macOS/iOS) y `Microsoft YaHei`
     (Windows) cubren los glifos CJK de los outputs bilingües (Invoice 2 y
     Sales Report Cliente) sin descargar una sola fuente: en China un webfont
     de Google no llega, y un CJK completo pesa varios MB. */
  --fc-f-body:    'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  --fc-f-display: var(--fc-f-body);
  --fc-f-mono:    'SF Mono', ui-monospace, Menlo, Consolas, 'Courier New', monospace;

  /* Override tokens Springhead de tipografía */
  --sh-f-sans:    var(--fc-f-body);
  --sh-f-serif:   var(--fc-f-body);
  --sh-f-display: var(--fc-f-display);
  --sh-f-mono:    var(--fc-f-mono);

  /* Tracking de titulares: Helvetica Bold en tamaño grande necesita el
     tracking cerrado, si no se ve suelta y genérica. */
  --fc-track-display: -0.02em;
  --fc-track-eyebrow:  0.08em;

  /* Charts: navy + royal como series, oro para la serie destacada */
  --sh-chart-c1:        var(--fc-navy);
  --sh-chart-c2:        var(--fc-royal);
  --sh-chart-c3:        var(--fc-royal-400);
  --sh-chart-c4:        var(--sh-ink-400);
  --sh-chart-highlight: var(--fc-gold);
}

/* ==========================================================================
   Base tipográfica
   ========================================================================== */
body {
  font-family: var(--fc-f-body);
  color: var(--sh-ink-900);
}

h1, h2, h3, h4, h5, h6,
.topbar-title,
.login-heading,
.kpi-value,
.kpi-val,
.infra-value {
  font-family: var(--fc-f-display);
  font-weight: 700;
  letter-spacing: var(--fc-track-display);
}

/* Cifras alineadas en columna. Obligatorio en toda tabla de montos,
   correlativos, kilos y fechas — Helvetica trae figuras tabulares y sin esto
   una columna de USD queda dentada. */
.fc-num,
td.num, th.num,
.kpi-value, .kpi-val {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Correlativos de documentos (invoices, notas D/C, solicitudes de pago,
   remesas). Van en mono para que un 0 nunca se lea como una O en un papel
   que va a aduana. */
.fc-correlativo {
  font-family: var(--fc-f-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Bloque en chino dentro de un output bilingüe. Fuerza la cara CJK primero
   para que el navegador no sintetice glifos desde Helvetica. */
.fc-zh {
  font-family: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', 'Hiragino Sans GB', sans-serif;
}

/* Eyebrow / label de sección: mayúsculas espaciadas, el único recurso
   tipográfico de personalidad que se permite fuera del logo. */
.fc-eyebrow {
  font-family: var(--fc-f-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--fc-track-eyebrow);
  color: var(--sh-ink-500);
}

/* ==========================================================================
   Wordmark Fruit Color (componente reutilizable)
   Fallback tipográfico del lockup: se usa donde el PNG no cabe o no carga.
   ========================================================================== */
.fc-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
  font-family: var(--fc-f-display);
  font-weight: 700;
  letter-spacing: var(--fc-track-display);
  line-height: 1;
  color: var(--fc-navy);
}
.fc-wordmark--inverse { color: var(--fc-white); }
.fc-wordmark .fc-wordmark-zh {
  font-family: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  color: var(--fc-gold);
}

.fc-wordmark--sm { font-size: 18px; }
.fc-wordmark--md { font-size: 28px; }
.fc-wordmark--lg { font-size: 44px; }
.fc-wordmark--xl { font-size: 64px; }

/* ==========================================================================
   Acento de oro
   Regla: el oro marca UNA cosa por pantalla. Si dos elementos compiten en
   oro, ninguno destaca y la pantalla se ve barata.
   ========================================================================== */
.fc-accent-bar {
  border-left: 3px solid var(--fc-gold);
  padding-left: var(--sh-r-3, 12px);
}
.fc-badge-gold {
  background: var(--fc-gold-bg);
  color: var(--fc-gold-ink);
  border: 1px solid var(--fc-gold-400);
  border-radius: var(--sh-radius-pill, 999px);
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
[data-theme="dark"] .fc-badge-gold {
  color: var(--fc-gold-400);
  border-color: var(--fc-gold-600);
}

/* ==========================================================================
   Login: panel de marca
   ========================================================================== */
.login-brand {
  background: linear-gradient(165deg, var(--fc-navy-500) 0%, var(--fc-navy) 55%, var(--fc-navy-900) 100%);
  overflow: hidden;
}
.login-brand-tagline {
  font-family: var(--fc-f-body);
  font-style: normal;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78) !important; /* override layout.css 0.5 */
  letter-spacing: 0.01em;
}
.login-brand-version {
  color: rgba(255, 255, 255, 0.45) !important; /* override layout.css 0.25 */
}
[data-theme="light"] .login-brand-logo,
[data-theme="dark"] .login-brand-logo,
.login-brand-logo {
  filter: none !important;
  max-height: none !important;
  max-width: 400px;
  width: 72%;
  height: auto;
}

/* Filete de oro al pie del panel — cita el subrayado que el logo lleva
   debajo de 果色 y de "Fruit Color". Un solo gesto, sin decoración extra. */
.login-brand::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--fc-gold);
  z-index: 1;
  pointer-events: none;
}

/* Los PNG del logo ya vienen en oro sobre transparente — neutralizar el
   filtro de blanqueo del boilerplate (layout.css) en todos los temas. */
.sidebar-logo img { filter: none !important; }