/* ════════════════════════════════════════════════════════════════════════
   TMS · SISTEMA DE DISEÑO (tokens)
   ────────────────────────────────────────────────────────────────────────
   Fuente única de verdad para color, tipografía, espaciado y formas.
   Se carga en base.html DESPUÉS de Bootstrap (para poder sobreescribirlo) y
   ANTES del <style> inline de cada template. Migración incremental: los
   templates van reemplazando sus hex sueltos por estos tokens, template a
   template, sin romper nada (los alias --tms-* preservan el código existente).

   Creado 2026-06-18 tras auditoría: 833 colores hardcodeados / 190 hex
   distintos → consolidados aquí. Fuente elegida por Pedro: Inter (clásica).
   ════════════════════════════════════════════════════════════════════════ */

/* ── Tipografía de marca: Inter (autoalojada, subset latino) ─────────────── */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/inter/inter-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/inter/inter-500.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/inter/inter-600.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/inter/inter-700.woff2') format('woff2');}

:root{
  /* ── Familia tipográfica (Inter primero, luego pila nativa de respaldo) ── */
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,
    'Helvetica Neue',Arial,sans-serif;

  /* ── ACENTO de marca (verde) — clicable/activo/positivo ────────────────── */
  --accent:#1D9E75;          --accent-2:#29C08F;        --accent-soft:#E1F5EE;
  --accent-ink:#0F6E56;      /* texto verde sobre fondo claro (contraste AA) */

  /* ── MARCA/sede/fusión (morado) — señal semántica, NO acento ───────────── */
  --brand:#5E35B1;           --brand-soft:#EDE7F6;

  /* ── TEXTO — 3 niveles (antes había 8 valores sueltos) ─────────────────── */
  --text:#1A2533;            /* títulos y cifras */
  --text-muted:#6C757D;      /* secundario / labels */
  --text-faint:#ADB5BD;      /* terciario / placeholders / metadatos */

  /* ── SUPERFICIES Y BORDES — 2 de cada (antes 6 grises de borde) ────────── */
  --surface:#FFFFFF;         /* tarjetas, modales */
  --surface-2:#F8F9FA;       /* fondo de página, metric/kpi cards */
  --surface-3:#F1F3F5;       /* hover, chips neutros, toggles */
  --border:#E9ECEF;          /* borde estándar */
  --border-soft:#EEF1F4;     /* divisores internos, filas de tabla */

  /* ── SEMÁNTICOS — uno por estado (antes 3 verdes, 4 rojos, 5 ámbares) ──── */
  --success:#1D9E75;         --success-soft:#E1F5EE;    --success-ink:#0F6E56;
  --warning:#E8590C;         --warning-soft:#FFF3CD;    --warning-ink:#8A4B00;
  --danger:#DC3545;          --danger-soft:#FDE8E8;     --danger-ink:#B02A37;
  --info:#0D6EFD;            --info-soft:#E7F1FF;
  --whatsapp:#25D366;        /* canal, color de marca externo */

  /* ── ESCALA TIPOGRÁFICA — normalizada (antes ~22 tamaños) ──────────────── */
  --fs-2xs:11px;   /* metadatos, badges pequeños (piso de legibilidad: ya no 9-10px) */
  --fs-xs:12px;    /* texto secundario en tablas densas */
  --fs-sm:13px;    /* texto base de tablas / cuerpo compacto */
  --fs-md:14px;    /* cuerpo por defecto */
  --fs-lg:16px;    /* subtítulos / títulos de tarjeta grandes */
  --fs-xl:20px;    /* cifras de KPI medianas */
  --fs-2xl:24px;   /* cifras de KPI grandes */
  --fs-3xl:30px;   /* hero / destacados */

  /* ── PESOS ─────────────────────────────────────────────────────────────── */
  --fw-normal:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;

  /* ── RADIOS — escala (antes 16 valores sueltos) ────────────────────────── */
  --radius-sm:6px; --radius:9px; --radius-lg:14px; --radius-pill:999px;

  /* ── ESPACIADO — escala de 4px ─────────────────────────────────────────── */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px;

  /* ── SOMBRAS ───────────────────────────────────────────────────────────── */
  --shadow-card:0 1px 2px rgba(16,24,40,.04);
  --shadow-pop:0 8px 30px rgba(16,24,40,.12);
  --shadow-modal:0 18px 50px rgba(16,24,40,.28);

  /* ══════════════════════════════════════════════════════════════════════
     ALIAS DE COMPATIBILIDAD — el código existente usa estos nombres (152×).
     Mismos valores que arriba; se conservan para NO romper templates aún sin
     migrar. A medida que un template migra, sus hex/alias pasan a los tokens
     canónicos de arriba. NO borrar hasta terminar la migración.
     ══════════════════════════════════════════════════════════════════════ */
  --tms-green:#1D9E75;       --tms-green-light:#E1F5EE;
  --tms-accent:#1D9E75;      --tms-accent-2:#29C08F;    --tms-accent-soft:#E1F5EE;
  --tms-brand:#5E35B1;       --tms-brand-soft:#EDE7F6;
}

/* ════════════════════════════════════════════════════════════════════════
   TEMA OSCURO (2026-07-04) — se activa con <html data-theme="dark"> (lo pone
   base.html desde localStorage). Como TODA la app pinta con estos tokens,
   basta redefinirlos aquí: superficies claras → grises oscuros, texto oscuro
   → claro, y los *-soft semánticos a fondos oscuros translúcidos.
   NOTA HONESTA: la migración a tokens es incremental (~833 hex sueltos aún sin
   migrar); los rincones con color hardcodeado (#fff, rgba negros) pueden verse
   claros en oscuro y se corrigen a medida que se detectan, template a template.
   ════════════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"]{
  /* Superficies: página casi negra, tarjetas un paso más claras */
  --surface:#1B1F27;         --surface-2:#12151B;      --surface-3:#262B35;
  --border:#2E343F;          --border-soft:#262B35;
  /* Texto invertido (mismos 3 niveles) */
  --text:#E7EAEE;            --text-muted:#9AA3AF;      --text-faint:#69707C;
  /* Acento: el verde rinde bien en oscuro; el -soft pasa a verde translúcido */
  --accent:#26B888;          --accent-2:#34D39E;        --accent-soft:#12352B;
  --accent-ink:#5FE0B4;
  --brand:#9B7BE0;           --brand-soft:#2A2140;
  /* Semánticos: fondos -soft oscurecidos, ink aclarado para contraste AA */
  --success:#26B888;         --success-soft:#12352B;    --success-ink:#5FE0B4;
  --warning:#F0863C;         --warning-soft:#3A2A12;    --warning-ink:#F0B27A;
  --danger:#E85D6B;          --danger-soft:#3A1E22;     --danger-ink:#F0949E;
  --info:#4D94FF;            --info-soft:#16263F;
  /* Sombras más marcadas (sobre fondo oscuro las suaves no se ven) */
  --shadow-card:0 1px 2px rgba(0,0,0,.4);
  --shadow-pop:0 8px 30px rgba(0,0,0,.55);
  --shadow-modal:0 18px 50px rgba(0,0,0,.65);
  /* Alias de compatibilidad (el código viejo los usa directo) */
  --tms-green:#26B888;       --tms-green-light:#12352B;
  --tms-accent:#26B888;      --tms-accent-2:#34D39E;    --tms-accent-soft:#12352B;
  --tms-brand:#9B7BE0;       --tms-brand-soft:#2A2140;
}
/* El fondo del <body> vive en base.html como var(--surface-2): ya cambia solo.
   Suavizar la transición al alternar tema. */
:root[data-theme="dark"] body { color-scheme: dark; }
body, #sidebar, .tms-card { transition: background-color .15s ease, border-color .15s ease; }

/* ── ENDURECIMIENTO DEL TEMA OSCURO ──────────────────────────────────────────
   Bootstrap y muchas utilidades traen fondos CLAROS propios que NO usan nuestros
   tokens (tablas blancas, modales, dropdowns, inputs). Aquí los reencauzamos a
   las superficies oscuras. Cubre los offensores grandes; algún hex inline suelto
   puede quedar claro y se corrige donde aparezca. */
:root[data-theme="dark"]{
  --bs-body-bg:#12151B; --bs-body-color:#E7EAEE;
  --bs-border-color:#2E343F;
  --bs-secondary-bg:#1B1F27; --bs-tertiary-bg:#262B35;
  --bs-emphasis-color:#E7EAEE; --bs-secondary-color:rgba(231,234,238,.65);
  --bs-heading-color:#E7EAEE;
}
/* Tablas: fondo transparente (heredan la tarjeta), texto claro, hover sutil */
:root[data-theme="dark"] .table{
  --bs-table-bg:transparent; --bs-table-color:var(--text);
  --bs-table-striped-bg:rgba(255,255,255,.03); --bs-table-striped-color:var(--text);
  --bs-table-hover-bg:rgba(255,255,255,.055); --bs-table-hover-color:var(--text);
  --bs-table-border-color:var(--border); color:var(--text);
}
:root[data-theme="dark"] .table > :not(caption) > * > *{ background-color:transparent; }
:root[data-theme="dark"] .table thead, :root[data-theme="dark"] .table th{ color:var(--text-muted); }
/* Contenedores de Bootstrap con fondo propio */
:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .dropdown-menu,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .list-group-item,
:root[data-theme="dark"] .accordion-item,
:root[data-theme="dark"] .offcanvas{
  background:var(--surface); color:var(--text); border-color:var(--border);
}
:root[data-theme="dark"] .dropdown-item{ color:var(--text); }
:root[data-theme="dark"] .dropdown-item:hover,
:root[data-theme="dark"] .dropdown-item:focus{ background:var(--surface-3); color:var(--text); }
:root[data-theme="dark"] .dropdown-divider{ border-color:var(--border); }
/* Formularios */
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select,
:root[data-theme="dark"] .input-group-text{
  background:var(--surface-3); color:var(--text); border-color:var(--border);
}
:root[data-theme="dark"] .form-control::placeholder{ color:var(--text-faint); }
:root[data-theme="dark"] .form-control:focus,
:root[data-theme="dark"] .form-select:focus{ background:var(--surface-3); color:var(--text); }
/* Utilidades de fondo/texto claras que aparecen hardcodeadas en templates */
:root[data-theme="dark"] .bg-white,
:root[data-theme="dark"] .bg-light{ background:var(--surface)!important; }
:root[data-theme="dark"] .text-dark{ color:var(--text)!important; }
:root[data-theme="dark"] .border{ border-color:var(--border)!important; }
/* Botón neutro (outline gris) legible en oscuro */
:root[data-theme="dark"] .btn-outline-secondary{ color:var(--text); border-color:var(--border); }
:root[data-theme="dark"] .btn-outline-secondary:hover{ background:var(--surface-3); color:var(--text); }
/* Badges "bg-secondary/light" claros → superficie oscura */
:root[data-theme="dark"] .badge.bg-light,
:root[data-theme="dark"] .badge.text-bg-light{ background:var(--surface-3)!important; color:var(--text)!important; }

/* ── Aplicar la fuente a toda la app (Bootstrap pone su pila en body;
      esto la sobreescribe porque tokens.css se carga DESPUÉS de Bootstrap). ── */
body{font-family:var(--font-sans);}
/* Inter rinde mejor con estas opciones de render activadas */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:'cv05' 1;}  /* 'cv05' = letra 'l' con cola, menos ambigua */
/* Cifras alineadas (tabular) SOLO en columnas de tablas densas (alinea verticalmente).
   Los números-titular de KPI (.metric-value, .kpi .v, .star-val) usan las figuras
   PROPORCIONALES de Inter: en tamaño grande se ven más limpias/editoriales. */
.cmp-tbl .num,.num,td.num{font-variant-numeric:tabular-nums;}