/* Paleta y tipografía tomadas de la landing (public/index.html) para que el panel
   y la portada sean el mismo producto. Los dos neones hacen de par semántico:
   cian = cuenta / correcto, magenta = no cuenta / problema. */
:root {
  --neon:#00f0ff; --neon2:#ff2e97; --neon3:#ff6ec7;
  --bg:#080808; --bg2:#101010; --bg3:#181818;
  --white:#f2f2f0; --muted:#888; --muted2:#252525;
  --border:rgba(255,255,255,.07);
  --mono:'Courier New',monospace;
  --r:8px;

  --ok:var(--neon); --ok-bg:rgba(0,240,255,.08);
  --bad:var(--neon2); --bad-bg:rgba(255,46,151,.09);
}
* { box-sizing:border-box; }

body {
  margin:0; background:var(--bg); color:var(--white);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2 { margin:0; letter-spacing:-.03em; font-weight:900; }
h1 { font-size:24px; }
h2 { font-size:17px; margin-bottom:14px; letter-spacing:-.02em; }
p { margin:0; }
small { color:var(--muted); font-size:12px; display:block; margin-top:4px; }

/* etiqueta mono con // — el tic de la landing */
h2::before {
  content:'// '; font-family:var(--mono); font-weight:700;
  color:var(--neon); letter-spacing:.14em; font-size:12px;
}

.top {
  display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:flex-end;
  padding:22px clamp(16px,4vw,36px) 18px; border-bottom:1px solid var(--border);
}
.brand h1 { font-weight:900; }
.brand h1 em { font-style:normal; color:var(--neon2); }
.brand p { color:var(--muted); font-size:13px; }
.visa { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.visa label {
  font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--neon);
}

.tabs { display:flex; gap:2px; padding:12px clamp(16px,4vw,36px) 0; flex-wrap:wrap; }
.tab {
  background:none; border:0; border-bottom:2px solid transparent; color:var(--muted);
  font:inherit; font-weight:700; font-size:13px; letter-spacing:.04em; text-transform:uppercase;
  padding:9px 14px; cursor:pointer; transition:color .18s,border-color .18s;
}
.tab:hover { color:var(--white); }
.tab.on { color:var(--neon); border-bottom-color:var(--neon); }
.tab:focus-visible { outline:2px solid var(--neon); outline-offset:2px; }

main { padding:22px clamp(16px,4vw,36px) 48px; }
.panel { display:none; }
.panel.on { display:block; }
.split { display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:14px; align-items:start; }

.card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r); padding:20px 22px 24px; }
.sub { color:var(--muted); font-size:13px; margin-bottom:14px; }

.form { display:flex; flex-direction:column; gap:12px; }
.row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
label {
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); display:flex; flex-direction:column; gap:6px;
}
input,select,textarea {
  background:var(--bg3); border:1px solid var(--muted2); border-radius:6px; color:var(--white);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:14px; letter-spacing:0; text-transform:none; padding:11px 12px; width:100%;
}
input[readonly] { color:var(--muted); }
input:focus,select:focus,textarea:focus {
  outline:none; border-color:var(--neon); box-shadow:0 0 0 3px rgba(0,240,255,.12);
}
textarea { resize:vertical; }

.btn {
  background:none; border:1px solid var(--muted2); color:var(--muted); font:inherit;
  font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  padding:12px 22px; border-radius:6px; cursor:pointer; align-self:flex-start;
  transition:all .18s; text-decoration:none; display:inline-flex; align-items:center; gap:8px;
}
.btn:hover { border-color:var(--white); color:var(--white); }
.btn:focus-visible { outline:2px solid var(--neon); outline-offset:2px; }
.btn.primary {
  background:var(--neon); border-color:var(--neon); color:#000; font-weight:900;
  box-shadow:0 0 20px rgba(0,240,255,.25);
}
.btn.primary:hover { background:#fff; border-color:#fff; color:#000; }
.btn.danger { background:none; border-color:var(--neon2); color:var(--neon2); }
.btn.danger:hover { background:var(--neon2); color:#000; }
.btn.mini { padding:6px 12px; font-size:10px; letter-spacing:.1em; }

/* progreso — con el aire de terminal de la calculadora de la landing */
.progreso { margin-bottom:22px; }
.barra { height:8px; background:var(--muted2); border-radius:99px; overflow:hidden; }
.barra i { display:block; height:100%; background:var(--neon); box-shadow:0 0 14px rgba(0,240,255,.6); }
.cifras { display:flex; gap:32px; flex-wrap:wrap; margin-bottom:12px; align-items:baseline; }
.cifra b { font-size:38px; font-weight:900; letter-spacing:-.04em; color:var(--neon); line-height:1; }
.cifra span {
  font-family:var(--mono); color:var(--muted); font-size:10px;
  text-transform:uppercase; letter-spacing:.16em; display:block; margin-top:6px;
}

/* listas */
.lista { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.item {
  background:var(--bg3); border:1px solid var(--border); border-left:2px solid var(--muted2);
  border-radius:6px; padding:12px 14px; display:flex; flex-direction:column; gap:5px;
}
.item.ok { border-left-color:var(--neon); }
.item.no { border-left-color:var(--neon2); }
.item .t { font-weight:700; font-size:14px; display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
.item .d { color:var(--muted); font-size:12px; font-family:var(--mono); }
.vacio { color:var(--muted); font-size:13px; padding:10px 0; font-family:var(--mono); }

.pill {
  font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; padding:3px 8px; border-radius:4px; white-space:nowrap;
}
.pill.ok { background:var(--ok-bg); color:var(--neon); }
.pill.no { background:var(--bad-bg); color:var(--neon2); }
.pill.n  { background:var(--muted2); color:var(--muted); }

.aviso { background:var(--bad-bg); border:1px solid rgba(255,46,151,.3); color:var(--neon3); border-radius:6px; padding:12px 14px; font-size:13px; margin-bottom:8px; }
.bien  { background:var(--ok-bg); border:1px solid rgba(0,240,255,.25); color:var(--neon); border-radius:6px; padding:12px 14px; font-size:13px; margin-bottom:8px; }

.pack { border-top:1px solid var(--border); padding-top:18px; display:flex; flex-direction:column; gap:12px; }
.fine { color:var(--muted); font-size:11px; font-family:var(--mono); line-height:1.6; }

.evidencia {
  font-family:var(--mono); font-size:11px; color:var(--muted); background:var(--bg3);
  border:1px solid var(--border); border-radius:6px; padding:12px 14px; margin-top:12px;
  overflow-x:auto; white-space:pre-wrap; word-break:break-word;
}

footer {
  border-top:1px solid var(--border); padding:20px clamp(16px,4vw,36px) 40px;
  color:var(--muted); font-size:11px; font-family:var(--mono); line-height:1.7; max-width:90ch;
}

/* mapa */
.mapa-cab { display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:flex-end; margin-bottom:14px; }
.mapa-filtros { display:flex; gap:18px; flex-wrap:wrap; }
.chk {
  flex-direction:row; align-items:center; gap:8px; font-size:11px; color:var(--white);
  cursor:pointer; font-family:var(--mono); letter-spacing:.08em; text-transform:uppercase;
}
.chk input { width:auto; accent-color:var(--neon); }
/* Mapa y ficha, lado a lado: la información se lee sin tener que pinchar un punto. */
.mapa-split { display:grid; grid-template-columns:1fr minmax(300px,380px); gap:14px; align-items:stretch; }
@media (max-width:900px) { .mapa-split { grid-template-columns:1fr; } }
#mapa { height:min(70vh,640px); border-radius:var(--r); border:1px solid var(--border); background:var(--bg3); }

.mapa-lista {
  display:flex; flex-direction:column; height:min(70vh,640px);
  border:1px solid var(--border); border-radius:var(--r); background:var(--bg3); overflow:hidden;
}
.lista-cab { padding:12px 14px; border-bottom:1px solid var(--border); display:flex; flex-direction:column; gap:9px; }
.lista-cab span {
  font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--neon);
}
.lista-cab input { font-size:13px; padding:8px 10px; }
#lista-mapa { overflow-y:auto; padding:10px; display:flex; flex-direction:column; gap:8px; }
#lista-mapa::-webkit-scrollbar { width:8px; }
#lista-mapa::-webkit-scrollbar-thumb { background:var(--muted2); border-radius:99px; }

.emp {
  background:var(--bg2); border:1px solid var(--border); border-left:2px solid var(--muted2);
  border-radius:6px; padding:11px 13px; cursor:pointer; transition:border-color .15s;
}
.emp:hover { border-color:var(--muted); }
.emp.ver  { border-left-color:var(--neon2); }
.emp.pend { border-left-style:dashed; border-left-color:var(--muted); }
.emp.cert { border-left-color:var(--neon); }
.emp.den  { border-left-color:var(--neon2); }
.emp-n { font-weight:700; font-size:13px; line-height:1.35; margin-bottom:5px; }
.emp-d { font-family:var(--mono); font-size:10.5px; color:var(--muted); line-height:1.65; }
.emp-d b { color:var(--white); font-weight:700; }
.emp-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.grupo-cab {
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); padding:10px 3px 3px; border-top:1px solid var(--border); margin-top:6px;
}
.grupo-cab:first-child { border-top:0; margin-top:0; padding-top:2px; }
/* Invertir + rotar el tono convierte las teselas claras de OSM en un mapa oscuro
   sin cambiar de proveedor. Solo la capa de teselas: los marcadores van aparte. */
.teselas-oscuras { filter:invert(1) hue-rotate(180deg) brightness(.75) contrast(1.05) saturate(.5); }
.leyenda { display:flex; gap:20px; flex-wrap:wrap; margin-top:14px; font-size:11px; color:var(--muted); font-family:var(--mono); letter-spacing:.06em; }
.leyenda span { display:flex; align-items:center; gap:7px; }
.pin { width:10px; height:10px; border-radius:50%; display:inline-block; }
.pin.ver { background:var(--neon2); box-shadow:0 0 9px rgba(255,46,151,.8); }
.pin.pend { background:transparent; border:2px dashed var(--muted); width:11px; height:11px; }
.pin.cert { background:var(--neon); box-shadow:0 0 8px rgba(0,240,255,.7); }
.pin.ok { background:var(--white); }
.pin.no { background:#444; }
.pin.den { background:var(--neon2); box-shadow:0 0 8px rgba(255,46,151,.7); }

.leaflet-popup-content-wrapper, .leaflet-popup-tip { background:var(--bg2); color:var(--white); border:1px solid var(--border); }
.leaflet-popup-content-wrapper { border-radius:var(--r); }
.leaflet-popup-content { margin:14px 16px; font-size:13px; line-height:1.55; }
.leaflet-popup-content b { font-size:14px; font-weight:900; }
.leaflet-popup-content .d { font-family:var(--mono); font-size:11px; color:var(--muted); }
.leaflet-container { font-family:inherit; background:var(--bg3); }
.leaflet-container a.leaflet-popup-close-button { color:var(--muted); }
/* La forma y el tamaño los pone MarkerCluster.Default.css; aquí solo el color,
   porque el suyo por defecto es verde lima y se sale de la paleta. */
.marker-cluster { background:rgba(0,240,255,.15) !important; }
.marker-cluster div {
  background:rgba(0,240,255,.35) !important; color:#001a1d !important;
  font-weight:900; font-family:var(--mono); box-shadow:0 0 14px rgba(0,240,255,.35);
}

.toast {
  position:fixed; left:50%; bottom:24px; transform:translate(-50%,3rem); opacity:0; pointer-events:none;
  background:var(--neon); color:#000; font-weight:900; font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; padding:12px 20px; border-radius:6px;
  box-shadow:0 0 30px rgba(0,240,255,.4);
  transition:transform .2s ease,opacity .2s ease; z-index:9; max-width:90vw;
}
.toast.on { transform:translate(-50%,0); opacity:1; }
.toast.err { background:var(--neon2); color:#fff; box-shadow:0 0 30px rgba(255,46,151,.4); }
@media (prefers-reduced-motion:reduce) { .toast { transition:none; } }
@media (max-width:520px) { .row { grid-template-columns:1fr; } }