/* ============================================================
   Tienda Remera - Design System v2
   "Modern Mobile Commerce + Social Commerce + Smart Island"
   Light theme, mobile-first PWA, premium app feel
   ============================================================ */

/* --- Reset --- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent; scroll-behavior:smooth; }
body {
    background:#F7F7F7; color:#111111;
    font-family:'Inter',system-ui,-apple-system,sans-serif;
    font-size:15px; line-height:1.5;
    min-height:100vh; min-height:100dvh;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input,textarea,select { font-family:inherit; font-size:16px; }

/* --- Scrollbar --- */
::-webkit-scrollbar { width:0; height:0; }
.hide-scrollbar::-webkit-scrollbar { display:none; }
.hide-scrollbar { -ms-overflow-style:none; scrollbar-width:none; }

/* --- Typography --- */
.h1 { font-size:28px; font-weight:700; line-height:1.2; letter-spacing:-0.02em; }
.h2 { font-size:22px; font-weight:700; line-height:1.25; letter-spacing:-0.01em; }
.h3 { font-size:18px; font-weight:600; line-height:1.3; }
.body { font-size:15px; font-weight:400; line-height:1.5; }
.small { font-size:13px; font-weight:400; line-height:1.4; }
.caption { font-size:11px; font-weight:500; line-height:1.3; letter-spacing:0.02em; }
.text-bold { font-weight:600; }
.text-muted { color:#6B7280; }
.text-faint { color:#9CA3AF; }
.text-primary { color:#111111; }
.text-brand { color:#111111; }
.uppercase { text-transform:uppercase; }
.tracking-wide { letter-spacing:0.05em; }
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* --- Color tokens --- */
.bg-app { background:#F7F7F7; }
.bg-surface { background:#FFFFFF; }
.bg-elevated { background:#FFFFFF; }
.bg-muted { background:#F3F4F6; }
.bg-dark { background:#111111; color:#FFFFFF; }
.border-line { border:1px solid #E5E7EB; }
.border-line-t { border-top:1px solid #E5E7EB; }
.border-line-b { border-bottom:1px solid #E5E7EB; }

/* --- Layout --- */
.app-wrap { width:100%; max-width:480px; margin:0 auto; min-height:100vh; min-height:100dvh; background:#F7F7F7; position:relative; }
.app-wrap-wide { width:100%; max-width:1200px; margin:0 auto; }
.pb-nav { padding-bottom:calc(72px + env(safe-area-inset-bottom)); }
.pb-cta { padding-bottom:calc(140px + env(safe-area-inset-bottom)); }
/* Espacio reservado para el header fijo.
   --header-h la mide el JS al cargar (app.js) porque el header cambia de alto
   segun la pantalla: el del catalogo trae buscador y el del panel no.
   El valor por defecto cubre el caso sin JS. */
.pt-header { padding-top:calc(var(--header-h, calc(92px + env(safe-area-inset-top))) + 12px); }
.product-gallery { position:relative; }
.safe-t { padding-top:env(safe-area-inset-top); }
.safe-b { padding-bottom:env(safe-area-inset-bottom); }
.flex { display:flex; }
.flex-col { display:flex; flex-direction:column; }
.flex-1 { flex:1; }
.items-center { align-items:center; }
.items-end { align-items:flex-end; }
.justify-between { justify-content:space-between; }
.justify-center { justify-content:center; }
.gap-1 { gap:4px; } .gap-2 { gap:8px; } .gap-3 { gap:12px; } .gap-4 { gap:16px; } .gap-5 { gap:20px; } .gap-6 { gap:24px; }
.p-2 { padding:8px; } .p-3 { padding:12px; } .p-4 { padding:16px; } .p-5 { padding:20px; } .p-6 { padding:24px; }
.px-4 { padding-left:16px; padding-right:16px; } .px-5 { padding-left:20px; padding-right:20px; }
.py-2 { padding-top:8px; padding-bottom:8px; } .py-3 { padding-top:12px; padding-bottom:12px; } .py-4 { padding-top:16px; padding-bottom:16px; }
.mt-2 { margin-top:8px; } .mt-3 { margin-top:12px; } .mt-4 { margin-top:16px; } .mt-5 { margin-top:20px; } .mt-6 { margin-top:24px; }
.mb-2 { margin-bottom:8px; } .mb-3 { margin-bottom:12px; } .mb-4 { margin-bottom:16px; } .mb-5 { margin-bottom:20px; } .mb-6 { margin-bottom:24px; }
.w-full { width:100%; }
.text-center { text-align:center; }
.text-right { text-align:right; }
.hidden { display:none !important; }
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }

/* --- Header (compact, app-style) --- */
.app-header {
    position:fixed; top:0; left:50%; transform:translateX(-50%);
    width:100%; max-width:480px; z-index:40;
    background:rgba(255,255,255,0.92);
    backdrop-filter:blur(16px) saturate(180%);
    -webkit-backdrop-filter:blur(16px) saturate(180%);
    transition:transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.3s;
    padding-top:env(safe-area-inset-top);
}
.app-header.hidden-header { transform:translateX(-50%) translateY(-100%); opacity:0; }
.app-header-top { display:flex; align-items:center; justify-content:space-between; padding:8px 16px; height:44px; }
.app-header-logo { font-weight:800; font-size:20px; letter-spacing:-0.03em; color:#111; }
.app-header-logo span { color:#6B21A8; }
.app-header-brand-image { display:block; width:auto; height:auto; max-width:168px; max-height:30px; object-fit:contain; }
.panel-header-brand { display:flex; align-items:center; gap:8px; min-width:0; font-size:16px; }
.panel-header-brand .app-header-brand-image { max-width:90px; max-height:26px; }
.panel-header-brand > span { color:#111; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.app-header-actions { display:flex; align-items:center; gap:4px; }
.app-header-search { padding:0 16px 10px; }
.app-header-search input {
    width:100%; height:38px; background:#F3F4F6; border:none;
    border-radius:12px; padding:0 14px 0 38px;
    font-size:14px; color:#111; transition:background 0.2s;
}
.app-header-search input:focus { outline:none; background:#E5E7EB; }
.app-header-search-wrap { position:relative; }
.app-header-search-wrap .material-symbols-outlined {
    position:absolute; left:12px; top:50%; transform:translateY(-50%);
    font-size:18px; color:#9CA3AF;
}

/* --- Bottom Navigation (glass, blur) --- */
/* --- Contacto flotante (WhatsApp / Instagram) ---
   Van uno a cada lado, por encima de la barra inferior. El contenedor no
   intercepta el toque (pointer-events:none) para no tapar el contenido:
   sólo los botones son tocables. */
.social-fab-wrap {
    position:fixed; z-index:44; pointer-events:none;
    left:50%; transform:translateX(-50%);
    width:100%; max-width:480px;
    bottom:calc(84px + env(safe-area-inset-bottom));
    display:flex; justify-content:space-between;
    padding:0 14px;
}
/* En la ficha de producto y el carrito hay una barra fija de compra: los
   botones suben para no taparle el "Agregar" ni el "Comprar". */
.social-fab-wrap.social-fab-alto { bottom:calc(158px + env(safe-area-inset-bottom)); }
.social-fab {
    pointer-events:auto;
    width:52px; height:52px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:#FFF; box-shadow:0 6px 20px rgba(0,0,0,0.22);
    transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.social-fab:active { transform:scale(0.92); }
@media (hover:hover) {
    .social-fab:hover { transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,0.28); }
}
/* Si sólo hay uno cargado, igual queda pegado a su lado */
.social-fab-ig { background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); margin-right:auto; }
.social-fab-wa { background:#25D366; margin-left:auto; }
@media (prefers-reduced-motion:reduce) {
    .social-fab { transition:none; }
}

.bottom-nav {
    position:fixed; bottom:0; left:50%; transform:translateX(-50%);
    width:100%; max-width:480px; z-index:45;
    background:rgba(255,255,255,0.88);
    backdrop-filter:blur(20px) saturate(180%);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    border-top:0.5px solid rgba(0,0,0,0.08);
    display:flex; justify-content:space-around; align-items:center;
    padding:6px 0 calc(6px + env(safe-area-inset-bottom));
    min-height:56px;
}
.bottom-nav a, .bottom-nav button {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:2px; flex:1; padding:4px 0;
    color:#9CA3AF; font-size:10px; font-weight:500;
    transition:color 0.2s, transform 0.1s;
    min-height:48px; min-width:44px;
}
.bottom-nav a.active, .bottom-nav button.active { color:#111; }
.bottom-nav a.active .material-symbols-outlined, .bottom-nav button.active .material-symbols-outlined {
    font-variation-settings:'FILL' 1;
}
.bottom-nav a:active, .bottom-nav button:active { transform:scale(0.92); }
.bottom-nav .material-symbols-outlined { font-size:24px; }
/* Center special button (categorías - circular accent) */
.bottom-nav .nav-center {
    width:44px; height:44px; border-radius:50%;
    background:#111; color:#FFF; margin-top:-20px;
    box-shadow:0 4px 12px rgba(0,0,0,0.2);
    flex:0 0 auto;
}
.bottom-nav .nav-center .material-symbols-outlined { font-size:22px; color:#FFF; }
.bottom-nav .nav-center.active { background:#6B21A8; }

/* --- SMART ISLAND --- */
.smart-island {
    position:fixed; top:calc(env(safe-area-inset-top) + 8px); left:50%;
    transform:translateX(-50%) translateY(-120%);
    z-index:60; width:calc(100% - 24px); max-width:360px;
    background:#111; color:#FFF;
    border-radius:28px; padding:10px 16px;
    display:flex; align-items:center; gap:10px;
    box-shadow:0 8px 32px rgba(0,0,0,0.2);
    opacity:0; transition:all 0.35s cubic-bezier(0.34,1.56,0.64,1);
    cursor:pointer; min-height:44px;
}
.smart-island.show { transform:translateX(-50%) translateY(0); opacity:1; }
.smart-island.expanded {
    border-radius:24px; padding:14px 16px;
    flex-direction:column; align-items:stretch; gap:8px;
}
.smart-island-icon {
    width:28px; height:28px; border-radius:50%;
    background:rgba(255,255,255,0.15);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
}
.smart-island-icon .material-symbols-outlined { font-size:16px; color:#FFF; }
.smart-island-icon.success { background:#22C55E; }
.smart-island-icon.success .material-symbols-outlined { color:#FFF; }
.smart-island-icon.cart { background:#6B21A8; }
.smart-island-content { flex:1; min-width:0; }
.smart-island-title { font-size:13px; font-weight:600; line-height:1.3; }
.smart-island-sub { font-size:11px; color:rgba(255,255,255,0.7); line-height:1.3; margin-top:1px; }
.smart-island-action {
    font-size:12px; font-weight:600; color:#A78BFA;
    display:flex; align-items:center; gap:2px; flex-shrink:0;
}
.smart-island.expanded .smart-island-main { display:flex; align-items:center; gap:10px; }
.smart-island-close {
    width:24px; height:24px; border-radius:50%;
    background:rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
}
.smart-island-close .material-symbols-outlined { font-size:14px; color:rgba(255,255,255,0.6); }

/* --- Buttons --- */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    height:48px; padding:0 20px; border-radius:14px;
    font-size:15px; font-weight:600; font-family:'Inter',sans-serif;
    transition:transform 0.15s, background 0.2s, opacity 0.2s;
    border:none; white-space:nowrap; min-height:44px;
}
.btn:active { transform:scale(0.97); }
.btn-primary { background:#111; color:#FFF; }
.btn-primary:active { background:#333; }
.btn-brand { background:#6B21A8; color:#FFF; }
.btn-brand:active { background:#7C3AED; }
.btn-secondary { background:#F3F4F6; color:#111; }
.btn-secondary:active { background:#E5E7EB; }
.btn-outline { background:transparent; color:#111; border:1.5px solid #E5E7EB; }
.btn-outline:active { background:#F9FAFB; }
.btn-ghost { background:transparent; color:#6B7280; }
.btn-danger { background:#FEF2F2; color:#DC2626; }
.btn-success { background:#22C55E; color:#FFF; }
.btn-sm { height:36px; padding:0 14px; font-size:13px; border-radius:10px; }
.btn-lg { height:54px; font-size:16px; border-radius:16px; }
.btn-block { display:flex; width:100%; }
.btn:disabled { opacity:0.5; }
.btn .material-symbols-outlined { font-size:20px; }

/* --- FAB --- */
.fab {
    position:fixed; bottom:calc(72px + env(safe-area-inset-bottom) + 12px);
    left:50%; transform:translateX(-50%); z-index:44;
    background:#111; color:#FFF;
    height:52px; padding:0 24px; border-radius:26px;
    display:flex; align-items:center; gap:8px;
    font-size:14px; font-weight:600;
    box-shadow:0 8px 24px rgba(0,0,0,0.18);
    transition:transform 0.15s;
}
.fab:active { transform:translateX(-50%) scale(0.95); }
.fab .material-symbols-outlined { font-size:22px; }
.fab-brand { background:#6B21A8; }

/* --- Cards --- */
.card {
    background:#FFF; border-radius:16px; padding:16px;
    transition:transform 0.1s;
}
.card:active { transform:scale(0.99); }
.card-flat { background:#FFF; border-radius:14px; padding:14px; }
.card-elevated { background:#FFF; border-radius:16px; box-shadow:0 2px 8px rgba(0,0,0,0.04); }

/* --- Product Card (minimal, image-first) --- */
.product-card {
    background:transparent; border-radius:16px; overflow:hidden;
    display:flex; flex-direction:column; gap:8px;
    transition:transform 0.1s;
}
.product-card:active { transform:scale(0.98); }
.product-card .pc-image {
    position:relative; aspect-ratio:4/5; background:#F3F4F6;
    border-radius:14px; overflow:hidden;
}
.product-card .pc-image img { width:100%; height:100%; object-fit:cover; }
.product-card .pc-fav {
    position:absolute; top:8px; right:8px;
    width:32px; height:32px; border-radius:50%;
    background:rgba(255,255,255,0.9); backdrop-filter:blur(8px);
    display:flex; align-items:center; justify-content:center;
}
.product-card .pc-fav .material-symbols-outlined { font-size:18px; color:#6B7280; }
.product-card .pc-fav.active .material-symbols-outlined { color:#EF4444; font-variation-settings:'FILL' 1; }
.product-card .pc-badge {
    position:absolute; top:8px; left:8px;
    background:rgba(255,255,255,0.95); backdrop-filter:blur(8px);
    border-radius:8px; padding:3px 8px;
    font-size:10px; font-weight:700; color:#111;
}
.product-card .pc-badge.discount { background:#111; color:#FFF; }
.product-card .pc-fomo {
    position:absolute; bottom:8px; left:8px;
    background:rgba(255,255,255,0.95); backdrop-filter:blur(8px);
    border-radius:8px; padding:3px 8px;
    font-size:10px; font-weight:600; color:#111;
    display:flex; align-items:center; gap:3px;
}
.product-card .pc-fomo .material-symbols-outlined { font-size:11px; color:#EF4444; }
.product-card .pc-name { font-size:14px; font-weight:500; color:#111; }
.product-card .pc-price { font-size:16px; font-weight:700; color:#111; }
.product-card .pc-price-old { font-size:12px; color:#9CA3AF; text-decoration:line-through; margin-left:4px; }

/* --- Section headers (feed) --- */
.section-head { display:flex; align-items:center; justify-content:space-between; padding:0 16px; margin-bottom:12px; }
.section-title { font-size:17px; font-weight:700; color:#111; }
.section-link { font-size:13px; font-weight:600; color:#6B7280; }

/* --- Category pills (horizontal scroll) --- */
/* Los chips de categoría son la navegación principal del catálogo: quedan
   pegados justo debajo del header en vez de irse bajo él al scrollear.
   --sticky-top lo actualiza app.js: vale el alto del header, y 0 cuando el
   header se esconde al bajar. */
.cat-pills {
    display:flex; gap:8px; overflow-x:auto;
    padding:8px 16px 12px;
    position:sticky; top:var(--sticky-top, 92px); z-index:30;
    background:#F7F7F7;
    transition:top 0.3s cubic-bezier(0.4,0,0.2,1);
}
/* Sombra sutil sólo cuando quedó pegado, para separarlo del contenido */
.cat-pills.pegado { box-shadow:0 4px 12px rgba(0,0,0,0.06); }
.cat-pill {
    flex-shrink:0; display:flex; align-items:center; gap:6px;
    padding:8px 14px; background:#FFF; border:1px solid #E5E7EB;
    border-radius:999px; font-size:13px; font-weight:500; color:#374151;
    transition:all 0.2s; white-space:nowrap;
}
.cat-pill.active { background:#111; color:#FFF; border-color:#111; }
.cat-pill:active { transform:scale(0.96); }
.cat-pill .material-symbols-outlined { font-size:16px; }

/* --- Banner (category) --- */
.cat-banner {
    margin:0 16px 16px; border-radius:20px; overflow:hidden;
    position:relative; min-height:120px;
    display:flex; align-items:flex-end; padding:16px;
}
.cat-banner-bg {
    position:absolute; inset:0; width:100%; height:100%; display:block;
    object-fit:cover; object-position:center; border:0;
}
.cat-banner-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.2)); }
.cat-banner-content { position:relative; z-index:1; color:#FFF; }
.cat-banner-title { font-size:20px; font-weight:700; line-height:1.2; }
.cat-banner-sub { font-size:13px; opacity:0.9; margin-top:2px; }

/* --- Status badges --- */
.badge {
    display:inline-flex; align-items:center; gap:4px;
    padding:3px 10px; border-radius:999px;
    font-size:11px; font-weight:600;
}
.badge-pending { background:#FEF3C7; color:#92400E; }
.badge-paid { background:#DBEAFE; color:#1E40AF; }
.badge-production { background:#EDE9FE; color:#5B21B6; }
.badge-ready { background:#D1FAE5; color:#065F46; }
.badge-delivered { background:#F3F4F6; color:#4B5563; }
.badge-cancelled { background:#FEE2E2; color:#991B1B; }

/* --- KPI cards (finance) --- */
.kpi-card {
    background:#FFF; border-radius:16px; padding:14px;
    display:flex; flex-direction:column; gap:4px;
}
.kpi-label { font-size:11px; color:#6B7280; text-transform:uppercase; letter-spacing:0.04em; font-weight:600; }
.kpi-value { font-size:22px; font-weight:700; color:#111; letter-spacing:-0.01em; }
.kpi-value.accent { color:#6B21A8; }
.kpi-value.success { color:#059669; }
.kpi-value.danger { color:#DC2626; }
.kpi-sub { font-size:11px; color:#9CA3AF; }

/* --- Local mode card (33%) --- */
.local-card {
    background:linear-gradient(135deg, #6B21A8 0%, #4C1D95 100%);
    border-radius:20px; padding:20px; color:#FFF;
    position:relative; overflow:hidden;
}
.local-card::before {
    content:''; position:absolute; top:-40px; right:-40px;
    width:140px; height:140px; border-radius:50%;
    background:rgba(255,255,255,0.08);
}
.local-card-label { font-size:12px; font-weight:600; opacity:0.85; text-transform:uppercase; letter-spacing:0.05em; position:relative; }
.local-card-value { font-size:32px; font-weight:800; letter-spacing:-0.02em; margin-top:6px; position:relative; }
.local-card-sub { font-size:12px; opacity:0.85; margin-top:6px; position:relative; line-height:1.4; }
.local-card-toggle {
    display:inline-flex; align-items:center; gap:6px;
    background:rgba(255,255,255,0.15); color:#FFF;
    padding:6px 12px; border-radius:999px; font-size:12px; font-weight:600;
    margin-top:14px; position:relative;
}

/* ===== FINANCE HERO (total facturado siempre visible) ===== */
.finance-hero {
    background:#FFF; border-radius:20px; padding:20px;
    display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
    box-shadow:0 1px 3px rgba(0,0,0,0.04);
}
.finance-hero-main { flex:1; min-width:0; }
.finance-hero-label {
    display:block; font-size:11px; font-weight:600; color:#6B7280;
    text-transform:uppercase; letter-spacing:0.05em;
}
.finance-hero-value {
    display:block; font-size:34px; font-weight:800; color:#111;
    letter-spacing:-0.03em; line-height:1.1; margin-top:4px;
}
.finance-hero-sub {
    display:block; font-size:12px; color:#9CA3AF; margin-top:6px; font-weight:500;
}

/* Botón LOCAL - siempre visible, al tocar activa el 33% */
.btn-local-toggle {
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    width:64px; height:64px; border-radius:18px; flex-shrink:0;
    background:#F3F4F6; border:2px solid #E5E7EB; color:#6B7280;
    font-size:11px; font-weight:700; transition:all 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.btn-local-toggle .material-symbols-outlined { font-size:24px; }
.btn-local-toggle:active { transform:scale(0.94); }
.btn-local-toggle.active {
    background:linear-gradient(135deg, #6B21A8, #4C1D95); color:#FFF;
    border-color:#6B21A8; box-shadow:0 4px 14px rgba(107,33,168,0.3);
    transform:scale(1.05);
}
.btn-local-toggle.active .material-symbols-outlined { font-variation-settings:'FILL' 1; }

/* Panel LOCAL 33% - expandible */
.local-detail {
    max-height:0; overflow:hidden; opacity:0;
    transition:max-height 0.4s cubic-bezier(0.32,0.72,0,1), opacity 0.3s, margin 0.3s;
    background:linear-gradient(135deg, #6B21A8 0%, #4C1D95 100%);
    border-radius:20px; color:#FFF; position:relative; overflow:hidden;
}
.local-detail.open {
    max-height:500px; opacity:1; margin-bottom:16px;
}
.local-detail::before {
    content:''; position:absolute; top:-50px; right:-50px;
    width:160px; height:160px; border-radius:50%;
    background:rgba(255,255,255,0.08);
}
.local-detail-header {
    display:flex; justify-content:space-between; align-items:center;
    padding:18px 20px; position:relative;
}
.local-detail-label {
    display:block; font-size:11px; font-weight:600; opacity:0.85;
    text-transform:uppercase; letter-spacing:0.05em;
}
.local-detail-value {
    display:block; font-size:28px; font-weight:800; letter-spacing:-0.02em; margin-top:2px;
}
.local-detail-pct {
    font-size:24px; font-weight:800; opacity:0.4;
    background:rgba(255,255,255,0.15); padding:6px 14px; border-radius:14px;
}
.local-detail-body {
    padding:0 20px 18px; position:relative;
}
.local-detail-row {
    display:flex; justify-content:space-between; align-items:center;
    padding:8px 0; font-size:13px;
    border-top:1px solid rgba(255,255,255,0.12);
}
.local-detail-row span:first-child { opacity:0.8; }
.local-detail-row span:last-child { font-weight:600; }
.local-detail-result {
    border-top:2px solid rgba(255,255,255,0.25) !important; margin-top:4px; padding-top:12px !important;
}
.local-detail-result span:first-child { font-weight:700; opacity:1; font-size:14px; }
.local-detail-result-value { font-size:20px !important; font-weight:800 !important; }
.local-detail-note {
    font-size:11px; opacity:0.7; margin-top:12px; line-height:1.5;
}

/* --- Forms --- */
.field { margin-bottom:14px; }
.field label { display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:#374151; }
.input, .textarea, .select {
    width:100%; background:#FFF; border:1.5px solid #E5E7EB;
    border-radius:12px; padding:14px 16px;
    color:#111; font-size:15px; transition:border-color 0.2s, background 0.2s;
}
.input:focus, .textarea:focus, .select:focus {
    outline:none; border-color:#6B21A8; background:#FFF;
}
.input::placeholder, .textarea::placeholder { color:#9CA3AF; }
.textarea { resize:vertical; min-height:80px; }
.input-icon { position:relative; }
.input-icon .material-symbols-outlined {
    position:absolute; left:14px; top:50%; transform:translateY(-50%);
    font-size:20px; color:#9CA3AF; pointer-events:none;
}
.input-icon .input { padding-left:44px; }

/* --- Toggle switch --- */
.toggle { position:relative; display:inline-block; width:44px; height:26px; }
.toggle input { opacity:0; width:0; height:0; }
.toggle-slider {
    position:absolute; cursor:pointer; inset:0;
    background:#E5E7EB; border-radius:999px; transition:0.3s;
}
.toggle-slider:before {
    content:''; position:absolute; height:20px; width:20px;
    left:3px; bottom:3px; background:#FFF; border-radius:50%; transition:0.3s;
}
.toggle input:checked + .toggle-slider { background:#6B21A8; }
.toggle input:checked + .toggle-slider:before { transform:translateX(18px); }

/* --- Size selector --- */
.size-btn {
    min-width:48px; height:48px; padding:0 8px;
    border:1.5px solid #E5E7EB; background:#FFF; border-radius:12px;
    font-size:15px; font-weight:600; color:#111;
    transition:all 0.15s;
}
.size-btn:active { transform:scale(0.95); }
.size-btn.selected { border-color:#111; background:#111; color:#FFF; }
.size-btn.disabled { opacity:0.35; text-decoration:line-through; }
/* Combinación sin prenda virgen en depósito: se ve, pero no se puede elegir */
.size-btn.is-agotado { opacity:0.3; text-decoration:line-through; cursor:not-allowed; }

/* --- Color selector --- */
.color-btn {
    width:40px; height:40px; border-radius:50%;
    border:2px solid #E5E7EB; transition:all 0.15s;
    position:relative;
}
.color-btn:active { transform:scale(0.92); }
.color-btn.is-agotado { opacity:0.25; cursor:not-allowed; }
.color-btn.is-agotado::before {
    content:''; position:absolute; inset:-2px;
    background:linear-gradient(to bottom right, transparent 46%, #111 46%, #111 54%, transparent 54%);
}
.color-btn.selected { border-color:#111; transform:scale(1.08); }
.color-btn.selected::after {
    content:'✓'; position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    color:#FFF; font-size:16px; font-weight:700;
    text-shadow:0 1px 2px rgba(0,0,0,0.4);
}

/* --- Bottom Sheet --- */
.sheet-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,0.4);
    z-index:70; opacity:0; transition:opacity 0.3s;
    display:flex; align-items:flex-end; justify-content:center;
}
.sheet-overlay.show { opacity:1; }
.sheet {
    background:#FFF; width:100%; max-width:480px;
    border-radius:24px 24px 0 0; padding:8px 20px calc(20px + env(safe-area-inset-bottom));
    max-height:90vh; overflow-y:auto;
    transform:translateY(100%); transition:transform 0.35s cubic-bezier(0.32,0.72,0,1);
}
.sheet-overlay.show .sheet { transform:translateY(0); }
.sheet-handle { width:36px; height:4px; background:#E5E7EB; border-radius:2px; margin:4px auto 16px; }
.sheet-title { font-size:18px; font-weight:700; margin-bottom:4px; }
.sheet-sub { font-size:13px; color:#6B7280; margin-bottom:16px; }

/* --- Sticky purchase bar (product detail) --- */
.sticky-cta {
    /* Va POR ENCIMA de la barra de navegación, no debajo: las dos estaban en
       bottom:0 y la nav (z-index 45) tapaba por completo los botones. */
    position:fixed; bottom:var(--nav-h, calc(62px + env(safe-area-inset-bottom))); left:50%;
    transform:translateX(-50%);
    width:100%; max-width:480px; z-index:44;
    background:rgba(255,255,255,0.95); backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border-top:0.5px solid rgba(0,0,0,0.08);
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    display:flex; align-items:center; gap:12px;
}
.sticky-cta-price { display:flex; flex-direction:column; }
.sticky-cta-price-label { font-size:10px; color:#9CA3AF; }
.sticky-cta-price-value { font-size:20px; font-weight:700; color:#111; }
.sticky-cta .btn { flex:1; min-width:0; }
.sticky-cta-actions { display:flex; gap:8px; flex:1; }
.sticky-cta-actions .btn { padding-left:10px; padding-right:10px; white-space:nowrap; }

/* --- Timeline (order tracking) --- */
.timeline { display:flex; flex-direction:column; gap:0; }
.timeline-item { display:flex; gap:12px; padding:8px 0; position:relative; }
.timeline-item:not(:last-child)::before {
    content:''; position:absolute; left:11px; top:32px;
    width:2px; height:calc(100% - 16px);
}
.timeline-item.done:not(:last-child)::before { background:#22C55E; }
.timeline-item:not(.done):not(:last-child)::before { background:#E5E7EB; }
.timeline-dot {
    width:24px; height:24px; border-radius:50%; flex-shrink:0;
    border:2px solid #E5E7EB; background:#FFF;
    display:flex; align-items:center; justify-content:center; z-index:1;
}
.timeline-dot.done { background:#22C55E; border-color:#22C55E; }
.timeline-dot.done .material-symbols-outlined { font-size:14px; color:#FFF; }
.timeline-dot.current { border-color:#6B21A8; background:#FFF; }
.timeline-dot.current::after {
    content:''; width:8px; height:8px; border-radius:50%; background:#6B21A8;
    animation:pulse-soft 2s infinite;
}
.timeline-content { flex:1; padding-top:1px; }
.timeline-title { font-size:14px; font-weight:600; color:#111; }
.timeline-title.pending { color:#9CA3AF; }
.timeline-time { font-size:12px; color:#6B7280; margin-top:2px; }

/* --- Skeleton --- */
.skeleton {
    background:linear-gradient(90deg, #F3F4F6 25%, #E5E7EB 50%, #F3F4F6 75%);
    background-size:200% 100%; animation:shimmer 1.4s infinite;
    border-radius:8px;
}
@keyframes shimmer { to { background-position:-200% 0; } }
.skel-card { background:#FFF; border-radius:16px; padding:12px; }
.skel-img { aspect-ratio:4/5; border-radius:14px; }
.skel-line { height:14px; border-radius:4px; margin-top:8px; }
.skel-line.short { width:60%; }

/* --- QR display --- */
.qr-box { background:#FFF; padding:20px; border-radius:20px; display:inline-block; box-shadow:0 4px 16px rgba(0,0,0,0.08); }
.qr-box img { display:block; width:220px; height:220px; }

/* --- Toast --- */
.toast {
    position:fixed; bottom:calc(88px + env(safe-area-inset-bottom)); left:50%;
    transform:translateX(-50%); background:#111; color:#FFF;
    padding:12px 20px; border-radius:14px;
    font-size:14px; font-weight:500; z-index:80;
    max-width:90%; box-shadow:0 8px 24px rgba(0,0,0,0.2);
    animation:toastIn 0.3s ease-out;
}
@keyframes toastIn { from{opacity:0; transform:translateX(-50%) translateY(10px);} to{opacity:1; transform:translateX(-50%) translateY(0);} }

/* --- Spinner --- */
.spinner {
    width:20px; height:20px;
    border:2.5px solid rgba(255,255,255,0.3); border-top-color:#FFF;
    border-radius:50%; animation:spin 0.7s linear infinite;
}
.spinner.dark { border-color:rgba(0,0,0,0.15); border-top-color:#111; }
@keyframes spin { to { transform:rotate(360deg); } }

/* --- Pulse --- */
@keyframes pulse-soft { 0%,100%{opacity:1;} 50%{opacity:0.4;} }
.pulse-dot { animation:pulse-soft 2s infinite; }

/* --- Empty state --- */
.empty-state { text-align:center; padding:48px 24px; color:#6B7280; }
.empty-state .material-symbols-outlined { font-size:48px; color:#D1D5DB; }

/* --- Divider --- */
.divider { height:1px; background:#E5E7EB; border:none; margin:16px 0; }

/* --- Chip --- */
.chip {
    display:inline-flex; align-items:center; gap:4px;
    padding:4px 10px; background:#F3F4F6; border-radius:8px;
    font-size:12px; color:#374151; font-weight:500;
}

/* --- Size cell (production board) --- */
.size-cell {
    background:#FFF; border:1px solid #E5E7EB; border-radius:10px;
    padding:8px 10px; display:flex; flex-direction:column; align-items:center; gap:2px;
    min-width:52px;
}
.size-cell .sz-name { font-size:11px; color:#6B7280; font-weight:600; }
.size-cell .sz-count { font-size:18px; font-weight:700; color:#111; }

/* --- Table (desktop fallback) --- */
.table { width:100%; border-collapse:collapse; font-size:14px; }
.table th { text-align:left; padding:10px; background:#F9FAFB; color:#6B7280; font-size:11px; text-transform:uppercase; letter-spacing:0.04em; border-bottom:1px solid #E5E7EB; }
.table td { padding:10px; border-bottom:1px solid #F3F4F6; color:#111; }

/* --- Order card (sales queue) --- */
.order-card {
    background:#FFF; border-radius:16px; padding:14px;
    display:flex; flex-direction:column; gap:10px;
    transition:transform 0.1s;
}
.order-card:active { transform:scale(0.99); }
.order-card .oc-num { font-size:16px; font-weight:700; color:#111; }
.order-card .oc-total { font-size:18px; font-weight:700; color:#111; }

/* --- Desktop sidebar --- */
@media(min-width:768px) {
    .desktop-layout { display:flex; min-height:100vh; }
    .sidebar {
        width:240px; background:#FFF; border-right:1px solid #E5E7EB;
        padding:16px; position:fixed; top:0; bottom:0; left:0;
        display:flex; flex-direction:column; gap:2px; overflow-y:auto;
    }
    .sidebar-brand { font-weight:800; font-size:18px; color:#111; padding:8px 12px 20px; letter-spacing:-0.02em; }
    .sidebar a {
        display:flex; align-items:center; gap:12px; padding:12px;
        border-radius:10px; color:#6B7280; font-size:14px; font-weight:500; transition:all 0.15s;
    }
    .sidebar a:hover { background:#F3F4F6; color:#111; }
    .sidebar a.active { background:#111; color:#FFF; }
    .sidebar .material-symbols-outlined { font-size:22px; }
    .main-content { flex:1; margin-left:240px; padding:24px; max-width:900px; }
    .mobile-only { display:none !important; }
}
.mobile-only { }

/* --- QR Scanner --- */
#qr-scanner video { width:100%; border-radius:16px; }
.scan-frame {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:200px; height:200px; border:2px solid #6B21A8; border-radius:16px;
    box-shadow:0 0 0 9999px rgba(0,0,0,0.5);
}
.scan-frame::before, .scan-frame::after {
    content:''; position:absolute; width:30px; height:30px;
    border:3px solid #6B21A8;
}
.scan-frame::before { top:-3px; left:-3px; border-right:none; border-bottom:none; border-radius:16px 0 0 0; }
.scan-frame::after { bottom:-3px; right:-3px; border-left:none; border-top:none; border-radius:0 0 16px 0; }

/* --- Pull to refresh --- */
.ptr-indicator {
    position:absolute; top:0; left:50%; transform:translateX(-50%) translateY(-40px);
    width:36px; height:36px; border-radius:50%; background:#FFF;
    box-shadow:0 2px 8px rgba(0,0,0,0.1); display:flex; align-items:center; justify-content:center;
    transition:transform 0.2s; z-index:30;
}
.ptr-indicator.visible { transform:translateX(-50%) translateY(8px); }
.ptr-indicator .material-symbols-outlined { font-size:20px; color:#6B7280; }
.ptr-indicator.spinning .material-symbols-outlined { animation:spin 0.7s linear infinite; color:#6B21A8; }

/* --- Progress steps (checkout) --- */
.progress-steps { display:flex; align-items:center; gap:0; padding:16px; }
.progress-step { display:flex; flex-direction:column; align-items:center; gap:4px; flex:1; position:relative; }
.progress-step:not(:last-child)::after {
    content:''; position:absolute; top:11px; left:50%; width:100%; height:2px; background:#E5E7EB; z-index:0;
}
.progress-step.done:not(:last-child)::after { background:#6B21A8; }
.progress-step-dot {
    width:24px; height:24px; border-radius:50%; background:#FFF;
    border:2px solid #E5E7EB; display:flex; align-items:center; justify-content:center;
    z-index:1; transition:all 0.2s;
}
.progress-step.done .progress-step-dot { background:#6B21A8; border-color:#6B21A8; }
.progress-step.done .progress-step-dot .material-symbols-outlined { font-size:14px; color:#FFF; }
.progress-step.current .progress-step-dot { border-color:#6B21A8; }
.progress-step-label { font-size:11px; color:#6B7280; font-weight:600; }
.progress-step.current .progress-step-label, .progress-step.done .progress-step-label { color:#111; }

/* --- Payment method card --- */
.pay-card {
    display:flex; align-items:center; gap:12px; padding:14px;
    background:#FFF; border:1.5px solid #E5E7EB; border-radius:14px;
    transition:all 0.15s;
}
.pay-card:active { transform:scale(0.99); }
.pay-card.selected { border-color:#6B21A8; background:#FAF5FF; }
.pay-card-icon {
    width:40px; height:40px; border-radius:10px; background:#F3F4F6;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.pay-card-icon .material-symbols-outlined { font-size:22px; color:#374151; }
.pay-card-icon img { display:block; max-width:32px; max-height:32px; width:auto; height:auto; object-fit:contain; }
.pay-card-info { flex:1; }
.pay-card-name { font-size:15px; font-weight:600; color:#111; }
.pay-card-detail { font-size:12px; color:#6B7280; margin-top:1px; }
.pay-card-check {
    width:22px; height:22px; border-radius:50%; border:2px solid #E5E7EB; flex-shrink:0;
}
.pay-card.selected .pay-card-check {
    background:#6B21A8; border-color:#6B21A8; display:flex; align-items:center; justify-content:center;
}
.pay-card.selected .pay-card-check::after { content:'✓'; color:#FFF; font-size:13px; font-weight:700; }

/* --- Horizontal scroll section --- */
.h-scroll { display:flex; gap:12px; overflow-x:auto; padding:0 16px 8px; scroll-snap-type:x mandatory; }
.h-scroll > * { scroll-snap-align:start; flex-shrink:0; }

/* --- Animation utilities --- */
.fade-in { animation:fadeIn 0.3s ease-out; }
@keyframes fadeIn { from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }
.slide-up { animation:slideUp 0.35s cubic-bezier(0.32,0.72,0,1); }
@keyframes slideUp { from{transform:translateY(100%);} to{transform:translateY(0);} }

/* --- Tag input (for product form) --- */
.tag-row { display:flex; flex-wrap:wrap; gap:6px; }
.tag-chip {
    display:inline-flex; align-items:center; gap:4px;
    padding:6px 12px; background:#F3F4F6; border-radius:8px;
    font-size:13px; color:#374151; cursor:pointer; transition:all 0.15s;
}
.tag-chip.selected { background:#111; color:#FFF; }
.tag-chip:active { transform:scale(0.95); }

/* ============================================================
   RECENTLY VIEWED BUBBLE (floating)
   ============================================================ */
.recent-bubble {
    position:fixed; bottom:calc(76px + env(safe-area-inset-bottom));
    right:16px; z-index:42;
}
.recent-bubble-btn {
    position:relative; width:52px; height:52px; border-radius:50%;
    background:#111; color:#FFF;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 16px rgba(0,0,0,0.2);
    transition:transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
}
.recent-bubble-btn:active { transform:scale(0.9); }
.recent-bubble-btn .material-symbols-outlined { font-size:24px; }
.recent-bubble-count {
    position:absolute; top:-2px; right:-2px;
    min-width:20px; height:20px; border-radius:10px;
    background:#6B21A8; color:#FFF;
    font-size:11px; font-weight:700;
    display:flex; align-items:center; justify-content:center;
    padding:0 5px; border:2px solid #F7F7F7;
}
.recent-bubble-panel {
    position:absolute; bottom:60px; right:0;
    width:280px; max-width:calc(100vw - 32px);
    background:#FFF; border-radius:18px;
    box-shadow:0 8px 32px rgba(0,0,0,0.15);
    transform:translateY(8px) scale(0.95); opacity:0; pointer-events:none;
    transition:all 0.25s cubic-bezier(0.32,0.72,0,1);
    max-height:360px; overflow:hidden; display:flex; flex-direction:column;
}
.recent-bubble-panel.open {
    transform:translateY(0) scale(1); opacity:1; pointer-events:auto;
}
.recent-bubble-header {
    display:flex; justify-content:space-between; align-items:center;
    padding:14px 16px 10px; border-bottom:1px solid #F3F4F6;
}
.recent-bubble-title { font-size:14px; font-weight:700; color:#111; }
.recent-bubble-close {
    width:28px; height:28px; border-radius:50%; background:#F3F4F6;
    display:flex; align-items:center; justify-content:center;
}
.recent-bubble-close .material-symbols-outlined { font-size:16px; color:#6B7280; }
.recent-bubble-list {
    overflow-y:auto; padding:8px;
}
.recent-bubble-item {
    display:flex; gap:10px; padding:8px; border-radius:12px;
    transition:background 0.15s;
}
.recent-bubble-item:active { background:#F9FAFB; }
.recent-bubble-item-img {
    width:48px; height:48px; border-radius:10px; background:#F3F4F6; flex-shrink:0;
    overflow:hidden; display:flex; align-items:center; justify-content:center;
}
.recent-bubble-item-img img { width:100%; height:100%; object-fit:cover; }
.recent-bubble-item-img .material-symbols-outlined { font-size:20px; color:#D1D5DB; }
.recent-bubble-item-info { flex:1; min-width:0; padding-top:2px; }
.recent-bubble-item-name {
    font-size:13px; font-weight:500; color:#111;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.recent-bubble-item-price { font-size:12px; font-weight:700; color:#6B21A8; margin-top:2px; }

/* ============================================================
   SIZE GUIDE
   ============================================================ */
.size-guide { padding:0; }
.size-guide-section { margin-bottom:20px; }
.size-guide-h {
    font-size:15px; font-weight:700; color:#111; margin-bottom:10px;
}
.size-guide-table {
    width:100%; border-collapse:collapse; font-size:13px;
}
.size-guide-table th {
    background:#F3F4F6; color:#374151; font-weight:600;
    padding:10px 12px; text-align:left; font-size:12px;
    border-bottom:1px solid #E5E7EB;
}
.size-guide-table th:first-child { border-radius:8px 0 0 0; }
.size-guide-table th:last-child { border-radius:0 8px 0 0; }
.size-guide-table td {
    padding:10px 12px; border-bottom:1px solid #F3F4F6; color:#111;
}
.size-guide-table td:first-child { font-weight:700; }
.size-guide-table tbody tr:active { background:#F9FAFB; }
.size-guide-tip {
    display:flex; gap:10px; align-items:flex-start;
    background:#FEF3C7; border-radius:12px; padding:12px;
    margin-top:8px;
}
.size-guide-tip .material-symbols-outlined { color:#D97706; font-size:20px; flex-shrink:0; }
.size-guide-tip span:last-child { font-size:12px; color:#92400E; line-height:1.5; }

/* ============================================================
   RECOMMENDATIONS section (product detail)
   ============================================================ */
/* --- Bloque plegable (descripción de la ficha) --- */
.desplegable > summary {
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    cursor:pointer; list-style:none; user-select:none;
    min-height:44px;              /* área de toque cómoda */
}
.desplegable > summary::-webkit-details-marker { display:none; }
.desplegable-flecha {
    font-size:22px; color:#6B7280; transition:transform 0.2s ease; flex-shrink:0;
}
.desplegable[open] .desplegable-flecha { transform:rotate(180deg); }
@media (prefers-reduced-motion:reduce) {
    .desplegable-flecha { transition:none; }
}

.recommend-section { padding:20px 0 0; }
.recommend-title {
    font-size:17px; font-weight:700; color:#111;
    padding:0 16px; margin-bottom:12px;
    display:flex; align-items:center; gap:6px;
}
.recommend-title .material-symbols-outlined { font-size:18px; color:#6B21A8; }
.recommend-scroll {
    display:flex; gap:12px; overflow-x:auto; padding:0 16px 8px;
    scroll-snap-type:x mandatory;
}
.recommend-scroll > * { scroll-snap-align:start; flex-shrink:0; width:140px; }

/* --- Carrusel arrastrable --- */
.carrusel { position:relative; }
.carrusel-flecha {
    position:absolute; top:38%; transform:translateY(-50%); z-index:3;
    width:36px; height:36px; border-radius:50%;
    background:rgba(255,255,255,0.94); color:#111;
    box-shadow:0 2px 10px rgba(0,0,0,0.16);
    display:flex; align-items:center; justify-content:center;
    transition:opacity 0.2s, transform 0.1s;
}
.carrusel-flecha[hidden] { display:none; }
.carrusel-flecha:active { transform:translateY(-50%) scale(0.9); }
.carrusel-flecha-izq { left:6px; }
.carrusel-flecha-der { right:6px; }
.carrusel-flecha .material-symbols-outlined { font-size:22px; }
/* Snap "proximity" y no "mandatory": con mandatory el navegador descarta los
   scroll suaves por código y las flechas no movían nada. Con proximity la
   sensación de imán se mantiene y el desplazamiento animado funciona. */
/* Sin scroll-behavior:smooth: hace que TODO desplazamiento por código sea
   animado por el navegador, y esas animaciones se descartan cuando hay snap.
   El deslizamiento de las flechas lo anima el JS, que siempre funciona. */
.carrusel [data-carrusel-pista] { scroll-snap-type:x proximity; }
/* Mientras se arrastra: sin animación de scroll y con el cursor de agarre */
.carrusel-pista-arrastrando { cursor:grabbing; scroll-behavior:auto !important; scroll-snap-type:none !important; }
.carrusel-pista-arrastrando a { pointer-events:none; }
@media (hover:hover) {
    .carrusel [data-carrusel-pista] { cursor:grab; }
}
@media (prefers-reduced-motion:reduce) {
    .carrusel-flecha { transition:none; }
}