/* MetaMapa HUD — styles.css (map-first, estilo Uber/Cabify) */
:root{
  --bg: #f3f4f6; /* gris claro */
  --glass: rgba(255,255,255,.92);
  --glass-2: rgba(255,255,255,.98);
  --border: #d1d5db;
  --text: #111827;
  --muted: #6b7280;
  --primary: #0891b2; /* cyan oscuro */
  --success: #16a34a;
  --info: #0ea5e9;
  --warning: #8b5cf6;
  --danger: #ef4444;
  --radius: 16px;
  --shadow: 0 10px 22px rgba(0,0,0,.18);
}

/* Map full-screen */
html,body,#map{ height:100%; }
body{ margin:0; font: 16px/1.45 system-ui, -apple-system, Segoe UI, Inter, Roboto, Arial, sans-serif; color:var(--text); background: var(--bg); }
#map{position:fixed; inset:0; width:100%; height:100%;}
#map .leaflet-control-attribution{ background: var(--glass-2); color: var(--muted); }

/* Appbar */
.appbar{
  position: fixed; top:14px; left:24px; transform:none;
  display:inline-flex; align-items:center; z-index: 1000;
  background: transparent; border:none; border-radius: 0; padding:0;
  backdrop-filter: none;
  box-shadow: none;
}
.logo-fab{ position:fixed; top:16px; left:16px; z-index:1000; display:grid; place-items:center; width:44px; height:44px; border-radius:12px; border:1px solid var(--border); background: var(--glass-2); color:var(--text); box-shadow: var(--shadow); }
.logo-fab svg{ width:22px; height:22px; }
.brand{ display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-weight:700; padding:6px 10px; border-radius: 999px; }
.brand svg{ width:22px; height:22px; }
.omnibox{ position:relative; width: min(46vw, 520px, calc(100vw - 240px)); }
.omnibox input{ box-shadow: 0 8px 20px rgba(0,0,0,.16);
  width:100%; padding:10px 14px; border-radius: 18px; border:1px solid var(--border);
  background: #ffffff; color:var(--text); outline:none;
}
.suggestions{
  position:absolute; top: 44px; left:0; right:0; display:none; max-height: 320px; overflow:auto;
  background: var(--glass-2); border:1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow);
}
.suggestions.show{ display:block; }
.suggestions div{ padding:10px 12px; cursor:pointer; }
.suggestions div:hover, .suggestions div:focus{ background:#eef2f7; }

.actions{ display:flex; align-items:center; gap:8px; }
.actions .btn{ white-space:nowrap; }
.icon{ width:36px; height:36px; border-radius:12px; border:1px solid var(--border); background:#ffffff; color:var(--text); cursor:pointer; display:grid; place-items:center; }
.account-fab{ position: fixed; top:16px; right:16px; z-index:1000; height:48px; display:flex; align-items:center; gap:10px; border-radius:22px; border:1px solid var(--border); background: var(--primary); color:#ffffff; box-shadow: var(--shadow); padding:0 16px; font-weight:700; }
.account-fab.img-only{ padding:6px 8px; height:48px; }
.account-fab img{ width:32px; height:32px; display:block; }
.btn{ appearance:none; border:none; border-radius: 999px; padding:10px 12px; cursor:pointer; color:var(--text); background:#ffffff; border:1px solid var(--border); }
.btn.primary{ background: var(--primary); color: #ffffff; }
.btn.ghost{ background: transparent; }
/* helper for actions ghost button contrast */
.btn.ghost{ border:1px solid var(--border); color:var(--text); }

.chip-group{ display:flex; gap:6px; }
.chip{ padding:8px 10px; border-radius: 999px; border:1px solid var(--border); background:#ffffff; color:var(--muted); cursor:pointer; }
.chip.active{ background:var(--primary); color:#ffffff; border-color:var(--primary); }

.select-collection select{ background:#ffffff; color:var(--text); border:1px solid var(--border); border-radius: 999px; padding:8px 12px; }

/* Drawer filtros */
.field{ margin:12px 0; }
.field label{ display:block; margin-bottom:6px; color:var(--muted); }
.row{ display:flex; gap:8px; align-items:center; }
.row.between{ justify-content: space-between; }
.hint{ color:var(--muted); font-size:12px; }

.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chips .chip{ border-radius: 999px; padding:6px 10px; }
.checks label{ display:block; margin:6px 0; }

/* Shortcut bar */
.shortcut-bar{ position: fixed; top:64px; left:12px; right:12px; display:flex; gap:8px; z-index:1000; flex-wrap:wrap; }
.shortcut-bar .chip{ background: #ffffff; border:1px solid var(--border); border-radius: 18px; padding:6px 10px; color:var(--muted); }
.shortcut-bar .chip.active{ background: var(--primary); color:#ffffff; }

/* FABs */
.fab{ width:44px; height:44px; display:grid; place-items:center; border-radius: 50%; background: var(--glass); border:1px solid var(--border); color:var(--text); cursor:pointer; backdrop-filter: blur(10px); }
.fab-lg{ width:56px; height:56px; font-size:20px; }
.fab-bottom{ position: fixed; right:16px; bottom:16px; z-index: 1200; }
.controls-right{ position:fixed; right:16px; bottom:16px; display:grid; gap:8px; z-index:1200; }
.controls-left{ position:fixed; left:16px; bottom:64px; display:grid; gap:8px; z-index:1200; }
.ctrl{ width:44px; height:44px; display:grid; place-items:center; border-radius:12px; background:#ffffff; border:1px solid var(--border); color:var(--text); box-shadow: var(--shadow); }
.ctrl img{ width:34px; height:34px; filter:none; opacity:1; }
.ctrl-lg{ width:56px; height:56px; }
.watermark{ position:fixed; left:12px; bottom:12px; color:#9ca3af; opacity:.6; font-weight:800; letter-spacing:.4px; user-select:none; }

/* Popover base */
.popover{
  position: fixed; right: 72px; top: 96px; z-index: 1300; display:none;
  background: var(--glass); border:1px solid var(--border); border-radius: 12px; padding:10px; box-shadow: var(--shadow);
}
.popover.center{ left:50%; top:50%; right:auto; transform: translate(-50%,-50%); }
.popover.show{ display:block; }
.popover ul{ list-style:none; padding:0; margin:8px 0 0; }
.popover li{ display:flex; align-items:center; gap:8px; padding:4px 0; color:var(--muted); }
.popover .sep{ border-top:1px solid var(--border); margin:6px 0; }

/* Collections pop */
#collections-pop ul li{ margin:4px 0; }
#collections-pop ul li button{ width:100%; text-align:left; }
#collections-pop ul li button.active{ background:var(--primary); color:#fff; border-color:var(--primary); }

.dot{ width:12px; height:12px; border-radius:50%; display:inline-block; }
.cat-Seguridad{ background:#ef4444; }
.cat-Tránsito{ background:#f59e0b; }
.cat-Ambiente{ background:#22c55e; }
.cat-Eventos{ background:#60a5fa; }

.ring{ width:12px; height:12px; display:inline-block; border-radius:50%; border:3px solid #2e374b; background:transparent; }
.r-neutral{ border-color:#374151; }
.r-info{ border-color:#60a5fa; }
.r-success{ border-color:#22c55e; }
.r-warning{ border-color:#a78bfa; }

/* Bottom Sheet */
.sheet{ display:none; }
.sheet[aria-hidden="false"]{ display:block; }
/* Panel lateral para detalle */
.sheet.side{
  position: fixed; top:0; right:0; bottom:0; left:auto; width: min(520px, 94vw);
  transform: translateX(100%);
  background: var(--glass-2); border-left:1px solid var(--border); border-radius: 16px 0 0 16px;
  backdrop-filter: blur(12px); box-shadow: var(--shadow); z-index: 950; transition: transform .28s ease;
}
.sheet.side.open{ transform: translateX(0); }
.sheet.side .handle{ display:none; }
.sheet-content{ padding: 12px; max-height: 100vh; overflow:auto; }
@media (max-width: 700px){
  .sheet.side{ left:0; width:100%; border-radius:0; }
}
.card{ background:#ffffff; border:1px solid var(--border); border-radius: 12px; padding:10px; margin:8px 0; }
.meta{ color:var(--muted); font-size:13px; }
.badge{ padding:2px 8px; border-radius:999px; font-size:12px; font-weight:700; display:inline-block; }
.badge.neutral{ background:#e5e7eb; color:#374151; }
.badge.info{ background:#06b6d4; color:#e0f2fe; }
.badge.success{ background:#16a34a; color:#dcfce7; }
.badge.warning{ background:#8b5cf6; color:#ede9fe; }

/* Modales */
.modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background: rgba(0,0,0,.35); z-index: 1400; padding:16px; }
.modal[aria-hidden="false"]{ display:flex; }
.modal-card{ width:min(380px, 92vw); background: var(--glass-2); border:1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); margin: 0 auto; overflow:hidden; box-sizing:border-box; }
@media (max-width: 600px){ .modal-card{ width: 92vw; } }
.modal-header, .modal-footer{ padding:10px 12px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.modal-footer{ border-bottom:none; border-top:1px solid var(--border); }
.modal-body{ padding:14px 16px; display:grid; gap:10px; }
.progress{ width:100%; height:6px; background:#e5e7eb; border-radius:999px; overflow:hidden; }
.progress #cp-bar{ width:33%; height:100%; background: var(--primary); transition: width .25s ease; }
.modal-body label{ display:block; margin:6px 0; color:var(--muted); font-size:14px; }
.modal-body input, .modal-body select, .modal-body textarea{ width:100%; max-width:100%; padding:12px 14px; border-radius:14px; border:1px solid var(--border); background:#ffffff; color:var(--text); outline:none; box-sizing:border-box; }
.modal-body input:focus, .modal-body select:focus, .modal-body textarea:focus{ border-color:#06b6d4; box-shadow: 0 0 0 3px rgba(6,182,212,.2); }
@media (max-width: 700px){ .modal-card{ width:100%; height:100%; border-radius:0; } }
.modal-body label{ display:block; margin:8px 0; color:var(--muted); font-size:14px; }
.modal-body input, .modal-body select, .modal-body textarea{
  width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--border);
  background:#ffffff; color:var(--text); outline:none;
}
.modal-body input:focus, .modal-body select:focus, .modal-body textarea:focus{
  border-color:#06b6d4; box-shadow: 0 0 0 3px rgba(6,182,212,.18);
}
.icon{ width:36px; height:36px; border-radius:12px; border:1px solid var(--border); background:#ffffff; color:var(--text); cursor:pointer; display:grid; place-items:center; }

/* Landing styles */
.landing-card{ position:relative; width:min(540px, 94vw); padding-bottom:16px; }
.landing-hero{ height:160px; background: radial-gradient(120px 120px at -20px -20px, rgba(34,211,238,.35), transparent 70%), radial-gradient(160px 160px at 120px -40px, rgba(34,211,238,.25), transparent 70%), #f8fafc; }
.landing-content{ padding:16px; text-align:center; }
.landing-illustration{ width:min(340px, 80%); display:block; margin: 0 auto 8px; }
.landing-title{ margin:14px 0 8px; font-size:28px; letter-spacing:.3px; }
.landing-copy{ color:var(--muted); margin:0 0 12px; }
.btn-xl{ padding:14px 16px; font-size:18px; }
.btn-block{ width:100%; }
.landing-go{ margin-top: 32px; }
.landing-links{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:36px; }

.steps{ display:flex; gap:8px; list-style:none; padding:0; margin:0 0 8px; }
.steps li{ padding:6px 10px; border-radius:999px; background:#ffffff; border:1px solid var(--border); color:var(--muted); position:relative; overflow:hidden; }
.steps li.active{ background:#e5f6fa; color:#0c4a6e; border-color:#06b6d4; }
.steps li::after{ content:''; position:absolute; left:0; bottom:0; height:3px; width:0; background: var(--primary); transition: width .25s ease; }
.steps li.active::after{ width:100%; }

/* Toasts */
.toasts{ position:fixed; right:16px; bottom:16px; display:grid; gap:10px; z-index: 1600; }
.toast{ background:#ffffff; border:1px solid var(--border); color:var(--text); padding:10px 12px; border-radius:12px; box-shadow: var(--shadow); }

/* Marker divIcons (pin con anillo de consenso) */
.pin{ width:18px; height:18px; border-radius:50%; position:relative; box-shadow: 0 0 0 3px var(--ring, #374151); }
.pin::after{ content:''; position:absolute; inset:2px; border-radius:50%; background: var(--fill, #5b8cff); }
.ring-neutral{ --ring:#374151; }
.ring-info{ --ring:#60a5fa; }
.ring-success{ --ring:#22c55e; }
.ring-warning{ --ring:#a78bfa; }
.cat-Seguridad.pin::after{ --fill:#ef4444; }
.cat-Tránsito.pin::after{ --fill:#f59e0b; }
.cat-Ambiente.pin::after{ --fill:#22c55e; }
.cat-Eventos.pin::after{ --fill:#60a5fa; }

/* Responsive tweaks */
@media (max-width: 900px){ .omnibox{ width: min(64vw, calc(100vw - 220px)); } }
@media (max-width: 600px){ .omnibox{ width: min(72vw, calc(100vw - 200px)); } }

/* Mobile layout: acciones bajo la barra y alineadas a la izquierda */
@media (max-width: 700px){
  .appbar{ display:flex; flex-direction: column; align-items:flex-start; gap:8px; top:12px; left:12px; right:12px; }
  .actions{ flex-wrap:wrap; gap:6px; }
  .omnibox{ width: calc(100vw - 140px); }
  .shortcut-bar{ top: 112px; left:12px; right:12px; }
}


/* Focus style for search input */
.omnibox input:focus{ border-color:#06b6d4; box-shadow: 0 6px 18px rgba(0,0,0,.18), 0 0 0 3px rgba(6,182,212,.25); }
/* Utils */
.hidden{ display:none !important; }

/* Forzar ocultamiento de coordenadas en Contribuir hasta que el usuario lo solicite */
#c-coords-row[hidden]{ display:none !important; }

/* Overlay para selección en mapa */
.map-pick-overlay{ position:fixed; inset:0; display:flex; align-items:flex-end; justify-content:center; z-index:1003; pointer-events:none; }
.map-pick-overlay .bar{ pointer-events:auto; margin:16px; padding:12px; background:var(--glass); border:1px solid var(--border); border-radius:16px; backdrop-filter: blur(8px); box-shadow: 0 8px 24px rgba(0,0,0,.25); display:flex; gap:8px; align-items:center; }
.map-pick-overlay .bar .btn{ margin:0; }

/* Modo selección: el modal no bloquea clicks ni oscurece */
.modal.pick-mode{ background: transparent !important; pointer-events: none !important; }
.modal.pick-mode .modal-card{ display:none !important; }