/* =====================================================================
   ONZAS DE PLATA V2 — MOBILE FIX 3-sep-2026
   Parche CSS cargado el ÚLTIMO en index.php (después de todo lo demás).
   Objetivo: que la web se vea PERFECTA en móvil (320px — 768px).

   Problemas que resuelve:
   1. Overflow horizontal (scroll lateral) por tablas/elementos anchos
   2. Tabla price-board: en móvil ya hay vista cards, pero si algún
      elemento escapa, se fuerza el corte
   3. Safe-areas del iPhone (notch + home bar)
   4. Tipografías que no bajan de tamaño / touch targets < 44px
   5. Spot ticker y stats-bar que desbordan
   6. Floating contact sobre la home-bar del iPhone
   7. Modales/overlays más altos que el viewport
   8. Imágenes sin max-width
   ===================================================================== */

/* ---------- 0. BASE: html y body sin scroll lateral ---------- */
html, body {
  overflow-x: clip; /* clip mejor que hidden: no rompe position:sticky */
  max-width: 100vw;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ---------- 1. SAFE AREAS iPhone (notch / Dynamic Island / home bar) ---------- */
@supports (padding: env(safe-area-inset-top)) {
  :root {
    --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);
  }
  header.site-header {
    padding-top: calc(8px + var(--safe-top, 0px)) !important;
    padding-left: calc(14px + var(--safe-left, 0px)) !important;
    padding-right: calc(14px + var(--safe-right, 0px)) !important;
  }
  .floating-contact {
    bottom: var(--safe-bottom, 0px) !important;
    padding-bottom: calc(var(--safe-bottom, 0px) * 0.4);
  }
  .back-top {
    bottom: calc(var(--floating-height) + var(--safe-bottom, 0px) + 12px) !important;
  }
}

/* ---------- 2. TOUCH TARGETS ≥ 44px (guía Apple/Google) ---------- */
@media (max-width: 768px) {
  a, button, .cat-btn, .ep-btn, .qs-btn, .vip-toggle-btn, .back-top,
  .card-btn, .lote-card a, input[type="submit"], select {
    min-height: 44px;
    min-width: 44px;
  }
  .cat-btn { min-height: 38px; } /* la category-bar es densa: 38px aceptable */
  /* Hover irrelevante en táctil: desactivar sticky-hover que "ensucia" */
  .cat-btn:hover, .ep-btn:hover, .qs-btn:hover { background: inherit; }
  .cat-btn.active, .ep-btn:active, .card-btn:active {
    background: rgba(197,166,104,0.12);
  }
}

/* ---------- 3. SPOT TICKER sin desbordamiento ---------- */
@media (max-width: 768px) {
  .spot-ticker {
    flex-wrap: wrap !important;
    justify-content: center !important;
    row-gap: 4px;
    padding: 6px 10px !important;
  }
  .spot-ticker .spot-item { font-size: 12px; white-space: nowrap; }
  .stats-bar { gap: 12px !important; padding: 6px 12px !important; font-size: 11px; }
  .stats-bar .stat-val { font-size: 12px; }
}

/* ---------- 4. TABLA: escape total evitado (cards ya la sustituyen) ---------- */
@media (max-width: 768px) {
  .table-wrap {
    display: none !important; /* la vista cards manda en móvil */
  }
  .cards-view { display: block !important; }
  /* Por si algún contenedor padre fuerza ancho: */
  .price-section, .main-content, section, .lotes-section, .seo-section {
    max-width: 100% !important;
    overflow-x: clip;
  }
  img, svg, video, canvas { max-width: 100% !important; height: auto; }
}

/* ---------- 5. CARDS: compactas y legibles ---------- */
@media (max-width: 480px) {
  .card { padding: 12px 12px 10px; }
  .card-head { font-size: 14px; line-height: 1.35; }
  .card-price-pair { gap: 8px; }
  .card-price-box { padding: 8px 10px; }
  .cpb-value { font-size: 16px; }
  .card-actions { gap: 6px; }
  .card-btn { padding: 9px 8px; font-size: 12px; }
  .card-meta { font-size: 11px; gap: 8px; flex-wrap: wrap; }
}

/* ---------- 6. FILTROS y QUICK-SORTS: fila desplazable ---------- */
@media (max-width: 768px) {
  .filter-row, .tools-row, .filters-bar {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .filter-section { min-width: calc(50% - 8px) !important; flex: 1 1 45% !important; }
  .filter-section select { width: 100%; }
}

/* ---------- 7. MODALES / OVERLAYS dentro del viewport ---------- */
@media (max-width: 768px) {
  .modal, .overlay-dialog, .orden-modal {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 32px) !important;
    overflow-y: auto !important;
    margin: 16px auto !important;
  }
  /* dvh: altura dinámica real del móvil con teclado abierto */
  .loading-overlay { height: 100dvh; }
}

/* ---------- 8. HERO + SEO section ---------- */
@media (max-width: 480px) {
  .hero { padding: 20px 14px 14px !important; }
  .hero h1 { font-size: 22px !important; }
  .hero-tagline { font-size: 13px !important; margin-bottom: 20px !important; }
  .entry-points { gap: 8px !important; }
  .section-heading { font-size: 20px !important; }
  .section-sub { font-size: 12px; }
  .seo-section { padding: 32px 14px !important; }
  .seo-section h2 { font-size: 19px !important; }
  .seo-section h3 { font-size: 15px !important; }
  .seo-section { font-size: 13px !important; }
}

/* ---------- 9. LOTES grid ---------- */
@media (max-width: 768px) {
  .lotes-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; gap: 10px !important; }
}
@media (max-width: 420px) {
  .lotes-grid { grid-template-columns: 1fr 1fr !important; }
  .lote-card { padding: 10px; }
}

/* ---------- 10. HEADER: logo + teléfono en una línea ya existe; asegurar ---------- */
@media (max-width: 768px) {
  header.site-header { flex-wrap: nowrap; }
  .site-header .header-phone a { font-size: 13px; }
}

/* ---------- 11. TOASTS sobre la floating bar ---------- */
@media (max-width: 768px) {
  .toast-container { bottom: calc(var(--floating-height) + var(--safe-bottom, 0px) + 10px) !important; }
}

/* ---------- 12. Formularios: fuente ≥16px evita zoom automático iOS ---------- */
@media (max-width: 768px) {
  input, select, textarea { font-size: 16px !important; }
}

/* ---------- 13. Tablas internas de otras páginas (comparador, rentabilidad) ---------- */
@media (max-width: 768px) {
  .table-scroll, .scroll-x, .comp-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* Sombra indicadora de scroll horizontal en tablas permitidas */
  .table-scroll, .scroll-x {
    background:
      linear-gradient(to right, var(--bg-base) 30%, rgba(8,8,12,0)),
      linear-gradient(to left, var(--bg-base) 30%, rgba(8,8,12,0)),
      radial-gradient(farthest-side at 0 50%, rgba(197,166,104,0.25), transparent) left center / 12px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgba(197,166,104,0.25), transparent) right center / 12px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
}

/* ---------- 14. PWA: theme-color dinámico + display standalone ---------- */
@media all and (display-mode: standalone) {
  /* Cuando corre como app instalada, margen superior para el status bar */
  header.site-header { padding-top: max(8px, var(--safe-top, 0px)) !important; }
  body { user-select: none; -webkit-user-select: none; } /* feel de app nativa */
  input, textarea, select, [contenteditable] { user-select: text; -webkit-user-select: text; }
  /* Ocultar elementos "ir a la web" porque YA es la app */
  .pwa-install-banner { display: none !important; }
}

/* ---------- 15. Accessibility: respeta prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) and (max-width: 768px) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}