/* Asentado — estilos.css v3.0.0 CREMA + DUAL THEME
 * Sistema de doble tema: diurno (crema cálido) y nocturno (oscuro).
 * Toggle en el header con persistencia. Diseño de estudio premium.
 */

/* ═══════════════ TOKENS ESTRUCTURALES (compartidos) ═══════════════ */
:root{
  /* Radios */
  --r-xl:24px; --r-lg:18px; --r-md:14px; --r-sm:10px; --r-xs:7px;
  /* Movimiento */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur-fast:120ms; --dur:180ms; --dur-slow:320ms;
  /* Tipografía */
  --font-body:"Inter","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --font-mono:"JetBrains Mono","SF Mono","Cascadia Code",monospace;
  --font-size-xs:.6875rem; --font-size-sm:.8125rem; --font-size-md:.9375rem;
  --font-size-lg:1.0625rem; --font-size-xl:1.375rem; --font-size-2xl:1.75rem; --font-size-3xl:2.25rem;
  /* Transición de tema */
  --theme-transition:background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}

/* ═══════════════ TEMA DIURNO (CREMA CÁLIDO — contraste WCAG AA) ═══════════════ */
:root, [data-theme="light"]{
  color-scheme:light;
  /* Fondo: crema cálido con capas de profundidad */
  --bg0:#f5f0e8; --bg1:#efe8dd; --bg2:#eae2d5; --bg3:#e5dccf;
  /* Tinta: marrón muy oscuro — ratio 13.8:1 sobre crema (AA AAA) */
  --ink:#2a2520; --ink-2:#4a423a;
  /* Texto secundario — ratio 5.2:1 sobre crema (AA) */
  --muted:#5c5450;
  /* Texto terciario — ratio 3.8:1 (solo para labels uppercase grandes, no body) */
  --faint:#8a8078;
  /* Marca: verde profundo (ratio 5.8:1) + bronce oscuro (ratio 4.7:1) */
  --verde:#0d7a5c; --verde-2:#0a6b4a; --verde-3:#085a3e;
  --ambar:#8a6e35; --ambar-2:#7a6030; --ambar-3:#6a5228;
  --danger:#a83848; --danger-2:#902838;
  --vio:#5a4e88; --vio-2:#4a3e78;
  --info:#3a7a9e;
  /* Superficies de vidrio: blanco opaco (no translúcido en claro) */
  --glass:rgba(255,253,250,.88); --glass-2:rgba(255,252,248,.82); --glass-3:rgba(42,37,32,.06);
  --glass-border:rgba(42,37,32,.14); --glass-border-2:rgba(42,37,32,.08);
  /* Líneas */
  --line:rgba(42,37,32,.14); --line-soft:rgba(42,37,32,.08); --line-strong:rgba(42,37,32,.22);
  /* Sombras: cálidas, suaves */
  --shadow-xs:0 2px 8px rgba(42,37,32,.06);
  --shadow-sm:0 4px 16px rgba(42,37,32,.08);
  --shadow-md:0 8px 32px rgba(42,37,32,.1);
  --shadow-lg:0 20px 60px rgba(42,37,32,.12);
  --shadow-xl:0 32px 80px rgba(42,37,32,.15);
  /* Glow */
  --glow-verde:0 0 0 1px rgba(13,122,92,.15), 0 4px 16px rgba(13,122,92,.08);
  --glow-ambar:0 0 0 1px rgba(160,128,64,.15), 0 4px 16px rgba(160,128,64,.06);
  --glow-danger:0 0 0 1px rgba(192,80,96,.15), 0 4px 16px rgba(192,80,96,.06);
  /* Botón primario texto */
  --btn-primario-texto:#f5f0e8;
  /* Aurora: tonos cálidos suaves sobre crema */
  --aurora-bg:linear-gradient(170deg,#f5f0e8 0%,#efe8dd 40%,#eae2d5 70%,#f5f0e8 100%);
  --aurora-b1:rgba(13,122,92,.06);
  --aurora-b2:rgba(160,128,64,.04);
  --aurora-b3:rgba(107,95,158,.03);
  /* Componentes que necesitan valores específicos del tema */
  --header-bg:rgba(245,240,232,.92);
  --header-shadow:0 1px 0 rgba(42,37,32,.1), 0 8px 32px rgba(42,37,32,.06);
  --glass-grad:linear-gradient(135deg,rgba(255,255,255,.5),rgba(255,255,255,.15));
  --glass-inset:inset 0 1px 0 rgba(255,255,255,.8);
  --overlay-bg:rgba(42,37,32,.35);
  --overlay-blur:blur(16px);
  --badge-verde-bg:rgba(13,122,92,.08);
  --badge-ambar-bg:rgba(138,110,53,.08);
  --badge-danger-bg:rgba(168,56,72,.08);
  --badge-vio-bg:rgba(90,78,136,.08);
  --kbd-bg:rgba(42,37,32,.06);
  --kbd-border:rgba(42,37,32,.1);
  --input-bg:rgba(255,253,250,.8);
  --select-bg:rgba(255,253,250,.9);
}

/* ═══════════════ TEMA NOCTURNO (OSCURO PROFUNDO) ═══════════════ */
[data-theme="dark"]{
  color-scheme:dark;
  /* Fondo: noche neutral profunda */
  --bg0:#08090c; --bg1:#0c0e12; --bg2:#101319; --bg3:#141820;
  /* Tinta: neutra, profesional */
  --ink:#eef0f3; --ink-2:#c4c9d0; --muted:#828c98; --faint:#525c68;
  /* Marca: verde profundo + bronce */
  --verde:#1a8f6d; --verde-2:#47b892; --verde-3:#0d6b52;
  --ambar:#b8964f; --ambar-2:#dbbf85; --ambar-3:#8f7440;
  --danger:#c85f70; --danger-2:#de8a97;
  --vio:#7e72c8; --vio-2:#a298e0;
  --info:#4a9ec7;
  /* Superficies de vidrio: oscuro translúcido */
  --glass:rgba(10,13,17,.72); --glass-2:rgba(12,16,21,.56); --glass-3:rgba(255,255,255,.03);
  --glass-border:rgba(136,146,160,.12); --glass-border-2:rgba(136,146,160,.07);
  /* Líneas */
  --line:rgba(136,146,160,.12); --line-soft:rgba(136,146,160,.07); --line-strong:rgba(136,146,160,.18);
  /* Sombras: profundas */
  --shadow-xs:0 2px 8px rgba(0,2,4,.3);
  --shadow-sm:0 4px 16px rgba(0,2,4,.35);
  --shadow-md:0 8px 32px rgba(0,2,4,.45);
  --shadow-lg:0 20px 60px rgba(0,2,4,.55);
  --shadow-xl:0 32px 80px rgba(0,2,4,.65);
  /* Glow */
  --glow-verde:0 0 0 1px rgba(26,143,109,.18), 0 6px 20px rgba(26,143,109,.08);
  --glow-ambar:0 0 0 1px rgba(184,150,79,.18), 0 6px 20px rgba(184,150,79,.07);
  --glow-danger:0 0 0 1px rgba(200,95,112,.18), 0 6px 20px rgba(200,95,112,.07);
  --btn-primario-texto:#f0f2f5;
  /* Aurora: tonos fríos sutiles sobre oscuro */
  --aurora-bg:linear-gradient(170deg,#08090c 0%,#0c0e12 40%,#101319 70%,#08090c 100%);
  --aurora-b1:rgba(26,143,109,.08);
  --aurora-b2:rgba(184,150,79,.04);
  --aurora-b3:rgba(126,114,200,.03);
  /* Componentes específicos del tema oscuro */
  --header-bg:rgba(8,9,12,.88);
  --header-shadow:0 1px 0 rgba(136,146,160,.12), 0 8px 32px rgba(0,2,4,.3);
  --glass-grad:linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
  --glass-inset:inset 0 1px 0 rgba(255,255,255,.05);
  --overlay-bg:rgba(0,2,4,.65);
  --overlay-blur:blur(12px);
  --badge-verde-bg:rgba(26,143,109,.14);
  --badge-ambar-bg:rgba(184,150,79,.12);
  --badge-danger-bg:rgba(200,95,112,.18);
  --badge-vio-bg:rgba(126,114,200,.12);
  --kbd-bg:rgba(255,255,255,.04);
  --kbd-border:rgba(136,146,160,.12);
  --input-bg:rgba(0,2,4,.5);
  --select-bg:rgba(255,255,255,.03);
}

/* ═══════════════ APLICAR TRANSICIÓN DE TEMA ═══════════════ */
body, .panel, .glass, .cabecera, .modal, .toast, .zona-carga, .tarjeta-total, .plantilla-card,
.barra-filtros, .resumen-cliente, .panel-graficos, .panel-convenio, .panel-ddjj, .panel-estrategico, .panel-arca{
  transition:var(--theme-transition);
}