/* =============================================================
   EV Charging Map v2.2 — map.css
   iPhone Safari fixes · dvh · safe-area · touch · responsive
   ============================================================= */

/* ── CSS Variables ── */
:root {
  --ev-bg:         #111214;
  --ev-surface:    #1a1b1e;
  --ev-surface2:   #222429;
  --ev-surface3:   #2a2d33;
  --ev-border:     #2e3138;
  --ev-border2:    #383d47;
  --ev-text:       #f0f1f3;
  --ev-text2:      #9aa0ad;
  --ev-text3:      #5a6070;
  --ev-green:      #3dba6f;
  --ev-green-dim:  rgba(61,186,111,.15);
  --ev-orange:     #f5813f;
  --ev-orange-dim: rgba(245,129,63,.15);
  --ev-blue:       #4499f5;
  --ev-blue-dim:   rgba(68,153,245,.15);
  --ev-purple:     #9b6cf5;
  --ev-yellow:     #f5c842;
  --ev-red:        #f55050;
  --ev-red-dim:    rgba(245,80,80,.15);
  --ev-shadow:     0 4px 24px rgba(0,0,0,.55);
  --ev-shadow-sm:  0 2px 8px rgba(0,0,0,.4);
  --ev-radius:     10px;
  --ev-radius-sm:  6px;
  --ev-sidebar-w:  310px;
  --ev-detail-w:   300px;
  --ev-transition: .18s ease;

  /* Safe area insets para iPhone con notch/Dynamic Island */
  --safe-top:    env(safe-area-inset-top,    0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left,   0px);
  --safe-right:  env(safe-area-inset-right,  0px);
}

/* ══════════════════════════════════════
   ROOT CONTAINER
   iPhone Safari: usar -webkit-fill-available
   como fallback de 100dvh
══════════════════════════════════════ */
#ev-map-root {
  display: flex;
  width: 100%;

  /* Stack de fallbacks para altura correcta en iPhone */
  height: 100vh;                    /* fallback 1 */
  height: -webkit-fill-available;   /* Safari iOS: altura sin barra del browser */
  height: 100dvh;                   /* moderno: dynamic viewport height */
  min-height: 480px;

  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
  font-size: 13px;
  background: var(--ev-bg);
  position: relative;
  overflow: hidden;
  border-radius: 0;
  -webkit-font-smoothing: antialiased;
  /* Evitar scroll en iOS cuando el mapa está en uso */
  touch-action: none;
}

/* Desktop heights */
@media (min-width: 768px) {
  #ev-map-root {
    height: 88vh;
    height: 88dvh;
    min-height: 560px;
    touch-action: auto;
  }
}
@media (min-width: 1024px) {
  #ev-map-root {
    height: 92vh;
    height: 92dvh;
    min-height: 650px;
  }
}
@media (min-width: 1280px) {
  #ev-map-root { height: 93vh; height: 93dvh; min-height: 700px; }
}
@media (min-width: 1440px) {
  #ev-map-root {
    height: 94vh; height: 94dvh; min-height: 800px;
    --ev-sidebar-w: 340px;
    --ev-detail-w:  320px;
  }
}
@media (min-width: 1920px) {
  #ev-map-root {
    height: 95vh; height: 95dvh; min-height: 900px;
    --ev-sidebar-w: 370px;
    --ev-detail-w:  340px;
    font-size: 14px;
  }
}

/* ══════════════════════════════════════
   SIDEBAR (desktop)
══════════════════════════════════════ */
#ev-sidebar {
  width: var(--ev-sidebar-w);
  flex-shrink: 0;
  background: var(--ev-surface);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--ev-border);
  overflow: hidden;
  transition: width var(--ev-transition);
  z-index: 20;
}
#ev-sidebar.collapsed { width: 0; }

.ev-sb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--ev-border);
  flex-shrink: 0;
  gap: 10px;
}
.ev-sb-header h3 {
  color: var(--ev-text);
  font-size: 14px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -.2px;
}
.ev-count-pill {
  background: var(--ev-green);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 20px;
  white-space: nowrap;
}

.ev-sb-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--ev-border);
  flex-shrink: 0;
}
.ev-search-icon { color: var(--ev-text3); font-size: 14px; flex-shrink: 0; }
#ev-search {
  flex: 1;
  background: var(--ev-surface2);
  border: 1px solid var(--ev-border);
  border-radius: var(--ev-radius-sm);
  padding: 7px 10px;
  color: var(--ev-text);
  font-size: 16px;        /* ≥16px evita zoom automático en iOS Safari */
  outline: none;
  transition: border-color var(--ev-transition);
  min-width: 0;
  -webkit-appearance: none;  /* quitar estilo iOS en inputs */
  appearance: none;
}
#ev-search:focus { border-color: var(--ev-green); }
#ev-search::placeholder { color: var(--ev-text3); }

/* ── Filtros ── */
.ev-filters {
  padding: 12px 12px 8px;
  border-bottom: 1px solid var(--ev-border);
  flex-shrink: 0;
}
.ev-filter-label {
  color: var(--ev-text3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 7px;
  display: block;
}

/* Chips con scroll horizontal en móvil */
.ev-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.ev-chip {
  background: transparent;
  border: 1px solid var(--ev-border2);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ev-text2);
  cursor: pointer;
  transition: all var(--ev-transition);
  white-space: nowrap;
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.ev-chip:active,
.ev-chip:hover  { border-color: var(--ev-green); color: var(--ev-green); }
.ev-chip.active {
  border-color: var(--ev-green);
  color: var(--ev-green);
  background: var(--ev-green-dim);
  font-weight: 600;
}

/* Toggles */
.ev-toggles { margin-top: 10px; }
.ev-tog-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  min-height: 36px; /* área táctil mínima recomendada iOS */
}
.ev-tog-label { color: var(--ev-text2); font-size: 13px; }
.ev-toggle {
  width: 44px; height: 24px;  /* más grande para touch en iOS */
  border-radius: 12px;
  background: var(--ev-surface3);
  border: 1px solid var(--ev-border2);
  position: relative;
  cursor: pointer;
  transition: background var(--ev-transition), border-color var(--ev-transition);
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.ev-toggle.on { background: var(--ev-green); border-color: var(--ev-green); }
.ev-toggle::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: left var(--ev-transition);
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.ev-toggle.on::after { left: 22px; }

/* ── Lista de estaciones ── */
#ev-station-list {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; /* scroll fluido en iOS */
}
#ev-station-list::-webkit-scrollbar { width: 3px; }
#ev-station-list::-webkit-scrollbar-thumb { background: var(--ev-border2); border-radius: 2px; }

.ev-loading-list { text-align: center; padding: 32px 16px; color: var(--ev-text3); }
.ev-spinner {
  width: 26px; height: 26px;
  border: 3px solid var(--ev-border2);
  border-top-color: var(--ev-green);
  border-radius: 50%;
  animation: ev-spin .75s linear infinite;
  margin: 0 auto 10px;
}
@keyframes ev-spin { to { transform: rotate(360deg); } }

.ev-st-item {
  display: flex;
  gap: 11px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--ev-border);
  cursor: pointer;
  transition: background var(--ev-transition);
  position: relative;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  min-height: 44px; /* área táctil mínima Apple HIG */
}
.ev-st-item::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: transparent;
  transition: background var(--ev-transition);
}
.ev-st-item:active,
.ev-st-item:hover   { background: var(--ev-surface2); }
.ev-st-item.selected { background: var(--ev-surface2); }
.ev-st-item.selected::before { background: var(--ev-green); }

.ev-st-pin {
  width: 36px; height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; margin-top: 1px;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.ev-st-info { flex: 1; min-width: 0; }
.ev-st-name {
  color: var(--ev-text);
  font-size: 13px; font-weight: 600;
  margin-bottom: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ev-st-addr {
  color: var(--ev-text3);
  font-size: 11px;
  margin-bottom: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ev-st-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.ev-st-score  { display: flex; align-items: center; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.ev-score-val { color: var(--ev-yellow); font-size: 11px; font-weight: 700; }
.ev-net-label { color: var(--ev-text3); font-size: 10px; }
.ev-covered-ic{ color: var(--ev-text3); font-size: 10px; }

/* Badges */
.ev-badge {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 4px;
  white-space: nowrap;
}
.ev-badge-green  { background: var(--ev-green-dim);          color: var(--ev-green); }
.ev-badge-orange { background: var(--ev-orange-dim);         color: var(--ev-orange); }
.ev-badge-blue   { background: var(--ev-blue-dim);           color: var(--ev-blue); }
.ev-badge-gray   { background: rgba(154,160,173,.12);        color: var(--ev-text2); }
.ev-badge-red    { background: var(--ev-red-dim);            color: var(--ev-red); }

.ev-st-empty { text-align: center; padding: 36px 16px; color: var(--ev-text3); }
.ev-st-empty-icon { font-size: 34px; margin-bottom: 10px; }
.ev-st-empty p { font-size: 13px; line-height: 1.5; }

/* ══════════════════════════════════════
   MAPA
══════════════════════════════════════ */
#ev-map-area { flex: 1; position: relative; min-width: 0; }
#ev-leaflet-map { width: 100%; height: 100%; }

/* Botones flotantes */
.ev-fab {
  background: var(--ev-surface);
  border: 1px solid var(--ev-border2);
  border-radius: var(--ev-radius-sm);
  color: var(--ev-text2);
  width: 40px; height: 40px;  /* más grande para touch */
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 17px;
  transition: all var(--ev-transition);
  box-shadow: var(--ev-shadow-sm);
  user-select: none;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.ev-fab:active,
.ev-fab:hover { border-color: var(--ev-green); color: var(--ev-green); }

.ev-map-controls {
  position: absolute; top: 12px; right: 12px; z-index: 500;
  display: flex; flex-direction: column; gap: 8px;
}
#ev-sidebar-toggle {
  position: absolute; top: 12px; left: 12px; z-index: 500;
}

/* Tipo de mapa */
.ev-map-type {
  position: absolute; bottom: 28px; right: 12px; z-index: 500;
  background: var(--ev-surface);
  border: 1px solid var(--ev-border2);
  border-radius: var(--ev-radius-sm);
  padding: 3px; display: flex; gap: 3px;
  box-shadow: var(--ev-shadow-sm);
}
.ev-mt-btn {
  font-size: 12px; font-weight: 600;
  padding: 6px 12px; border-radius: 4px;
  cursor: pointer; color: var(--ev-text2);
  background: transparent; border: none;
  transition: all var(--ev-transition);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  min-height: 32px;
}
.ev-mt-btn.active { background: var(--ev-green); color: #fff; }

/* Leyenda */
.ev-legend {
  position: absolute; bottom: 28px; left: 12px; z-index: 500;
  background: var(--ev-surface);
  border: 1px solid var(--ev-border2);
  border-radius: var(--ev-radius);
  padding: 12px 14px;
  box-shadow: var(--ev-shadow);
  min-width: 170px;
}
.ev-legend-title { color: var(--ev-text); font-size: 12px; font-weight: 700; margin-bottom: 9px; }
.ev-leg-item {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 6px; color: var(--ev-text2); font-size: 11.5px;
}
.ev-leg-item:last-child { margin-bottom: 0; }
.ev-leg-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; display: inline-block; }

/* Barra de estado */
#ev-status-bar {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  z-index: 400; pointer-events: none;
}
.ev-status-pill {
  background: rgba(26,27,30,.92);
  border: 1px solid var(--ev-border2);
  border-radius: 20px;
  padding: 5px 14px;
  box-shadow: var(--ev-shadow-sm);
  white-space: nowrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); /* Safari */
}
#ev-status-text { color: var(--ev-text2); font-size: 12px; font-weight: 500; }
#ev-status-text b { color: var(--ev-green); }

/* ══════════════════════════════════════
   PANEL DE DETALLE (desktop)
══════════════════════════════════════ */
#ev-detail-panel {
  position: absolute; top: 12px; left: 56px; z-index: 600;
  background: var(--ev-surface);
  border: 1px solid var(--ev-border2);
  border-radius: var(--ev-radius);
  width: var(--ev-detail-w);
  max-height: calc(100% - 60px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: var(--ev-shadow);
  animation: ev-slide-in .2s ease;
}
@keyframes ev-slide-in {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
#ev-detail-panel::-webkit-scrollbar { width: 3px; }
#ev-detail-panel::-webkit-scrollbar-thumb { background: var(--ev-border2); border-radius: 2px; }

.ev-d-head {
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--ev-border);
  display: flex; align-items: flex-start; gap: 10px;
  position: sticky; top: 0;
  background: var(--ev-surface);
  z-index: 2;
}
.ev-d-pin {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(0,0,0,.35);
}
.ev-d-info { flex: 1; min-width: 0; }
.ev-d-name {
  color: var(--ev-text); font-size: 14px; font-weight: 700;
  margin-bottom: 3px; line-height: 1.3;
}
.ev-d-addr { color: var(--ev-text3); font-size: 11px; line-height: 1.4; }
.ev-d-close {
  background: none; border: none; color: var(--ev-text3);
  font-size: 24px; cursor: pointer; line-height: 1;
  padding: 4px; flex-shrink: 0;
  transition: color var(--ev-transition);
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.ev-d-close:hover { color: var(--ev-text); }

.ev-d-score {
  padding: 13px 14px;
  border-bottom: 1px solid var(--ev-border);
  display: flex; align-items: center; gap: 14px;
}
.ev-score-ring {
  width: 54px; height: 54px; border-radius: 50%;
  border: 3px solid var(--ev-green);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ev-score-num  { font-size: 20px; font-weight: 800; line-height: 1; }
.ev-score-lbl  { color: var(--ev-text3); font-size: 8px; text-transform: uppercase; letter-spacing: .6px; margin-top: 1px; }
.ev-d-si h4    { color: var(--ev-text); font-size: 13px; font-weight: 700; margin-bottom: 3px; }
.ev-stars      { color: var(--ev-yellow); font-size: 13px; letter-spacing: 1px; }
.ev-avail-ok   { color: var(--ev-green); font-size: 12px; font-weight: 700; margin-top: 3px; }
.ev-avail-no   { color: var(--ev-red);   font-size: 12px; font-weight: 700; margin-top: 3px; }
.ev-total-txt  { color: var(--ev-text3); font-size: 11px; margin-top: 1px; }

.ev-d-section { padding: 11px 14px; border-bottom: 1px solid var(--ev-border); }
.ev-d-sec-title {
  color: var(--ev-text3); font-size: 10px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; margin-bottom: 9px;
}
.ev-plug-row {
  display: flex; align-items: center; gap: 9px; margin-bottom: 7px;
  background: var(--ev-surface2); border-radius: var(--ev-radius-sm);
  padding: 8px 10px;
}
.ev-plug-row:last-child { margin-bottom: 0; }
.ev-plug-icon  { font-size: 16px; flex-shrink: 0; }
.ev-plug-name  { color: var(--ev-text2); font-size: 12px; font-weight: 600; flex: 1; }
.ev-plug-power { color: var(--ev-green); font-size: 12px; font-weight: 700; }
.ev-plug-ct    { color: var(--ev-text3); font-size: 11px; }

.ev-info-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ev-info-row:last-child { margin-bottom: 0; }
.ev-info-ico { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }
.ev-info-txt { color: var(--ev-text2); font-size: 12px; font-weight: 500; }
.ev-info-sub { color: var(--ev-text3); font-size: 10px; margin-top: 1px; }

.ev-amen-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ev-amen-chip {
  background: var(--ev-surface2);
  border: 1px solid var(--ev-border2);
  border-radius: 5px; padding: 4px 9px;
  font-size: 11px; color: var(--ev-text2);
}

.ev-d-btn {
  display: block; margin: 8px 14px; padding: 12px;
  border-radius: var(--ev-radius-sm);
  font-size: 13px; font-weight: 700;
  cursor: pointer; text-align: center;
  border: none; width: calc(100% - 28px);
  transition: all var(--ev-transition);
  font-family: inherit;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.ev-btn-primary   { background: var(--ev-green); color: #fff; }
.ev-btn-primary:active,
.ev-btn-primary:hover { background: #35a862; }
.ev-btn-secondary { background: var(--ev-surface2); color: var(--ev-text2); border: 1px solid var(--ev-border2); }
.ev-btn-secondary:active,
.ev-btn-secondary:hover { border-color: var(--ev-green); color: var(--ev-green); }
.ev-btn-danger    { background: transparent; color: var(--ev-text3); border: 1px solid var(--ev-border2); }
.ev-btn-danger:active,
.ev-btn-danger:hover { border-color: var(--ev-red); color: var(--ev-red); }

.ev-reviews-wrap { padding: 4px 14px 14px; }
.ev-rev-item { padding: 10px 0; border-bottom: 1px solid var(--ev-border); }
.ev-rev-item:last-child { border-bottom: none; }
.ev-rev-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.ev-rev-av {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; flex-shrink: 0; color: #fff;
}
.ev-rev-name  { color: var(--ev-text2); font-size: 12px; font-weight: 600; flex: 1; }
.ev-rev-date  { color: var(--ev-text3); font-size: 10px; }
.ev-rev-stars { color: var(--ev-yellow); font-size: 11px; margin-bottom: 4px; }
.ev-rev-text  { color: var(--ev-text2); font-size: 11.5px; line-height: 1.55; }

/* ══════════════════════════════════════
   AUTH PANEL
══════════════════════════════════════ */
#ev-auth-panel {
  position: absolute; top: 12px; right: 56px; z-index: 600;
  background: var(--ev-surface);
  border: 1px solid var(--ev-border2);
  border-radius: var(--ev-radius);
  width: 290px;
  box-shadow: var(--ev-shadow);
  animation: ev-slide-in .2s ease;
  overflow: hidden;
}
.ev-auth-tabs { display: flex; border-bottom: 1px solid var(--ev-border); }
.ev-auth-tab {
  flex: 1; padding: 13px; text-align: center;
  color: var(--ev-text3); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all var(--ev-transition);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  min-height: 44px; display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.ev-auth-tab.active { color: var(--ev-green); border-bottom-color: var(--ev-green); }
.ev-auth-body  { padding: 16px 16px 12px; }
.ev-field { margin-bottom: 11px; }
.ev-field label {
  display: block; color: var(--ev-text3);
  font-size: 11px; font-weight: 600; margin-bottom: 5px;
  text-transform: uppercase; letter-spacing: .5px;
}
.ev-field input {
  width: 100%; background: var(--ev-surface2);
  border: 1px solid var(--ev-border2);
  border-radius: var(--ev-radius-sm);
  padding: 11px; color: var(--ev-text);
  font-size: 16px; /* evitar zoom en iOS */
  outline: none;
  transition: border-color var(--ev-transition);
  font-family: inherit;
  -webkit-appearance: none; appearance: none;
}
.ev-field input:focus { border-color: var(--ev-green); }
.ev-field input::placeholder { color: var(--ev-text3); }
.ev-auth-btn {
  width: 100%; background: var(--ev-green); color: #fff;
  border: none; border-radius: var(--ev-radius-sm);
  padding: 13px; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: background var(--ev-transition);
  font-family: inherit; margin-top: 4px;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.ev-auth-btn:active { background: #35a862; }
.ev-auth-msg { font-size: 12px; padding: 8px 10px; border-radius: 5px; margin-top: 10px; display: none; }
.ev-auth-msg.ok  { background: var(--ev-green-dim); color: var(--ev-green); display: block; }
.ev-auth-msg.err { background: var(--ev-red-dim);   color: var(--ev-red);   display: block; }
.ev-user-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; background: var(--ev-surface2);
}
.ev-user-av {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #fff; flex-shrink: 0;
  background: var(--ev-green);
}
.ev-user-name  { color: var(--ev-text); font-size: 13px; font-weight: 600; flex: 1; }
.ev-user-stats { display: flex; gap: 12px; padding: 12px 16px 14px; }
.ev-u-stat     { text-align: center; flex: 1; }
.ev-u-stat-num { color: var(--ev-green); font-size: 18px; font-weight: 800; }
.ev-u-stat-lbl { color: var(--ev-text3); font-size: 10px; text-transform: uppercase; letter-spacing: .5px; margin-top: 1px; }
.ev-logout-btn {
  display: block; margin: 0 16px 14px; padding: 11px; text-align: center;
  color: var(--ev-text3); font-size: 12px; cursor: pointer;
  background: var(--ev-surface2); border: 1px solid var(--ev-border2);
  border-radius: var(--ev-radius-sm); transition: all var(--ev-transition);
  min-height: 44px; display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.ev-logout-btn:active { border-color: var(--ev-red); color: var(--ev-red); }

/* ══════════════════════════════════════
   MODAL
══════════════════════════════════════ */
#ev-modal-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.7);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index: 800;
  display: flex; align-items: center; justify-content: center;
}
#ev-modal {
  background: var(--ev-surface);
  border: 1px solid var(--ev-border2);
  border-radius: var(--ev-radius);
  width: 380px; max-width: 92%;
  padding: 22px 20px 18px;
  position: relative;
  box-shadow: var(--ev-shadow);
  max-height: 90%; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#ev-modal-close {
  position: absolute; top: 10px; right: 10px;
  background: none; border: none; color: var(--ev-text3);
  font-size: 24px; cursor: pointer; line-height: 1;
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.ev-modal-title { color: var(--ev-text); font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.ev-modal-sub   { color: var(--ev-text3); font-size: 12px; margin-bottom: 16px; line-height: 1.4; }
.ev-modal-field { margin-bottom: 13px; }
.ev-modal-field label {
  display: block; color: var(--ev-text3); font-size: 11px; font-weight: 700;
  margin-bottom: 5px; text-transform: uppercase; letter-spacing: .5px;
}
.ev-modal-field input,
.ev-modal-field select,
.ev-modal-field textarea {
  width: 100%; background: var(--ev-surface2);
  border: 1px solid var(--ev-border2); border-radius: var(--ev-radius-sm);
  padding: 11px; color: var(--ev-text); font-size: 16px; /* evitar zoom iOS */
  outline: none; transition: border-color var(--ev-transition);
  font-family: inherit;
  -webkit-appearance: none; appearance: none;
}
.ev-modal-field input:focus,
.ev-modal-field select:focus,
.ev-modal-field textarea:focus { border-color: var(--ev-green); }
.ev-modal-field textarea { resize: vertical; min-height: 80px; }
.ev-modal-field select option { background: var(--ev-surface2); color: var(--ev-text); }
.ev-star-picker { display: flex; gap: 6px; }
.ev-star-btn {
  background: none; border: none; font-size: 28px;
  cursor: pointer; color: var(--ev-surface3);
  transition: color var(--ev-transition);
  padding: 4px;
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.ev-star-btn.lit { color: var(--ev-yellow); }
.ev-modal-submit {
  width: 100%; background: var(--ev-green); color: #fff;
  border: none; border-radius: var(--ev-radius-sm);
  padding: 13px; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: background var(--ev-transition);
  font-family: inherit; margin-top: 4px;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}
.ev-modal-submit:active { background: #35a862; }
.ev-modal-msg { margin-top: 10px; padding: 9px 12px; border-radius: 5px; font-size: 12px; display: none; }
.ev-modal-msg.success { background: var(--ev-green-dim); color: var(--ev-green); display: block; }
.ev-modal-msg.error   { background: var(--ev-red-dim);   color: var(--ev-red);   display: block; }

/* ══════════════════════════════════════
   LEAFLET POPUP OVERRIDES
══════════════════════════════════════ */
.leaflet-popup-content-wrapper {
  background: var(--ev-surface) !important;
  border: 1px solid var(--ev-border2) !important;
  border-radius: var(--ev-radius) !important;
  box-shadow: var(--ev-shadow) !important;
  padding: 0 !important;
}
.leaflet-popup-tip-container { display: none; }
.leaflet-popup-content { margin: 12px 14px !important; }
.leaflet-popup-close-button { display: none !important; }
.ev-popup-name   { font-size: 12.5px; font-weight: 700; color: var(--ev-text); margin-bottom: 3px; }
.ev-popup-addr   { font-size: 11px; color: var(--ev-text3); margin-bottom: 7px; line-height: 1.3; }
.ev-popup-badges { display: flex; gap: 4px; flex-wrap: wrap; }

/* ══════════════════════════════════════
   MÓVIL — iPhone / Android (≤767px)
   BOTTOM SHEET con posición correcta
   y safe area para el notch
══════════════════════════════════════ */
@media (max-width: 767px) {

  /* Contenedor principal en columna */
  #ev-map-root {
    flex-direction: column;
    /* Triple fallback para iPhone Safari */
    height: 100vh;
    height: -webkit-fill-available;
    height: 100dvh;
    touch-action: none;
  }

  /* El mapa ocupa TODO el fondo */
  #ev-map-area {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  #ev-leaflet-map {
    width: 100% !important;
    height: 100% !important;
  }

  /* ── SIDEBAR = Bottom Sheet ──
     Usa position:fixed para que funcione
     correctamente en Safari iOS
  ── */
  #ev-sidebar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    /* Altura: 56% de la pantalla + safe area del notch */
    height: calc(56% + var(--safe-bottom)) !important;
    max-height: 75vh !important;
    border-right: none !important;
    border-top: 1px solid var(--ev-border2) !important;
    border-radius: 16px 16px 0 0 !important;
    z-index: 200 !important;
    box-shadow: 0 -6px 30px rgba(0,0,0,.6) !important;
    transition: transform .35s cubic-bezier(.4,0,.2,1) !important;
    transform: translateY(0) !important;
    /* Padding bottom para el home indicator del iPhone */
    padding-bottom: var(--safe-bottom) !important;
    overflow: hidden !important;
  }

  /* Sidebar colapsado: solo el header visible (52px) */
  #ev-sidebar.collapsed {
    transform: translateY(calc(100% - 52px)) !important;
  }

  /* Barra de arrastre (handle) */
  .ev-sb-header {
    cursor: pointer !important;
    position: relative !important;
    padding-top: 22px !important;
    flex-shrink: 0 !important;
  }
  .ev-sb-header::before {
    content: '' !important;
    position: absolute !important;
    top: 8px !important; left: 50% !important;
    transform: translateX(-50%) !important;
    width: 40px !important; height: 4px !important;
    background: var(--ev-border2) !important;
    border-radius: 2px !important;
  }

  /* Ocultar botón cerrar en móvil (se usa el handle) */
  #ev-sidebar-close { display: none !important; }

  /* Chips: scroll horizontal para que quepan todos */
  .ev-chips {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 6px !important;
    gap: 6px !important;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .ev-chips::-webkit-scrollbar { display: none; }
  .ev-chip { scroll-snap-align: start; flex-shrink: 0; }

  /* ── PANEL DE DETALLE = Bottom Sheet ── */
  #ev-detail-panel {
    position: fixed !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-height: 78vh !important;
    border-radius: 16px 16px 0 0 !important;
    border-left: none !important; border-right: none !important; border-bottom: none !important;
    z-index: 300 !important;
    padding-bottom: var(--safe-bottom) !important;
    animation: ev-slide-up .28s cubic-bezier(.4,0,.2,1) !important;
  }
  @keyframes ev-slide-up {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }

  /* Handle del panel de detalle */
  .ev-d-head {
    padding-top: 22px !important;
    position: relative !important;
    cursor: default !important;
  }
  .ev-d-head::before {
    content: '' !important;
    position: absolute !important; top: 8px !important; left: 50% !important;
    transform: translateX(-50%) !important;
    width: 40px !important; height: 4px !important;
    background: var(--ev-border2) !important;
    border-radius: 2px !important;
  }

  /* Auth panel como bottom sheet */
  #ev-auth-panel {
    position: fixed !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    top: auto !important;
    width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    padding-bottom: var(--safe-bottom) !important;
    z-index: 400 !important;
    animation: ev-slide-up .28s ease !important;
  }

  /* Modal como bottom sheet */
  #ev-modal {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    position: absolute !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    margin: 0 !important;
    padding-bottom: calc(18px + var(--safe-bottom)) !important;
    max-height: 90vh !important;
  }
  #ev-modal-overlay { align-items: flex-end !important; }

  /* Controles del mapa encima del sidebar */
  #ev-sidebar-toggle { display: none !important; }
  .ev-map-controls {
    bottom: calc(56% + 16px) !important;
    top: auto !important;
    right: 12px !important;
  }
  .ev-map-type {
    bottom: calc(56% + 12px) !important;
    right: 12px !important;
  }
  .ev-legend {
    bottom: calc(56% + 12px) !important;
    left: 12px !important;
  }

  /* Status bar más compacto */
  .ev-status-pill { padding: 5px 12px; font-size: 11px; }

  /* El título H1 oculto en móvil también */
  .ev-sb-header h3 { font-size: 13px; }
}

/* iPhone SE y pantallas muy pequeñas (≤390px) */
@media (max-width: 390px) {
  #ev-sidebar {
    height: calc(60% + var(--safe-bottom)) !important;
  }
  .ev-map-controls {
    bottom: calc(60% + 14px) !important;
  }
  .ev-map-type, .ev-legend {
    bottom: calc(60% + 10px) !important;
  }
  .ev-fab { width: 36px !important; height: 36px !important; font-size: 15px !important; }
  .ev-st-item { padding: 10px 12px; }
}

/* ── Utilidades ── */
.hidden  { display: none !important; }
.ev-mt-2 { margin-top: 8px; }