/* Modo oscuro de Síguelo OS (Sesión 207), con la misma paleta que el CRM y On Tow. Se activa con <html data-theme="oscuro">, que
   pone tema.js antes de pintar. Aquí van los tokens y los arreglos hechos a mano; los colores fijos de las hojas los
   pasa a oscuro el servidor en /tema-auto.css (services/temaOscuro.js) y los escritos en línea, tema-en-linea.js. El amarillo de marca (#FFD500) no cambia. Paleta de On Tow:
   #0F1216 fondo, #1A1F26 tarjetas, #E8EBEF texto. Lo que se imprime o se manda por correo sigue claro (@media print). */
@media screen {
:root[data-theme="oscuro"] {
  --ink: #E8EBEF; --ink-2: #C5CBD3; --muted: #9AA3AF; --line: #2B323C; --line-2: #222831;
  --bg: #0F1216; --card: #1A1F26; --soft: #151A20;
  --marca-suave: #3A3410; --marca-texto: #FFE680;
  --amber-ink: #FCD9A8; --amber-soft: #3A2A12;
  --red: #F87171; --red-soft: #3B1A1A; --green: #4ADE80; --green-soft: #15301F;
  --blue: #A5B8F5; --blue-soft: #1B2747; --purple: #D8B4FE; --purple-soft: #2E1C40;
  --teal: #5EEAD4; --teal-soft: #12302D;
  /* Series de gráficos: un punto más claras para leerse sobre fondo oscuro */
  --c-v0: #F87171; --c-vlow: #F59E0B; --c-com: #7BA0FF; --c-gps: #C084FC; --c-unk: #A3AAB5; --c-sim: #2DD4BF;
  /* Tokens propios de Síguelo OS (index.html). --siguelo-negro es el color del texto principal en muchas reglas; sobre
     el amarillo de marca, /tema-auto.css lo deja oscuro. */
  --fondo-pantalla: #0F1216; --blanco-tarjetas: #1A1F26; --siguelo-negro: #E8EBEF; --texto-secundario: var(--ink-2);
  /* Costeo (Sesión 1xx): superficies y textos propios */
  --surface-1: #1A1F26; --surface-2: #151A20; --borde: #2B323C; --grid: #2B323C;
  --text-primary: #E8EBEF; --text-secondary: #C5CBD3; --text-muted: #9AA3AF;
  color-scheme: dark;
}
:root[data-theme="oscuro"] body { background: var(--bg); color: var(--ink); }

/* Logos oficiales: nunca se recolorean. Sobre fondo oscuro van sobre una placa blanca. */
:root[data-theme="oscuro"] .menu-marca img.logo,
:root[data-theme="oscuro"] img[src*="logo-siguelo"],
:root[data-theme="oscuro"] img.logo-placa,
:root[data-theme="oscuro"] .logo-container > img:not(.logo-pin):not(.logo-os),
:root[data-theme="oscuro"] img[src*="logo.png"]:not([src*="pin"]):not([src*="icono"]),
:root[data-theme="oscuro"] img[src*="logo-os"],
:root[data-theme="oscuro"] .logo-placa { background: #fff; border-radius: 8px; padding: 4px 8px; box-sizing: content-box; }

/* 🔥 26-oct: logo «Síguelo GPS + OS» aprobado por Pablo (archivos siguelo-os-{a,b}-{claro,oscuro}.png). Va en dos
   versiones, «claro» (letras negras) y «oscuro» (letras blancas): se esconde la del otro tema, sin placa blanca. Solo se
   ESCONDE (no se fija un display), así la visible sigue las reglas de siempre: plegado, el menú muestra solo el pin. */
:root:not([data-theme="oscuro"]) .logo-os-oscuro { display: none !important; }
:root[data-theme="oscuro"] .logo-os-claro { display: none !important; }

/* Campos: el navegador los pinta blancos si no se dice nada */
:root[data-theme="oscuro"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
:root[data-theme="oscuro"] select, :root[data-theme="oscuro"] textarea { background-color: var(--card); color: var(--ink); }
:root[data-theme="oscuro"] ::placeholder { color: #6B7480; }
:root[data-theme="oscuro"] a:hover { color: #fff; }

/* Avisos emergentes y botón oscuro: superficie gris clara-oscura, distinta de la tarjeta */
:root[data-theme="oscuro"] .toast { background: #2E3540; color: #F3F5F7; border: 1px solid #3A424D; }
:root[data-theme="oscuro"] .toast.error { background: #5A1D18; color: #FEE2E2; }
:root[data-theme="oscuro"] .toast.ok { background: #14432A; color: #DCFCE7; }

/* Mapas: las teselas quedan como están (se leen igual); solo los controles toman el tema */
:root[data-theme="oscuro"] .leaflet-container { background: #1A1F26; }
:root[data-theme="oscuro"] .leaflet-bar a, :root[data-theme="oscuro"] .leaflet-popup-content-wrapper,
:root[data-theme="oscuro"] .leaflet-popup-tip { background: var(--card); color: var(--ink); border-color: var(--line); }
:root[data-theme="oscuro"] .leaflet-control-attribution { background: rgba(26, 31, 38, .8); color: var(--muted); }
:root[data-theme="oscuro"] .leaflet-control-attribution a { color: var(--ink-2); }

/* Imágenes con fondo propio (firmas, fotos de documentos, códigos QR): placa blanca para que se lean */
:root[data-theme="oscuro"] img.firma, :root[data-theme="oscuro"] .firma img, :root[data-theme="oscuro"] .qr img,
:root[data-theme="oscuro"] img.qr, :root[data-theme="oscuro"] canvas.firma { background: #fff; }

}

/* ── Botón y lista del tema (tema.js → sigueloTema.boton()) ── */
.tema-caja { position: relative; display: inline-flex; }
.tema-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 36px; min-height: 36px; padding: 0 8px;
  border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); cursor: pointer; font: 500 13px var(--sans); }
.tema-btn:hover { background: var(--soft); color: var(--ink); }
.tema-lista { position: absolute; right: 0; top: calc(100% + 6px); z-index: 1200; min-width: 200px; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, .18); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.tema-lista[hidden] { display: none; }
.tema-caja.izq .tema-lista { left: 0; right: auto; }
.tema-lista button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 6px 10px; border: 0; border-radius: 8px;
  background: none; color: var(--ink); font: 500 14px var(--sans); text-align: left; cursor: pointer; }
.tema-lista button span { display: flex; flex-direction: column; line-height: 1.2; }
.tema-lista button small { font-size: 12px; color: var(--muted); font-weight: 400; }
.tema-lista button:hover { background: var(--soft); }
.tema-lista button[aria-checked="true"] { background: var(--marca-suave); color: var(--marca-texto); font-weight: 600; }
.tema-lista button[aria-checked="true"] small { color: inherit; opacity: .8; }

/* Lo impreso siempre en claro: todo lo oscuro está dentro de @media screen. */
@media print { .tema-caja { display: none !important; } }

/* Síguelo OS: el botón del tema va en la barra de arriba, junto a la campana. */
#temaBarra { display: inline-flex; margin-right: 4px; }
#temaBarra .tema-btn { border-color: transparent; background: none; color: var(--muted); }
#temaBarra .tema-btn:hover { background: var(--soft); color: var(--ink); }

/* .btn (amarillo) deja su texto oscuro en /tema-auto.css; el botón con borde amarillo y fondo transparente
   (.btn-outline) va con la misma especificidad y perdía ese empate: su texto quedaba oscuro sobre oscuro. */
@media screen {
  :root[data-theme="oscuro"] .btn-outline { color: var(--ink); }
  :root[data-theme="oscuro"] .btn-outline:hover { background: rgba(255, 213, 0, .12); }
}