/* ===== Catálogo público (usa --brand y --brand2 definidos por empresa) ===== */
:root { --brand:#0d6efd; --brand2:#6c757d; --radius:16px; }
body { font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif; }
body.tienda { background:#f6f7fb; }

.btn-brand { background:var(--brand); border-color:var(--brand); color:#fff; }
.btn-brand:hover, .btn-brand:focus { background:color-mix(in srgb,var(--brand) 85%,#000); border-color:transparent; color:#fff; }
.text-brand { color:var(--brand)!important; }

.nav-tienda { background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-bottom:1px solid rgba(0,0,0,.06); }
.banner-campana { background:linear-gradient(90deg,var(--brand2),var(--brand)); color:#fff; font-size:.92rem; }

.hero-empresa { background:linear-gradient(135deg,var(--brand) 0%,color-mix(in srgb,var(--brand) 55%,var(--brand2)) 60%,var(--brand2) 130%); color:#fff; padding:4.5rem 0 6.5rem; position:relative; overflow:hidden; }
.hero-empresa::after { content:''; position:absolute; width:520px; height:520px; border-radius:50%; background:rgba(255,255,255,.08); right:-140px; top:-180px; }
.hero-pill { background:rgba(255,255,255,.18); font-weight:500; }
.hero-stats .stat { background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); border-radius:var(--radius); padding:1.1rem; display:flex; flex-direction:column; backdrop-filter:blur(6px); }
.hero-stats .stat i { font-size:1.4rem; opacity:.9; } .hero-stats .stat b { font-size:1.35rem; margin-top:.3rem; } .hero-stats .stat span { opacity:.8; font-size:.85rem; }

.filtros-bar { margin-top:-3.5rem; position:relative; z-index:2; border-radius:var(--radius); }
.cat-chips { display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.25rem; scrollbar-width:thin; }
.cat-chip { border:1px solid #e3e5ec; background:#fff; border-radius:999px; padding:.42rem .95rem; white-space:nowrap; font-size:.9rem; transition:.15s; }
.cat-chip:hover { border-color:var(--brand); color:var(--brand); }
.cat-chip.active { background:var(--brand); border-color:var(--brand); color:#fff; }
.cat-chip.promo { border-color:#dc3545; color:#dc3545; } .cat-chip.promo.active { background:#dc3545; color:#fff; }

.prod-card { border:0; border-radius:var(--radius); overflow:hidden; box-shadow:0 2px 10px rgba(20,20,50,.06); transition:transform .18s, box-shadow .18s; height:100%; }
.prod-card:hover { transform:translateY(-4px); box-shadow:0 12px 28px rgba(20,20,50,.12); }
.prod-card .card-img-top { aspect-ratio:4/3; object-fit:cover; background:#eee; }
.prod-card .precio { font-weight:800; font-size:1.15rem; color:var(--brand); }
.prod-card .badge-pos { position:absolute; top:.6rem; left:.6rem; display:flex; flex-direction:column; gap:.3rem; align-items:flex-start; }
.prod-card .nombre { font-size:.95rem; font-weight:600; line-height:1.3; min-height:2.6em; color:#1d1f2a; }
.stock-badge { font-size:.75rem; transition:background .4s; }
.stock-flash { animation:flash 1.2s ease; }
@keyframes flash { 0%{box-shadow:0 0 0 0 rgba(255,193,7,.9)} 100%{box-shadow:0 0 0 14px rgba(255,193,7,0)} }
.skeleton .ratio { background:linear-gradient(90deg,#eee,#f6f6f6,#eee); background-size:200% 100%; animation:sk 1.2s infinite; }
.skeleton p { height:12px; background:#eee; border-radius:6px; }
@keyframes sk { to { background-position:-200% 0; } }
.live-dot, .dot-online { display:inline-block; width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 0 rgba(34,197,94,.7); animation:pulse 2s infinite; vertical-align:middle; }
@keyframes pulse { 70%{box-shadow:0 0 0 8px rgba(34,197,94,0)} 100%{box-shadow:0 0 0 0 rgba(34,197,94,0)} }
.precio-grande { font-size:2.2rem; font-weight:800; color:var(--brand); line-height:1; }

.info-tabs .nav-link { color:#444; border-radius:999px; white-space:nowrap; }
.info-tabs .nav-link.active { background:var(--brand); color:#fff; }
.footer-tienda { background:#14151c; color:#e9e9ef; }

/* Botones flotantes */
.fab-stack { position:fixed; right:18px; bottom:18px; display:flex; flex-direction:column; gap:12px; z-index:1050; }
.fab { width:58px; height:58px; border-radius:50%; border:0; display:flex; align-items:center; justify-content:center; font-size:1.6rem; color:#fff; box-shadow:0 8px 22px rgba(0,0,0,.25); position:relative; text-decoration:none; transition:transform .15s; }
.fab:hover { transform:scale(1.07); color:#fff; }
.fab-wa { background:#25d366; } .fab-ia { background:linear-gradient(135deg,var(--brand),var(--brand2)); }
.fab-label { position:absolute; right:68px; background:#1d1f2a; color:#fff; font-size:.78rem; padding:.3rem .6rem; border-radius:8px; white-space:nowrap; opacity:0; pointer-events:none; transition:.15s; }
.fab:hover .fab-label { opacity:1; }
.carrito-fab { position:fixed; left:18px; bottom:18px; z-index:1040; border-radius:999px; padding:.7rem 1.1rem; }

/* Chat IA */
.chat-ia { position:fixed; right:18px; bottom:92px; width:min(380px,calc(100vw - 36px)); height:min(560px,calc(100vh - 120px)); background:#fff; border-radius:20px; display:flex; flex-direction:column; overflow:hidden; z-index:1060; }
.chat-ia[hidden] { display:none; }
.chat-head { background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#fff; padding:.8rem 1rem; display:flex; align-items:center; gap:.7rem; }
.chat-body { flex:1; overflow-y:auto; padding:1rem; background:#f6f7fb; display:flex; flex-direction:column; gap:.6rem; }
.msg { max-width:85%; padding:.6rem .85rem; border-radius:14px; font-size:.92rem; white-space:pre-line; line-height:1.45; }
.msg.bot { background:#fff; border:1px solid #eceef3; align-self:flex-start; border-bottom-left-radius:4px; }
.msg.user { background:var(--brand); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.msg .prods { display:flex; flex-direction:column; gap:.3rem; margin-top:.5rem; }
.msg .prods a { font-size:.82rem; background:#f2f4f8; border-radius:8px; padding:.35rem .5rem; text-decoration:none; color:#222; }
.typing span { display:inline-block; width:6px; height:6px; background:#aaa; border-radius:50%; margin:0 1px; animation:ty 1s infinite; }
.typing span:nth-child(2){animation-delay:.15s} .typing span:nth-child(3){animation-delay:.3s}
@keyframes ty { 50% { transform:translateY(-4px); opacity:.5; } }
.chips { display:flex; flex-wrap:wrap; gap:.4rem; }
.chip-q { border:1px solid var(--brand); color:var(--brand); background:#fff; border-radius:999px; font-size:.8rem; padding:.25rem .65rem; }
.chat-form { display:flex; gap:.5rem; padding:.7rem; border-top:1px solid #eee; }
.chat-wa { text-align:center; font-size:.82rem; padding:.45rem; background:#effcf3; color:#128c4a; text-decoration:none; }

/* Portal demo */
body.portal { background:radial-gradient(circle at 10% 0%,#ede9fe 0,transparent 40%),radial-gradient(circle at 90% 10%,#ffedd5 0,transparent 40%),#fafafa; min-height:100vh; }
.text-gradient { background:linear-gradient(90deg,#7c3aed,#ea580c); -webkit-background-clip:text; background-clip:text; color:transparent; }
.portal-card { border-radius:22px; overflow:hidden; transition:transform .2s; } .portal-card:hover { transform:translateY(-6px); }
.portal-top { background:linear-gradient(135deg,var(--c1),var(--c2)); }

@media (max-width:576px) { .hero-empresa { padding:3rem 0 5.5rem; } .display-5 { font-size:2rem; } }
.form-check-input:checked { background-color:var(--brand); border-color:var(--brand); }

.sub-chips { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.sub-chips[hidden] { display:none; }
.sub-chip { border:1px dashed color-mix(in srgb,var(--brand) 50%,#ccc); background:#fff; border-radius:999px; padding:.25rem .75rem; font-size:.84rem; }
.sub-chip.active { background:color-mix(in srgb,var(--brand) 14%,#fff); border-style:solid; border-color:var(--brand); color:#1d1f2a; font-weight:600; }
.mayoreo-band { background:linear-gradient(110deg,var(--brand2),color-mix(in srgb,var(--brand2) 70%,var(--brand))); color:#fff; border-radius:var(--radius); padding:1.6rem 1.8rem; }
.precio-iva { font-size:.72rem; color:#6b6f80; font-weight:500; }
.navbar-brand .logo-nav { height:42px; width:auto; max-width:220px; object-fit:contain; }
.qr-box{width:200px;max-width:100%;background:#fff;padding:8px;border-radius:12px;border:1px solid #e3e5ec}.qr-box svg{width:100%;height:auto;display:block}
/* Seguimiento de pedido */
.seg-pasos{display:flex;list-style:none;padding:0;margin:0;gap:.25rem;overflow-x:auto}
.seg-pasos li{flex:1;min-width:84px;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;font-size:.82rem;color:#8a8f9e}
.seg-pasos li::before{content:'';position:absolute;top:17px;left:-50%;width:100%;height:3px;background:#e3e5ec;z-index:0}
.seg-pasos li:first-child::before{display:none}
.seg-pasos .punto{width:36px;height:36px;border-radius:50%;background:#e3e5ec;display:flex;align-items:center;justify-content:center;font-weight:700;z-index:1;margin-bottom:.35rem}
.seg-pasos li.hecho,.seg-pasos li.actual{color:#1d1f2a}
.seg-pasos li.hecho::before,.seg-pasos li.actual::before{background:var(--brand)}
.seg-pasos li.hecho .punto{background:var(--brand);color:#fff}
.seg-pasos li.actual .punto{background:#fff;border:3px solid var(--brand);color:var(--brand)}
.seg-hist li{padding:.35rem 0;border-bottom:1px dashed #e3e5ec}