/* =====================================================================
   Página pública · Mayorista Express (mismo estilo que el panel)
   ===================================================================== */
:root { --azul:#13203a; --azul-2:#1f3157; --naranjo:#ff8a1f; --verde:#0f5c3f; --verde-claro:#e8efe9; --fondo:#f4f6fa;
        --blanco:#fff; --borde:#e3e7ef; --texto:#13203a; --suave:#6b778c; --rojo:#c8102e; --ok:#1f8a4c; --ambar:#b26a00; --alto-cabecera:58px; }
* { box-sizing: border-box; }
body { margin:0; background:var(--fondo); color:var(--texto); font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
body.con-menu { padding-bottom: calc(72px + env(safe-area-inset-bottom,0px)); }
a { color: var(--azul); }
h1 { font-size: 22px; margin: 0 0 10px; line-height:1.2; }
h2 { font-size: 14px; margin: 18px 0 6px; color: var(--suave); text-transform: uppercase; letter-spacing:.5px; }
p { margin: 6px 0; }
.suave { color: var(--suave); font-size: 13px; }
.centrado { text-align:center; }
.consultar { color: var(--ambar); }

/* cabecera azul */
.cabecera { background: var(--azul); color:#fff; position: sticky; top:0; z-index:20; padding: env(safe-area-inset-top,0px) 14px 0; }
.cabecera-fila { min-height: var(--alto-cabecera); display:flex; align-items:center; justify-content:space-between; gap:10px; }
.marca { color:#fff; text-decoration:none; font-weight:800; letter-spacing:.3px; display:flex; align-items:center; gap:10px; font-size:16px; }
.marca svg { width:28px; height:28px; color: var(--naranjo); flex:none; }
.marca small { display:block; font-weight:500; font-size:10px; opacity:.8; letter-spacing:.5px; }
.buscar-fila { padding: 0 0 12px; margin:0; }
.buscar-fila .buscar { width:100%; background: var(--azul-2); color:#fff; border:0; border-radius:12px; padding:11px 14px; font:inherit; font-size:15px; }
.buscar-fila .buscar::placeholder { color:#c8d2e6; }

/* chips verdes fijos bajo la cabecera */
.subbarra { position: sticky; top: calc(var(--alto-cabecera) + 46px + env(safe-area-inset-top,0px)); z-index:15; background: var(--blanco); border-bottom:1px solid var(--borde); display:flex; gap:8px; padding:10px 14px; overflow-x:auto; scrollbar-width:none; }
.subbarra::-webkit-scrollbar { display:none; }
.chip { white-space:nowrap; padding:8px 14px; border-radius:999px; font-size:13px; font-weight:600; background: var(--verde-claro); color: var(--verde); text-decoration:none; }
.chip.activo { background: var(--verde); color:#fff; }

/* contenido */
.contenido { padding: 12px 14px; max-width: 1100px; margin: 0 auto; }
.tarjeta { background: var(--blanco); border:1px solid var(--borde); border-radius:14px; padding:16px; margin-bottom:12px; }
.tarjeta.vacio { text-align:center; color: var(--suave); padding:30px 14px; }
.angosto { max-width: 520px; margin-left:auto; margin-right:auto; }
.flash { background: var(--verde-claro); color: var(--verde); border-radius:10px; padding:10px 12px; font-weight:600; margin-bottom:10px; }
.flash.error { background:#fde8ec; color: var(--rojo); font-weight:500; }
.aviso-cuenta { background:#fff1e3; color:#7a3f00; border-radius:10px; padding:12px; margin:12px 0; }
.aviso-cuenta.ok { background: var(--verde-claro); color: var(--verde); }

/* portada */
.portada { min-height: calc(100vh - var(--alto-cabecera) - 40px); display:flex; align-items:center; justify-content:center; }
.portada-caja { max-width: 460px; text-align:center; }
.portada h1 { font-size: 30px; margin-bottom: 12px; }
.portada p { color: var(--suave); font-size: 15px; margin-bottom: 18px; }
.portada .btn { margin-bottom: 10px; }

/* botones y formularios */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid var(--borde); background: var(--blanco); color: var(--texto); font:inherit; font-weight:700; padding:11px 16px; border-radius:12px; text-decoration:none; cursor:pointer; min-height:44px; }
.btn.principal { background: var(--naranjo); border-color: var(--naranjo); color: var(--azul); }
.btn.grande { width:100%; font-size:16px; padding:14px; }
.btn.chico { padding:7px 12px; min-height:36px; font-size:13px; border-radius:10px; }
.formulario label { display:block; font-weight:600; margin:10px 0 4px; font-size:14px; }
input, textarea { width:100%; font:inherit; font-size:16px; padding:11px 12px; border:1px solid var(--borde); border-radius:10px; background: var(--blanco); color: var(--texto); min-height:44px; }
.formulario .btn.grande { margin-top: 16px; }
.tabla { width:100%; border-collapse:collapse; font-size:14px; margin-top:8px; }
.tabla td { padding:7px 4px; border-top:1px solid var(--borde); vertical-align:top; }

/* rejilla del catálogo */
.rejilla { display:grid; grid-template-columns: repeat(2, 1fr); gap:12px; }
@media (min-width: 560px) { .rejilla { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .rejilla { grid-template-columns: repeat(4, 1fr); } }
.tarjeta-producto { background: var(--blanco); border:1px solid var(--borde); border-radius:14px; overflow:hidden; text-decoration:none; color: var(--texto); display:flex; flex-direction:column; }
.tarjeta-producto img, .sin-foto { width:100%; aspect-ratio:1; object-fit:contain; background:#fff; }
.sin-foto { display:flex; align-items:center; justify-content:center; color: var(--suave); font-size:12px; background: var(--fondo); }
.sin-foto.mini { width:64px; height:64px; border-radius:10px; }
.tarjeta-producto .info { padding:10px 10px 12px; display:flex; flex-direction:column; gap:3px; }
.tarjeta-producto .nombre { font-size:13px; line-height:1.3; font-weight:600; min-height:34px; }
.tarjeta-producto .precio { font-size:17px; font-weight:800; color: var(--azul); }
.tarjeta-producto .min { font-size:11px; color: var(--suave); }
.disp { font-size:12px; font-weight:700; }
.disp.ok { color: var(--ok); } .disp.consultar { color: var(--ambar); }

/* ficha */
.ficha { display:grid; grid-template-columns: 1fr; gap:16px; }
@media (min-width: 760px) { .ficha { grid-template-columns: 1fr 1fr; } }
.foto-grande, .sin-foto.grande { width:100%; aspect-ratio:1; object-fit:contain; background:#fff; border:1px solid var(--borde); border-radius:14px; }
.miniaturas { display:flex; gap:8px; margin-top:8px; }
.miniaturas img { width:64px; height:64px; object-fit:contain; border:1px solid var(--borde); border-radius:8px; background:#fff; cursor:pointer; }
.ficha-datos { background: var(--blanco); border:1px solid var(--borde); border-radius:14px; padding:16px; }
.precio-grande { font-size:28px; font-weight:800; color: var(--azul); margin:8px 0; }
.agregar label { display:block; font-weight:600; margin:14px 0 4px; }
.agregar input { max-width: 160px; }
.agregar .btn { margin-top: 12px; }

/* carrito */
.lista { display:flex; flex-direction:column; gap:10px; }
.fila-carrito { display:flex; gap:12px; align-items:flex-start; }
.fila-carrito img { width:64px; height:64px; object-fit:contain; border:1px solid var(--borde); border-radius:10px; background:#fff; flex:none; }
.fila-carrito .info { flex:1; min-width:0; }
.fila-carrito .nombre { font-weight:600; text-decoration:none; }
.fila-carrito .subtotal { font-weight:800; flex:none; }
.cantidad-fila { display:flex; gap:6px; margin-top:6px; align-items:center; }
.cantidad-fila input { width:80px; min-height:36px; padding:6px 8px; }
.total-fila { display:flex; justify-content:space-between; font-size:20px; margin-bottom:6px; }

/* menú inferior (verde activo) */
.menu-abajo { position:fixed; left:0; right:0; bottom:0; z-index:20; background: var(--blanco); border-top:1px solid var(--borde); display:flex; justify-content:space-around; padding:8px 4px calc(10px + env(safe-area-inset-bottom,0px)); }
.menu-abajo a { display:flex; flex-direction:column; align-items:center; gap:3px; font-size:11px; font-weight:600; color: var(--suave); text-decoration:none; position:relative; min-width:64px; }
.menu-abajo a svg { width:24px; height:24px; }
.menu-abajo a.activo { color: var(--verde); }
.burbuja { position:absolute; top:-4px; right:6px; background: var(--naranjo); color: var(--azul); border-radius:999px; font-size:11px; padding:1px 7px; }