/* VaultCast · web de dirección de carrera — mismo estilo que la portada (vaultcast.es):
   fondo casi negro, rojo «directo», ámbar de señal, Anton + Inter + JetBrains Mono y tema claro/oscuro. */
@font-face { font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fuentes/anton-latin.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fuentes/inter-latin.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url(/fuentes/jetbrainsmono-latin.woff2) format("woff2"); }
:root {
  /* Paleta de la portada (oscuro). --navy se mantiene como nombre: es el fondo de página. */
  --navy: #07090d; --panel: #0f141c; --panel2: #151c27; --linea: #263142;
  --plata: #f4f6fa; --tenue: #9aa6b8; --azul: #1aa3ff; --azul-suave: rgba(26,163,255,.14);
  --ambar: #ffb020; --ambar-suave: rgba(255,176,32,.10); --rojo: #ff3b30; --rojo-suave: rgba(255,59,48,.14); --verde: #3ccf8e;
  --rojo-boton: #e0271d; --rojo-boton-hover: #d92418; /* blanco encima ≥ 4,5:1 */
  --titular: "Anton", Impact, "Arial Narrow", sans-serif;
  --fuente: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, "DejaVu Sans Mono", monospace;
  --sobre-acento: #fff;      /* texto sobre botones rojos */
  --sobre-ambar: #07090d;    /* texto sobre fondo ámbar */
  --texto-fuerte: #fff;      /* códigos, títulos destacados */
  --campo: #0b0f16;          /* fondo de campos y desplegables */
  --borde-campo: #5a6880;    /* borde de campos (≥ 3:1) */
  --cab-fondo: rgba(7,9,13,.86);
  --rayas-a: #0b0f16; --rayas-b: #10151e; /* celda vacía del mosaico */
  --filtro-teselas: saturate(.7) brightness(.78) contrast(1.05);
  --sombra: rgba(0,0,0,.55);
  /* Sobre el vídeo (fondo negro) siempre colores oscuros, en los dos temas */
  --vid-fondo: rgba(7,9,13,.82); --vid-texto: #f4f6fa; --vid-tenue: #9aa6b8; --vid-linea: #3a4759;
  --vid-rojo: #e0271d; --vid-ambar: #ffb020;
  color-scheme: dark;
}
/* Tema claro (el de la portada; contraste AA comprobado: texto ≥ 4,5:1, bordes de campo ≥ 3:1) */
:root[data-tema="claro"] {
  --navy: #f5f7fa; --panel: #ffffff; --panel2: #eef2f7; --linea: #d3dbe6;
  --plata: #0f1722; --tenue: #4f5b6d; --azul: #0b6bc0; --azul-suave: rgba(11,107,192,.10);
  --ambar: #8f5200; --ambar-suave: rgba(143,82,0,.08); --rojo: #c8211a; --rojo-suave: rgba(200,33,26,.08); --verde: #137a4b;
  --rojo-boton: #c8211a; --rojo-boton-hover: #b01c16;
  --sobre-acento: #fff; --sobre-ambar: #fff; --texto-fuerte: #07090d; --campo: #fff; --borde-campo: #77849a;
  --cab-fondo: rgba(245,247,250,.9);
  --rayas-a: #eef2f7; --rayas-b: #e4e9f0;
  --filtro-teselas: none;
  --sombra: rgba(16,32,64,.16);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--navy); color: var(--plata); font-family: var(--fuente); font-size: 14px; -webkit-font-smoothing: antialiased; }
a { color: var(--azul); }
button, input, select, textarea { font: inherit; }
.mono { font-family: var(--mono); }
.tenue { color: var(--tenue); }
:focus-visible { outline: 3px solid var(--ambar); outline-offset: 2px; }
@keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Logotipo de texto (igual que la portada): ● VAULTCAST con «cast» en rojo */
.wordmark { font-family: var(--titular); font-weight: 400; font-size: 24px; line-height: 1; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--plata); display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.wordmark .punto { width: 11px; height: 11px; border-radius: 50%; background: var(--rojo); box-shadow: 0 0 0 4px rgba(255,59,48,.22); animation: latido 1.6s infinite; flex: none; }
.wordmark b { font-weight: 400; color: var(--rojo); }
.etiqueta-marca { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ambar); border: 1px solid rgba(255,176,32,.4); padding: 5px 11px; border-radius: 999px; background: var(--ambar-suave); }
.etiqueta-marca i { width: 7px; height: 7px; border-radius: 50%; background: var(--rojo); animation: latido 1.2s infinite; }
:root[data-tema="claro"] .etiqueta-marca { border-color: rgba(143,82,0,.4); }

/* Botones y campos (como la portada: radio 10, peso 800, rojo para la acción principal) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: transparent; color: var(--plata); border: 1px solid var(--borde-campo); border-radius: 10px; padding: 7px 13px; cursor: pointer; font-weight: 800; letter-spacing: .01em; white-space: nowrap; text-decoration: none; transition: transform .15s, background .15s, border-color .15s, box-shadow .15s; }
.btn:hover { border-color: var(--plata); }
.btn.prim { background: var(--rojo-boton); border-color: var(--rojo-boton); color: #fff; box-shadow: 0 8px 22px -12px rgba(255,59,48,.9); }
.btn.prim:hover { background: var(--rojo-boton-hover); border-color: var(--rojo-boton-hover); transform: translateY(-1px); }
.btn.peligro { background: var(--rojo-boton); border-color: var(--rojo-boton); color: #fff; }
.btn.peligro:hover { background: var(--rojo-boton-hover); }
.btn.peq { padding: 4px 10px; font-size: 12px; border-radius: 8px; }
.btn.activo { background: var(--ambar-suave); border-color: var(--ambar); color: var(--texto-fuerte); }
.campo { background: var(--campo); color: var(--plata); border: 1px solid var(--borde-campo); border-radius: 10px; padding: 9px 11px; width: 100%; }
.campo:focus { outline: none; border-color: var(--ambar); box-shadow: 0 0 0 3px var(--ambar-suave); }
label.et { display: block; font-size: 12px; font-weight: 600; color: var(--tenue); margin: 10px 0 4px; }
.chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid currentColor; border-radius: 999px; padding: 1px 9px; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.chip.directo { color: var(--rojo); } .chip.caida { color: var(--ambar); } .chip.sin_emitir, .chip.desactivada { color: var(--tenue); }
.chip.nueva { color: var(--rojo); } .chip.reconocida { color: var(--ambar); } .chip.resuelta { color: var(--verde); }
.panel { background: var(--panel); border: 1px solid var(--linea); border-radius: 16px; padding: 16px; }
.fila { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.crece { flex: 1; }
h2 { margin: 0 0 12px; font-family: var(--titular); font-weight: 400; text-transform: uppercase; letter-spacing: .02em; font-size: 26px; line-height: 1.05; }
h3 { margin: 0 0 10px; font-size: 15px; font-weight: 800; }

/* Acceso */
.acceso { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; position: relative; isolation: isolate; overflow: hidden;
  background: radial-gradient(900px 500px at 85% 10%, rgba(255,59,48,.20), transparent 60%), radial-gradient(700px 500px at 0% 100%, rgba(26,163,255,.12), transparent 60%), var(--navy); }
.acceso::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .35; pointer-events: none;
  background-image: linear-gradient(var(--linea) 1px, transparent 1px), linear-gradient(90deg, var(--linea) 1px, transparent 1px); background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%); mask-image: linear-gradient(180deg, #000 0%, transparent 85%); }
.acceso .panel { width: 100%; max-width: 400px; padding: 28px; border-radius: 18px; background: linear-gradient(180deg, var(--panel2), var(--panel)); box-shadow: 0 40px 80px -30px var(--sombra); }
.acceso .wordmark { font-size: 30px; }
.acceso .etiqueta-marca { margin-top: 18px; }
.acceso-titulo { font-family: var(--titular); font-weight: 400; text-transform: uppercase; font-size: 40px; line-height: .95; letter-spacing: .005em; margin: 14px 0 6px; }
.acceso-titulo .rojo { color: var(--rojo); }
.acceso .btn.prim { width: 100%; margin-top: 8px; padding: 12px 20px; font-size: 15px; }
.volver-portada { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--tenue); text-decoration: none; }
.volver-portada:hover { color: var(--plata); }
.error { color: var(--rojo); font-size: 13px; min-height: 18px; margin-top: 8px; }

/* Cabecera */
.cab { display: flex; align-items: center; gap: 12px 14px; padding: 9px 16px; background: var(--cab-fondo); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linea); flex-wrap: wrap; position: sticky; top: 0; z-index: 1000; }
.marca { font-size: 22px; }
.nav { display: flex; gap: 2px; flex-wrap: wrap; }
.nav a { color: var(--tenue); text-decoration: none; padding: 6px 11px; border-radius: 8px; font-weight: 600; font-size: 13px; }
.nav a:hover { color: var(--plata); background: var(--panel2); }
.nav a.act { background: var(--rojo-boton); color: #fff; font-weight: 800; }
.sel-ret { background: var(--campo); color: var(--plata); border: 1px solid var(--borde-campo); border-radius: 999px; padding: 5px 12px; max-width: 280px; font-weight: 600; }
.contador { color: var(--rojo); border-color: var(--rojo); cursor: pointer; }
.contador.cero { color: var(--tenue); }
.estado-mtx { font-size: 10px; }
main { padding: 16px; }

/* Mapa */
.vista-mapa { display: grid; grid-template-columns: 1fr 320px; gap: 14px; height: calc(100vh - 90px); }
#mapa { border-radius: 16px; border: 1px solid var(--linea); height: 100%; min-height: 420px; background: var(--panel); }
.lista-cams { display: flex; flex-direction: column; gap: 8px; overflow: auto; }
.cam-item { display: flex; gap: 10px; align-items: flex-start; background: var(--panel); border: 1px solid var(--linea); border-radius: 12px; padding: 10px; cursor: pointer; }
.cam-item.directo { border-color: var(--rojo); box-shadow: inset 3px 0 0 var(--rojo); } .cam-item.caida { border-color: var(--ambar); box-shadow: inset 3px 0 0 var(--ambar); }
.cam-item input { margin-top: 3px; accent-color: var(--rojo-boton); }
.cam-item .t { font-weight: 800; } .cam-item .s { font-size: 12px; color: var(--tenue); }
.marcador { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; font-size: 17px; color: #fff; box-shadow: 0 0 0 6px rgba(255,59,48,.28), 0 2px 6px rgba(0,0,0,.45); }
.marcador.directo { background: #e0271d; } .marcador.caida { background: #ffb020; color: #07090d; box-shadow: 0 0 0 6px rgba(255,176,32,.32), 0 2px 6px rgba(0,0,0,.45); }
.marcador.sin_emitir, .marcador.desactivada { background: #5b6676; box-shadow: 0 2px 6px rgba(0,0,0,.45); }
.leaflet-tooltip.et-mapa { background: var(--panel); color: var(--plata); border: 1px solid var(--linea); font-weight: 800; border-radius: 6px; padding: 2px 7px; box-shadow: 0 2px 8px var(--sombra); }
.leaflet-tooltip.et-mapa::before { display: none; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--panel); color: var(--plata); border: 1px solid var(--linea); }
.leaflet-popup-content-wrapper { border-radius: 12px; }
.leaflet-container { font-family: var(--fuente); }
.leaflet-container a.leaflet-popup-close-button { color: var(--plata); }
.leaflet-tile-pane { filter: var(--filtro-teselas); }

/* Mosaico */
.mosaico { display: grid; gap: 10px; }
.mosaico.n1 { grid-template-columns: 1fr; } .mosaico.n4 { grid-template-columns: repeat(2, 1fr); }
.mosaico.todas { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
.celda { position: relative; background: #000; border: 2px solid var(--linea); border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; }
.celda.directo { border-color: var(--rojo); } .celda.caida { border-color: var(--ambar); }
.celda video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.etiqueta-video { position: absolute; top: 10px; left: 10px; display: flex; align-items: center; gap: 8px; background: var(--vid-fondo); border: 1px solid var(--vid-linea); border-radius: 8px; padding: 6px 11px; max-width: calc(100% - 20px); }
.etiqueta-video .ico { font-size: 20px; color: var(--vid-ambar); }
.etiqueta-video .nom { font-weight: 800; font-size: 16px; color: #fff; }
.etiqueta-video .resp { font-size: 11px; color: var(--vid-texto); }
.mosaico.todas .etiqueta-video .nom, .mosaico.n4 .etiqueta-video .nom { font-size: 14px; }
.estado-video { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; }
.estado-video span { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 7px; border-radius: 5px; }
.en-directo { background: var(--vid-rojo); color: #fff; }
.sin-senal { background: var(--vid-ambar); color: #07090d; }
.dato { background: var(--vid-fondo); color: var(--vid-texto); }
.pie-video { position: absolute; bottom: 8px; left: 10px; right: 10px; display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--vid-texto); }
.pie-video span { background: var(--vid-fondo); border-radius: 5px; padding: 2px 7px; }
.pie-video span:empty { display: none; }
.cubre { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; color: var(--vid-tenue); font-weight: 700; }

/* Tablas */
table.t { width: 100%; border-collapse: collapse; }
table.t th { text-align: left; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); font-weight: 700; padding: 8px; border-bottom: 1px solid var(--linea); }
table.t td { padding: 10px 8px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.codigo { font-family: var(--mono); font-size: 20px; font-weight: 700; color: var(--texto-fuerte); letter-spacing: 1px; }
.urls { font-size: 11px; color: var(--tenue); line-height: 1.6; word-break: break-all; }
.urls b { color: var(--plata); font-weight: 600; }
.alerta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--linea); border-left: 4px solid var(--rojo); border-radius: 12px; padding: 10px 14px; margin-bottom: 8px; }
.alerta.media { border-left-color: var(--ambar); } .alerta.resuelta { border-left-color: var(--verde); opacity: .75; }
.rejilla2 { display: grid; grid-template-columns: 340px 1fr; gap: 14px; align-items: start; }
#avisos { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 5000; }
.aviso { background: var(--panel2); border: 1px solid var(--rojo); border-left: 5px solid var(--rojo); border-radius: 12px; padding: 10px 14px; max-width: 360px; box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; z-index: 6000; }
.modal .panel { width: min(960px, 94vw); }
.modal .panel.estrecho { width: min(540px, 94vw); }
.btn.borde-rojo { color: var(--rojo); border-color: var(--rojo); }
.btn.borde-rojo:hover { background: var(--rojo-boton); border-color: var(--rojo-boton); color: #fff; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.nota-conserva { background: var(--panel2); border: 1px solid var(--linea); border-left: 4px solid var(--verde); border-radius: 8px; padding: 8px 12px; font-size: 13px; }
.nombre-a-escribir { font-size: 13px; padding: 4px 0 6px; color: var(--texto-fuerte); user-select: all; }
details.eliminados { margin-top: 12px; border-top: 1px solid var(--linea); padding-top: 8px; }
details.eliminados summary { cursor: pointer; font-weight: 600; color: var(--tenue); font-size: 13px; }
details.eliminados[open] summary { margin-bottom: 8px; }
@media (max-width: 900px) { .vista-mapa, .rejilla2 { grid-template-columns: 1fr; height: auto; } #mapa { height: 60vh; } .mosaico.n4 { grid-template-columns: 1fr; } }

.mosaico.n1 .celda { width: min(100%, calc((100vh - 130px) * 16 / 9)); margin: 0 auto; }
.mosaico.n1 .etiqueta-video { top: 14px; left: 14px; padding: 9px 15px; }
.mosaico.n1 .etiqueta-video .nom { font-size: 22px; } .mosaico.n1 .etiqueta-video .ico { font-size: 28px; } .mosaico.n1 .etiqueta-video .resp { font-size: 13px; }

/* Mosaico: vistas 2/9 y asignación manual de celdas */
.mosaico.n2 { grid-template-columns: repeat(2, 1fr); } .mosaico.n9 { grid-template-columns: repeat(3, 1fr); }
.mosaico.n9 .etiqueta-video { padding: 4px 8px; } .mosaico.n9 .etiqueta-video .nom, .mosaico.n2 .etiqueta-video .nom { font-size: 13px; } .mosaico.n9 .etiqueta-video .resp { display: none; }
.mosaico .celda:not(.vacia) { cursor: zoom-in; }
.celda.vacia { display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(135deg, var(--rayas-a) 0 14px, var(--rayas-b) 14px 28px); border-style: dashed; }
.vacia-txt { color: var(--plata); font-weight: 700; display: flex; align-items: center; gap: 10px; opacity: .8; }
.vacia-txt .num, .sel-pos .num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--ambar); color: var(--ambar); font-family: var(--mono); font-weight: 700; font-size: 12px; flex: none; }
.panel.asignar { margin-bottom: 12px; padding: 12px 14px; }
.panel.asignar .fila { margin-bottom: 10px; }
.selectores { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.sel-pos { display: flex; align-items: center; gap: 8px; }
.sel-pos select { width: 100%; } .sel-pos.vacia select { color: var(--plata); border-style: dashed; }
.chip.manual { color: var(--ambar); border-color: var(--ambar); } .chip.auto { color: var(--plata); }
.aviso-asig { min-height: 16px; margin-top: 6px; font-size: 12px; color: var(--ambar); }

/* Vista de una cámara: vídeo + mapa con su GPS */
.vista-una { display: grid; grid-template-columns: min(64%, calc((100vh - 140px) * 16 / 9)) minmax(0, 1fr); gap: 10px; align-items: stretch; }
.una-video .celda { width: 100%; }
.una-video .etiqueta-video { top: 14px; left: 14px; padding: 9px 15px; } .una-video .etiqueta-video .nom { font-size: 22px; } .una-video .etiqueta-video .ico { font-size: 28px; } .una-video .etiqueta-video .resp { font-size: 13px; }
.una-mapa { display: flex; flex-direction: column; min-height: 0; border: 2px solid var(--linea); border-radius: 12px; overflow: hidden; background: var(--navy); }
.una-gps-cab { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--linea); }
.una-gps-cab .ico { font-size: 24px; color: var(--ambar); } .una-gps-cab .tenue { font-size: 12px; }
.una-mapa-cont { position: relative; flex: 1; min-height: 220px; }
#mapaUna { position: absolute; inset: 0; }
.sin-gps { position: absolute; inset: 0; z-index: 500; display: none; align-items: center; justify-content: center; text-align: center; background: rgba(7,9,13,.74); color: var(--vid-texto); font-size: 13px; padding: 20px; }
.sin-gps b { display: block; font-size: 18px; color: #fff; margin-bottom: 6px; }
.marcador.caducado { background: #8a94a6 !important; }
@media (max-width: 900px) {
  .vista-una { grid-template-columns: 1fr; }
  .una-mapa-cont { min-height: 45vh; }
  .mosaico.n2, .mosaico.n9 { grid-template-columns: 1fr; }
}

/* Audio por celda */
.audio-video { position: absolute; right: 10px; bottom: 36px; display: flex; align-items: center; gap: 8px; z-index: 3; }
.btn-audio { display: inline-flex; align-items: center; gap: 6px; background: var(--vid-fondo); color: var(--vid-texto); border: 1px solid var(--vid-linea); border-radius: 8px; padding: 5px 9px; font-size: 12px; font-weight: 700; cursor: pointer; }
.btn-audio svg { font-size: 17px; }
.btn-audio:hover { border-color: var(--vid-ambar); }
.btn-audio.on { background: var(--vid-ambar); color: #07090d; border-color: var(--vid-ambar); }
.btn-audio.sin { opacity: .75; cursor: default; color: var(--vid-tenue); }
.mosaico.n9 .btn-audio span { display: none; }
.sel-calidad { color-scheme: dark; background: var(--vid-fondo); color: var(--vid-texto); border: 1px solid var(--vid-linea); border-radius: 8px; padding: 4px 6px; font-size: 12px; font-weight: 700; cursor: pointer; max-width: 130px; }
.sel-calidad:hover, .sel-calidad:focus { border-color: var(--vid-ambar); outline: none; }
.sel-calidad:disabled { opacity: .6; }
.cal-real { background: var(--vid-fondo); color: var(--vid-tenue); border-radius: 6px; padding: 3px 6px; font-size: 11px; font-family: var(--mono); }
.cal-real:empty { display: none; }
.cal-real.pend { color: var(--vid-ambar); }
.mosaico.n9 .cal-real { display: none; }
@media (max-width: 700px) { .cal-real { display: none; } }
.mosaico.n9 .sel-calidad { max-width: 92px; font-size: 11px; }
.volumen { width: 120px; accent-color: var(--vid-ambar); }

/* Tablas anchas en móvil: desplazamiento horizontal en lugar de solaparse */
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 700px) { .tabla-scroll .t td, .tabla-scroll .t th { white-space: nowrap; } .tabla-scroll .t td .mono { white-space: normal; word-break: break-all; min-width: 140px; } }

/* ---- «Hablar» (walkie-talkie de dirección) ---- */
.hablar-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.btn-hablar { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--panel2); color: var(--plata); border: 1px solid var(--borde-campo); border-radius: 10px; padding: 5px 8px; font-size: 12px; font-weight: 800; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none; }
.btn-hablar svg { font-size: 17px; }
.btn-hablar:hover { border-color: var(--ambar); color: var(--texto-fuerte); }
.celda .btn-hablar { background: var(--vid-fondo); color: var(--vid-texto); border-color: var(--vid-linea); }
.celda .btn-hablar:hover { border-color: var(--vid-ambar); color: #fff; }
.btn-hablar.grande { padding: 7px 15px; font-size: 14px; border-radius: 999px; background: var(--ambar-suave); border-color: var(--ambar); color: var(--ambar); }
.btn-hablar.grande svg { font-size: 19px; }
.btn-hablar.conectando { background: rgba(255,176,32,.18); border-color: var(--ambar); color: var(--ambar); }
.celda .btn-hablar.conectando { background: rgba(255,176,32,.22); border-color: var(--vid-ambar); color: var(--vid-ambar); }
.btn-hablar.hablando, .celda .btn-hablar.hablando { background: var(--rojo-boton); border-color: var(--rojo-boton); color: #fff; animation: latido-hablar 1s ease-in-out infinite; }
.celda .btn-hablar.hablando { background: var(--vid-rojo); border-color: var(--vid-rojo); }
@keyframes latido-hablar { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,59,48,.55); } 50% { box-shadow: 0 0 0 7px rgba(255,59,48,0); } }
.sel-modo-hablar { background: var(--campo); color: var(--plata); border: 1px solid var(--borde-campo); border-radius: 8px; padding: 4px 5px; font-size: 12px; }
.sil-hablar { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--tenue); cursor: pointer; white-space: nowrap; }
.sil-hablar input { accent-color: var(--ambar); }
.est-hablar { color: var(--tenue); white-space: nowrap; text-transform: none; letter-spacing: 0; font-family: var(--fuente); font-size: 11px; }
.est-hablar.conectando { color: var(--ambar); } .est-hablar.hablando { color: var(--rojo); } .est-hablar.error { color: var(--rojo); } .est-hablar.remoto { color: var(--ambar); }
.mosaico.n9 .celda-hablar { padding: 4px 6px; }

/* ---------- Eventos: alta, códigos y ruta KMZ ---------- */
.rejilla-eventos { display: grid; grid-template-columns: minmax(340px, 420px) minmax(0, 1fr); gap: 14px; align-items: start; }
.rejilla-eventos > * { min-width: 0; } /* que la tabla haga scroll dentro y no ensanche la página */
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.filas-cam { display: flex; flex-direction: column; gap: 6px; }
.fila-cam { display: grid; grid-template-columns: 104px 1fr auto; gap: 6px; align-items: center; }
.resultado-evento { margin-bottom: 14px; border-color: var(--verde); }
.resultado-evento .codigo { font-size: 18px; }
.tabla-eventos tr.ev-activo td { background: var(--rojo-suave); }
.tabla-eventos tr.ev-activo td:first-child { box-shadow: inset 3px 0 0 var(--rojo); }
.acciones-ev { gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.pos-ruta { color: var(--azul); }
.pos-ruta.fuera { color: var(--ambar); font-weight: 600; }
.leaflet-tooltip.et-ruta { background: #07090d; color: #fff; border: 1px solid rgba(255,255,255,.25); font-size: 11px; font-weight: 600; padding: 1px 6px; box-shadow: none; }
.leaflet-tooltip.et-ruta.salida { border-color: var(--verde); }
.leaflet-tooltip.et-ruta.llegada { border-color: var(--rojo); }
.leaflet-tooltip.et-ruta::before { display: none; }
/* Varias rutas por evento: leyenda del mapa y lista en «Eventos» */
.leyenda-rutas { background: var(--panel); color: var(--plata); border: 1px solid var(--linea); border-radius: 8px; padding: 8px 10px; font: 12px/1.35 Inter, system-ui, sans-serif; max-width: 240px; max-height: 40vh; overflow: auto; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.leyenda-rutas .lr-tit { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); margin-bottom: 4px; font-weight: 600; }
.leyenda-rutas .lr-fila { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.leyenda-rutas .lr-fila span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leyenda-rutas .lr-fila i { flex: none; width: 18px; height: 5px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.45); }
.punto-ruta { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; box-shadow: 0 0 0 1px rgba(0,0,0,.45); }
.lista-rutas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; min-width: 220px; }
.lista-rutas .ruta-ev { display: flex; align-items: flex-start; gap: 6px; padding: 5px 6px; border: 1px solid var(--linea); border-radius: 6px; }
.lista-rutas .ruta-ev .punto-ruta { margin-top: 3px; }
.lista-rutas .ruta-ev .crece { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.contador-rutas { font-size: 11px; color: var(--tenue); }
.contador-rutas.lleno { color: var(--ambar); font-weight: 600; }
@media (max-width: 900px) { .rejilla-eventos { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .dos { grid-template-columns: 1fr; } .fila-cam { grid-template-columns: 92px 1fr auto; } }
.cam-item .s.pos-ruta { color: var(--azul); } .cam-item .s.pos-ruta.fuera { color: var(--ambar); }
.chip.en-pantalla { color: var(--verde); }
/* Eventos en móvil: cada evento como tarjeta (sin scroll horizontal) */
@media (max-width: 700px) {
  .tabla-eventos thead { display: none; }
  .tabla-eventos, .tabla-eventos tbody, .tabla-eventos tr, .tabla-eventos td { display: block; width: 100%; }
  .tabla-scroll .tabla-eventos td { white-space: normal; padding: 4px 8px; border: 0; }
  .tabla-eventos tr { border-bottom: 1px solid var(--linea); padding: 8px 0; }
  .tabla-eventos td:nth-child(4)::before { content: 'Cámaras: '; color: var(--tenue); }
  .acciones-ev { flex-wrap: wrap; }
}

/* ---------- Tema claro/oscuro: botón y ajustes ---------- */
.btn-tema { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; font-size: 17px; background: transparent; color: var(--plata); border: 1px solid var(--borde-campo); border-radius: 10px; cursor: pointer; }
.btn-tema:hover { border-color: var(--plata); }
.tema-acceso .btn-tema { width: 42px; height: 42px; font-size: 19px; }
.tema-acceso { position: fixed; top: 14px; right: 14px; z-index: 10; }
:root[data-tema="claro"] .acceso { background: radial-gradient(900px 500px at 85% 10%, rgba(200,33,26,.12), transparent 60%), radial-gradient(700px 500px at 0% 100%, rgba(11,107,192,.08), transparent 60%), var(--navy); }
:root[data-tema="claro"] .panel, :root[data-tema="claro"] .cam-item { box-shadow: 0 1px 2px rgba(16,32,64,.06); }
:root[data-tema="claro"] .aviso { box-shadow: 0 6px 20px rgba(16,32,64,.18); }
:root[data-tema="claro"] .modal { background: rgba(16,24,40,.55); }
/* Mapa en tema oscuro: controles de Leaflet a juego */
:root:not([data-tema="claro"]) .leaflet-bar a { background: var(--panel); color: var(--plata); border-bottom-color: var(--linea); }
:root:not([data-tema="claro"]) .leaflet-bar a:hover { background: var(--panel2); }
:root:not([data-tema="claro"]) .leaflet-control-attribution { background: rgba(15,20,28,.82); color: var(--tenue); }
:root:not([data-tema="claro"]) .leaflet-control-attribution a { color: var(--azul); }

/* Icono del tipo de cámara (vehículo / punto): ámbar como los iconos de la portada */
.ico-tipo { color: var(--ambar); }
.celda .ico-tipo, .etiqueta-video .ico-tipo { color: var(--vid-ambar); }
.estado-mtx.ok { color: var(--verde); } .estado-mtx.mal { color: var(--rojo); }

/* Cabecera en móvil: compacta y sin desbordes (antes «Mantén pulsado · Espacio» se salía de la pantalla) */
@media (max-width: 700px) {
  .cab { gap: 8px; padding: 8px 12px; }
  .marca { font-size: 20px; }
  .sel-ret { flex: 1 1 160px; min-width: 0; max-width: none; }
  .hablar-cab { flex: 1 1 100%; gap: 6px; }
  .hablar-cab .sil-hablar { white-space: normal; flex: 1 1 120px; min-width: 0; line-height: 1.2; }
  .est-hablar:not(.hablando):not(.conectando):not(.error):not(.remoto) { display: none; }
  .est-hablar { white-space: normal; flex: 1 1 100%; }
  .cab > .crece { display: none; }
  .nav { flex: 1 1 100%; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { flex: none; }
  h2 { font-size: 22px; }
  .acceso-titulo { font-size: 34px; }
}

/* ---- GoPro (emisión RTMP desde GoPro Quik) ---- */
.chip-gopro { display: inline-block; vertical-align: middle; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 1px 6px; border-radius: 6px; background: var(--ambar); color: #111; }
.gopro-caja { display: flex; flex-direction: column; gap: 2px; min-width: 260px; }
.url-gopro { font-size: 13px; padding: 6px 8px; border-radius: 8px; background: var(--panel2); border: 1px solid var(--borde-campo); user-select: all; word-break: break-all; }
.qr-gopro { margin-top: 6px; width: 172px; padding: 8px; border-radius: 10px; background: #fff; }
.qr-gopro svg { display: block; width: 156px; height: 156px; }
.pasos-quik { margin: 6px 0 0 18px; padding: 0; line-height: 1.45; }
.campo.peq { padding: 3px 6px; font-size: 12px; width: auto; min-height: 0; }
.btn-hablar.sin-altavoz { opacity: .45; cursor: not-allowed; }
.celda .sel-calidad:disabled { opacity: .6; cursor: not-allowed; }