:root{
  --bg:#f7f7f9; --card:#ffffff; --line:#e6e7eb; --fg:#0f172a; --muted:#6b7280;
  --women:#7c3aed; --men:#2563eb; --closed:#ef4444;
  --ok:#16a34a; --warn:#d97706; --bad:#dc2626;
  --radius:16px; --shadow:0 6px 24px rgba(0,0,0,.08);
}
html[data-theme="dark"]{
  --bg:#0b0d12; --card:#11141a; --line:#1f2937; --fg:#e5e7eb; --muted:#9ca3af;
  --women:#a78bfa; --men:#60a5fa; --closed:#f87171;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; background:var(--bg); color:var(--fg)}

/* Splash */
.splash{
  position:fixed; inset:0; display:grid; place-items:center;
  background:var(--bg); z-index:1000;
  transition: opacity .9s ease, visibility .9s ease;
}
.splash .logo{
  font-weight:800; letter-spacing:.28em; text-transform:uppercase;
  font-size:clamp(36px, 12vw, 100px); color:var(--fg);
  text-shadow:0 1px 0 rgba(0,0,0,.04), 0 12px 40px rgba(0,0,0,.08);
  opacity:.96;
}
.splash.hide{ opacity:0; visibility:hidden; pointer-events:none; }
@media (prefers-reduced-motion: reduce){
  .splash{ transition:none }
  .splash.hide{ opacity:0; visibility:hidden }
}

/* Mapa full */
#map{position:fixed; inset:0}

/* Barra superior */
.ui{
  position:fixed; top:calc(16px + env(safe-area-inset-top, 0px)); left:16px; right:16px;
  display:flex; gap:12px; align-items:center; z-index:500; flex-wrap:nowrap;
}
.brand{
  display:flex; align-items:center; gap:10px; background:var(--card);
  border:1px solid var(--line); border-radius:999px; padding:8px 12px;
  box-shadow:var(--shadow);
}
.brand .dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(90deg,var(--women),var(--men))}
.brand h1{font-size:14px; font-weight:600; letter-spacing:.2px; margin:0}
.spacer{flex:1}
.btn{
  background:var(--card); border:1px solid var(--line); border-radius:999px;
  padding:10px 14px; font-size:13px; color:var(--fg); cursor:pointer;
  box-shadow:var(--shadow); min-height:44px;
}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{
  background:var(--card); border:1px solid var(--line); border-radius:999px;
  padding:6px 10px; font-size:12px; color:var(--muted); box-shadow:var(--shadow)
}
.chip.ok{color:var(--ok)} .chip.warn{color:var(--warn)} .chip.bad{color:var(--bad)}

/* Panel de conteo (desktop/tablet): 2x2 con etiquetas */
.breakdown{
  position:fixed; left:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  display:grid; grid-template-columns: 1fr 1fr; gap:8px;
  background:transparent; z-index:510;
}
.box{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px;
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:10px 12px; box-shadow:var(--shadow); min-width:220px; position:relative;
}
.box .label{ font-size:12px; color:var(--muted) }
.box .count{ font-weight:700; font-variant-numeric:tabular-nums }
.dot{ width:12px; height:12px; border-radius:50% }
.dot.m{ background:var(--men) } .dot.w{ background:var(--women) }
.dot.closed{ filter:grayscale(.25) opacity(.9); box-shadow:inset 0 0 0 1px rgba(255,255,255,.5) }

/* Popups */
.leaflet-popup-content-wrapper{
  border-radius:12px; background:var(--card); color:var(--fg);
  box-shadow:var(--shadow); border:1px solid var(--line);
}
.leaflet-popup-tip{ background:var(--card); border:1px solid var(--line) }
.leaflet-popup-content{ margin:10px 12px; font-size:13px }
.leaflet-container a{ color:inherit }

/* Marcadores */
.marker-wrap{ transform:translate3d(0,0,0) }
.marker{ width:22px;height:22px; display:block }

/* Accesibilidad */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0
}

/* ====== MÓVIL: mini 2×2 en esquina ====== */
@media (max-width: 680px){
  .breakdown{
    left:16px;
    bottom:calc(16px + env(safe-area-inset-bottom, 0px));
    transform:none;
    grid-template-columns: repeat(2, 44px);
    grid-auto-rows: 44px;
    gap:6px;
  }
  .box{
    min-width:0; width:44px; height:44px; padding:0; border-radius:10px;
    grid-template-columns: 1fr; place-items:center;
  }
  .box .label{ display:none }
  .box .count{ font-size:14px; line-height:1 }
  .box .dot{ position:absolute; top:6px; left:6px; width:8px; height:8px }
  .box::after{ content: attr(data-kind); position:absolute; bottom:6px; left:6px; font-size:10px; color:var(--muted); font-weight:600; }
  .box::before{ content: attr(data-state); position:absolute; top:6px; right:6px; font-size:10px; color:var(--muted); font-weight:600; }

  .leaflet-control-zoom{ margin-right: 8px; margin-bottom: 8px; }

  .ui{
    left:calc(12px + env(safe-area-inset-left, 0px));
    right:calc(12px + env(safe-area-inset-right, 0px));
    gap:8px; flex-wrap:wrap;
  }
  .brand h1{ font-size:13px }
  .btn{ padding:8px 10px; font-size:12px }
  .chip{ font-size:11px; padding:6px 8px }
}

/* ====== MÓVIL MUY PEQUEÑO ====== */
@media (max-width: 380px){
  .box{ width:40px; height:40px }
  .box .count{ font-size:13px }
  .box .dot{ width:7px; height:7px }
  .box::after, .box::before{ font-size:9.5px }
}