/**
 * css/theme.css
 * Modo oscuro. Solo redefine los colores de variables.css: todo el sistema los usa, así que cambia de una vez.
 * El tema se elige con el botón de la luna/sol (js/theme.js) y se recuerda; por defecto sigue al dispositivo.
 * html[data-theme="dark"] = oscuro · html[data-theme="light"] = claro · theme.js pone el atributo al cargar (si la persona no ha elegido, usa el tema del dispositivo).
 */

/* Modo claro explícito: aunque el dispositivo esté en oscuro, la página (y sus ventanas, cajas de texto y listas)
   se pinta clara con letra oscura. Sin esto, el navegador oscurecía el fondo de las ventanas y la letra quedaba
   blanca sobre las cajas blancas. */
:root,
html[data-theme='light'] {
  color-scheme: light;
}
html:not([data-theme='dark']) dialog {
  background: var(--card);
  color: var(--ink);
}
html:not([data-theme='dark']) .inp,
html:not([data-theme='dark']) input,
html:not([data-theme='dark']) select,
html:not([data-theme='dark']) textarea {
  color: var(--ink);
}
html[data-theme='dark'] {
  color-scheme: dark;
  --indigo: #4a47b0;
  --indigo2: #a5a3ff;
  --mint: #2fc79c;
  --mintbg: #123a30;
  --paper: #121224;
  --card: #1c1c34;
  --ink: #ececf8;
  --mute: #a5a4c4;
  --line: #34345a;
  --warn: #f0b429;
  --bad: #ff6b83;
  --warnbg: #3a3014;
  --warnbg2: #2c2612;
  --soft: #232342;
  --soft2: #2b2b4d;
  --badbg: #3f1d28;
  --indbg: #2f2d6b;
  --okfg: #6ee7b7;
  --badfg: #ff9db0;
  --warnfg: #f5c451;
}
/* Cajas de texto, listas y ventanas emergentes usan la tarjeta oscura */
html[data-theme='dark'] .inp,
html[data-theme='dark'] input,
html[data-theme='dark'] select,
html[data-theme='dark'] textarea {
  background: var(--soft);
  color: var(--ink);
  border-color: var(--line);
}
html[data-theme='dark'] dialog {
  background: var(--card);
  color: var(--ink);
}
html[data-theme='dark'] dialog::backdrop {
  background: #000000a6;
}
/* La factura y la tirilla siguen blancas: es papel */
html[data-theme='dark'] .receipt {
  background: #fff;
  color: #111;
}

/* Botón para cambiar de tema (esquina de las barras) */
.theme-btn {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 60;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 4px 14px #0003;
}

/* Avisos temporales: siguen oscuros con letra clara en ambos temas */
html[data-theme='dark'] .toast {
  background: #0b0b18;
  color: #fff;
  border: 1px solid var(--line);
}