/* =====================================================================
   ONZAS DE PLATA V2 — MOBILE FIX v2 4-sep-2026
   "No totalmente compacta" → COMPACTACIÓN REAL esta vez:
   1. Hero colapsado a una línea (tagline oculto, entry-points en 2 filas)
   2. Cards DUENS por fila para bullion simple (grid 2 col)
   3. Card compacta: nombre 13px, precios en fila, meta mínima
   4. Ticker+stats+header super-mini
   5. Cero scroll horizontal
   ===================================================================== */

html, body { overflow-x: clip; max-width: 100vw; }

/* ============================================================
   1. HEADER + TICKER: super-mini en móvil
   ============================================================ */
@media (max-width: 768px) {
  header.site-header { padding: 6px 10px !important; }
  .logo { font-size: 16px !important; }
  .header-phone { font-size: 12px !important; }
  .vip-toggle-btn { padding: 4px 8px !important; font-size: 10px !important; }

  .spot-ticker { padding: 3px 6px !important; gap: 10px !important; font-size: 11px !important; }
  .spot-item { font-size: 11px !important; }
  .stats-bar { display: none !important; } /* dato redundante, el ticker basta */
}

/* ============================================================
   2. HERO COLLAPSIBLE: título corto + botones en 2 cols
   ============================================================ */
@media (max-width: 768px) {
  .hero { padding: 14px 12px 10px !important; text-align: center; }
  .hero h1 { font-size: 19px !important; line-height: 1.2 !important; }
  .hero h1 br { display: none; } /* sin salto de línea forzado */
  .hero-tagline { font-size: 11.5px !important; margin: 6px auto 10px !important; max-width: 340px; }
  .hero-call { display: none !important; } /* el teléfono ya está en el header */

  .entry-points {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    margin-top: 10px !important;
  }
  .ep-btn { padding: 8px 6px !important; font-size: 11px !important; min-height: 0 !important; }
  .entry-points .ep-btn:last-child { grid-column: 1 / -1; } /* alerta ocupa fila entera */
}

/* ============================================================
   3. CATEGORY BAR + TOOLBAR pegajosos pero mínimos
   ============================================================ */
@media (max-width: 768px) {
  .category-bar { padding: 4px 6px !important; gap: 4px !important; }
  .cat-btn { padding: 6px 10px !important; font-size: 11.5px !important; min-height: 0 !important; }

  .quick-sorts { padding: 4px 8px !important; gap: 4px !important; overflow-x: auto !important; }
  .qs-btn { padding: 5px 8px !important; font-size: 11px !important; white-space: nowrap; }
}

/* ============================================================
   4. FILTROS: fila única compacta
   ============================================================ */
@media (max-width: 768px) {
  .filters { padding: 8px !important; gap: 6px !important; }
  .search-wrap input { padding: 8px 10px !important; font-size: 14px !important; }
  .filter-section { min-width: 0 !important; flex: 1 1 46% !important; }
  .filter-section select { padding: 7px 6px !important; font-size: 12px !important; }
}

/* ============================================================
   5. CARDS: GRID 2 COLUMNAS + CARD COMPACTA
   El cambio grande. En >=380px: 2 cards por fila.
   En <380px (iPhone SE): 1 columna pero card más fina.
   ============================================================ */
@media (max-width: 768px) {
  .cards-view {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 0 8px !important;
  }
  /* Lotes y productos anchos (kilos, series) ocupan las 2 columnas */
  .card.card-wide { grid-column: 1 / -1; }

  .card {
    margin-bottom: 0 !important;      /* el gap del grid hace el espaciado */
    padding: 9px 10px 8px !important;
    border-radius: 7px !important;
    display: flex;
    flex-direction: column;
  }
  .card-head { margin-bottom: 6px !important; gap: 4px !important; }
  .card-name { font-size: 12.5px !important; line-height: 1.25 !important; }
  .card-origin { font-size: 8.5px !important; padding: 1px 4px !important; }
  .card-oportunidad { font-size: 8.5px !important; padding: 1px 4px !important; }

  /* PRECIOS: apilados verticalmente pero mini (en card estrecha cabe mejor) */
  .card-price-pair { grid-template-columns: 1fr !important; gap: 4px !important; }
  .card-price-box { padding: 4px 7px !important; border-radius: 5px !important; }
  .cpb-label { font-size: 8px !important; letter-spacing: 0.04em !important; }
  .cpb-value { font-size: 14px !important; }
  .card-crypto-chip { display: none !important; } /* ruido en 2-col */

  .card-meta { font-size: 10px !important; gap: 2px 8px !important; margin-top: 5px !important; }
  .meta-label { display: none !important; } /* solo el dato: "31,10 g" no "Peso: 31,10 g" */

  .card-actions { gap: 4px !important; margin-top: 7px !important; }
  .card-btn { padding: 8px 2px !important; font-size: 10.5px !important; border-radius: 5px !important; min-height: 0 !important; }
}

/* iPhone SE / pequeños: 1 columna con cards aún más finas */
@media (max-width: 379px) {
  .cards-view { grid-template-columns: 1fr !important; }
  .card-name { font-size: 13px !important; }
  .cpb-value { font-size: 15px !important; }
}

/* ============================================================
   6. LOTES: 2 columnas compactas
   ============================================================ */
@media (max-width: 768px) {
  .lotes-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; padding: 0 8px !important; }
  .lote-card { padding: 8px !important; }
  .lotes-section { padding: 20px 0 24px !important; }
  .section-heading { font-size: 17px !important; margin-bottom: 4px !important; }
  .section-sub { font-size: 11px !important; }
}

/* ============================================================
   7. SEO SECTION: texto mini
   ============================================================ */
@media (max-width: 768px) {
  .seo-section { padding: 24px 12px !important; font-size: 12px !important; line-height: 1.65 !important; }
  .seo-section h2 { font-size: 16px !important; margin-bottom: 10px !important; }
  .seo-section h3 { font-size: 13.5px !important; margin: 14px 0 6px !important; }
}

/* ============================================================
   8. FLOATING CONTACT + BACK-TOP + TOASTS (safe areas)
   ============================================================ */
@supports (padding: env(safe-area-inset-bottom)) {
  @media (max-width: 768px) {
    .floating-contact {
      bottom: env(safe-area-inset-bottom, 0px) !important;
      height: auto !important;
      padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px) * 0.5) !important;
      gap: 3px !important;
    }
    .floating-contact a, .floating-contact button { font-size: 10px !important; padding: 7px 4px !important; min-height: 0 !important; }
    .back-top { bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important; width: 34px !important; height: 34px !important; font-size: 14px !important; }
  }
}

/* ============================================================
   9. AVISO/BANNER descartable más pequeño
   ============================================================ */
@media (max-width: 768px) {
  .recompra-banner { font-size: 11px !important; padding: 8px 10px !important; }
  .recompra-banner .rb-close { font-size: 14px !important; }
}

/* ============================================================
   10. Modales a pantalla casi completa
   ============================================================ */
@media (max-width: 768px) {
  .modal, .overlay-dialog, .orden-modal {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 24px) !important;
    margin: 12px auto !important;
    padding: 14px 12px !important;
  }
}

/* ============================================================
   11. Inputs 16px (anti-zoom iOS) + touch 40px
   ============================================================ */
@media (max-width: 768px) {
  input, select, textarea { font-size: 16px !important; }
}

/* ============================================================
   12. Standalone (app instalada): status bar transparente feel
   ============================================================ */
@media all and (display-mode: standalone) {
  body { user-select: none; -webkit-user-select: none; }
  input, textarea, select { user-select: text; -webkit-user-select: text; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}