/* ============================================================
   MODO OSCURO  (agente BASE-UI)
   Misma familia que el modo oscuro de Fichas («Mis Finanzas»): fondo
   negro, tarjetas casi negras con un relieve abajo, bordes finos y el
   dorado de la marca reservado para lo importante.
   - js/app.js pone data-tema="oscuro" en <html> y lo recuerda en el aparato.
   - Todo va en @media screen: la impresión siempre sale en papel blanco.
   - Los colores claros de la marca se copian en --l-* para devolvérselos
     a la hoja de impresión (que se ve en claro aunque el tema sea oscuro).
   ============================================================ */
@media screen{

html[data-tema="oscuro"]{
  --l-principal:var(--principal); --l-principal-2:var(--principal-2); --l-principal-suave:var(--principal-suave);
  --l-acento:var(--acento); --l-acento-osc:var(--acento-osc); --l-acento-suave:var(--acento-suave); --l-crema:var(--crema);
  color-scheme:dark;
  background:#000;
}

html[data-tema="oscuro"] body{
  --o-barra:#0a0a0b;
  --o-labio:#1a1a1e;
  --o-sobre-acento:#15120c;

  --fondo:#000;
  --carta:#0e0e10;
  --carta-2:#151518;
  --tinta:#ededef;
  --gris:#a0a0a8;
  --borde:#222227;
  --borde-fuerte:#34343b;
  --linea:#1c1c20;
  --principal:color-mix(in srgb, var(--l-acento) 18%, #f2f1ee);     /* títulos y cifras: crema casi blanca */
  --principal-2:#2a2a30;
  --principal-suave:#18181b;
  --acento-osc:color-mix(in srgb, var(--l-acento) 82%, #fff);
  --acento-suave:color-mix(in srgb, var(--l-acento) 16%, #111113);
  --crema:color-mix(in srgb, var(--l-acento) 62%, #fff);
  --ok:#55c891;     --ok-fondo:#0e2318;
  --error:#ff8a7c;  --error-fondo:#2a1412;
  --aviso:#f1cf72;  --aviso-fondo:#251e0c;
  --info:#93c1f2;   --info-fondo:#0f1e30;
  --neutro:#c4c4cb; --neutro-fondo:#1c1c20;
  --g1:#e4ded2; --g2:var(--l-acento); --g3:#55c891; --g4:#7fa8e0; --g5:#e08d68; --g6:#b3a2e6;
  --sombra:0 3px 0 0 var(--o-labio);
  background:var(--fondo); color:var(--tinta);
  scrollbar-color:#2a2a30 transparent;
}
html[data-tema="oscuro"] ::selection{ background:color-mix(in srgb, var(--l-acento) 40%, #000); color:#fff; }
html[data-tema="oscuro"] :focus-visible{ outline-color:var(--l-acento); }

/* ---------- arranque y acceso ---------- */
html[data-tema="oscuro"] .arranque, html[data-tema="oscuro"] .acceso-fondo{
  background:radial-gradient(900px 500px at 50% -10%, color-mix(in srgb, var(--l-acento) 14%, #000), #000 70%);
}
html[data-tema="oscuro"] .acceso-caja{ background:var(--carta); border:1px solid var(--borde); border-top:3px solid var(--l-acento); border-radius:22px;
  box-shadow:0 3px 0 0 var(--o-labio), 0 20px 60px rgba(0,0,0,.6); }
/* el logo a color va sobre una pastilla clara para que se lea */
html[data-tema="oscuro"] .acceso-logo{ background:#fff; border-radius:12px; padding:6px 12px; height:76px; }
html[data-tema="oscuro"] .acceso-firma{ color:#8d8d95; }

/* ---------- barra superior y menú ---------- */
html[data-tema="oscuro"] .barra-superior{ background:var(--o-barra); border-bottom:2px solid color-mix(in srgb, var(--l-acento) 70%, #000); }
html[data-tema="oscuro"] .barra-btn, html[data-tema="oscuro"] .usuario-chip{ background:#151518; border-color:#2a2a30; }
html[data-tema="oscuro"] .barra-btn:hover, html[data-tema="oscuro"] .usuario-chip:hover{ background:#1e1e22; }
html[data-tema="oscuro"] .usuario-avatar{ background:var(--l-acento); color:var(--o-sobre-acento); }
html[data-tema="oscuro"] .miga-titulo{ color:#f2f1ee; }
html[data-tema="oscuro"] .menu{ background:#08080a; border-right-color:var(--borde); }
html[data-tema="oscuro"] .menu-item{ color:#d6d6db; }
html[data-tema="oscuro"] .menu-item:hover{ background:#151518; }
html[data-tema="oscuro"] .menu-item.activo{ background:var(--acento-suave); color:#fff; }
html[data-tema="oscuro"] .menu-item.activo::before{ background:var(--l-acento); }
html[data-tema="oscuro"] .menu-velo{ background:rgba(0,0,0,.7); }
html[data-tema="oscuro"] .barra-carga::before{ background:var(--l-acento); }

/* ---------- tarjetas ---------- */
html[data-tema="oscuro"] .tarjeta, html[data-tema="oscuro"] .kpi{ border-radius:16px; box-shadow:0 3px 0 0 var(--o-labio); }
html[data-tema="oscuro"] .kpi::before{ background:var(--l-acento); }
html[data-tema="oscuro"] .kpi-ok::before{ background:var(--ok); }
html[data-tema="oscuro"] .kpi-error::before{ background:var(--error); }
html[data-tema="oscuro"] .kpi-aviso::before{ background:#e0b443; }
html[data-tema="oscuro"] .kpi-info::before{ background:var(--info); }

/* ---------- botones ---------- */
html[data-tema="oscuro"] .btn{ box-shadow:0 3px 0 0 rgba(0,0,0,.65); }
html[data-tema="oscuro"] .btn:active:not(:disabled){ box-shadow:none; }
html[data-tema="oscuro"] .btn-primario{ background:var(--l-acento); color:var(--o-sobre-acento); border-color:transparent; box-shadow:0 3px 0 0 color-mix(in srgb, var(--l-acento) 40%, #000); }
html[data-tema="oscuro"] .btn-primario:focus-visible{ outline-color:#fff; }
html[data-tema="oscuro"] .btn-oscuro{ background:#1c1c20; color:var(--crema); box-shadow:0 3px 0 0 var(--o-labio), inset 0 0 0 1px var(--borde-fuerte); }
html[data-tema="oscuro"] .btn-suave{ background:#1c1c20; color:var(--tinta); border-color:var(--borde-fuerte); box-shadow:0 3px 0 0 var(--o-labio); }
html[data-tema="oscuro"] .btn-suave:hover:not(:disabled){ background:#242429; }
html[data-tema="oscuro"] .btn-peligro{ background:var(--error-fondo); color:var(--error); border-color:#4a2420; box-shadow:0 3px 0 0 #170a09; }
html[data-tema="oscuro"] .btn-peligro-lleno{ background:#c9473a; color:#fff; }
html[data-tema="oscuro"] .btn-texto{ box-shadow:none; }
html[data-tema="oscuro"] .btn.cargando::after{ border-color:var(--tinta); border-right-color:transparent; }
html[data-tema="oscuro"] .btn-primario.cargando::after{ border-color:var(--o-sobre-acento); border-right-color:transparent; }

/* ---------- tablas ---------- */
html[data-tema="oscuro"] .tabla-caja{ background:var(--carta); border-color:var(--borde); }
html[data-tema="oscuro"] .tabla th{ background:#17171a; color:var(--crema); border-bottom:1px solid var(--borde-fuerte); }
html[data-tema="oscuro"] .tabla tbody tr:hover td{ background:#121215; }
html[data-tema="oscuro"] .tabla tr.clic:hover td{ background:#18181c; }
html[data-tema="oscuro"] .tabla tfoot td{ background:#141417; border-top-color:color-mix(in srgb, var(--l-acento) 60%, #000); color:#f2f1ee; }

/* ---------- formularios ---------- */
html[data-tema="oscuro"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]),
html[data-tema="oscuro"] select, html[data-tema="oscuro"] textarea{ background:#111114; border-color:var(--borde-fuerte); color:var(--tinta); }
html[data-tema="oscuro"] input:focus, html[data-tema="oscuro"] select:focus, html[data-tema="oscuro"] textarea:focus{ outline-color:var(--l-acento); border-color:var(--l-acento); background:#141417; }
html[data-tema="oscuro"] input[readonly], html[data-tema="oscuro"] textarea[readonly], html[data-tema="oscuro"] select:disabled, html[data-tema="oscuro"] input:disabled{ background:#18181b; color:var(--gris); }
html[data-tema="oscuro"] input::placeholder, html[data-tema="oscuro"] textarea::placeholder{ color:#6f6f78; }
html[data-tema="oscuro"] input[type="checkbox"]{ accent-color:var(--l-acento); }
html[data-tema="oscuro"] input[type="file"]{ background:#111114; border-color:var(--borde-fuerte); }
html[data-tema="oscuro"] input[type="file"]::file-selector-button{ background:#1c1c20; color:var(--tinta); border-color:var(--borde-fuerte); }
html[data-tema="oscuro"] option{ background:#111114; color:var(--tinta); }
html[data-tema="oscuro"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-tema="oscuro"] input[type="month"]::-webkit-calendar-picker-indicator{ filter:invert(.85); }

/* ---------- pestañas, chips y avisos ---------- */
html[data-tema="oscuro"] .pestana:hover{ background:#151518; color:#fff; }
html[data-tema="oscuro"] .pestana.activa{ color:#fff; border-bottom-color:var(--l-acento); }
html[data-tema="oscuro"] .pestana-contador{ background:var(--l-acento); color:var(--o-sobre-acento); }
html[data-tema="oscuro"] .clave-temporal{ background:#111114; border-color:var(--l-acento); color:#fff; }

/* ---------- ventanas y avisos flotantes ---------- */
html[data-tema="oscuro"] .modal-fondo{ background:rgba(0,0,0,.74); }
html[data-tema="oscuro"] .modal-caja{ background:var(--carta); border:1px solid var(--borde); border-top:3px solid var(--l-acento); box-shadow:0 18px 60px rgba(0,0,0,.7); }
html[data-tema="oscuro"] .modal-pie{ background:#0b0b0d; border-top-color:var(--borde); }
html[data-tema="oscuro"] .modal-x:hover{ background:#1c1c20; }
html[data-tema="oscuro"] .toast{ background:#151518; color:var(--tinta); border:1px solid #26262b; border-left:4px solid var(--l-acento); box-shadow:0 8px 28px rgba(0,0,0,.6); }
html[data-tema="oscuro"] .toast-ok{ border-left-color:#55c891; }
html[data-tema="oscuro"] .toast-error{ background:#2a1412; border-color:#4f2520; border-left-color:#ff8a7c; }
html[data-tema="oscuro"] .visor{ background:#0b0b0d; }

/* ---------- gráficos ---------- */
html[data-tema="oscuro"] .grafico .g-rejilla{ stroke:#24242a; }
html[data-tema="oscuro"] .grafico .g-cero{ stroke:#3a3a42; }

/* ---------- hoja de impresión: siempre en claro ---------- */
html[data-tema="oscuro"] #erp-impresion{
  --principal:var(--l-principal); --principal-2:var(--l-principal-2); --principal-suave:var(--l-principal-suave);
  --acento:var(--l-acento); --acento-osc:var(--l-acento-osc); --acento-suave:var(--l-acento-suave); --crema:var(--l-crema);
  --g1:var(--l-principal); --g2:var(--l-acento); --g3:#3f8f6b; --g4:#5b7fb0; --g5:#c0704f; --g6:#8b7bb8;
  color-scheme:light;
}
html[data-tema="oscuro"] .impresion-barra{ background:var(--o-barra); border-bottom-color:var(--borde); }
}