/* ============================================================================
   TMS MINERO — TOKENS
   Sistema de diseño Link Advance v2 (2026-08-25) aplicado a TMS.
   Única fuente de color, radio, sombra, tipografía y motion. Ningún componente
   escribe un hex suelto: si falta un color, se agrega acá como token.

   Qué cambió respecto de la v1 de este archivo:
   · Escala azul profunda 700–950 (la de Academia) para héroes y superficies
     oscuras: la anterior se veía lavada en degradados.
   · Escala de tinta --ink-* (grises fríos) como base de texto y superficies.
   · Paleta de categorías --cat-1…--cat-8 para series de gráfico y chips por
     tipo. Deliberadamente separada de los semánticos: que "Pala" no se
     confunda con "atrasado" por compartir color.
   · Sombras nombradas xs/sm/md/lg/brand/focus, todas tintadas de azul.
   · En tema oscuro --primary sube a #4d90da: #306cb4 no alcanza AA sobre
     #0f1623. Para rellenos con texto blanco existe --primary-fill, que NO
     cambia (blanco sobre #306cb4 sí alcanza AA).
   · Tipografías autoalojadas: en faena no hay señal para bajarlas de Google.

   Se conserva de TMS: la excepción de tipografía del sistema en táctil, el
   chasis iOS, los estados de neumático, el semáforo de daño y el bloque de
   alias de compatibilidad.
   ============================================================================ */

@font-face {
  font-family: "Manrope";
  src: url("../assets/fonts/Manrope-Variable.ttf") format("truetype");
  font-style: normal; font-weight: 400 800; font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("../assets/fonts/Sora-Variable.ttf") format("truetype");
  font-style: normal; font-weight: 600 800; font-display: swap;
}

:root {
  /* ── Escala azul ──────────────────────────────────────────────────────────
     500 es el azul del logotipo. 700–950 son más saturados y fríos a propósito,
     para que un héroe o una barra azul-marino no se vea lavada. */
  --blue-50:  #eef4fa;
  --blue-100: #d7e6f4;
  --blue-200: #b0cce8;
  --blue-300: #80acd7;
  --blue-400: #5089c4;
  --blue-500: #306cb4;   /* primario — acción */
  --blue-600: #2a5d9c;   /* hover */
  --blue-700: #0951a2;   /* presionado / degradado */
  --blue-800: #074486;   /* héroes, encabezados de marca */
  --blue-900: #08386d;
  --blue-950: #092f58;

  /* ── Tinta (grises fríos) ── nunca negro puro: la marca es azul. */
  --ink-950: #06182e;
  --ink-900: #0b2340;
  --ink-800: #183754;
  --ink-700: #314d69;
  --ink-600: #4d627a;
  --ink-500: #6c7f94;
  --ink-400: #97a6b8;
  --ink-300: #cad6e3;
  --ink-200: #dde6ef;
  --ink-100: #ebf1f7;
  --ink-50:  #f4f8fd;

  /* ── Roles de acción ── */
  --primary:       var(--blue-500);
  --primary-hover: var(--blue-600);
  --primary-press: var(--blue-700);
  --primary-soft:  var(--blue-50);
  /* Relleno sólido con texto blanco encima. NO se aclara en oscuro: blanco
     sobre #306cb4 da 5.4:1, mientras que blanco sobre #4d90da da 3.3:1. */
  --primary-fill:  var(--blue-500);
  --focus-ring:    rgba(80, 137, 196, .45);

  /* ── Texto ── */
  --text-strong: var(--ink-950);   /* titulares */
  --text:        var(--ink-800);   /* cuerpo */
  --text-muted:  var(--ink-500);   /* auxiliar */
  --text-invert: #ffffff;

  /* ── Superficies ── */
  --page:          var(--ink-50);
  --surface:       #ffffff;        /* tarjeta */
  --surface-muted: #fbfcfe;
  --surface-2:     var(--ink-100); /* hundida */

  /* ── Superficie oscura (sidebar, héroes, barras de marca) ── */
  --dark-bg:    var(--ink-950);
  --dark-bg-2:  var(--blue-950);
  --dark-text:  #c3cfe0;
  --dark-muted: #7d8aa3;
  --dark-hover: rgba(80, 137, 196, .16);

  /* ── Bordes ── */
  --border:        #e1e6ef;
  --border-strong: #cdd5e3;

  /* ── Semánticos ── solo estado, nunca decorativos. */
  --success: #16a35a;  --success-bg: #e8f8ef;  --success-fg: #0f7a41;
  --warning: #f2a312;  --warning-bg: #fff5e3;  --warning-fg: #9a6a08;
  --danger:  #e0413d;  --danger-bg:  #fdecec;  --danger-fg:  #b5312d;
  --info:    var(--blue-500); --info-bg: var(--blue-50); --info-fg: var(--blue-800);

  /* ── Categorías ── para distinguir cosas sin jerarquía entre sí: series de
     gráfico, chips por tipo de equipo, color de avatar sin foto. */
  --cat-1: #7c5cff;  --cat-2: #0d9488;  --cat-3: #c026d3;  --cat-4: #4f46e5;
  --cat-5: #b45309;  --cat-6: #0891b2;  --cat-7: #be185d;  --cat-8: #52606d;

  /* ── Degradados ── uso medido: héroes, encabezados y marca. Nunca de relleno. */
  --gradient-brand:  linear-gradient(135deg, var(--blue-700) 0%, var(--blue-500) 55%, var(--blue-400) 100%);
  --gradient-brand-radial: radial-gradient(circle at 68% 18%, #1768bf 0%, var(--blue-700) 48%, var(--blue-800) 100%);
  --gradient-ink:    linear-gradient(150deg, var(--ink-950) 0%, var(--blue-950) 100%);
  --gradient-page:
    radial-gradient(circle at 8% 3%, rgba(48, 108, 180, .10), transparent 28rem),
    radial-gradient(circle at 96% 16%, rgba(9, 81, 162, .07), transparent 24rem);

  /* ── Sombras ── suaves y tintadas de azul, jamás negro puro. */
  --shadow-xs:    0 2px 6px rgba(12, 23, 38, .07);
  --shadow-sm:    0 6px 20px rgba(9, 47, 88, .09);
  --shadow-md:    0 12px 32px rgba(12, 23, 38, .14);
  --shadow-lg:    0 20px 60px rgba(12, 23, 38, .18);
  --shadow-brand: 0 10px 26px rgba(48, 108, 180, .34);
  --shadow-focus: 0 0 0 4px var(--focus-ring);

  /* ── Radios ── esquinas redondeadas = sello de la marca. */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;   /* inputs */
  --r-lg:   16px;
  --r-xl:   24px;   /* tarjetas */
  --r-2xl:  32px;
  --r-pill: 999px;  /* botones, chips */

  /* ── Radios del chasis táctil ── más cerrados que los de escritorio; es lo
     que hace que una tarjeta "se lea" como app y no como página web. */
  --r-ios-sm: 10px;
  --r-ios-md: 14px;
  --r-ios-lg: 20px;

  /* ── Espaciado ── */
  --space-1: .25rem;  --space-2: .5rem;   --space-3: .75rem;
  --space-4: 1rem;    --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem;    --space-10: 2.5rem; --space-12: 3rem;

  /* ── Tipografía ── */
  --font-display: "Sora", "Segoe UI", system-ui, sans-serif;    /* títulos, cifras, marca */
  --font-body:    "Manrope", "Segoe UI", system-ui, sans-serif; /* cuerpo y UI */
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;    /* series, folios, código */

  /* ── Layout ── */
  --content-max:   1240px;
  --sidebar-w:     240px;
  --sidebar-w-min: 68px;
  --topbar-h:      60px;
  --tabbar-h:      56px;
  --row-h:         44px;   /* blanco de toque mínimo */
  --row-h-lg:      56px;

  /* ── Motion ── transiciones limpias, sin rebotes. */
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-ios:  cubic-bezier(.32, .72, 0, 1);  /* sale rápido, frena largo */
  --t-fast:    .15s var(--ease);
  --t:         .22s var(--ease);
  --t-ios:     .3s var(--ease-ios);

  /* ── Material translúcido ── barras fijas, hojas y controles sobre contenido. */
  --hairline:       rgba(60, 60, 67, .20);
  --tint-ios:       var(--primary);
  --surface-chrome: rgba(252, 252, 254, .86);
  --blur-chrome:    saturate(180%) blur(20px);
  --fill-1: rgba(120, 120, 128, .20);
  --fill-2: rgba(120, 120, 128, .16);
  --fill-3: rgba(120, 120, 128, .12);
  --fill-4: rgba(120, 120, 128, .08);
  --label-4: #c7cdd9;

  /* ── Estados de neumático ── el color acompaña al texto del estado, nunca lo
     reemplaza (regla 13: el color no puede ser el único portador). */
  --status-stock-bg:            #dcfce7; --status-stock-fg:            #166534;
  --status-desarmado-bg:        #d1fae5; --status-desarmado-fg:        #065f46;
  --status-evaluation-bg:       #dbeafe; --status-evaluation-fg:       #1d4ed8;
  --status-pending-repair-bg:   #fef9c3; --status-pending-repair-fg:   #92400e;
  --status-repair-bg:           #ffedd5; --status-repair-fg:           #c2410c;
  --status-pending-retread-bg:  #ede9fe; --status-pending-retread-fg:  #6d28d9;
  --status-retread-bg:          #c4b5fd; --status-retread-fg:          #3b0764;
  --status-scrapped-bg:         #fee2e2; --status-scrapped-fg:         #dc2626;
  --status-recycling-bg:        #dfe6dc; --status-recycling-fg:        #45573f;
  --status-mounted-bg:          var(--info-bg); --status-mounted-fg:   var(--blue-600);

  /* ── Semáforo de daño G1/G2/G3 ── */
  /* Relleno sólido para gráficos y puntos; -fg es el texto sobre la insignia. */
  --grade-1: #dc2626; --grade-2: #f97316; --grade-3: #eab308;
  --grade-1-bg: #fee2e2; --grade-1-fg: #b91c1c; --grade-1-border: #f87171;
  --grade-2-bg: #ffedd5; --grade-2-fg: #c2410c; --grade-2-border: #fb923c;
  --grade-3-bg: #fef9c3; --grade-3-fg: #92400e; --grade-3-border: #facc15;

  /* ── Escala de uso / desgaste ── de menor a mayor consumo de goma. */
  --wear-1: #16a35a;  --wear-2: #4d9e5a;  --wear-3: #f2a312;
  --wear-4: #c2410c;  --wear-5: #8a8f98;

  /* ── Ámbar de acción ── botón de advertencia (enviar a planta, etc.). */
  --btn-warning-bg: #f59e0b; --btn-warning-bg-hover: #d97706;

  /* ── Acentos sueltos que quedaban como hex en app.css ── */
  --accent-orange: #e07b2b;   /* segunda serie de gráfico y chips de despacho */
  --accent-violet: #6b3fa0;   /* recauchaje en gráficos */

  /* ── Detalles que antes eran hex crudo en componentes ── */
  --danger-border:  #fca5a5;
  --danger-press:   #b91c1c;   /* relleno presionado, siempre con texto blanco */
  --surface-inverse: var(--ink-900);  /* tooltip / chip invertido */
  --switch-off:     #a8b8c8;   /* riel del switch apagado */
  --switch-on-ios:  #34c759;   /* verde del switch del sistema, solo táctil */
  --dispatch-pending: #a78bfa; /* punto de "pendiente de envío" */
  --success-on-fill:  #bbf7d0; /* verde legible ENCIMA de un relleno azul */
  --comp-rim-bg:   #ffedd5; --comp-rim-fg:   #c2410c;   /* insignia de aro */
  --comp-chain-bg: #ede9fe; --comp-chain-fg: #6d28d9;   /* insignia de cadena */
}

/* ============================================================================
   MODO OSCURO
   Se lee en faena con el teléfono al sol y de noche; no es un lujo.
   Se define en [data-theme="dark"] y en prefers-color-scheme, para que el
   interruptor de la app gane en ambas direcciones (regla 10).
   ============================================================================ */
[data-theme="dark"] {
  color-scheme: dark;

  --page:          #0f1623;
  --surface:       #1a2235;
  --surface-muted: #172031;
  --surface-2:     #141d2e;

  --text-strong: #e8edf5;
  --text:        #b8c4d8;
  --text-muted:  #8494ad;

  --border:        #243047;
  --border-strong: #2e3d58;

  --primary:       #4d90da;  /* #306cb4 no alcanza AA sobre #0f1623 */
  --primary-hover: #6aa4e4;
  --primary-soft:  rgba(48, 108, 180, .18);
  --primary-fill:  var(--blue-500);

  --success-bg: rgba(22, 163, 90, .18);  --success-fg: #4ade80;
  --warning-bg: rgba(242, 163, 18, .18); --warning-fg: #fbbf24;
  --danger-bg:  rgba(224, 65, 61, .18);  --danger-fg:  #f87171;
  --info-bg:    rgba(48, 108, 180, .18); --info-fg:    #7ab8ef;

  --shadow-xs: 0 2px 8px rgba(0, 0, 0, .30);
  --shadow-sm: 0 6px 20px rgba(0, 0, 0, .35);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, .45);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .50);

  --gradient-page: none;

  --cat-1: #a58cff;  --cat-2: #2dd4bf;  --cat-3: #e879f9;  --cat-4: #818cf8;
  --cat-5: #f59e0b;  --cat-6: #22d3ee;  --cat-7: #f472b6;  --cat-8: #94a3b8;

  --hairline:       rgba(255, 255, 255, .13);
  --tint-ios:       #64a9ee;
  --surface-chrome: rgba(42, 49, 64, .88);
  --fill-1: rgba(255, 255, 255, .36);
  --fill-2: rgba(255, 255, 255, .32);
  --fill-3: rgba(255, 255, 255, .24);
  --fill-4: rgba(255, 255, 255, .18);
  --label-4: #3a4761;

  /* ── Estados de neumático — oscuro ── */
  --status-stock-bg:            rgba(34,197,94,.18);  --status-stock-fg:            #4ade80;
  --status-desarmado-bg:        rgba(16,185,129,.18); --status-desarmado-fg:        #34d399;
  --status-evaluation-bg:       rgba(59,130,246,.20); --status-evaluation-fg:       #60a5fa;
  --status-pending-repair-bg:   rgba(245,158,11,.20); --status-pending-repair-fg:   #fbbf24;
  --status-repair-bg:           rgba(249,115,22,.20); --status-repair-fg:           #fb923c;
  --status-pending-retread-bg:  rgba(139,92,246,.20); --status-pending-retread-fg:  #a78bfa;
  --status-retread-bg:          rgba(124,58,237,.28); --status-retread-fg:          #c4b5fd;
  --status-scrapped-bg:         rgba(239,68,68,.20);  --status-scrapped-fg:         #f87171;
  --status-recycling-bg:        rgba(107,124,98,.24); --status-recycling-fg:        #a8b89c;

  /* ── Semáforo de daño — oscuro ── */
  --grade-1: #f87171; --grade-2: #fb923c; --grade-3: #facc15;
  --grade-1-bg: rgba(239,68,68,.20);  --grade-1-fg: #f87171; --grade-1-border: rgba(248,113,113,.55);
  --grade-2-bg: rgba(249,115,22,.20); --grade-2-fg: #fb923c; --grade-2-border: rgba(251,146,60,.55);
  --grade-3-bg: rgba(234,179,8,.20);  --grade-3-fg: #fbbf24; --grade-3-border: rgba(250,204,21,.55);

  /* ── Escala de uso — oscuro ── */
  --wear-1: #4ade80;  --wear-2: #86c98f;  --wear-3: #fbbf24;
  --wear-4: #fb923c;  --wear-5: #94a3b8;

  --accent-orange: #f0925a;
  --accent-violet: #a78bfa;

  --danger-border:   rgba(248,113,113,.55);
  --surface-inverse: #2e3d58;
  --switch-off:      #4a7fb5;
  --comp-rim-bg:   rgba(249,115,22,.20); --comp-rim-fg:   #fb923c;
  --comp-chain-bg: rgba(139,92,246,.20); --comp-chain-fg: #a78bfa;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --page: #0f1623; --surface: #1a2235; --surface-muted: #172031; --surface-2: #141d2e;
    --text-strong: #e8edf5; --text: #b8c4d8; --text-muted: #8494ad;
    --border: #243047; --border-strong: #2e3d58;
    --primary: #4d90da; --primary-hover: #6aa4e4; --primary-soft: rgba(48,108,180,.18);
    --success-bg: rgba(22,163,90,.18);  --success-fg: #4ade80;
    --warning-bg: rgba(242,163,18,.18); --warning-fg: #fbbf24;
    --danger-bg:  rgba(224,65,61,.18);  --danger-fg:  #f87171;
    --info-bg:    rgba(48,108,180,.18); --info-fg:    #7ab8ef;
    --shadow-xs: 0 2px 8px rgba(0,0,0,.30); --shadow-sm: 0 6px 20px rgba(0,0,0,.35);
    --shadow-md: 0 12px 32px rgba(0,0,0,.45); --shadow-lg: 0 20px 60px rgba(0,0,0,.50);
    --gradient-page: none;
    --hairline: rgba(255,255,255,.13); --surface-chrome: rgba(42,49,64,.88);
    --tint-ios: #64a9ee; --label-4: #3a4761;
    --fill-1: rgba(255,255,255,.36); --fill-2: rgba(255,255,255,.32);
    --fill-3: rgba(255,255,255,.24); --fill-4: rgba(255,255,255,.18);
  }
}

/* ============================================================================
   ALIAS DE COMPATIBILIDAD
   ~106 usos repartidos en app.css / index.html / app.js referencian nombres
   antiguos. Una var() sin definir no aplica NADA y la regla completa cae en
   silencio (el caso visible fue `.toggle-pill.active`: texto blanco sobre
   fondo blanco en tema claro). Se resuelven acá en vez de reescribir los usos.
   En código NUEVO usar los tokens reales de arriba.
   ============================================================================ */
:root {
  --surface-page:   var(--page);
  --surface-card:   var(--surface);
  --surface-sunken: var(--surface-2);
  --surface-base:   var(--surface);
  --surface-raised: var(--surface);
  --surface-subtle: var(--surface-2);
  --surface-hover:  var(--surface-2);
  --bg-secondary:   var(--surface-2);
  --bg-tertiary:    var(--page);
  --bg-hover:       var(--surface-2);

  --text-body:      var(--text);
  --text-primary:   var(--text-strong);
  --text-secondary: var(--text-muted);

  --border-subtle:  var(--border);
  --border-normal:  var(--border-strong);
  --border-base:    var(--border-strong);

  --primary-50:     var(--blue-50);
  --error:          var(--danger);
  --error-bg:       var(--danger-bg);
  --warning-border: var(--warning);

  --radius-xs:   var(--r-xs);   --radius-sm:  var(--r-sm);   --radius-md:  var(--r-md);
  --radius-lg:   var(--r-lg);   --radius-xl:  var(--r-xl);   --radius-2xl: var(--r-2xl);
  --radius-pill: var(--r-pill); --radius-full: var(--r-pill); --radius: var(--r-md);
  --radius-ios-sm: var(--r-ios-sm); --radius-ios-md: var(--r-ios-md); --radius-ios-lg: var(--r-ios-lg);

  --shadow-card:   var(--shadow-xs);
  --shadow-pop:    var(--shadow-md);
  --shadow-button: var(--shadow-brand);
  --shadow-modal:  var(--shadow-lg);

  --brand-gradient: var(--gradient-brand);
  --font-title:     var(--font-display);
  --font-ui:        var(--font-body);
  --font-sans:      var(--font-body);

  --transition:     var(--t);
  --transition-ios: var(--t-ios);

  --sidebar-width:           var(--sidebar-w);
  --sidebar-collapsed-width: var(--sidebar-w-min);
  --topbar-height:           var(--topbar-h);
}

/* ── Tipografía del sistema, solo táctil ───────────────────────────────────
   Excepción heredada de TMS, mantenida a propósito: en teléfono/tablet la
   fuente pasa a ser la del sistema operativo (SF Pro en iOS, Roboto en
   Android). Es lo que hace que el texto "se sienta" nativo. Sora se conserva
   para el logo y los títulos de marca (fijado explícito ahí, no vía
   --font-display). Nunca por ancho: la frontera del proyecto es hover/pointer. */
@media (hover: none) and (pointer: coarse) {
  :root {
    --font-body:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
    --font-display: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
    --font-ui:      var(--font-body);
  }
}