/* =====================================================================
   Base compartida "estilo iOS" para la app de comprador (maqueta .telefono).
   Cacheable — no duplicar este bloque dentro de cada página.
   ===================================================================== */

:root{
    --radio-chico: 10px;
    --radio-medio: 14px;
    --radio-grande: 20px;
    --radio-pill: 999px;
}

*{margin:0;padding:0;box-sizing:border-box;font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif;}
::-webkit-scrollbar{display:none;}
*{scrollbar-width:none;-ms-overflow-style:none;}
body{background:#e8e8ea;display:flex;justify-content:center;align-items:center;min-height:100vh;padding:20px 0;}
.telefono{width:390px;min-height:844px;max-height:844px;background:#ffffff;border-radius:35px;color:#1b1b1f;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 12px 36px rgba(0,0,0,0.12);position:relative;}

h1,h2,h3{font-weight:700;letter-spacing:-0.01em;}
.hint,.vacio,span{letter-spacing:0;}

/* ---------- Barra inferior tipo tab bar de iOS (traslúcida) ---------- */
.bottom-nav{
    display:flex;justify-content:space-around;align-items:center;
    background:rgba(255,255,255,0.85);
    -webkit-backdrop-filter:blur(20px);
    backdrop-filter:blur(20px);
    border-top:1px solid rgba(0,0,0,0.06);
    padding:12px 10px;flex-shrink:0;
}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;color:#a3a3a8;font-size:10.5px;font-weight:600;}
.nav-item i{font-size:18px;}
.nav-item.activo{color:#E60012;}

/* ---------- Botón flotante de carrito (píldora, réplica exacta de FabCarrito de la app) ---------- */
.fab-carrito{position:absolute;right:18px;bottom:86px;display:flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border-radius:var(--radio-pill);background:#E60012;color:white;text-decoration:none;box-shadow:0 4px 12px rgba(230,0,18,0.28);z-index:5;}
.fab-carrito .icono-wrap{position:relative;width:15px;height:15px;display:flex;align-items:center;justify-content:center;font-size:15px;}
.fab-carrito .badge{position:absolute;top:-5px;right:-6px;background:#1b1b1f;color:white;font-size:8px;font-weight:bold;border-radius:var(--radio-pill);min-width:12px;height:12px;display:flex;align-items:center;justify-content:center;padding:0 2px;border:1.5px solid #fff;}
.fab-carrito .texto{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;}
.fab-carrito .texto .cantidad-txt{font-size:9px;font-weight:600;}
.fab-carrito .texto .subtotal-txt{font-size:12px;font-weight:bold;}

/* ---------- Lista agrupada estilo iOS (Ajustes/Perfil/Direcciones) ---------- */
.lista-ios{background:#ffffff;border-radius:var(--radio-medio);overflow:hidden;border:1px solid #f0f0f0;}
.fila-ios{display:flex;align-items:center;gap:12px;padding:13px 16px;text-decoration:none;color:#1b1b1f;border-bottom:1px solid #f0f0f0;}
.fila-ios:last-child{border-bottom:none;}

/* ---------- Responsive: en un celular real la tarjeta ES la pantalla ---------- */
html, body{overflow-x:hidden;}
@media (max-width: 480px){
    body{padding:0;align-items:stretch;}
    .telefono{
        width:100%;
        min-height:100vh;
        min-height:100dvh;
        max-height:none;
        border-radius:0;
        box-shadow:none;
        /* El contenido puede crecer más alto que la pantalla, así que la
           barra inferior (al final del flujo normal) quedaba empujada
           fuera de la vista — había que deslizar toda la página para
           verla. Se fija al fondo de la pantalla real y se le suma a
           .telefono el espacio que la barra ya no reserva en el flujo. */
        padding-bottom:calc(70px + env(safe-area-inset-bottom));
    }
    .bottom-nav{
        position:fixed;left:0;right:0;bottom:0;
        padding-bottom:calc(12px + env(safe-area-inset-bottom));
        z-index:10;
    }
}
@media (min-width:481px) and (max-width:1024px){
    .telefono{width:460px;}
}