/* ══════════════════════════════════════════════════════════════
   MOBILE PRO — GelatoMaps
   ══════════════════════════════════════════════════════════════
   Nivel Duolingo: micro-interacciones, rendimiento percibido,
   experiencia táctil nativa, scroll optimizado, PWA polish.
   Carga DESPUÉS de mobile.css — refina sin duplicar.
   ══════════════════════════════════════════════════════════════ */

/* ── 0. VARIABLES PRO ── */
:root {
  --spring:           cubic-bezier(.175,.885,.32,1.275);
  --ease-out-expo:    cubic-bezier(.16,1,.3,1);
  --ease-out-back:    cubic-bezier(.34,1.56,.64,1);
  --duration-micro:   80ms;
  --duration-fast:    150ms;
  --duration-normal:  250ms;
  --duration-slow:    400ms;
  --ripple-color:     rgba(13,148,136,.18);
}

/* ── 1. OVERSCROLL / SCROLL CONTAINMENT ──
   Evita el "bounce" de Safari al hacer overscroll dentro de
   paneles, modals, drawers → se siente como app nativa. */
html {
  overscroll-behavior-y: none;
}
body {
  overscroll-behavior-y: none;
}

/* Paneles scrollables internos: contener su scroll */
.sd-body,
.hp-sabores-list,
.catalog-filters,
.stats-grid,
#list-wrap,
#grid-wrap,
.blog-grid,
.flv-sidebar,
.modal-body,
.fid-body,
.vote-body,
.carta-body {
  overscroll-behavior: contain;
}

/* ── 2. CSS CONTAINMENT — Performance ──
   Indica al navegador que puede optimizar el rendering
   de cada tarjeta de forma aislada → reduce layout thrashing. */
.stat-card,
.action-card,
.section-card,
.sab-card,
.rk-row,
.podium-card,
.blog-card,
.info-card,
.hp-section,
.hp-sim-card,
.hp-rank-card,
.hp-rating-card,
.catalog-tile {
  contain: layout style;
}

/* Content-visibility: auto para elementos fuera de viewport
   → el navegador no renderiza hasta que son visibles */
.rk-row:nth-child(n+10),
.sab-card:nth-child(n+7),
.blog-card:nth-child(n+4) {
  content-visibility: auto;
  contain-intrinsic-size: 0 80px;
}

/* ── 3. WILL-CHANGE HINTS ──
   Solo en hover/active para no desperdiciar GPU memory. */
@media (pointer: coarse) {
  .stat-card:active,
  .action-card:active,
  .sab-card:active,
  .rk-row:active,
  .catalog-tile:active,
  .hp-vote-btn:active,
  .hp-footer-btn:active {
    will-change: transform;
  }
}

/* ── 4. RIPPLE EFFECT — Material Design touch feedback ──
   Se activa via JS (mobile-pro.js) añadiendo .ripple-container
   y un span.ripple-wave dentro del elemento. */
.ripple-container {
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.ripple-wave {
  position: absolute;
  border-radius: 50%;
  background: var(--ripple-color);
  transform: scale(0);
  animation: rippleExpand var(--duration-slow) var(--ease-out-expo) forwards;
  pointer-events: none;
}

@keyframes rippleExpand {
  0%   { transform: scale(0); opacity: .5; }
  100% { transform: scale(4); opacity: 0; }
}

/* ── 5. SMOOTH SCROLL-SNAP — Carouseles horizontales ──
   Todos los scrollers horizontales se comportan como
   carruseles nativos con snap points. */
.catalog-filters,
.hp-stats-inner,
.hp-social-row,
.sort-tabs,
.fb-tab-row,
.discovery-carousel,
.promo-scroll {
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scroll-padding: 0 16px;
}
.catalog-filters > *,
.sort-tabs > *,
.fb-tab-row > * {
  scroll-snap-align: start;
}

/* Ocultar scrollbar en carouseles — universal */
.catalog-filters,
.hp-stats-inner,
.hp-social-row,
.sort-tabs {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.catalog-filters::-webkit-scrollbar,
.hp-stats-inner::-webkit-scrollbar,
.hp-social-row::-webkit-scrollbar,
.sort-tabs::-webkit-scrollbar {
  display: none;
}

/* ── 6. BOTTOM SHEET PATTERN ──
   Modals en móvil se comportan como bottom sheets: aparecen
   desde abajo, tienen drag handle, bordes redondeados arriba. */
@media (max-width: 640px) {
  /* Generic bottom sheet behavior for modals */
  .modal-content,
  #claim-modal,
  #sab-detail {
    border-radius: 20px 20px 0 0 !important;
    max-height: 92dvh;
    margin-top: auto;
  }

  /* Drag handle indicator at top of bottom sheets */
  .modal-content::before,
  #claim-modal::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: rgba(128,128,128,.35);
    border-radius: 2px;
    margin: 8px auto 12px;
    flex-shrink: 0;
  }

  /* Sabor detail panel → bottom sheet on mobile */
  #sab-detail {
    top: auto !important;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100% !important;
    max-width: 100vw !important;
    max-height: 85dvh;
    border-radius: 20px 20px 0 0 !important;
    transform: translateY(100%);
    transition: transform .3s var(--ease-out-expo);
  }
  #sab-detail.open {
    transform: translateY(0);
  }
  #sab-detail::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: rgba(255,255,255,.2);
    border-radius: 2px;
    margin: 8px auto 4px;
  }
}

/* ── 7. ENHANCED SKELETON LOADING ──
   Skeletons con shimmer más suave y forma contextual. */
@keyframes proShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton-line {
  height: 14px;
  border-radius: 7px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.04) 0%,
    rgba(255,255,255,.1) 40%,
    rgba(255,255,255,.04) 80%
  );
  background-size: 200% 100%;
  animation: proShimmer 1.5s ease-in-out infinite;
}
.skeleton-line.short { width: 40%; }
.skeleton-line.medium { width: 65%; }
.skeleton-line.long { width: 85%; }

.skeleton-circle {
  border-radius: 50%;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.04) 0%,
    rgba(255,255,255,.1) 40%,
    rgba(255,255,255,.04) 80%
  );
  background-size: 200% 100%;
  animation: proShimmer 1.5s ease-in-out infinite;
}

.skeleton-card {
  border-radius: 16px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.03) 0%,
    rgba(255,255,255,.08) 40%,
    rgba(255,255,255,.03) 80%
  );
  background-size: 200% 100%;
  animation: proShimmer 1.5s ease-in-out infinite;
  min-height: 120px;
}

/* ── 8. TOAST NOTIFICATIONS — Mobile optimized ──
   Posición inferior, fuera de la zona del tabbar,
   con safe area y animación spring. */
@media (max-width: 768px) {
  .notification,
  .gm-toast,
  [class*="toast"],
  [class*="snackbar"] {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    top: auto !important;
    left: 16px !important;
    right: 16px !important;
    max-width: calc(100vw - 32px) !important;
    border-radius: 14px !important;
    animation: toastSlideUp .35s var(--spring) both;
  }

  @keyframes toastSlideUp {
    from { transform: translateY(100px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
  }
}

/* ── 9. iOS SMART BANNER STYLES ── */
.pwa-install-banner {
  position: fixed;
  bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  left: 12px;
  right: 12px;
  z-index: 9998;
  background: var(--color-primary, #0B1F38);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  animation: toastSlideUp .4s var(--spring) both;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.pwa-install-banner.hidden { display: none; }
.pwa-install-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  flex-shrink: 0;
  object-fit: contain;
}
.pwa-install-text {
  flex: 1; min-width: 0;
}
.pwa-install-title {
  font-size: 14px; font-weight: 700;
  color: #fff; margin-bottom: 2px;
}
.pwa-install-sub {
  font-size: 12px; color: rgba(255,255,255,.6);
}
.pwa-install-btn {
  padding: 8px 16px;
  border-radius: 10px;
  background: var(--color-accent, #0D9488);
  color: #fff;
  font-size: 13px; font-weight: 700;
  border: none; cursor: pointer;
  min-height: 40px;
  white-space: nowrap;
  transition: background .15s;
}
.pwa-install-btn:active { transform: scale(.95); }
.pwa-install-close {
  position: absolute; top: -8px; right: -4px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: none; color: #fff;
  font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

/* ── 10. PULL-TO-REFRESH INDICATOR ── */
.ptr-indicator {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-60px);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--color-primary, #0B1F38);
  border: 1px solid rgba(255,255,255,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
  transition: transform .25s var(--ease-out-expo);
  pointer-events: none;
}
.ptr-indicator.pulling {
  transform: translateX(-50%) translateY(0);
}
.ptr-indicator.refreshing .ptr-spinner {
  animation: spin .8s linear infinite;
}
.ptr-spinner {
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,.2);
  border-top-color: var(--color-accent, #0D9488);
  border-radius: 50%;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 11. PAGE TRANSITION ──
   Transición suave entre páginas — la página nueva
   entra con fade+slide desde la derecha. */
.page-enter {
  animation: pageSlideIn .3s var(--ease-out-expo) both;
}
@keyframes pageSlideIn {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── 12. INTERACTIVE STATES PRO ──
   Mejoras visuales para hover/focus/active que no
   estaban en mobile.css */

/* Focus visible más sofisticado — ring + glow */
@media (pointer: coarse) {
  *:focus { outline: none; }
  *:focus-visible {
    outline: 2px solid var(--color-accent, #0D9488);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(13,148,136,.15);
  }
}

/* Button press spring effect */
@media (pointer: coarse) {
  button:active,
  a[class*="btn"]:active,
  [role="button"]:active,
  .action-card:active,
  .stat-card:active {
    transform: scale(.96);
    transition: transform var(--duration-micro) ease;
  }
}

/* ── 13. SMOOTH SCROLL BEHAVIOR ── */
@media (pointer: coarse) {
  html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── 14. STATUS BAR MATCHING ──
   Pseudo-element behind status bar area to match
   the page's header color on notch devices. */
@supports (padding-top: env(safe-area-inset-top)) {
  body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0;
    height: env(safe-area-inset-top);
    background: var(--color-primary, #0B1F38);
    z-index: 99999;
    pointer-events: none;
  }
}

/* ── 15. IMAGE BLUR-UP PLACEHOLDERS ──
   Las imágenes muestran un blur suave mientras cargan. */
img[loading="lazy"] {
  background: rgba(255,255,255,.04);
  transition: opacity .3s ease;
}
img[loading="lazy"].loaded {
  opacity: 1;
}

/* ── 16. KEYBOARD HANDLING ──
   Cuando el teclado virtual está abierto, ajustar layout. */
@media (max-height: 500px) and (pointer: coarse) {
  /* Landscape with keyboard open */
  .mobile-tabbar { display: none !important; }
  .pwa-install-banner { display: none !important; }
}

/* ── 17. REDUCED DATA / BATTERY ── */
@media (prefers-reduced-data: reduce) {
  img[loading="lazy"] {
    display: none;
  }
  .hp-hero-img,
  .podium-img-el,
  .rk-thumb,
  .sab-card-photo {
    display: none;
  }
}

/* ── 18. DARK MODE REFINEMENTS ──
   GelatoMaps ya es dark-first, pero podemos mejorar
   los contrastes en light mode si el OS lo pide. */
@media (prefers-color-scheme: light) {
  :root {
    --ripple-color: rgba(13,148,136,.12);
  }
  .pwa-install-banner {
    background: #fff;
    border-color: #E5E7EB;
    box-shadow: 0 8px 32px rgba(0,0,0,.12);
  }
  .pwa-install-title { color: #0B1F38; }
  .pwa-install-sub { color: #6B7280; }
  .pwa-install-close { background: #E5E7EB; color: #374151; }
}

/* ── REDUCED MOTION — all pro animations ── */
@media (prefers-reduced-motion: reduce) {
  .ripple-wave,
  .ptr-indicator,
  .page-enter,
  .skeleton-line,
  .skeleton-circle,
  .skeleton-card {
    animation: none !important;
    transition: none !important;
  }
}