/* ThePriceMap v2 (preview 11/10/2026) — capa de mejoras sobre style.css */

/* 1) Móvil: panel como bottom sheet de altura limitada, no tapa todo el mapa */
@media(max-width:820px){
  aside{
    top:auto !important;
    bottom:8px !important;
    max-height:46vh !important;
    overflow-y:auto;
    border-radius:18px 18px 12px 12px;
    box-shadow:0 -10px 30px rgba(0,0,0,.45);
  }
  aside.hidden{ transform:translateY(calc(100% - 46px)); }
  .aside-head h1{ font-size:18px; }
}

/* 2) Botón hamburguesa (mostrar/ocultar panel): visible y con tamaño táctil */
#toggleAside{
  min-width:44px; min-height:44px; z-index:1000;
}

/* 3) Atribución de Leaflet legible (sin ocultarla: es obligatoria) */
.leaflet-control-attribution{ font-size:11px !important; }

/* 4) Acento dorado reservado a precio y CTA; contraste de texto mejorado */
.card-price b{ font-variant-numeric: tabular-nums; }
.card-place{ color:var(--ink-dim); }

/* 5) Foco visible para teclado y accesibilidad */
button:focus-visible, a:focus-visible, select:focus-visible{
  outline:2px solid var(--gold); outline-offset:2px;
}

/* 6) Tarjetas: separación y foco táctil más cómodos */
.card{ transition:transform .15s ease, border-color .15s ease; }
.card:active{ transform:scale(.99); }


/* ===== v3 (preview 11/10/2026) ===== */

/* Menú "Explorar" (agrupa enlaces secundarios) */
details.more{ position:relative; }
details.more summary{ list-style:none; cursor:pointer; }
details.more summary::-webkit-details-marker{ display:none; }
.more-menu{
  position:absolute; right:0; top:calc(100% + 8px); z-index:2000;
  min-width:260px; padding:8px;
  background:var(--panel-solid); border:1px solid var(--line-strong);
  border-radius:var(--r); box-shadow:var(--shadow);
  display:grid; gap:2px;
}
.more-menu a{
  display:flex; flex-direction:column; gap:1px;
  padding:9px 11px; border-radius:var(--r-sm); color:var(--ink); font-weight:650; font-size:13.5px;
}
.more-menu a:hover{ background:var(--gold-soft); }
.more-menu a small{ font-weight:400; font-size:11.5px; color:var(--ink-dim); }

/* Panel: asa y cierre */
.grip{ display:none; }
.aside-x{
  position:absolute; top:10px; right:12px; width:32px; height:32px;
  border-radius:50%; border:1px solid var(--line); background:transparent;
  color:var(--ink-dim); font-size:20px; line-height:1; cursor:pointer; z-index:2;
}
.aside-x:hover{ color:var(--ink); border-color:var(--line-strong); }

/* Tarjetas de precio: más legibles, cifra protagonista */
.card{ border-radius:12px; }
.card-price b{ font-size:18px; font-variant-numeric:tabular-nums; }
.card-name{ font-size:14px; }

/* Mapa: zoom visible y táctil */
.leaflet-control-zoom a{ width:36px; height:36px; line-height:36px; font-size:18px; }

/* Móvil: panel tipo bottom sheet con asa */
@media(max-width:820px){
  .grip{
    display:block; width:44px; height:5px; border-radius:3px;
    background:var(--line-strong); margin:8px auto 4px;
  }
  aside{ padding-top:2px; }
  .aside-head h1{ padding-right:44px; }
  .more-menu{ right:auto; left:0; min-width:250px; }
}

/* Zoom +/- en la esquina superior derecha (control oficial de Leaflet) */
.leaflet-control-zoom{ border:none !important; margin-top:14px !important; margin-right:14px !important; }
.leaflet-control-zoom a{ background:var(--panel-solid) !important; color:var(--ink) !important; border:1px solid var(--line) !important; }