/* mobile-pro.css — capa EXCLUSIVA móvil (<760px): carrito liquid glass + pulido táctil.
   Cargar al final del <head> de index/productos/details. Desktop (>=760px) no recibe reglas.
   Reversión: borrar este archivo + sus <link> marcados [MOBILE]. */

/* ================================================================
   [GLASS-CARRITO] Barra del carrito como cápsula flotante liquid
   glass (iOS 26). Anclada SIEMPRE al borde inferior real con
   safe-area; el aviso SAGRILAFT (#banner) se apila encima.
   ================================================================ */

@media (max-width: 759.98px) {
  /* .svc-widget.svc-widget: (0,3,0) gana al lift legacy `.venta-nacional-wrapper .vn-cart-bar`
     del <style> inline de index.php sin usar !important. */
  .svc-widget.svc-widget .vn-cart-bar {
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    border-radius: 22px;
    padding: 10px 14px;
    background: rgba(10, 61, 35, 0.62);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 12px 30px -8px rgba(10, 61, 35, 0.5);
    animation: svGlassBarIn 220ms ease-out;
  }

  /* Se reproduce en cada display:none -> flex (toggle de [hidden] en venta-carrito.js). */
  @keyframes svGlassBarIn {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* La cápsula flota más alto que la barra pegada legacy: más reserva al final del scroll. */
  body.vn-cart-bar-visible {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }

  /* Aviso SAGRILAFT ENCIMA de la cápsula (legacy: la barra se elevaba --sagrilaft-bar-offset y
     quedaba suelta a media pantalla). --cart-bar-h la mantiene el script inline de index.php. */
  body.vn-cart-bar-visible #banner {
    left: 10px;
    right: 10px;
    width: auto;
    bottom: calc(var(--cart-bar-h, 64px) + env(safe-area-inset-bottom, 0px) + 18px);
    border-radius: 14px;
  }

  /* Bottom sheet del pedido: el botón de WhatsApp no debe quedar bajo el home indicator. */
  .svc-widget.svc-widget .vn-cart-panel {
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }

  /* Pedido abierto = página congelada: solo se desplaza la lista interna del panel,
     como los sheets nativos de iOS (venta-carrito.js pone la clase en body). */
  body.vn-panel-open {
    overflow: hidden;
  }

  /* contain: al llegar al tope/fondo de la lista, el impulso no se escapa a la página. */
  .svc-widget .vn-cart-items {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Mientras el dedo arrastra el sheet (js/mobile-nav.js), el panel sigue al dedo sin
     transición; al soltar se reactiva la del estado abierto/cerrado. */
  .svc-widget .vn-cart-panel.sv-sheet-drag {
    transition: none;
  }

  /* Grabber estándar de bottom sheet iOS; ::before = primer item del flex column del panel. */
  .svc-widget .vn-cart-panel::before {
    content: "";
    display: block;
    flex: 0 0 auto;
    width: 44px;
    height: 4px;
    border-radius: 999px;
    background: #e4eae3;
    margin: 0 auto 10px;
  }
}

/* Sin soporte de backdrop-filter (navegadores viejos): esmeralda sólido legacy. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (max-width: 759.98px) {
    .svc-widget.svc-widget .vn-cart-bar {
      background: #00713a;
      border-top-color: rgba(255, 255, 255, 0.18);
    }
  }
}

/* Ajuste de accesibilidad iOS "reducir transparencia": sólido, sin blur. */
@media (prefers-reduced-transparency: reduce) and (max-width: 759.98px) {
  .svc-widget.svc-widget .vn-cart-bar {
    background: #00713a;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .svc-widget.svc-widget .vn-cart-bar {
    animation: none;
  }
}

/* ================================================================
   [UX-MOVIL] Targets táctiles >=44px (Apple HIG) y anti auto-zoom.
   Público rural en iPhone: dedos grandes, pantallas pequeñas —
   fallar el tap = reintentar con datos lentos. Solo <760px.
   ================================================================ */

@media (max-width: 759.98px) {
  /* Paginación del catálogo: los page-link de Bootstrap rondan 38px. */
  .pagination .page-link {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Enlaces del footer (Dejanos ayudarte / sucursales): texto suelto en <p>,
     el área de tap era solo la altura de la línea (~21px). */
  footer p > a,
  footer .text-dark {
    display: inline-block;
    padding: 8px 4px;
    margin: -4px 0;
  }

  /* Iconos sociales del footer: separación entre targets vecinos. */
  footer .list-inline-item a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  /* iOS hace auto-zoom al enfocar cualquier input con fuente <16px
     (buscador del navbar, cantidades del carrito, checkout). */
  input,
  select,
  textarea {
    font-size: 16px;
  }

  /* Sensación de app firme: el doble toque rápido en cualquier parte ya no hace zoom
     (y de paso desaparece el retraso de ~350ms del tap en Safari). manipulation y no
     `none`: el pellizco para ampliar sigue funcionando (accesibilidad para ver una
     etiqueta de producto en detalle). body * porque touch-action no se hereda. */
  body,
  body * {
    touch-action: manipulation;
  }
}

/* ================================================================
   [NAV-FIJA] El navbar de catálogo/detalle "bailaba" o desaparecía
   en Safari iOS: el centrado legacy (left:50% + translateX(-50%))
   sobre position:fixed se repinta tarde durante el scroll con rebote
   y el colapso de la barra de URL. Anclarlo por left/right elimina el
   transform y con él el temblor; el cliente rural nunca pierde el menú.
   Solo <760px; el desktop conserva el centrado original.
   ================================================================ */

@media (max-width: 759.98px) {
  /* .navbar.navbar...: (0,4,0) gana a la regla legacy (0,3,0) de style.css sin !important. */
  .navbar.navbar.fixed-top:not(.site-nav) {
    position: fixed;
    top: calc(8px + env(safe-area-inset-top, 0px));
    left: 8px;
    right: 8px;
    transform: none;
    width: auto;
    max-width: none;
    margin: 0;
    /* Más opaco que el 0.22 legacy: sobre fotos de producto claras el navbar casi
       "desaparecía" visualmente aunque siguiera ahí. */
    background: rgba(255, 255, 255, 0.78);
    z-index: 1250;
  }
}

/* ================================================================
   [TITULOS-CATALOGO] Nombres de producto completos en las tarjetas.
   El clamp legacy de 3 líneas (style.css .card-title) amputaba
   nombres largos sin elipsis: el cliente no sabía qué presentación
   estaba viendo ("Concentrado lechero 40kg" vs "...30kg"). En móvil
   la tarjeta crece con el nombre; CSS Grid iguala el alto de las dos
   tarjetas de la misma fila, así que la grilla no se desalinea.
   ================================================================ */

@media (max-width: 759.98px) {
  .product_container .card-title {
    display: block;
    -webkit-line-clamp: none;
    -webkit-box-orient: initial;
    max-height: none;
    min-height: 0;
    overflow: visible;
  }
}

/* ================================================================
   [SHARE-SHEET] Bottom sheet propio de "Compartir" en la ficha de
   producto (referencia Mercado Libre aportada por el cliente):
   opciones directas a las apps que su público usa (WhatsApp primero)
   + "Más" que abre el share nativo de iOS. Tap fuera = se despliega
   hacia abajo. Solo se abre en <760px (details.php lo decide por
   matchMedia); desktop conserva el flujo actual de copiar enlace.
   ================================================================ */

@media (max-width: 759.98px) {
  /* Encima del carrito glass y su panel (z 1200-1410 en venta-carrito.css). */
  .sv-share-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 20, 15, 0.45);
    z-index: 1500;
    animation: svShareFadeIn 180ms ease-out;
  }

  .sv-share-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1501;
    background: #fff;
    border-radius: 20px 20px 0 0;
    padding: 14px 18px calc(22px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -12px 40px rgba(10, 61, 35, 0.25);
    animation: svShareUp 260ms cubic-bezier(0.32, 0.72, 0, 1);
  }

  /* Cierre animado: JS espera animationend antes de poner hidden. */
  .sv-share-sheet.sv-share--cerrando {
    animation: svShareDown 200ms ease-in forwards;
  }

  .sv-share-backdrop.sv-share--cerrando {
    animation: svShareFadeOut 200ms ease-in forwards;
  }

  .sv-share-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
  }

  .sv-share-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #11221a;
    margin: 0;
  }

  .sv-share-close {
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: #4b5a52;
    font-size: 22px;
    line-height: 1;
    margin: -6px -10px -6px 0;
  }

  /* Fila deslizable como la referencia: caben 5 y el resto asoma (pista de que hay más). */
  .sv-share-grid {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  .sv-share-grid::-webkit-scrollbar {
    display: none;
  }

  .sv-share-opt {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    border: 0;
    background: transparent;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 0.78rem;
    color: #33413a;
    text-decoration: none;
    min-width: 60px;
  }

  .sv-share-ico {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    border: 1px solid #e2e8e2;
    background: #fff;
    color: #33413a;
  }

  /* Colores de marca de cada app: reconocimiento instantáneo, igual que la referencia. */
  .sv-share-ico--wa { background: #25d366; border-color: #25d366; color: #fff; }
  .sv-share-ico--fb { color: #1877f2; }
  .sv-share-ico--tg { color: #229ed9; }
  .sv-share-ico--x  { color: #11221a; }

  @keyframes svShareUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

  @keyframes svShareDown {
    from { transform: translateY(0); }
    to { transform: translateY(105%); }
  }

  @keyframes svShareFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes svShareFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
  }

  /* ==============================================================
     [QTY-SHEET] Selector de cantidad "Elige cantidad" (referencia
     Mercado Libre del cliente): fila "Cantidad: N" bajo el CTA que
     abre un bottom sheet con 1-6 unidades y "Más de 6" con entrada
     libre. Comprar 12 bultos pasa de doce toques en "+" a dos toques.
     Reutiliza la mecánica del share sheet (mismas clases de sheet).
     ============================================================== */

  .sv-qty-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid #dfe7df;
    border-radius: 14px;
    background: #f6f9f4;
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    color: #33413a;
  }

  .sv-qty-row strong {
    color: #0a3d23;
  }

  .sv-qty-row .fa-chevron-right {
    color: #7d8c83;
    font-size: 0.8rem;
  }

  .sv-qty-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 55vh;
    overflow-y: auto;
  }

  .sv-qty-list button {
    display: block;
    width: 100%;
    padding: 16px 8px;
    border: 0;
    border-bottom: 1px solid #eef2ee;
    background: transparent;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    text-align: center;
    color: #33413a;
  }

  .sv-qty-list li:last-child button {
    border-bottom: 0;
  }

  /* La cantidad ya elegida se resalta como en la referencia: confirma sin leer. */
  .sv-qty-list button.sv-qty--activa {
    background: #f2f6f1;
    font-weight: 700;
    color: #0a3d23;
  }

  .sv-qty-custom {
    padding-top: 4px;
  }

  .sv-qty-custom input {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #009546;
    border-radius: 12px;
    font-family: 'Poppins', sans-serif;
    font-size: 16px; /* evita el auto-zoom de iOS al enfocar */
    margin-bottom: 14px;
  }

  .sv-qty-aplicar {
    width: 100%;
    min-height: 48px;
    border: 0;
    border-radius: 12px;
    background: #00713a;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 600;
  }

  .sv-qty-aplicar:disabled {
    background: #e4e8e4;
    color: #9aa59d;
  }

  /* ==============================================================
     [NAV-GESTOS] Transiciones de navegación estilo app (js/mobile-nav.js):
     entrar = página desliza desde la derecha; swipe desde el borde
     izquierdo = volver. El fondo oscuro bajo la página que se desliza
     da la profundidad de "tarjeta encima" de las apps nativas.
     ============================================================== */

  html.sv-nav-enter {
    background: #11221a;
    overflow-x: hidden;
  }

  html.sv-nav-enter body {
    animation: svNavIn 320ms cubic-bezier(0.32, 0.72, 0, 1);
  }

  html.sv-nav-drag,
  html.sv-nav-anim {
    background: #11221a;
    overflow-x: hidden;
  }

  html.sv-nav-drag body {
    transition: none;
    will-change: transform;
    box-shadow: -18px 0 40px rgba(0, 0, 0, 0.35);
  }

  html.sv-nav-anim body {
    transition: transform 240ms cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: -18px 0 40px rgba(0, 0, 0, 0.35);
  }

  @keyframes svNavIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
  }

  @media (prefers-reduced-motion: reduce) {
    html.sv-nav-enter body {
      animation: none;
    }

    html.sv-nav-anim body {
      transition: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .sv-share-sheet,
    .sv-share-backdrop,
    .sv-share-sheet.sv-share--cerrando,
    .sv-share-backdrop.sv-share--cerrando {
      animation: none;
    }
  }
}
