/* SGM — Modo oscuro. Se activa con <html data-tema="oscuro"> (lo pone tema.js). */
#sgm_tema { position: fixed; left: 14px; bottom: 14px; z-index: 2000; font-family: 'Segoe UI', system-ui, sans-serif; }
#sgm_tema.con-salir { left: auto; bottom: auto; top: 12px; right: 62px; }
#sgm_tema_btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(128,128,128,.35); background: #fff; color: #333; font-size: 1.15rem; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.18); display: flex; align-items: center; justify-content: center; padding: 0; }
#sgm_tema_btn:hover { filter: brightness(.96); }
#sgm_tema_menu { position: absolute; left: 0; bottom: 50px; min-width: 250px; background: #fff; color: #222; border: 1px solid rgba(128,128,128,.3); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.22); padding: 6px; }
#sgm_tema.con-salir #sgm_tema_menu { left: auto; right: 0; bottom: auto; top: 50px; }
#sgm_tema_menu[hidden] { display: none; }
#sgm_tema_menu .tit { font-size: .68rem; text-transform: uppercase; letter-spacing: .5px; opacity: .65; font-weight: 700; padding: 6px 10px 4px; }
#sgm_tema_menu button { display: flex; width: 100%; align-items: center; gap: 8px; background: transparent; color: inherit; border: 0; border-radius: 8px; padding: 9px 10px; font-size: .9rem; text-align: left; cursor: pointer; }
#sgm_tema_menu button svg { flex-shrink: 0; }
#sgm_tema_menu button small { white-space: nowrap; opacity: .6; font-size: .72rem; margin-left: auto; }
#sgm_tema_menu button:hover { background: rgba(128,128,128,.15); }
#sgm_tema_menu button.sel { background: rgba(21,101,192,.16); font-weight: 700; }
#sgm_tema_menu .nota { font-size: .72rem; opacity: .7; padding: 4px 10px 6px; }
#sgm_tema_menu .nota:empty { display: none; }

/* MODO OSCURO — solo cambian los FONDOS (pantalla, tarjetas, paneles, campos) y el color del texto que va sobre ellos.
   Botones, iconos, insignias, avisos de color, barras de navegación y mapa NO se tocan: conservan color, brillo y contraste. */
html[data-tema="oscuro"] { --sgm-bg: #0d131b; --sgm-card: #162130; --bg-body: #0d131b; --bg-card: #162130; --border-color: #2b3a4d; }
html[data-tema="oscuro"] body { background-color: #0d131b; color: #dbe4ee; }
html[data-tema="oscuro"] #sgm_tema_btn { background: #1d2a3b; color: #f2f5f9; border-color: #3a4c63; }
html[data-tema="oscuro"] #sgm_tema_menu { background: #1d2a3b; color: #e6edf4; border-color: #3a4c63; }

/* Superficies */
html[data-tema="oscuro"] .membrete, html[data-tema="oscuro"] .panel-card, html[data-tema="oscuro"] .kpi-card-sm, html[data-tema="oscuro"] .filtro-mapa-bar, html[data-tema="oscuro"] .leyenda-mapa, html[data-tema="oscuro"] .vivo-barra,
html[data-tema="oscuro"] .marca-banda, html[data-tema="oscuro"] .marca-inst { background: #162130 !important; color: #dbe4ee; box-shadow: 0 4px 16px rgba(0,0,0,.35); }
html[data-tema="oscuro"] .membrete-logo, html[data-tema="oscuro"] .membrete .bg-light, html[data-tema="oscuro"] .bg-light { background-color: #223247 !important; }
html[data-tema="oscuro"] .historial-item, html[data-tema="oscuro"] .item-reciente-mapa, html[data-tema="oscuro"] .bloque-dinamico, html[data-tema="oscuro"] .tri-box { background: #1a2738 !important; color: #dbe4ee; }
html[data-tema="oscuro"] .meter { background: #263447; }
html[data-tema="oscuro"] .card, html[data-tema="oscuro"] .modal-content, html[data-tema="oscuro"] .dropdown-menu, html[data-tema="oscuro"] .list-group-item { background-color: #162130; color: #dbe4ee; border-color: #2b3a4d; }
html[data-tema="oscuro"] .form-control, html[data-tema="oscuro"] .form-select { background-color: #0f1925; color: #e6edf4; border-color: #34465c; }
html[data-tema="oscuro"] .form-control::placeholder { color: #70829a; }
html[data-tema="oscuro"] .form-control:disabled, html[data-tema="oscuro"] .form-select:disabled { background-color: #131f2d; }
html[data-tema="oscuro"] .table { --bs-table-bg: transparent; --bs-table-color: #dbe4ee; --bs-table-border-color: #2b3a4d; --bs-table-striped-bg: #1a2738; }
html[data-tema="oscuro"] table.tabla-sgm tbody tr:hover, html[data-tema="oscuro"] .table-hover > tbody > tr:hover > * { background: #1d2c40 !important; }
html[data-tema="oscuro"] .nav-tabs { border-color: #2b3a4d; }
html[data-tema="oscuro"] .nav-tabs .nav-link.active { background: #162130; border-color: #2b3a4d #2b3a4d #162130; }
html[data-tema="oscuro"] .border { border-color: #2b3a4d !important; }

/* Texto sobre fondo oscuro */
html[data-tema="oscuro"] .text-muted, html[data-tema="oscuro"] small.text-muted, html[data-tema="oscuro"] .kpi-card-sm .kpi-lbl { color: #a9b6c7 !important; }
html[data-tema="oscuro"] .text-dark, html[data-tema="oscuro"] .kpi-card-sm .kpi-num, html[data-tema="oscuro"] .panel-card h5, html[data-tema="oscuro"] .panel-card h6, html[data-tema="oscuro"] .membrete h5, html[data-tema="oscuro"] .expediente-col h6 { color: #e6edf4 !important; }
html[data-tema="oscuro"] .nav-tabs .nav-link:not(.active) { color: #b4c3d6; }
html[data-tema="oscuro"] .panel-card a:not(.btn):not(.nav-link), html[data-tema="oscuro"] .membrete a:not(.btn), html[data-tema="oscuro"] .kpi-card-sm a:not(.btn), html[data-tema="oscuro"] table a:not(.btn), html[data-tema="oscuro"] .modal-content a:not(.btn), html[data-tema="oscuro"] .card a:not(.btn) { color: #8fc0f5; }
html[data-tema="oscuro"] .swal2-popup { background: #1a2738; color: #e6edf4; }
html[data-tema="oscuro"] .swal2-title, html[data-tema="oscuro"] .swal2-html-container { color: #e6edf4; }

/* Registro rápido */
html[data-tema="oscuro"] .choice-option.activa, html[data-tema="oscuro"] .global-controls, html[data-tema="oscuro"] .category-card, html[data-tema="oscuro"] .bottom-bar, html[data-tema="oscuro"] .modal-ubi, html[data-tema="oscuro"] .modal-ayuda, html[data-tema="oscuro"] .pantalla-despedida { background: #162130; color: #dbe4ee; }
html[data-tema="oscuro"] .category-header, html[data-tema="oscuro"] .portal-card, html[data-tema="oscuro"] .card-body { color: #dbe4ee; }
html[data-tema="oscuro"] .agencies-nota, html[data-tema="oscuro"] .pantalla-despedida p, html[data-tema="oscuro"] .modal-ayuda .subtitulo-ayuda { color: #a9b6c7; }
html[data-tema="oscuro"] .modal-ayuda p, html[data-tema="oscuro"] .modal-ayuda li { color: #dbe4ee; }
html[data-tema="oscuro"] .modal-ubi select, html[data-tema="oscuro"] .modal-ubi input, html[data-tema="oscuro"] .modal-ubi textarea, html[data-tema="oscuro"] .modal-ubi .fila-gps { background: #0f1925; color: #e6edf4; border-color: #34465c; }
/* Los botones de incidente conservan su aspecto de botón (fondo claro e iconos de color): solo se asegura el texto legible */
html[data-tema="oscuro"] .incident-btn, html[data-tema="oscuro"] .incident-btn span { color: #333; }

/* Recuadros que conservan su fondo de color: su texto sigue oscuro y legible */
html[data-tema="oscuro"] .vivo-alerta, html[data-tema="oscuro"] .orden-box, html[data-tema="oscuro"] .aviso-restringido, html[data-tema="oscuro"] .ayuda, html[data-tema="oscuro"] .switch-anonimo, html[data-tema="oscuro"] .modal-ayuda .nota-ayuda, html[data-tema="oscuro"] .alert { color: #1f2933; }
html[data-tema="oscuro"] .vivo-alerta a, html[data-tema="oscuro"] .orden-box a, html[data-tema="oscuro"] .alert a { color: #0b4fa8 !important; }
html[data-tema="oscuro"] .vivo-alerta .text-muted, html[data-tema="oscuro"] .orden-box .text-muted, html[data-tema="oscuro"] .alert .text-muted { color: #52606d !important; }

/* Botones que en modo claro se ven "apagados" por transparencia (institución sin elegir, gravedad sin elegir):
   sobre fondo oscuro la transparencia los volvería más oscuros, así que se fija el mismo color que muestran en modo claro. */
html[data-tema="oscuro"] .agency-btn { opacity: 1; }
html[data-tema="oscuro"] .agency-btn:hover { opacity: 1; filter: brightness(1.12); }
html[data-tema="oscuro"] .agency-btn.seleccionada { filter: none; }
html[data-tema="oscuro"] .agency-btn:not(.seleccionada).btn-policia { background-color: color-mix(in srgb, var(--policia) 55%, #f4f7f6); }
html[data-tema="oscuro"] .agency-btn:not(.seleccionada).btn-ambulancia { background-color: color-mix(in srgb, var(--ambulancia) 55%, #f4f7f6); }
html[data-tema="oscuro"] .agency-btn:not(.seleccionada).btn-bomberos { background-color: color-mix(in srgb, var(--bomberos) 55%, #f4f7f6); }
html[data-tema="oscuro"] .agency-btn:not(.seleccionada).btn-pcivil { background-color: color-mix(in srgb, var(--pcivil) 55%, #f4f7f6); color: #5f6162; }
html[data-tema="oscuro"] .agency-btn:not(.seleccionada).btn-paramedicos { background-color: color-mix(in srgb, var(--paramedicos) 55%, #f4f7f6); color: #5f6162; }
html[data-tema="oscuro"] .severity-btn { opacity: 1; }
html[data-tema="oscuro"] .severity-btn:not(.active).sev-critico { background-color: color-mix(in srgb, var(--critico) 50%, #f4f7f6); }
html[data-tema="oscuro"] .severity-btn:not(.active).sev-alto { background-color: color-mix(in srgb, var(--alto) 50%, #f4f7f6); }
html[data-tema="oscuro"] .severity-btn:not(.active).sev-medio { background-color: color-mix(in srgb, var(--medio) 50%, #f4f7f6); color: #7e7f7a; }
html[data-tema="oscuro"] .severity-btn:not(.active).sev-bajo { background-color: color-mix(in srgb, var(--bajo) 50%, #f4f7f6); }
/* Botones blancos (Ocurriendo ahora / Ya sucedió, etc.): siguen blancos, con su texto oscuro */
html[data-tema="oscuro"] .toggle-btn:not(.active) { color: #333; }
html[data-tema="oscuro"] .btn-ayuda { color: #b39ddb; }
/* En pantallas angostas los botones flotantes (modo + salir) no deben tapar el título */
@media (max-width: 600px) { body:has(#sgm_tema.con-salir) { padding-top: 60px !important; } }
/* Botones claros dentro de las ventanas (Cancelar, etc.): texto oscuro para que se lea sobre su fondo gris claro */
html[data-tema="oscuro"] .modal-ubi .btn-cancelar, html[data-tema="oscuro"] .btn-cancelar { color: #222; }
html[data-tema="oscuro"] .incident-btn span { overflow-wrap: anywhere; }
html[data-tema="oscuro"] .modal-ayuda h4, html[data-tema="oscuro"] .modal-ayuda h3 { color: #c5b3ee; }
html[data-tema="oscuro"] .modal-ubi label span, html[data-tema="oscuro"] .modal-ubi label small { color: #a9b6c7; }

/* Menú «Registrar Incidente» (solo fondo y el texto sobre él) */
html[data-tema="oscuro"] .reg-menu { background: #1d2a3b; color: #e6edf4; border-color: #3a4c63; }
html[data-tema="oscuro"] .reg-menu a:hover, html[data-tema="oscuro"] .reg-menu button.reg-it:hover { background: #26364b; }
html[data-tema="oscuro"] .reg-menu small { color: #a9b6c7; }
html[data-tema="oscuro"] .reg-menu i { color: #8fb4e8; }