/* ══════════════════════════════════════════════════════════════════
   interaction.css — GelatoMaps
   Superficie interactiva: touch targets, active states, focus-visible,
   hover polish, cierre de overlays, consistencia desktop/móvil.
   NO modifica diseño — solo pulir la capa de interacción.
   ══════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────
   1. GLOBAL: touch-action + tap delay elimination
   ──────────────────────────────────────────────────────────────────
   touch-action:manipulation elimina el delay de 300ms en iOS/Android
   para todos los elementos interactivos. No afecta scroll ni gestos.
   ────────────────────────────────────────────────────────────────── */
button,
[role="button"],
a,
label,
select,
.hdr-pill,
.tbtn,
.rank-item,
.rank-tab,
.sb-rank-tab,
.sb-rk-item,
.sb-calidad-chip,
.sb-chip,
.sb-expand-btn,
.sb-pill,
.ud-item,
.ext-a,
.demo-banner-cta,
.demo-banner-close,
.hdr-info-btn,
.hdr-login-btn,
.hdr-logo,
.hdr-brand,
.hdr-user-avatar,
.vote-x,
.pnl-x,
.modal-x,
.legend-close,
.btn-rst,
.sabor-rank-row,
.sabor-rank-shop,
.sabor-rank-viewall,
.mtab,
.fid-stamp,
.dc-x {
  touch-action: manipulation;
}

/* ──────────────────────────────────────────────────────────────────
   2. GLOBAL: focus-visible — anillo de foco solo con teclado
   ──────────────────────────────────────────────────────────────────
   Visible con teclado, invisible con ratón/touch.
   Se aplica a todos los botones interactivos del producto.
   ────────────────────────────────────────────────────────────────── */
button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible,
.hdr-pill:focus-visible,
.tbtn:focus-visible,
.rank-item:focus-visible,
.rank-tab:focus-visible,
.sb-rank-tab:focus-visible,
.sb-calidad-chip:focus-visible,
.sb-chip:focus-visible,
.ud-item:focus-visible,
.ext-a:focus-visible,
.sabor-rank-viewall:focus-visible {
  outline: 2px solid var(--teal, #0D9488);
  outline-offset: 2px;
}

/* Focus-visible para inputs, selects y textareas (WCAG 2.4.7) */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--teal, #0D9488);
  outline-offset: 2px;
}

/* Para botones de cierre en fondos oscuros */
.vote-x:focus-visible,
.pnl-x:focus-visible,
.modal-x:focus-visible,
.dc-x:focus-visible,
.legend-close:focus-visible,
.demo-banner-close:focus-visible {
  outline: 2px solid rgba(255,255,255,0.7);
  outline-offset: 2px;
}

/* ──────────────────────────────────────────────────────────────────
   3. :ACTIVE STATES — feedback táctil inmediato
   ──────────────────────────────────────────────────────────────────
   El :active se dispara en el mismo instante del toque.
   transition rápida (80ms) para sensación snap.
   ────────────────────────────────────────────────────────────────── */

/* Botones de cierre (X): escalan ligeramente hacia dentro */
.vote-x:active,
.pnl-x:active,
.modal-x:active,
.dc-x:active,
.legend-close:active {
  transform: scale(0.88);
  transition: transform 0.08s ease;
}

/* Botones primarios: se hunden */
.hdr-login-btn:active,
.btn-rst:active,
.demo-banner-cta:active,
.sabor-rank-viewall:active {
  transform: scale(0.96) translateY(0) !important;
  box-shadow: none !important;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

/* Pills de categoría del header */
.hdr-pill:active {
  transform: scale(0.95) translateY(0) !important;
  transition: transform 0.08s ease;
  opacity: 0.85;
}

/* Tag buttons del sidebar */
.tbtn:active {
  transform: translateX(0) scale(0.97) !important;
  background: var(--smoke, #F5F2ED) !important;
  transition: transform 0.08s ease;
}

/* Ranking items */
.rank-item:active,
.sb-rk-item:active,
.sabor-rank-row:active {
  transform: none !important;
  background: rgba(0,0,0,0.04);
  transition: background 0.08s ease;
}

/* Tabs de ranking */
.rank-tab:active,
.sb-rank-tab:active {
  opacity: 0.7;
  transition: opacity 0.08s ease;
}

/* Chips de calidad mínima */
.sb-calidad-chip:active {
  transform: scale(0.93) translateY(0) !important;
  transition: transform 0.08s ease;
}

/* Chips legales / sidebar */
.sb-chip:active {
  transform: scale(0.94) translateY(0) !important;
  transition: transform 0.08s ease;
}

/* Expand button del sidebar */
.sb-expand-btn:active {
  color: var(--navy, #0B1F38);
  transition: color 0.08s ease;
}

/* Pills del sidebar (accordions) */
.sb-pill:active {
  opacity: 0.75;
  transform: scale(0.97);
  transition: opacity 0.08s ease, transform 0.08s ease;
}

/* User dropdown items */
.ud-item:active {
  background: var(--border, #E5DED3);
  transition: background 0.08s ease;
}

/* External links (Google Maps, web) en panel */
.ext-a:active {
  opacity: 0.6;
  transform: scale(0.97);
  transition: opacity 0.08s ease, transform 0.08s ease;
}

/* Demo banner close */
.demo-banner-close:active {
  color: var(--color-white);
  transform: scale(0.88);
  transition: transform 0.08s ease;
}

/* Links de footer sidebar */
.sb-footer-links a:active {
  opacity: 0.5;
  transition: opacity 0.08s ease;
}

/* Sabor rank shop items */
.sabor-rank-shop:active {
  background: var(--color-role-shop-bg);
  transition: background 0.08s ease;
}

/* Tabs modales */
.mtab:active {
  background: rgba(0,0,0,0.04);
  transition: background 0.08s ease;
}

/* ──────────────────────────────────────────────────────────────────
   4. TAP TARGETS — elementos pequeños en móvil
   ──────────────────────────────────────────────────────────────────
   Elementos que desktop tiene pequeños pero en móvil necesitan
   hit area ampliada. Se usa ::after pseudo-element para no cambiar
   el layout visual.
   ────────────────────────────────────────────────────────────────── */

/* demo-banner-close: pequeño en desktop, necesita hit area */
.demo-banner-close {
  min-width: 36px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* hdr-info-btn: padding mínimo visible, necesita hit area táctil */
.hdr-info-btn {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}

/* Toggle label: hacer que el label del toggle sea clicable completo */
.tog-row {
  cursor: pointer;
}
.tog-row .tog-lbl {
  cursor: pointer;
  padding: 4px 0;
  /* Extiende área táctil del label */
}

/* Reset button: mínimo aceptable en desktop */
.btn-rst {
  min-height: 36px;
}

/* ──────────────────────────────────────────────────────────────────
   5. SIDEBAR MÓVIL — overlay de cierre
   ──────────────────────────────────────────────────────────────────
   Overlay semitransparente que aparece detrás del sidebar abierto
   en móvil. Click en overlay → cierra sidebar.
   ────────────────────────────────────────────────────────────────── */
#mobOverlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 899; /* justo debajo del sidebar (z:900) */
  background: rgba(11, 31, 56, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: opacity 0.25s ease;
  opacity: 0;
  cursor: pointer;
}
#mobOverlay.visible {
  display: block;
  opacity: 1;
}

/* ──────────────────────────────────────────────────────────────────
   6. LEGEND PANEL — mejoras de interacción
   ──────────────────────────────────────────────────────────────────
   El botón trigger de la leyenda (contador) necesita cursor claro
   y la zona clicable del span debe ser generosa.
   ────────────────────────────────────────────────────────────────── */
#hdrCountBtn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: 6px;
  transition: background 0.15s ease;
}
#hdrCountBtn:hover {
  background: var(--color-border);
}
#hdrCountBtn:active {
  background: var(--color-border-md);
  transform: scale(0.97);
  transition: transform 0.08s ease;
}

/* ──────────────────────────────────────────────────────────────────
   7. PANEL FICHA — botón cierre más visible y preciso
   ──────────────────────────────────────────────────────────────────
   El .pnl-x actual es 30×30px en desktop. Añadimos hover más claro
   y un :active state que faltaba.
   ────────────────────────────────────────────────────────────────── */
.pnl-x {
  /* Asegurar que sea interactivo sobre imágenes */
  position: absolute;
  z-index: 10;
}
.pnl-x:hover {
  background: var(--color-border-strong) !important;
  transform: scale(1.08);
  transition: background 0.15s ease, transform 0.15s ease;
}

/* ──────────────────────────────────────────────────────────────────
   8. MODAL X — hover más pronunciado
   ──────────────────────────────────────────────────────────────────
   Los .modal-x tienen hover básico. Mejora del feedback visual.
   ────────────────────────────────────────────────────────────────── */
.modal-x {
  transition: background 0.15s ease, transform 0.15s ease !important;
}
.modal-x:hover {
  transform: scale(1.08) !important;
}

/* ──────────────────────────────────────────────────────────────────
   9. VOTE-X — hover más claro (fondo claro)
   ──────────────────────────────────────────────────────────────────
   El .vote-x está en modal de fondo claro. Hover era solo border.
   Ahora mucho más visible.
   ────────────────────────────────────────────────────────────────── */
.vote-x {
  transition: background 0.15s ease, transform 0.15s ease !important;
}
.vote-x:hover {
  background: rgba(0,0,0,0.1) !important;
  transform: scale(1.08) !important;
}

/* ──────────────────────────────────────────────────────────────────
   10. HEADER PILLS — avatar hover más suave en mobile
   ──────────────────────────────────────────────────────────────────
   El `transform:scale(1.08)` del avatar en hover es agresivo en
   pantallas pequeñas. Limitamos en coarse pointer.
   ────────────────────────────────────────────────────────────────── */
@media (pointer: coarse) {
  .hdr-user-avatar:hover,
  .hdr-logo:hover {
    transform: none !important;
  }
  /* Enlace en sidebar: botón de geo clear pequeño */
  .sb-geo-clear {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 6px;
  }
  /* demo-banner-close en touch */
  .demo-banner-close {
    min-width: 44px;
    min-height: 44px;
  }
  /* hdr-info-btn en touch */
  .hdr-info-btn {
    min-height: 44px;
  }
  /* rank tabs: más fáciles de tocar */
  .rank-tab,
  .sb-rank-tab {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* legend trigger */
  #hdrCountBtn {
    min-height: 40px;
    padding: 6px 8px;
  }
  /* Calidad mínima chips */
  .sb-calidad-chip {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* sb-chip legal */
  .sb-chip {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
  /* Exterior link buttons en panel */
  .ext-a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* toggle row: área táctil de la fila */
  .tog-row {
    min-height: 44px;
    align-items: center;
  }
  /* btn filtros mobile */
  #btnMob {
    min-height: 40px;
    padding: 0 14px;
    display: flex;
    align-items: center;
  }
  /* Sabor rank shop items en touch */
  .sabor-rank-shop {
    min-height: 36px;
    display: flex;
    align-items: center;
    padding: 4px 8px;
  }
  /* Expand btn sidebar */
  .sb-expand-btn {
    min-height: 44px;
  }
  /* Pills de accordion del sidebar */
  .sb-pill {
    min-height: 40px;
    padding: 8px 16px;
  }

  /* Close buttons en modales: amplía hit area sin cambiar tamaño visual.
     .vote-x=30px, .modal-x=32px — por debajo del mínimo práctico 44px.
     Uso ::after con 44×44 y posición centrada. */
  .vote-x,
  .modal-x {
    position: relative; /* needed for ::after */
  }
  .vote-x::after,
  .modal-x::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
    /* transparent tap area expansion — no visual change */
  }
  /* sb-geo-clear: sube de 36px a 44px en touch */
  .sb-geo-clear {
    min-height: 44px;
  }
}

/* ──────────────────────────────────────────────────────────────────
   11. EXT-A (links externos panel): hover claro
   ──────────────────────────────────────────────────────────────────
   Solo tenía opacity en hover. Añadir transform y background claro.
   ────────────────────────────────────────────────────────────────── */
.ext-a {
  transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease !important;
}
.ext-a:hover {
  opacity: 1 !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* ──────────────────────────────────────────────────────────────────
   12. RANK ITEM — cursor pointer explícito + hover más obvio
   ──────────────────────────────────────────────────────────────────
   `.rank-item` tiene `cursor:pointer` pero el hover es solo color.
   Añadimos background tenue para más claridad.
   ────────────────────────────────────────────────────────────────── */
.rank-item:hover {
  background: rgba(13,148,136,0.05);
  border-radius: 6px;
  padding-left: 4px;
  transition: background 0.15s ease, padding-left 0.15s ease;
}
.rank-item {
  padding: 5px 4px;
  margin: 0 -4px;
  border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease, padding-left 0.15s ease;
}

/* ──────────────────────────────────────────────────────────────────
   13. DROPDOWN USER — stopPropagation visual
   ──────────────────────────────────────────────────────────────────
   Los ud-item necesitan pointer-events correctos y transición
   de fondo más rápida.
   ────────────────────────────────────────────────────────────────── */
.ud-item {
  transition: background 0.1s ease !important;
  border-radius: 6px;
  margin: 1px 4px;
  padding: 10px 12px !important;
}

/* ──────────────────────────────────────────────────────────────────
   14. MTAB (modal tabs) — border-bottom en active/hover
   ──────────────────────────────────────────────────────────────────
   El .mtab tiene hover de color pero hover de fondo lo hace más
   claro a qué es clicable.
   ────────────────────────────────────────────────────────────────── */
.mtab:hover {
  background: rgba(0,0,0,0.03);
}
.mtab {
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease !important;
}

/* ──────────────────────────────────────────────────────────────────
   15. BOLAS HERO TBTN — :active state en fondo oscuro
   ──────────────────────────────────────────────────────────────────
   Las tbtn del bolas-hero tienen fondo semitransparente oscuro.
   El active state necesita ser visible sobre ese fondo.
   ────────────────────────────────────────────────────────────────── */
.bolas-list .tbtn:active {
  transform: none !important;
  background: rgba(255,255,255,0.18) !important;
  transition: background 0.08s ease !important;
}

/* ──────────────────────────────────────────────────────────────────
   16. TOGGLE — animación del slider más snappy
   ──────────────────────────────────────────────────────────────────
   El toggle actual usa transition:.2s (200ms). Más rápido = más
   responsive a la percepción.
   ────────────────────────────────────────────────────────────────── */
.tog-sl {
  transition: background 0.15s ease !important;
}
.tog-sl:before {
  transition: transform 0.15s cubic-bezier(0.34,1.1,0.64,1) !important;
}
/* Feedback visual al pulsar el toggle */
.tog input:active + .tog-sl:before {
  width: 18px; /* se ensancha levemente al pulsar — efecto squish */
}
.tog input:checked:active + .tog-sl:before {
  width: 18px;
  margin-left: -4px;
}

/* ──────────────────────────────────────────────────────────────────
   17. CHIP (panel): hover feedback
   ──────────────────────────────────────────────────────────────────
   Los .chip del panel de detalle (tags de categoría) no son
   interactivos pero se ven como si lo fueran. Aseguramos cursor:default.
   ────────────────────────────────────────────────────────────────── */
.chip {
  cursor: default;
  user-select: none;
}

/* ──────────────────────────────────────────────────────────────────
   18. HDRPILL ZOOM IMG — solo en hover desktop
   ──────────────────────────────────────────────────────────────────
   El zoom de la imagen dentro del pill (scale(2.2)) en hover es
   genial en desktop pero en touch puede activarse en tap y quedar
   "pegado". Desactivar en coarse pointer.
   ────────────────────────────────────────────────────────────────── */
@media (pointer: coarse) {
  .hdr-pill:hover img {
    transform: none !important;
  }
  .hdr-pill img.zoomed {
    transform: none !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   19. OVER BUTTONS — no double-tap zoom
   ──────────────────────────────────────────────────────────────────
   En Android, doble tap sobre un botón puede hacer zoom de página.
   touch-action:manipulation ya lo previene. Refuerzo con user-select.
   ────────────────────────────────────────────────────────────────── */
button,
[role="button"],
.hdr-pill,
.tbtn,
.rank-item,
.rank-tab,
.sb-rank-tab,
.sb-calidad-chip {
  user-select: none;
  -webkit-user-select: none;
}

/* ──────────────────────────────────────────────────────────────────
   20. SIDEBAR: mobile overlay transition
   ──────────────────────────────────────────────────────────────────
   El sidebar ya tiene transition:transform .3s. El overlay necesita
   sincronizarse con esa transición.
   ────────────────────────────────────────────────────────────────── */
@media (min-width: 769px) {
  #mobOverlay { display: none !important; }
}

/* ──────────────────────────────────────────────────────────────────
   21. #btnMob — active state y aria-expanded visual
   ──────────────────────────────────────────────────────────────────
   El botón de Filtros en móvil no tiene :active feedback.
   ────────────────────────────────────────────────────────────────── */
#btnMob:active {
  background: var(--color-border-md) !important;
  transform: scale(0.95);
  transition: transform 0.08s ease, background 0.08s ease;
}
#btnMob:hover {
  background: var(--color-border);
  border-color: var(--color-text-on-dark-low);
  color: rgba(255,255,255,0.9);
  transition: background 0.15s ease, border-color 0.15s ease;
}

/* ──────────────────────────────────────────────────────────────────
   22. hdr-login-btn — active ya en base.css pero refuerzo
   ──────────────────────────────────────────────────────────────────
   El botón de login/entrar necesita feedback inmediato en touch.
   ────────────────────────────────────────────────────────────────── */
.hdr-login-btn:active {
  transform: scale(0.95) !important;
  transition: transform 0.08s ease !important;
}

/* ──────────────────────────────────────────────────────────────────
   23. User dropdown — cerrar al tocar backdrop
   ──────────────────────────────────────────────────────────────────
   El dropdown se cierra con click-outside vía JS. El avatar hover
   en móvil no debe escalar (ya manejado arriba). Refuerzo:
   ────────────────────────────────────────────────────────────────── */
.user-dropdown {
  /* Asegurar que z-index no bloquea interacción de otros elementos */
  /* Ya tiene z-index:6000 que está bien */
}

/* ──────────────────────────────────────────────────────────────────
   24. Heladero page (.hp-btn) — active ya en base.css, refuerzo
   ──────────────────────────────────────────────────────────────────
   El .hp-btn tiene :active en base.css (.hp-btn:active{scale .96}).
   Añadimos touch-action.
   ────────────────────────────────────────────────────────────────── */
.hp-btn {
  touch-action: manipulation;
}

/* ──────────────────────────────────────────────────────────────────
   25. DISCOVERY CARDS — cursor pointer explícito
   ──────────────────────────────────────────────────────────────────
   Las .disco-card tienen click handler JS pero no cursor:pointer en CSS.
   ────────────────────────────────────────────────────────────────── */
.disco-card {
  cursor: pointer;
}
.disco-card:active {
  transform: scale(0.97);
  transition: transform 0.08s ease;
}

/* ──────────────────────────────────────────────────────────────────
   26. Popup leaflet — botones de acción
   ──────────────────────────────────────────────────────────────────
   Los botones dentro del popup del mapa (leaflet) no tienen touch-action.
   ────────────────────────────────────────────────────────────────── */
.leaflet-popup-content button,
.leaflet-popup-content a {
  touch-action: manipulation;
}

/* ──────────────────────────────────────────────────────────────────
   27. SCROLL BARS EN PANEL/MODALS — más ancho en touch
   ──────────────────────────────────────────────────────────────────
   En touch, el scrollbar es invisible pero la zona de scroll debe
   funcionar sin taps accidentales en los bordes.
   ────────────────────────────────────────────────────────────────── */
@media (pointer: coarse) {
  #panel .pnl-body,
  .modal-body,
  .sobre-modal,
  .fid-modal,
  #sidebar {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}