/* Modo oscuro.
   Se prende con el botón de la luna en la barra azul (tema/tema.js) y queda
   guardado en el navegador de cada persona. Aquí va la paleta y los ajustes
   finos; los colores que cada módulo trae escritos a mano los resuelve
   tema-oscuro-auto.css, que se genera con scripts/tema-oscuro.mjs. */

html[data-tema="oscuro"] {
  color-scheme: dark;                                  /* calendarios, barras de desplazamiento, casillas */
  --wash-azul: #13233a;
  --bg: #0b121c; --bg-card: #121c29; --bg-subtle: #172334;
  --ink: #e6edf5; --ink-soft: #a9b6c7; --ink-faint: #7a879a;
  --line: #26364b; --line-soft: #1d2b3d;
  --brand: #3d8be0; --brand-soft: #5aa0ec; --accent: #ff4d61;
  --ok: #4cc38a; --ok-bg: rgba(76, 195, 138, .14);
  --warn: #f0a44b; --warn-bg: rgba(240, 164, 75, .15);
  --err: #ff7a7a; --err-bg: rgba(255, 122, 122, .14);
  --info: #6aa9ee; --info-bg: rgba(61, 139, 224, .16);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-lg: 0 14px 36px rgba(0, 0, 0, .5), 0 4px 10px rgba(0, 0, 0, .3);
}
html[data-tema="oscuro"] body { background: var(--bg); color: var(--ink); }

/* La barra azul se queda azul, un tono más profundo para que no deslumbre. */
html[data-tema="oscuro"] header.topbar { background: #0a2f5c !important; border-bottom: 1px solid #16406f; }

/* Campos: fondo oscuro, texto claro, marcador tenue. */
html[data-tema="oscuro"] input, html[data-tema="oscuro"] select, html[data-tema="oscuro"] textarea {
  color: var(--ink) !important; border-color: var(--line) !important; }
html[data-tema="oscuro"] input::placeholder, html[data-tema="oscuro"] textarea::placeholder { color: var(--ink-faint); }
html[data-tema="oscuro"] input:disabled, html[data-tema="oscuro"] select:disabled,
html[data-tema="oscuro"] input[readonly] { background-color: var(--bg-subtle) !important; color: var(--ink-soft) !important; }

/* Botones secundarios y renglones de tabla. */
html[data-tema="oscuro"] .btn-secondary, html[data-tema="oscuro"] .btn-ghost {
  background: var(--bg-subtle) !important; color: var(--ink) !important; border-color: var(--line) !important; }
html[data-tema="oscuro"] tr:hover > td { background-color: rgba(61, 139, 224, .07); }

/* Colores escritos directo en la pantalla por el código (style="..."). */
html[data-tema="oscuro"] [style*="background:#fff"], html[data-tema="oscuro"] [style*="background: #fff"],
html[data-tema="oscuro"] [style*="background:#ffffff"], html[data-tema="oscuro"] [style*="background: white"] {
  background: var(--bg-card) !important; }
html[data-tema="oscuro"] [style*="background:#eef4fb"], html[data-tema="oscuro"] [style*="background: #eef4fb"] { background: var(--wash-azul) !important; }
html[data-tema="oscuro"] [style*="background:#fff4e6"], html[data-tema="oscuro"] [style*="background: #fff4e6"] { background: var(--warn-bg) !important; }
html[data-tema="oscuro"] [style*="color:#0d1b2a"], html[data-tema="oscuro"] [style*="color: #0d1b2a"] { color: var(--ink) !important; }
html[data-tema="oscuro"] [style*="color:#475467"], html[data-tema="oscuro"] [style*="color: #475467"] { color: var(--ink-soft) !important; }
html[data-tema="oscuro"] [style*="color:#0b4f9e"], html[data-tema="oscuro"] [style*="color: #0b4f9e"] { color: var(--info) !important; }

/* Pantalla de entrada: la tarjeta también se oscurece y el logotipo va en blanco. */
html[data-tema="oscuro"] .login-card { background: var(--bg-card) !important; border-color: var(--line) !important; }
html[data-tema="oscuro"] .login-logo { content: url('../logo-thelsa-blanco.png'); }

/* Ventanas y menús flotantes: un borde que los separe del fondo. */
html[data-tema="oscuro"] .modal, html[data-tema="oscuro"] .mod-panel, html[data-tema="oscuro"] .menu-panel {
  border: 1px solid var(--line) !important; }

/* Imágenes con fondo blanco (fotos, logotipos de cliente) no se tocan. */
html[data-tema="oscuro"] img { color-scheme: normal; }

/* ---- Botón de la luna / el sol en la barra azul --------------------------- */
.tema-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 30px;
  background: transparent; border: 1px solid rgba(255, 255, 255, .4); border-radius: 4px; color: #e8f1fb;
  cursor: pointer; padding: 0; transition: background .15s; }
.tema-btn:hover { background: rgba(255, 255, 255, .12); }
.tema-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }
.tema-btn .sol { display: none; }
html[data-tema="oscuro"] .tema-btn .sol { display: block; }
html[data-tema="oscuro"] .tema-btn .luna { display: none; }

/* Cambio suave de un modo a otro (solo mientras se cambia). */
html.tema-cambiando, html.tema-cambiando * { transition: background-color .25s, color .25s, border-color .25s !important; }