/* ============================================================
   Dark Box · Design tokens — ÚNICA fuente de verdad del tema.
   Cualquier color/espaciado del sistema sale de acá.

   TEMAS
   -----
   El tema oscuro vive en :root (es el default de la marca).
   El tema claro sólo redefine los tokens de color en
   :root[data-theme="light"]; todo lo demás (layout, radios,
   tipografía) es compartido.

   El atributo data-theme SIEMPRE lo escribe shared/js/theme.js
   con un valor resuelto ("light" u "dark"): la preferencia
   "system" se resuelve a uno de los dos antes de pintar.
   Por eso acá no hace falta duplicar la paleta en un @media.
   ============================================================ */
:root {
  color-scheme: dark;

  /* superficies */
  --db-bg: #080c15;
  --db-card: #0f1420;
  --db-card-2: #0d1117;
  --db-input-bg: #161c2d;

  /* bordes */
  --db-border: #1e2847;
  --db-border-focus: #3b4d8a;

  /* texto */
  --db-text: #f1f5f9;
  --db-text-muted: #7c8ba1;
  --db-text-label: #94a3b8;

  /* acento */
  --db-accent: #818cf8;
  --db-accent-hover: #6366f1;
  --db-accent-soft: rgba(129, 140, 248, .12);   /* fondo del nav activo */
  --db-focus-ring: rgba(129, 140, 248, .12);

  /* texto sobre superficies sólidas de color (acento, danger) */
  --db-on-accent: #0d1117;

  /* botón primario (invierte respecto del fondo) */
  --db-btn-bg: #ffffff;
  --db-btn-text: #0d1117;
  --db-btn-hover: #e2e8f0;

  /* semánticos */
  --db-ok: #4ade80;
  --db-err: #f87171;
  --db-warn: #fbbf24;
  --db-info: #60a5fa;

  /* semánticos · fondos y bordes suaves (alerts, badges) */
  --db-ok-bg: rgba(34, 197, 94, .08);
  --db-ok-bd: rgba(34, 197, 94, .3);
  --db-err-bg: rgba(239, 68, 68, .1);
  --db-err-bd: rgba(239, 68, 68, .3);
  --db-err-solid-hover: #ef4444;
  --db-warn-bd: rgba(245, 158, 11, .35);
  --db-info-bd: rgba(56, 130, 246, .35);

  /* overlays neutros (hovers sutiles sobre la superficie actual) */
  --db-overlay: rgba(255, 255, 255, .04);
  --db-overlay-strong: rgba(255, 255, 255, .1);
  --db-scrim: rgba(2, 4, 10, .66);              /* fondo del modal */
  --db-skeleton-hi: #1c2438;                    /* brillo del shimmer */

  /* marca (círculo del logo) */
  --db-brand-bg: #161c2d;
  --db-brand-fg: #ffffff;

  /* buckets del reparto de dinero */
  --c-costos: #f87171;
  --c-vendedor: #60a5fa;
  --c-fabricador: #fbbf24;
  --c-ganancia: #4ade80;

  /* layout */
  --db-sidebar-w: 232px;
  --db-topbar-h: 60px;
  --db-content-max: 1120px;

  /* radios */
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;

  /* sombras */
  --sh-modal: 0 24px 60px rgba(0, 0, 0, .5);
  --sh-toast: 0 10px 30px rgba(0, 0, 0, .4);

  /* tipografía */
  --db-font: system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ── TEMA CLARO ───────────────────────────────────────────────
   Sólo color. Se mantiene la jerarquía de superficies del oscuro:
   el sidebar/topbar (card-2) se despega del fondo (bg), y los
   paneles (card) son la superficie más "alta".
   Los semánticos bajan de luminosidad: los pasteles del tema
   oscuro no llegan a contraste AA sobre blanco.
   ──────────────────────────────────────────────────────────── */
:root[data-theme="light"] {
  color-scheme: light;

  /* superficies */
  --db-bg: #eef2f7;
  --db-card: #ffffff;
  --db-card-2: #f8fafc;
  --db-input-bg: #f1f5f9;

  /* bordes */
  --db-border: #dde3ec;
  --db-border-focus: #818cf8;

  /* texto */
  --db-text: #0f172a;
  --db-text-muted: #5a6678;
  --db-text-label: #475569;

  /* acento */
  --db-accent: #4f46e5;
  --db-accent-hover: #4338ca;
  --db-accent-soft: rgba(79, 70, 229, .1);
  --db-focus-ring: rgba(79, 70, 229, .15);

  --db-on-accent: #ffffff;

  /* botón primario: oscuro sobre fondo claro */
  --db-btn-bg: #0f172a;
  --db-btn-text: #ffffff;
  --db-btn-hover: #1e293b;

  /* semánticos */
  --db-ok: #15803d;
  --db-err: #c81e1e;
  --db-warn: #b45309;
  --db-info: #1d4ed8;

  --db-ok-bg: rgba(22, 163, 74, .1);
  --db-ok-bd: rgba(22, 163, 74, .35);
  --db-err-bg: rgba(220, 38, 38, .08);
  --db-err-bd: rgba(220, 38, 38, .3);
  --db-err-solid-hover: #b91c1c;
  --db-warn-bd: rgba(180, 83, 9, .35);
  --db-info-bd: rgba(29, 78, 216, .3);

  /* overlays: oscuros, no claros */
  --db-overlay: rgba(15, 23, 42, .04);
  --db-overlay-strong: rgba(15, 23, 42, .12);
  --db-scrim: rgba(15, 23, 42, .45);
  --db-skeleton-hi: #e2e8f0;

  /* la marca se mantiene oscura: es identidad, no superficie */
  --db-brand-bg: #0f172a;
  --db-brand-fg: #ffffff;

  /* buckets del reparto: mismos hues, luminosidad apta para blanco */
  --c-costos: #dc2626;
  --c-vendedor: #2563eb;
  --c-fabricador: #d97706;
  --c-ganancia: #15803d;

  /* sombras: tintadas, no negro puro */
  --sh-modal: 0 24px 60px rgba(15, 23, 42, .18);
  --sh-toast: 0 10px 30px rgba(15, 23, 42, .12);
}

/* ── cambio de tema sin arrastre ──────────────────────────────
   Al cambiar de tema, las propiedades con `transition` declarada
   (color de .btn, .nav-item, .tab…) animan desde el valor del tema
   anterior. Eso produce un arrastre visual, y si el documento no
   está recibiendo repaints (pestaña en segundo plano) la transición
   ni siquiera se completa: el elemento queda con el color viejo.

   theme.js pone esta clase en <html> mientras aplica el tema y la
   saca en el frame siguiente, así el switch es atómico.
   Vive acá porque es la única hoja que comparten la app y auth.
   ──────────────────────────────────────────────────────────── */
.db-theme-switching, .db-theme-switching *, .db-theme-switching *::before, .db-theme-switching *::after {
  transition: none !important;
}

/* ── crossfade del cambio de tema (View Transitions) ──────────
   theme.js envuelve el cambio en document.startViewTransition(), que
   hace un fundido entre el snapshot viejo y el nuevo de la página
   entera. Es lo contrario de animar con `transition`: acá todo cambia
   a la vez, así que no hay barrido ni estados a medio camino.
   Donde no haya soporte, el cambio es instantáneo y nada de esto aplica.
   ──────────────────────────────────────────────────────────── */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .22s;
  animation-timing-function: ease;
}