/* =====================================================================
   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 ---------- */
.fab-carrito{position:absolute;right:18px;bottom:86px;width:46px;height:46px;border-radius:50%;background:#E60012;color:white;display:flex;align-items:center;justify-content:center;font-size:17px;text-decoration:none;box-shadow:0 6px 16px rgba(230,0,18,0.28);z-index:5;}
.fab-carrito .badge{position:absolute;top:-4px;right:-4px;background:#1b1b1f;color:white;font-size:9px;font-weight:bold;border-radius:var(--radio-pill);min-width:15px;height:15px;display:flex;align-items:center;justify-content:center;padding:0 3px;border:2px solid #fff;}

/* ---------- 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;
        padding-bottom:env(safe-area-inset-bottom);
    }
}
@media (min-width:481px) and (max-width:1024px){
    .telefono{width:460px;}
}