/* ========================================================================
   SIS 3.0 — tokens.css
   Variables globales (tema claro + oscuro por data attribute)
   NOTA: evita !important en tokens.
   ======================================================================== */

:root {
  /* ----------------------- Paleta corporativa (escalas) --------------- */
  /* Azul Macasa (azure-radiance) */
  --mc-azul-50:  #ecf0fe;
  --mc-azul-100: #d3ddfd;
  --mc-azul-200: #abc0fc;
  --mc-azul-300: #83a6fa;
  --mc-azul-400: #558ff9;
  --mc-azul-500: #2379eb; /* Azul base del logo */
  --mc-azul-600: #1d67cb;
  --mc-azul-700: #1450a0;
  --mc-azul-800: #0b3771;
  --mc-azul-900: #041d42;
  --mc-azul-950:#02102a;

  /* Verde corporativo (emerald) */
  --mc-verde-50:  #c0ffd7;
  --mc-verde-100: #3fffa2;
  --mc-verde-200: #00e68b;
  --mc-verde-300: #00ce7c;
  --mc-verde-400: #00ba6f;
  --mc-verde-500: #009f5e;
  --mc-verde-600: #00814c;
  --mc-verde-700: #006238;
  --mc-verde-800: #004325;
  --mc-verde-900: #002412;
  --mc-verde-950:#001508;

  /* Neutros (escala de “negros”) */
  --neutral-50:  #f1f1f1;
  --neutral-100: #dbdbdb;
  --neutral-200: #bababa;
  --neutral-300: #9d9d9d;
  --neutral-400: #838383;
  --neutral-500: #6b6b6b;
  --neutral-600: #545454;
  --neutral-700: #3f3f3f;
  --neutral-800: #2c2c2c;
  --neutral-900: #1a1a1a;
  --neutral-950:#000000;

  /* ----------------------- Bordes y sombras globales ------------------ */
  /* Bordes un poco más marcados pero aún suaves */
  --border-soft:   color-mix(in srgb, var(--neutral-200) 55%, #ffffff 45%);
  --border-subtle: color-mix(in srgb, var(--neutral-100) 70%, #ffffff 30%);
  --border-strong: var(--neutral-300); /* líneas más marcadas (casos puntuales) */

  /* Sombras un poco más presentes en light */
  --shadow-soft:   0 7px 20px rgba(15, 23, 42, .09);
  --shadow-medium: 0 15px 38px rgba(15, 23, 42, .15);
  --shadow-strong: 0 26px 64px rgba(15, 23, 42, .21);

  /* ----------------------- Campos de formulario (inputs / textarea) --- */
  /* Modo claro: borde neutro, foco azul */
  --input-bg: #ffffff;
  --input-border: var(--border-soft);
  --input-focus-border: var(--mc-azul-500);
  --input-focus-shadow: 0 0 0 1px color-mix(in srgb, var(--mc-azul-500) 55%, transparent 45%);
  --input-placeholder: #777777;

  /* ----------------------- Alias de marca (compatibilidad) ------------ */
  --mc-azul:         var(--mc-azul-500);
  --mc-verde:        var(--mc-verde-500);
  --mc-azul-oscuro:  var(--mc-azul-700);
  --mc-verde-oscuro: var(--mc-verde-700);

  /* ---------- Puente hacia Bootstrap (color de marca y fondo) --------- */
  --bs-primary: var(--mc-azul-500);
  --bs-success: var(--mc-verde-500);

  /* Texto / fondo general Bootstrap */
  --text-color: #000000;
  --color-fuente: var(--text-color);

  --bs-body-bg: var(--neutral-50);   /* fondo ligeramente gris */
  --bs-body-color: var(--text-color);

  /* ----------------------- Sidebar / layout --------------------------- */
  --sidebar-bg: var(--mc-azul-50);
  --sidebar-divider-color: var(--border-subtle);
  --sidebar-menu-item-hover-color: var(--mc-azul-600);

  /* ----------------------- Topbar global ------------------------ */
  /* Modo claro: se mantiene el look actual (blanco con ligera separación) */
  --topbar-bg: #ffffff;
  --topbar-border: color-mix(in srgb, var(--border-subtle) 100%, transparent);
  --topbar-shadow: 0 1px 2px rgba(15, 23, 42, .05);

  /* ----------------------- Superficies Enterprise --------------------- */
  /* Capa base: fondo general de la app */
  --surface-page-bg: var(--bs-body-bg);

  /* Superficie principal: cards de contenido, filtros, secciones clave */
  --surface-main-bg: #ffffff;
  --surface-main-border: color-mix(in srgb, var(--border-soft) 100%, transparent);
  --surface-main-shadow: var(--shadow-soft);

  /* Superficie sutil: barras, subcards, bloques secundarios */
  --surface-subtle-bg: var(--neutral-50);
  --surface-subtle-border: color-mix(in srgb, var(--border-subtle) 95%, transparent);
  --surface-subtle-shadow: 0 3px 10px rgba(15, 23, 42, .06);

  /* Capa de overlay (modales, paneles flotantes) */
  --surface-overlay-bg: var(--modal-bg);
  --surface-overlay-border: var(--modal-border);
  --surface-overlay-shadow: var(--modal-shadow);

  /* Estados de “semáforo” (reportes/KPIs) */
  --grado-minimo: #c62828;
  --grado-bajo: #ef5350;
  --grado-puede-mejorar: #FEE028;
  --grado-bien: #81c784;
  --grado-muy-bien: #4caf50;
  --grado-excelente: #2e7d32;

  /* Ritmo/animación */
  --sidebar-speed: 0.35s;

  /* Anchos varios */
  --item-max-width: 160px;

  /* ----------------------- Tipografía (escala) ----------------------- */
  --fuente-titulo: 1.75rem;
  --fuente-subtitulo: 1.09375rem;
  --fuent-subtitulo: var(--fuente-subtitulo); /* alias compat */
  --fuente-normal: 0.875rem;
  --fuente-peq: 0.75rem;

  /* ----------------------- Cards ----------------------- */
  --card-header-bg: var(--mc-azul-50);  /* franja azul clarita */
  --card-header-color: #000000;
  --card-body-bg: #ffffff;              /* cuerpo blanco para máximo contraste */
  --bs-card-color: #000000;

  /* ----------------------- Tablas (tema claro) ----------------------- */
  --tabla-header-bg: var(--mc-azul-50);
  --tabla-header-color: #000000;
  --tabla-header-text: #000000;
  --tabla-header-hover-bg: var(--mc-azul-100);
  --tabla-card-body-bg: #ffffff;

  /* Filas alternas y hover (estilo Bootstrap suave) */
  --tabla-row-alt-bg: color-mix(in srgb, var(--neutral-100) 30%, #ffffff 70%);
  --tabla-row-hover-bg: var(--tabla-row-alt-bg);

  /* ----------------------- Botones / vínculos ------------------------ */
  --bs-btn-bg: var(--mc-azul); /* puente Bootstrap */

  /* Botón secundario corporativo (gris Macasa) */
  --btn-secondary-bg: color-mix(in srgb, var(--neutral-100) 80%, #ffffff 20%);
  --btn-secondary-border: var(--neutral-200);
  --btn-secondary-hover-bg: color-mix(in srgb, var(--neutral-200) 65%, #ffffff 35%);
  --btn-secondary-active-bg: color-mix(in srgb, var(--neutral-300) 70%, #ffffff 30%);

  /* ----------------------- Modos / estados especiales ---------------- */
  --modo-archivado-body-bg: #ffaeae;
  --modo-archivado-sidebar-bg: #fd6c6c;

  /* ----------------------- Cabeceras específicas --------------------- */
  --header-coti: var(--mc-azul-100);
  --header-margen: #DBF7D3;
  --fila-alcance: #f8f9fa;
  --hover-cotizaciones: #f1f1f1;

  /* ----------------------- Logo / Topbar rail ------------------------ */
  --logo-box-bg: var(--sidebar-bg);
  --logo-box-border: 1px solid var(--sidebar-divider-color);

  /* ----------------------- Modal (tokens base) ----------------------- */
  --modal-bg: #ffffff;
  --modal-color: #000000;
  --modal-border: 1px solid var(--border-soft);
  --modal-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
  --modal-header-bg: transparent;
  --modal-header-color: var(--text-color);
  --modal-body-bg: transparent;
  --modal-body-text: var(--text-color);

  /* ----------------------- Opción tipo de cuenta --------------------- */
  --tipo-opcion-bg: #ffffff;
  --tipo-opcion-border: var(--border-soft);
  --tipo-opcion-text: #0f172a;
  --tipo-opcion-hover-bg: #f8fafc;
  --tipo-opcion-hover-border: var(--mc-azul-200); /* FIX */
  --tipo-opcion-hover-shadow: 0 0 0 2px #7b90ff33;
  --tipo-opcion-focus-shadow: 0 0 0 3px #7b90ff4d;
  --tipo-opcion-body-strong: #0f172a;
  --tipo-opcion-body-p: #475569;

  --color-body-nota: #e9ecef;
}

/* ========================================================================
   Tema oscuro (activa con data-bs-theme="dark")
   ======================================================================== */
html[data-bs-theme="dark"],
body[data-bs-theme="dark"] {
  --text-color: #ffffff;
  --color-fuente: var(--text-color);

  /* Fondo y texto base Bootstrap en modo dark */
  --bs-body-bg: #15181f;
  --bs-body-color: var(--text-color);

  /* Sidebar / divisores */
  --sidebar-bg: #2C302E;
  --sidebar-divider-color: #2e333c;
  --sidebar-menu-item-hover-color: #ffffff;

  /* Bordes y sombras en dark */
  --border-soft:   #2e333c;
  --border-subtle: #20242c;
  --border-strong: #444c5c;

  --shadow-soft:   0 1px 3px rgba(0, 0, 0, .35);
  --shadow-medium: 0 4px 12px rgba(0, 0, 0, .55);
  --shadow-strong: 0 8px 24px rgba(0, 0, 0, .8);

  /* ----------------------- Campos de formulario (dark) ---------------- */
  /* Fondo ligeramente más claro que la card */
  --input-bg: #2a2f38;

  /* Borde base: azul corporativo suavizado con el borde gris del tema */
  --input-border: color-mix(
    in srgb,
    var(--mc-azul-500) 55%,
    var(--border-soft) 45%
  );

  /* Foco: sigue siendo el azul oficial, pero con halo más fino y suave */
  --input-focus-border: var(--mc-azul-500);
  --input-focus-shadow: 0 0 0 .14rem
    color-mix(in srgb, var(--mc-azul-500) 40%, transparent 60%);

  --input-placeholder: #b2b8c6;

  /* Cards */
  --bs-card-color: #f1f1f1;
  --card-body-bg: #363a38;
  --card-header-bg: #2d3440;
  --card-header-color: #ffffff;

  /* Tablas */
  --tabla-header-bg: #2d3440;
  --tabla-header-text: #ffffff;
  --tabla-card-body-bg: #2a2e35; /* similar a card-body pero un poco distinto */
  --tabla-header-hover-bg: #3b4562;

  /* Filas alternas / hover en dark (mismo tono) */
  --tabla-row-alt-bg: color-mix(in srgb, #ffffff 5%, #020617 95%);
  --tabla-row-hover-bg: var(--tabla-row-alt-bg);

  /* Modal */
  --modal-bg: #1f232a;
  --modal-color: #ffffff;
  --modal-border: 1px solid var(--border-soft);
  --modal-shadow: 0 0 1rem rgba(0, 0, 0, .6);
  --modal-header-bg: transparent;
  --modal-header-color: #ffffff;
  --modal-body-bg: transparent;
  --modal-body-text: #ffffff;

  /* Superficies Enterprise (modo oscuro) */
  --surface-page-bg: var(--bs-body-bg);

  --surface-main-bg: #1f232a;
  --surface-main-border: var(--border-soft);
  --surface-main-shadow: 0 2px 8px rgba(0, 0, 0, .7);

  --surface-subtle-bg: #20242c;
  --surface-subtle-border: #2a2f38;
  --surface-subtle-shadow: 0 1px 3px rgba(0, 0, 0, .6);

  --surface-overlay-bg: var(--modal-bg);
  --surface-overlay-border: var(--modal-border);
  --surface-overlay-shadow: var(--modal-shadow);

  /* Topbar en dark: mismo fondo que el lienzo, sin “corte” visual */
  --topbar-bg: var(--surface-page-bg);   /* = var(--bs-body-bg) en dark */
  --topbar-border: transparent;
  --topbar-shadow: none;

  /* Botón secundario en modo oscuro */
  --btn-secondary-bg: #2a2f38;
  --btn-secondary-border: #3a414e;
  --btn-secondary-hover-bg: #313844;
  --btn-secondary-active-bg: #3a414e;

  /* Cabeceras específicas modo dark */
  --header-coti: #5C66A8;
  --header-margen: #88C58A;
  --fila-alcance: #2b2b2b;
  --hover-cotizaciones: #3a3a3a;

  /* Estados especiales */
  --modo-archivado-body-bg: #8d0c2a;
  --modo-archivado-sidebar-bg: #5d1f25;

  /* Opción tipo de cuenta */
  --tipo-opcion-bg: #2a2f38;
  --tipo-opcion-border: #3a414e;
  --tipo-opcion-text: #e3e6ed;
  --tipo-opcion-hover-bg: #313844;
  --tipo-opcion-hover-border: #7782ff;
  --tipo-opcion-hover-shadow: 0 0 0 2px #7b90ff33;
  --tipo-opcion-focus-shadow: 0 0 0 3px #7b90ff4d;
  --tipo-opcion-body-strong: #e5e9f2;
  --tipo-opcion-body-p: #b2b8c6;

  /* Logo rail */
  --logo-box-bg: var(--sidebar-bg);
  --logo-box-border: 1px solid var(--sidebar-divider-color);

  --color-body-nota: #2d3440; /* mate, consistente con selects dark */
}