/* Fusión Seguridad — Central. Estética de centro de despacho: grafito/azul oscuro, alta legibilidad,
   mapa protagonista, estados identificables sin depender solo del color (siempre texto + ícono también). */
:root {
  --bg:#0a0e13; --bg-elev:#121824; --card:#141b28; --border:#223044; --border-soft:#1a2432;
  --text:#e7edf5; --text-dim:#97a7ba; --text-faint:#5f7084;
  --accent:#3b82f6; --accent-hover:#2f6fe0; --accent-soft:rgba(59,130,246,.15);
  --danger:#ef4444; --danger-soft:rgba(239,68,68,.16);
  --amber:#f2a93b; --amber-soft:rgba(242,169,59,.16);
  --ok:#22c55e; --ok-soft:rgba(34,197,94,.15);
  --shadow:0 2px 10px rgba(0,0,0,.35);
  --radius:10px;
}
* { box-sizing:border-box; }
html, body, #app { height:100%; margin:0; }
body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; background:var(--bg); color:var(--text); font-size:14px; }
button { font-family:inherit; cursor:pointer; }
input, select, textarea { font-family:inherit; }

/* ---------------------------------------------------------------------------------------------- Login */
.wrap-login { max-width:380px; margin:0 auto; padding:60px 20px; }
.brand-login { text-align:center; margin-bottom:28px; }
.brand-login .mark { width:52px; height:52px; border-radius:12px; background:linear-gradient(135deg,var(--accent),#1e3a8a); display:flex; align-items:center; justify-content:center; margin:0 auto 14px; font-size:22px; font-weight:800; color:#fff; }
.brand-login h1 { font-size:19px; margin:0; font-weight:700; }
.brand-login p { color:var(--text-dim); font-size:13px; margin:4px 0 0; }
.card-login { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); }
label { display:block; font-size:12.5px; font-weight:600; color:var(--text-dim); margin:12px 0 6px; }
input, select { width:100%; padding:10px 12px; border-radius:8px; border:1px solid var(--border); background:var(--bg-elev); color:var(--text); font-size:14px; }
input:focus, select:focus { outline:none; border-color:var(--accent); }
button.primary { width:100%; margin-top:16px; padding:11px; border:none; border-radius:8px; background:var(--accent); color:#fff; font-weight:650; font-size:14.5px; }
button.primary:hover { background:var(--accent-hover); }
/* .sec también se usa en un <a> (ej. "Abrir navegación" en la ficha de incidente) — sin esta regla extra
   quedaba como texto de link suelto en vez de verse como el resto de los botones (bug real encontrado en
   la revisión visual, confirmado con captura de pantalla). */
button.sec, a.sec { padding:8px 12px; border-radius:8px; background:var(--bg-elev); border:1px solid var(--border); color:var(--text); font-size:13px; font-weight:600; text-decoration:none; display:inline-flex; align-items:center; }
button.sec:hover, a.sec:hover { border-color:var(--accent); }
button.danger { background:var(--danger); color:#fff; border:none; }
button.small { padding:5px 10px; font-size:12px; }
button:disabled { opacity:.5; cursor:not-allowed; }
.error-msg { color:var(--danger); font-size:13px; margin-top:10px; min-height:16px; }

/* ---------------------------------------------------------------------------------------------- Shell */
.shell { display:flex; flex-direction:column; height:100%; }
.topbar { height:52px; flex:0 0 auto; display:flex; align-items:center; gap:16px; padding:0 16px; background:var(--bg-elev); border-bottom:1px solid var(--border); }
.topbar .mark { width:28px; height:28px; border-radius:7px; background:linear-gradient(135deg,var(--accent),#1e3a8a); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; color:#fff; flex:0 0 auto; }
.topbar .brand { font-weight:700; font-size:14.5px; white-space:nowrap; }
.topbar .org { color:var(--text-dim); font-size:12.5px; white-space:nowrap; }
.topbar .spacer { flex:1; }
.topbar .estado-conexion { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-dim); }
.dot { width:8px; height:8px; border-radius:50%; background:var(--text-faint); }
.dot.ok { background:var(--ok); box-shadow:0 0 0 3px var(--ok-soft); }
.dot.off { background:var(--danger); box-shadow:0 0 0 3px var(--danger-soft); }
.topbar .badge-alertas { background:var(--danger); color:#fff; font-weight:700; font-size:12px; padding:3px 9px; border-radius:20px; }
.topbar .hora { font-size:13px; color:var(--text-dim); font-variant-numeric:tabular-nums; white-space:nowrap; }
.topbar .usuario { font-size:13px; font-weight:600; white-space:nowrap; }
.topbar .usuario .rol { color:var(--text-dim); font-weight:400; font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; }
.sidenav-toggle { display:none; background:none; border:1px solid var(--border); border-radius:7px; color:var(--text); font-size:16px; width:32px; height:32px; flex:0 0 auto; }

.body-area { flex:1; display:flex; min-height:0; position:relative; }
.sidenav-backdrop { display:none; }
.sidenav { width:188px; flex:0 0 auto; background:var(--bg-elev); border-right:1px solid var(--border); overflow-y:auto; padding:10px 0; }
.sidenav .grupo-titulo { font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint); padding:14px 16px 6px; font-weight:700; }
.sidenav .item { padding:9px 16px; font-size:13.5px; color:var(--text-dim); cursor:pointer; display:flex; align-items:center; gap:9px; border-left:3px solid transparent; }
.sidenav .item:hover { color:var(--text); background:var(--card); }
.sidenav .item.activo { color:var(--text); background:var(--accent-soft); border-left-color:var(--accent); font-weight:600; }
.sidenav .item .ic { width:16px; text-align:center; }

.main { flex:1; min-width:0; display:flex; flex-direction:column; }
.vista { flex:1; min-height:0; display:flex; flex-direction:column; }
.vista-scroll { flex:1; overflow-y:auto; padding:18px 22px; }
.vista-header { display:flex; align-items:center; justify-content:space-between; padding:14px 22px 0; }
.vista-header h2 { font-size:17px; margin:0; font-weight:700; }
.vista-header .acciones { display:flex; gap:8px; }

/* ---------------------------------------------------------------------------------------------- Mapa operativo */
.mapa-layout { flex:1; display:flex; min-height:0; }
#map { flex:1 1 70%; min-width:0; background:#0e1420; }
.panel-lateral { width:330px; flex:0 0 auto; background:var(--bg-elev); border-left:1px solid var(--border); display:flex; flex-direction:column; min-height:0; }
.indicadores { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border); border-bottom:1px solid var(--border); }
.indicador { background:var(--bg-elev); padding:10px 12px; }
.indicador .n { font-size:20px; font-weight:800; font-variant-numeric:tabular-nums; }
.indicador .l { font-size:10.5px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.03em; }
.indicador.danger .n { color:var(--danger); }
.indicador.amber .n { color:var(--amber); }
.indicador.ok .n { color:var(--ok); }
.lista-alertas { flex:1; overflow-y:auto; }
.fila-alerta { padding:11px 14px; border-bottom:1px solid var(--border-soft); cursor:pointer; }
.fila-alerta:hover { background:var(--card); }
.fila-alerta.seleccionada { background:var(--accent-soft); border-left:3px solid var(--accent); }
.fila-alerta .top { display:flex; justify-content:space-between; align-items:baseline; gap:6px; }
.fila-alerta .cat { font-weight:650; font-size:13px; }
.fila-alerta .hora { font-size:11px; color:var(--text-faint); white-space:nowrap; }
.fila-alerta .ubic { font-size:12px; color:var(--text-dim); margin-top:2px; }
.fila-alerta .fila-badges { display:flex; gap:5px; margin-top:6px; flex-wrap:wrap; }
.empty-lista { padding:30px 16px; text-align:center; color:var(--text-faint); font-size:13px; }

.badge { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:20px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; white-space:nowrap; }
.badge.danger { background:var(--danger-soft); color:var(--danger); }
.badge.amber { background:var(--amber-soft); color:var(--amber); }
.badge.ok { background:var(--ok-soft); color:var(--ok); }
.badge.neutral { background:var(--border); color:var(--text-dim); }

/* ---------------------------------------------------------------------------------------------- Modal ficha */
.modal-bg { position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:flex-start; justify-content:center; padding:30px 16px; overflow:auto; z-index:100; }
.modal { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px; width:100%; max-width:560px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.modal h2 { margin:0 0 4px; font-size:17px; }
.modal .sub { color:var(--text-dim); font-size:12.5px; margin:0 0 16px; }
.stat-line { display:flex; justify-content:space-between; padding:6px 0; font-size:13px; border-bottom:1px solid var(--border-soft); }
.stat-line .lab { color:var(--text-dim); }
.acciones-grid { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.timeline { margin-top:14px; max-height:220px; overflow-y:auto; }
.timeline-item { padding:7px 0; border-left:2px solid var(--border); padding-left:12px; margin-left:4px; font-size:12.5px; position:relative; }
.timeline-item::before { content:''; position:absolute; left:-5px; top:9px; width:8px; height:8px; border-radius:50%; background:var(--accent); }
.timeline-item .t { color:var(--text-faint); font-size:11px; }
.modal-close { position:absolute; top:16px; right:18px; background:none; border:none; color:var(--text-dim); font-size:20px; cursor:pointer; }

.ia-box { margin-top:14px; background:var(--bg-elev); border:1px solid var(--accent); border-radius:8px; padding:12px 14px; }
.ia-box-header { font-weight:700; font-size:13px; display:flex; align-items:center; gap:8px; }
.ia-box .ia-modelo { font-weight:400; font-size:10.5px; color:var(--text-faint); }
.ia-texto { white-space:pre-wrap; font-family:inherit; font-size:13px; margin:8px 0 6px; color:var(--text); }
.ia-disclaimer { font-size:11px; color:var(--text-faint); border-top:1px solid var(--border-soft); padding-top:6px; }
.ia-box.ia-cargando { color:var(--text-dim); font-size:13px; border-color:var(--border); }
.ia-box.ia-error { border-color:var(--amber); color:var(--amber); font-size:13px; }

table { width:100%; border-collapse:collapse; font-size:13px; }
th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--border-soft); }
th { color:var(--text-dim); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.02em; }
tr:hover td { background:var(--card); }

.form-grid { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:14px; }
.form-grid > div { flex:1; min-width:140px; }
/* z-index alto a propósito: Leaflet pinta sus propios panes (tiles, marcadores, controles) con z-index de
   hasta 1000, y ni #map ni #mapWrap aíslan un stacking context propio — con un z-index bajo, estas tarjetas
   quedaban pintadas DEBAJO del mapa, invisibles aunque existieran en el DOM (bug real encontrado en la
   revisión visual, confirmado con capturas). 1200 asegura que siempre queden por encima del mapa y sus
   controles, nunca por debajo de un modal (que usa z-index:100 en su propio stacking context aislado). */
.leyenda { position:absolute; bottom:14px; left:14px; background:var(--card); border:1px solid var(--border); border-radius:8px; padding:10px 12px; font-size:11.5px; z-index:1200; box-shadow:var(--shadow); }
.leyenda .fila { display:flex; align-items:center; gap:6px; margin:3px 0; }
.leyenda .punto { width:9px; height:9px; border-radius:50%; }
.filtros-mapa { position:absolute; top:12px; right:12px; z-index:1200; display:flex; gap:6px; background:var(--card); padding:8px; border-radius:8px; border:1px solid var(--border); box-shadow:var(--shadow); flex-wrap:wrap; max-width:260px; }

.toast-wrap { position:fixed; top:60px; right:16px; z-index:200; display:flex; flex-direction:column; gap:8px; }
.toast { background:var(--card); border:1px solid var(--danger); border-left:4px solid var(--danger); border-radius:8px; padding:12px 14px; width:300px; box-shadow:var(--shadow); animation:entra .2s ease; }
.toast b { display:block; font-size:13px; }
.toast p { margin:3px 0 0; font-size:12px; color:var(--text-dim); }
@keyframes entra { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }

.leaflet-popup-content-wrapper, .leaflet-popup-tip { background:var(--card); color:var(--text); }
.empty-state { color:var(--text-faint); text-align:center; padding:30px; font-size:13px; }

/* ---------------------------------------------------------------------------------------------- Responsive (celular/tablet angosto) */
@media (max-width: 860px) {
  .sidenav-toggle { display:flex; align-items:center; justify-content:center; }
  .topbar { gap:10px; padding:0 10px; }
  .topbar .org, .topbar .hora, .topbar .estado-conexion { display:none; }
  .topbar .brand { display:none; }
  .topbar .usuario { max-width:88px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .topbar .usuario .rol { display:none; }

  .sidenav {
    position:fixed; top:52px; left:0; bottom:0; width:230px; z-index:150;
    transform:translateX(-100%); transition:transform .18s ease; box-shadow:4px 0 24px rgba(0,0,0,.45);
  }
  .body-area.sidenav-abierto .sidenav { transform:translateX(0); }
  .sidenav-backdrop {
    display:block; position:fixed; top:52px; left:0; right:0; bottom:0; background:rgba(0,0,0,.55);
    z-index:140; opacity:0; pointer-events:none; transition:opacity .18s ease;
  }
  .body-area.sidenav-abierto .sidenav-backdrop { opacity:1; pointer-events:auto; }

  .mapa-layout { flex-direction:column; }
  #map { flex:1 1 42vh; min-height:220px; }
  .panel-lateral { width:100%; border-left:none; border-top:1px solid var(--border); max-height:45vh; }
  .filtros-mapa { max-width:calc(100vw - 40px); }
  .leyenda { font-size:10.5px; padding:8px 10px; }

  .vista-scroll { padding:14px 14px; }
  .vista-header { padding:12px 14px 0; flex-wrap:wrap; gap:8px; }
  .form-grid > div { min-width:120px; }
  .modal { padding:16px; }
  .acciones-grid { flex-direction:column; }
  .acciones-grid button, .acciones-grid a { width:100%; justify-content:center; }
}