:root {
  --bg: #0e1116;
  --panel: #161b22;
  --panel-2: #1c2230;
  --borde: #2a3240;
  --texto: #e6edf3;
  --texto-2: #9aa7b5;
  --acento: #3fa7ff;
  --verde: #2ecc71;
  --ambar: #f5a623;
  --rojo: #e74c3c;
  --sidebar-ancho: 340px;
  --nav-movil-alto: 68px;
  --panel-colapsado: 62px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--texto);
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

button, input, select { font: inherit; color: inherit; }

/* ── layout ────────────────────────────────────────────────────────────────── */
#app {
  display: grid;
  grid-template-columns: var(--sidebar-ancho) 1fr;
  height: 100dvh;
  overflow: hidden;
}

#area-mapas { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #0b0e13; }
.superficie-mapa { position: absolute; inset: 0; width: 100%; height: 100%; background: #0b0e13; }
.superficie-mapa[hidden] { display: none !important; }

.barra-mapa {
  position: absolute;
  z-index: 1100;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 6px;
  background: rgba(14, 17, 22, .9);
  border: 1px solid var(--borde);
  border-radius: 10px;
  box-shadow: 0 6px 22px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
}
.barra-mapa select {
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-radius: 6px;
  padding: 4px 8px;
}
.barra-mapa .activo { color: var(--acento); border-color: var(--acento); background: rgba(63,167,255,.14); }

#sidebar {
  background: var(--panel);
  border-right: 1px solid var(--borde);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

#contenido-panel {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.asa-panel { display:none; }

/* ── encabezado ────────────────────────────────────────────────────────────── */
.encabezado {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--borde);
  flex: none;
  background: var(--panel);
  z-index: 5;
}
.encabezado h1 { font-size: 15px; margin: 0; font-weight: 600; letter-spacing: .2px; }
.encabezado .marca { color: var(--acento); }
.espaciador { flex: 1; }

.pastilla {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--borde);
  color: var(--texto-2);
  white-space: nowrap;
}
.pastilla.viva { color: var(--verde); border-color: rgba(46, 204, 113, .4); }
.pastilla.muerta { color: var(--rojo); border-color: rgba(231, 76, 60, .4); }

.btn {
  background: var(--panel-2);
  border: 1px solid var(--borde);
  color: var(--texto);
  border-radius: 6px;
  padding: 7px 11px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn:hover { background: #232b3a; border-color: #3a4553; }
.btn:active { transform: translateY(1px); }
.btn.primario { background: var(--acento); border-color: var(--acento); color: #06121f; font-weight: 600; }
.btn.primario:hover { background: #58b4ff; }
.btn.pequeno { padding: 4px 8px; font-size: 12px; }
.btn.peligro { color: var(--rojo); border-color: rgba(231, 76, 60, .55); }
.btn.peligro:hover { background: rgba(231, 76, 60, .12); border-color: var(--rojo); }

/* ── lista de equipos ──────────────────────────────────────────────────────── */
.seccion { border-bottom: 1px solid var(--borde); }
.seccion > h2 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--texto-2);
  margin: 0;
  padding: 12px 14px 6px;
  font-weight: 600;
}

.equipo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  border-left: 3px solid transparent;
}
.equipo:hover { background: var(--panel-2); }
.equipo.seleccionado { background: var(--panel-2); border-left-color: var(--acento); }

.punto { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 0 3px rgba(255,255,255,.04); }
.punto.verde { background: var(--verde); }
.punto.ambar { background: var(--ambar); }
.punto.rojo { background: var(--rojo); }
.punto.gris { background: #5a6572; }

.equipo .datos { min-width: 0; flex: 1; }
.equipo .nombre { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.equipo .sub { color: var(--texto-2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.equipo .vel { font-variant-numeric: tabular-nums; color: var(--texto-2); font-size: 12px; }
.equipo .vigilar {
  width: 27px;
  height: 27px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--texto-2);
  cursor: pointer;
}
.equipo .vigilar:hover, .equipo .vigilar.activo { color: var(--acento); border-color: rgba(63,167,255,.45); background: rgba(63,167,255,.1); }

.inactivo-tag {
  font-size: 10px;
  border: 1px solid var(--ambar);
  color: var(--ambar);
  border-radius: 4px;
  padding: 0 4px;
  margin-left: 6px;
}

.administrar-equipos { border-top: 1px dashed var(--borde); }
.administrar-equipos > summary {
  padding: 10px 14px;
  cursor: pointer;
  color: var(--acento);
  font-size: 12px;
  user-select: none;
}

/* ── detalle ───────────────────────────────────────────────────────────────── */
.detalle { padding: 10px 14px 14px; }
.fila { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 13px; }
.fila .k { color: var(--texto-2); }
.fila .v { font-variant-numeric: tabular-nums; text-align: right; word-break: break-word; }

.barra-bateria {
  height: 6px;
  background: var(--panel-2);
  border-radius: 3px;
  overflow: hidden;
  width: 90px;
  border: 1px solid var(--borde);
}
.barra-bateria > i { display: block; height: 100%; background: var(--verde); }

/* ── rango de fechas ───────────────────────────────────────────────────────── */
.controles { padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.controles label { font-size: 11px; color: var(--texto-2); text-transform: uppercase; letter-spacing: .6px; }
.controles input, .controles select {
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-radius: 6px;
  padding: 7px 9px;
  width: 100%;
}
.botonera { display: flex; gap: 8px; flex-wrap: wrap; }
.atajos { display: flex; gap: 6px; flex-wrap: wrap; }
.check-fila { display:flex; align-items:center; gap:7px; text-transform:none !important; letter-spacing:0 !important; }
.check-fila input { width:auto; accent-color:var(--acento); }
.comandos { border-top: 1px dashed var(--borde); }
.comando-fila { display:grid; grid-template-columns:1fr auto; gap:3px 8px; padding:5px 0; border-bottom:1px solid var(--borde); font-size:11px; }
.comando-fila small { grid-column:1 / -1; color:var(--texto-2); word-break:break-word; }
.estado-acknowledged { color:var(--verde); }
.estado-failed, .estado-expired { color:var(--rojo); }
.estado-sent, .estado-queued { color:var(--ambar); }

/* ── depuración ────────────────────────────────────────────────────────────── */
details.depuracion { border-top: 1px solid var(--borde); }
details.depuracion > summary {
  padding: 12px 14px;
  cursor: pointer;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--texto-2);
  font-weight: 600;
  user-select: none;
}
details.depuracion > summary:hover { color: var(--texto); }
.depuracion .cuerpo { padding: 0 14px 16px; }

.hex {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  background: #0b0e13;
  border: 1px solid var(--borde);
  border-radius: 6px;
  padding: 8px;
  word-break: break-all;
  line-height: 1.6;
  max-height: 130px;
  overflow: auto;
}

table.campos { width: 100%; border-collapse: collapse; font-size: 11.5px; margin-top: 8px; }
table.campos th, table.campos td {
  text-align: left;
  padding: 4px 6px;
  border-bottom: 1px solid var(--borde);
  vertical-align: top;
}
table.campos th { color: var(--texto-2); font-weight: 600; text-transform: uppercase; font-size: 10px; letter-spacing: .5px; }
table.campos td.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--acento); }
table.campos tr.sin-mapear td { background: rgba(245, 166, 35, .1); color: var(--ambar); }
table.campos tr.derivado td { color: var(--texto-2); font-style: italic; }
.nota { color: var(--texto-2); font-size: 10.5px; display: block; margin-top: 2px; font-style: normal; }

.errores { border-left: 3px solid var(--rojo); background: rgba(231, 76, 60, .1); padding: 6px 10px; margin: 8px 0; border-radius: 0 6px 6px 0; font-size: 12px; }
.aviso { border-left: 3px solid var(--ambar); background: rgba(245, 166, 35, .1); padding: 6px 10px; margin: 8px 0; border-radius: 0 6px 6px 0; font-size: 12px; }
.vacio { color: var(--texto-2); padding: 14px; font-size: 13px; }

/* ── marcadores del mapa ───────────────────────────────────────────────────── */
.marcador { display: grid; place-items: center; width: 34px; height: 34px; }
.marcador .cuerpo {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid #0b0e13;
  box-shadow: 0 0 0 2px currentColor, 0 2px 6px rgba(0,0,0,.6);
  background: currentColor;
}
.marcador .flecha {
  position: absolute;
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 9px solid currentColor;
  transform-origin: 50% 17px;
}
.marcador .etiqueta {
  position: absolute;
  top: 26px;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 600;
  background: rgba(11,14,19,.85);
  border: 1px solid var(--borde);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--texto);
}
.leaflet-container { background: #0b0e13; font: inherit; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--panel); color: var(--texto); }
.leaflet-bar a { background: var(--panel); color: var(--texto); border-color: var(--borde); }
.leaflet-bar a:hover { background: var(--panel-2); }

/* ── mosaico de seguimiento ───────────────────────────────────────────────── */
.mosaico {
  padding: 64px 12px 12px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-auto-rows: minmax(280px, 1fr);
  gap: 10px;
  overflow: auto;
  background: var(--bg);
}
.mosaico[hidden] { display:none; }
.mosaico-vacio { grid-column:1/-1; display:grid; place-items:center; text-align:center; color:var(--texto-2); }
.mosaico-tarjeta { position:relative; min-height:280px; border:1px solid var(--borde); border-radius:12px; overflow:hidden; background:#0b0e13; }
.mosaico-mapa { position:absolute; inset:0; }
.mosaico-etiqueta {
  position:absolute; z-index:600; top:10px; left:10px; right:10px;
  display:flex; justify-content:space-between; gap:8px; pointer-events:none;
}
.mosaico-etiqueta span { background:rgba(14,17,22,.9); border:1px solid var(--borde); border-radius:7px; padding:5px 8px; box-shadow:0 3px 12px rgba(0,0,0,.35); }

.maplibregl-map { font:inherit; }
.maplibregl-ctrl-group { background:var(--panel); }
.maplibregl-ctrl button .maplibregl-ctrl-icon { filter:invert(.85); }
.marcador-3d { width:18px; height:18px; border-radius:50%; background:var(--acento); border:3px solid white; box-shadow:0 0 0 5px rgba(63,167,255,.25), 0 3px 10px #000; }

/* ── login ─────────────────────────────────────────────────────────────────── */
.login-caja {
  max-width: 340px;
  margin: 12vh auto;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 26px 24px;
}
.login-caja h1 { margin: 0 0 4px; font-size: 19px; }
.login-caja p.sub { margin: 0 0 20px; color: var(--texto-2); font-size: 13px; }
.login-caja label { display: block; font-size: 12px; color: var(--texto-2); margin: 12px 0 5px; }
.login-caja input {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-radius: 7px;
  padding: 10px 11px;
}
.login-caja input:focus { outline: 2px solid var(--acento); outline-offset: -1px; }
.login-caja button { width: 100%; margin-top: 18px; padding: 11px; }
.login-error { color: var(--rojo); font-size: 13px; margin-top: 12px; min-height: 18px; }

/* ── navegación móvil ──────────────────────────────────────────────────────── */
#alternar-panel, #navegacion-movil { display: none; }

@media (max-width: 820px) {
  html, body { width:100%; height:100%; overflow:hidden; }
  body { min-height:100dvh; touch-action:manipulation; }
  #app { grid-template-columns: 1fr; grid-template-rows: 1fr; position: relative; height:100dvh; }
  #area-mapas { position:absolute; inset:0; }
  #sidebar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(var(--nav-movil-alto) + env(safe-area-inset-bottom));
    height: min(76dvh, 720px);
    max-height: calc(100dvh - var(--nav-movil-alto) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 8px);
    border-right: none;
    border-top: 1px solid var(--borde);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 28px rgba(0,0,0,.5);
    transform: translateY(calc(100% - var(--panel-colapsado)));
    transition: transform .28s cubic-bezier(.2,.8,.2,1);
    z-index: 1250;
    will-change: transform;
  }
  #sidebar.abierto { transform: translateY(0); }

  .asa-panel {
    display:grid;
    place-items:center;
    width:100%;
    height:18px;
    padding:0;
    flex:none;
    border:0;
    background:transparent;
    cursor:pointer;
    touch-action:none;
  }
  .asa-panel span { width:38px; height:4px; border-radius:999px; background:#526071; }
  .encabezado {
    height:44px;
    padding:4px 10px 8px;
    border-radius:18px 18px 0 0;
  }
  .encabezado h1 { font-size:16px; }
  .encabezado .btn { min-height:34px; }
  #activar-notificaciones { width:38px; overflow:hidden; color:transparent; position:relative; }
  #activar-notificaciones::after { content:'🔔'; color:var(--texto); position:absolute; inset:0; display:grid; place-items:center; }
  #salir { width:38px; overflow:hidden; color:transparent; position:relative; }
  #salir::after { content:'↪'; color:var(--rojo); position:absolute; inset:0; display:grid; place-items:center; font-size:19px; }
  #alternar-panel { display:inline-grid; place-items:center; min-width:38px; }

  #contenido-panel {
    padding-bottom:calc(14px + env(safe-area-inset-bottom));
    scroll-padding-top:8px;
    -webkit-overflow-scrolling:touch;
  }
  .seccion > h2 { padding-top:14px; }
  .equipo { min-height:62px; padding:10px 14px; }
  .equipo .vigilar { width:42px; height:42px; font-size:18px; }
  .btn { min-height:44px; border-radius:9px; }
  .btn.pequeno { min-height:38px; padding:7px 10px; }
  .controles input, .controles select { min-height:44px; font-size:16px; border-radius:9px; }
  .botonera > .btn { flex:1 1 120px; }
  .fila { padding:7px 0; }

  .barra-mapa {
    top:calc(8px + env(safe-area-inset-top));
    width:max-content;
    max-width:calc(100vw - 16px);
    overflow-x:auto;
    justify-content:flex-start;
    scrollbar-width:none;
    border-radius:12px;
  }
  .barra-mapa::-webkit-scrollbar { display:none; }
  .barra-mapa .btn, .barra-mapa select { min-height:40px; white-space:nowrap; }

  #navegacion-movil {
    position:fixed;
    z-index:1400;
    left:0;
    right:0;
    bottom:0;
    height:calc(var(--nav-movil-alto) + env(safe-area-inset-bottom));
    padding:5px max(8px, env(safe-area-inset-left)) env(safe-area-inset-bottom) max(8px, env(safe-area-inset-right));
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:4px;
    background:rgba(14,17,22,.96);
    border-top:1px solid var(--borde);
    box-shadow:0 -5px 24px rgba(0,0,0,.42);
    backdrop-filter:blur(14px);
  }
  #navegacion-movil button {
    border:0;
    border-radius:10px;
    background:transparent;
    color:var(--texto-2);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:1px;
    min-width:0;
    min-height:52px;
    padding:3px;
  }
  #navegacion-movil button > span { font-size:21px; line-height:1; }
  #navegacion-movil button > small { font-size:10px; }
  #navegacion-movil button.activo { color:var(--acento); background:rgba(63,167,255,.11); }

  .leaflet-bottom { bottom:calc(var(--nav-movil-alto) + var(--panel-colapsado) + env(safe-area-inset-bottom)); }
  .maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right { bottom:calc(var(--nav-movil-alto) + var(--panel-colapsado) + env(safe-area-inset-bottom)); }
  .mosaico { grid-template-columns:1fr; padding:62px 8px calc(var(--nav-movil-alto) + var(--panel-colapsado) + 12px); }
  .mosaico-tarjeta { min-height:48dvh; }

  .login-caja {
    width:calc(100% - 24px);
    max-width:390px;
    margin:max(7dvh, env(safe-area-inset-top)) auto 0;
    padding:24px 20px calc(24px + env(safe-area-inset-bottom));
  }
  .login-caja input, .login-caja button { min-height:48px; font-size:16px; }
}

/* En horizontal el panel se vuelve lateral para no comerse la poca altura. */
@media (max-width: 820px) and (orientation: landscape) and (max-height: 520px) {
  #sidebar {
    top:env(safe-area-inset-top);
    bottom:calc(var(--nav-movil-alto) + env(safe-area-inset-bottom));
    left:0;
    right:auto;
    width:min(52vw, 430px);
    height:auto;
    max-height:none;
    border-radius:0 16px 0 0;
    border-right:1px solid var(--borde);
    transform:translateX(-105%);
  }
  #sidebar.abierto { transform:translateX(0); }
  .asa-panel { display:none; }
  .encabezado { border-radius:0 16px 0 0; padding-top:8px; }
  .barra-mapa { left:auto; right:8px; transform:none; max-width:calc(100vw - 72px); }
  .leaflet-bottom { bottom:calc(var(--nav-movil-alto) + env(safe-area-inset-bottom)); }
  .maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right { bottom:calc(var(--nav-movil-alto) + env(safe-area-inset-bottom)); }
  .mosaico { grid-template-columns:repeat(2, minmax(280px, 1fr)); padding-bottom:calc(var(--nav-movil-alto) + 10px); }
  .mosaico-tarjeta { min-height:calc(100dvh - var(--nav-movil-alto) - 76px); }
}