/* =========================================================
   1. Variables & Reset
   ======================================================= */
   :root{
    --bg:#f6f7fb;
    --card:#ffffff;
    --primary:#2563eb;
    --primary-600:#1e4fd6;
    --success:#22c55e;
    --success-600:#16a34a;
    --warning:#f0ad4e;
    --muted:#6b7280;
    --text:#222;
    --border:#e5e7eb;
    --shadow:0 8px 18px rgba(16,24,40,.06);
    --radius:14px;
    --ring:0 0 0 4px rgba(37,99,235,.18);
  
    /* Header image defaults */
    --header-image:none;
    --header-overlay:rgba(0,0,0,.0);
    --header-text:#ffffff;
  
    /* Header sizing */
    --header-h:72px;
    --header-h-sm:60px;
    --brand:#0f172a;
    --ticker-h:32px;
  
    /* Sticky offsets (header + ticker) */
    --header-offset:calc(var(--header-h) + var(--ticker-h));
  
    /* Compact gap below header */
    --content-offset:8px;
  
    /* Toolbar height (fallback) */
    --toolbar-h:52px;
  }
  
  /* 🎯 Force light background across shells */
  :root{ color-scheme:light; }
  
  html, body,
  #app, main, .page, .page-shell, .site, .wrapper{
    background:var(--bg) !important;
  }
  
  /* Nuke any pseudo overlays a theme might inject */
  body::before, body::after,
  .page::before, .page::after{ background:none !important; }
  
  *{ box-sizing:border-box; }
  html, body{ height:100%; background:var(--bg); }
  body{
    margin:0;
    font-family:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
      "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
    color:var(--text);
    background:var(--bg);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }
  
  /* Smooth anchor offset under sticky header */
  html{ scroll-padding-top:var(--header-offset); }
  
  /* Transparent wrappers so body bg shows */
  main, .container, .layout, .page-shell{ background:transparent; }
  
  /* =========================================================
     2. Layout & Header (Fixed)
     ======================================================= */
  .container{
    max-width:1200px;
    margin-inline:auto;
    padding-inline:16px;
  }
  
  .site-header{
    isolation:isolate;
    position:sticky;
    top:0;
    z-index:1000;
    overflow:hidden;
    color:#fff;
    box-shadow:0 1px 0 rgba(255,255,255,.06), var(--shadow);
    background:
      linear-gradient(180deg, rgba(15,23,42,.65), rgba(15,23,42,.25)),
      linear-gradient(135deg, var(--brand) 0%, #60a5fa 100%);
  }
  
  /* Ticker strip */
  .ticker{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    width:100%;
    background:linear-gradient(90deg, rgba(15,23,42,.78) 0%, rgba(37,99,235,.68) 100%);
    color:var(--header-text, #fff);
    padding-block:6px;
    min-height:var(--ticker-h);
    text-transform:uppercase;
    font-size:clamp(.85rem, 1.7vw, 1.05rem);
    letter-spacing:.4em;
  }
  .ticker-text{
    display:inline-block;
    min-width:100%;
    padding-inline:32px;
    white-space:nowrap;
    text-align:center;
    animation:ticker-slide 12s linear infinite;
  }
  @keyframes ticker-slide{
    0%{ transform:translateX(100%); }
    100%{ transform:translateX(-100%); }
  }
  
  /* Gap bajo header */
  .site-header + .container,
  .site-header + .layout,
  .site-header + main,
  .site-header + .page-content,
  .site-header + .catalog-container{
    padding-top:var(--content-offset) !important;
  }
  
  /* Evitar margen extra del primer bloque */
  main > *:first-child,
  .page-content > *:first-child,
  .container > *:first-child{
    margin-top:0 !important;
    padding-top:0;
  }
  
  /* Sticky sub-elements que respetan header (tablas, etc.) */
  .table thead th{
    top:var(--header-offset);
  }
  
  /* Ignore inline bg images set by external scripts */
  .site-header[style*="background-image"]{ background-image:none !important; }
  
  /* Shared hero/banner image defaults */
  .header-hero, .header-banner, #header, header, .site-header{
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
  }
  
  /* Header con imagen — más compacto */
  .site-header.header-has-image{
    --header-h:clamp(88px, 12vh, 150px);
    background:none;
    color:var(--header-text, #fff);
    min-height:var(--header-h);
  }
  .site-header.header-has-image::before{
    content:""; position:absolute; inset:0;
    background-image:var(--header-image, none);
    background-size:cover; background-position:center; background-repeat:no-repeat;
    z-index:0; pointer-events:none;
  }
  .site-header.header-has-image::after{
    content:""; position:absolute; inset:0;
    background:var(--header-overlay, rgba(0,0,0,.25));
    z-index:1; pointer-events:none;
  }
  
  /* ── Header: logo izq, botones der (alineados) ───────────── */
  .site-header .header-inner,
  .site-header .header-shell{
    display:grid;
    grid-template-columns:1fr auto; /* brand | acciones */
    align-items:center;
    justify-items:start;
    gap:10px;
    min-height:var(--header-h);
    padding:8px 16px;
    position:relative;
    z-index:2;
  }
  
  /* UX: hide legacy cart chip in header */
  .cart-jump{ display:none !important; }
  
  .site-header .header-actions{
    display:flex;
    align-items:center;
    gap:10px;
    justify-self:end;
  }
  
  #auth-user-badge{
    display:none;
    align-items:center; gap:6px;
    max-width:280px; padding:6px 10px;
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.35);
    color:#fff; border-radius:999px; font-weight:700;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  
  .site-header .btn{
    width:auto; min-width:unset; height:38px;
    display:inline-flex; align-items:center; justify-content:center;
    border-radius:14px; font-weight:800; padding:0 16px; box-shadow:none;
  }
  .site-header .btn-outline{
    background:#fff; border:1px solid #e2e8f0; color:#0f172a;
  }
  .site-header .btn-outline:hover{ background:#f8fafc; }
  .site-header .btn-link{
    background:transparent; border:none; color:#e5edff; font-weight:800; padding:0 6px;
  }
  .site-header .btn-link:hover{ text-decoration:underline; }
  .site-header .btn-danger{ background:#ef4444; color:#fff; border:none; }
  .site-header .auth-actions{ display:flex; align-items:center; gap:8px; }
  
  /* Responsive header: en móvil se apila y queda a la izquierda */
  @media (max-width:700px){
    .site-header .header-inner,
    .site-header .header-shell{
      grid-template-columns:1fr;
      justify-items:start;
      row-gap:8px;
    }
    .site-header .header-actions{
      justify-self:start;
    }
  }
  
  /* Social strip bajo el header */
  .site-header .container + .container{
    margin-top:0 !important;
    padding:6px 16px 12px;
  }
  .site-header #social-strip{ gap:12px; }
  
  /* Brand block */
  .brand{
    display:grid; grid-auto-flow:column; align-items:center; gap:14px;
    margin:0; font-weight:800; font-size:clamp(1.2rem, 2.5vw, 1.8rem);
    line-height:1.1; color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.25);
  }
  #brand-logo{
    height:clamp(36px, 5.4vw, 48px); width:auto; display:none;
    border-radius:14px; background:#fff; padding:6px;
    border:1px solid rgba(255,255,255,.55);
    outline:2px solid rgba(255,255,255,.35);
    box-shadow:0 8px 18px rgba(0,0,0,.18);
    object-fit:contain;
  }
  #brand-logo[src]{ display:inline-block; }
  #brand-logo[src] ~ #brand-emoji{ display:none; }
  #brand-emoji{ font-size:clamp(18px, 3.2vw, 24px); }
  #brand-name{
    display:inline-block; max-width:60vw;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  
  /* Generic buttons */
  .auth-actions{ display:flex; gap:8px; align-items:center; }
  .auth-badge{
    display:none; background:#eef; border:1px solid #cdd;
    padding:4px 8px; border-radius:6px; color:#111;
  }
  .btn{ cursor:pointer; }
  .btn-outline{
    background:#fff; border:1px solid #e2e8f0; color:#0f172a;
    padding:8px 12px; border-radius:10px; font-weight:600;
  }
  .btn-outline:hover{ background:#f8fafc; }
  .btn-link{ background:transparent; border:none; color:#e5edff; font-weight:700; }
  .btn-link:hover{ text-decoration:underline; }
  .btn-danger{
    background:#ef4444; color:#fff; border:none;
    padding:8px 12px; border-radius:10px;
  }
  
  /* Social strip (header) */
  .social-bar{
    display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  }
  .social-bar a{
    color:#e6f0ff; font-weight:600; text-decoration:none;
    display:inline-flex; gap:6px; align-items:center;
  }
  .social-bar a:hover{ opacity:.9; text-decoration:underline; }
  .social-icon{
    width:16px; height:16px; display:inline-block; background:#e6f0ff; border-radius:3px;
  }
  .contact-line{ margin-left:auto; font-size:.92rem; color:#dbeafe; }
  
  /* Footer */
  .site-footer{
    border-top:1px solid var(--border);
    margin-top:32px;
    background:#fff;
  }
  .site-footer p{
    margin:0; padding:18px 0;
    color:#667085; font-size:.95rem; text-align:center;
  }
  
  /* =========================================================
     3. Main Content Layout
     ======================================================= */
  .layout{
    display:grid;
    grid-template-columns:1fr 340px;
    gap:18px;
    padding-block:16px;
  }
  
  /* =========================================================
     4. Product Section & Toolbar
     ======================================================= */
  #productos{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:18px 16px 8px;
  }
  .section-head{
    display:grid;
    align-items:start;
    justify-items:start;
    gap:6px;
    padding-inline:6px;
  }
  #productos h2{
    margin:.2rem 0 .1rem;
    font-size:clamp(1.1rem, 3.8vw, 1.6rem);
  }
  .section-sub{
    margin:0;
    color:#6b7280;
    font-size:.95rem;
  }
  
  /* 🧲 Contenedor sticky para búsqueda + filtros */
  .product-toolbar-wrap{
    position:sticky;
    top:var(--header-offset);   /* pegado debajo del header */
    z-index:35;
    background:var(--card);
    border-bottom:1px solid #f1f5f9;
  }
  
  /* Barra de búsqueda (NO sticky por sí sola) */
  .product-toolbar{
    position:static;
    display:grid;
    grid-template-columns:1fr auto;
    gap:10px;
    padding:10px 6px 6px;
    border-bottom:none;
  }
  @media (max-width:700px){
    .product-toolbar{ grid-template-columns:1fr; }
  }
  
  /* Filtros debajo de la búsqueda */
  .filters{
    position:static;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    padding:4px 6px 10px;
  }
  
  /* Search bar */
  .search-wrap{ position:relative; }
  .search-input{
    width:100%; padding:12px 40px;
    border:1px solid #d0d5dd; border-radius:12px;
    background:#fff; outline:none;
    transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
  }
  .search-input::-webkit-search-cancel-button,
  .search-input::-webkit-search-decoration{ -webkit-appearance:none; }
  .search-input::placeholder{ color:#94a3b8; }
  .search-input:focus{
    border-color:var(--primary);
    box-shadow:var(--ring);
    background:#fff;
  }
  .search-wrap .search-icon{
    position:absolute; left:12px; top:50%; transform:translateY(-50%);
    width:18px; height:18px; opacity:.7; pointer-events:none;
  }
  .btn-clear-search{
    position:absolute; right:8px; top:50%; transform:translateY(-50%);
    border:none; background:#f1f5f9; color:#334155;
    padding:6px 8px; border-radius:8px;
    font-weight:700; cursor:pointer;
  }
  .btn-clear-search:hover{ background:#e2e8f0; }
  .btn-clear-search:focus-visible{ outline:none; box-shadow:var(--ring); }
  .btn-clear-search:disabled{
    opacity:.5; cursor:not-allowed; background:#f8fafc;
  }
  .results-info{
    align-self:center;
    color:#64748b;
    font-weight:700;
    font-size:.9rem;
    white-space:nowrap;
  }
  
  /* Filter chips */
  .filter-chip{
    display:inline-flex; align-items:center; gap:6px;
    padding:7px 12px; border-radius:999px;
    background:#f1f5f9; color:#334155; border:1px solid #e2e8f0;
    font-weight:700; cursor:pointer; user-select:none;
    transition:background .15s ease, color .15s ease,
                border-color .15s ease, transform .06s ease;
  }
  .filter-chip:hover{ background:#e2e8f0; }
  .filter-chip:active{ transform:translateY(1px); }
  .filter-chip--active{
    background:rgba(37,99,235,.10);
    border-color:#93c5fd;
    color:#1d4ed8;
  }
  .filter-chip:focus-visible{
    outline:none;
    box-shadow:var(--ring);
  }
  
  /* Products grid/cards */
  .productos-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:16px;
    padding:14px 6px 16px;
    position:relative;
    z-index:1;
  }
  .producto-card{
    background:#fff; border:1px solid var(--border); border-radius:12px;
    padding:14px;
    display:flex; flex-direction:column; gap:8px;
    text-align:center;
    box-shadow:0 6px 14px rgba(16,24,40,.06);
    transition:transform .15s ease, box-shadow .15s ease;
    height:100%;
  }
  .producto-card:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(2,8,23,.12);
  }
  .producto-card h3{
    margin:0; color:var(--primary);
    font-size:1.05rem; letter-spacing:.2px;
  }
  .producto-card p{
    margin:.2rem 0;
    color:#475467;
    font-size:.95rem;
    flex-grow:1;
  }
  .producto-card strong{ font-size:1.05rem; }
  .producto-card button{
    background:var(--success); color:#fff; border:none;
    padding:10px 14px; border-radius:10px; cursor:pointer;
    margin-top:auto; font-weight:700;
    transition:background-color .2s ease, transform .08s ease;
    min-height:44px; box-shadow:0 0 0 0 rgba(37,99,235,0);
  }
  .producto-card button:hover{ background:var(--success-600); }
  .producto-card button:active{ transform:translateY(1px); }
  .producto-card button:focus-visible{
    outline:none; box-shadow:var(--ring);
  }
  
  /* 🔽 NUEVO: contenedor con scroll interno para productos en móvil */
  .productos-scroll{
    margin-top:4px;
  }
  
  /* En móviles: lista con alto máximo y scroll propio */
  @media (max-width:840px){
    .productos-scroll{
      max-height:calc(100vh - var(--header-offset) - 170px); /* ajusta 170px si necesitas */
      overflow-y:auto;
      -webkit-overflow-scrolling:touch;
      padding-right:4px;
    }
  }
  
  /* En desktop, comportamiento normal (sin scroll interno) */
  @media (min-width:841px){
    .productos-scroll{
      max-height:none;
      overflow:visible;
    }
  }
  
  /* =========================================================
     5. Cart (Sidebar)
     ======================================================= */
  #carrito{ position:relative; }
  .cart-card{
    position:sticky;
    top:calc(var(--header-offset) + 18px);
    background:#fff; border:1px solid var(--border);
    border-radius:var(--radius); box-shadow:var(--shadow); padding:16px;
  }
  .cart-title{ margin:0 0 6px; font-size:1.2rem; }
  .cart-list{
    list-style:none; padding:0; margin:0 0 10px;
    border-top:1px dashed #eaeaea;
    border-bottom:1px dashed #eaeaea;
  }
  .cart-list li{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:10px 0; border-bottom:1px solid #f1f3f5;
  }
  .cart-list li:last-child{ border-bottom:none; }
  .total-line{
    font-size:1.1rem;
    font-weight:800;
    padding:8px 0 2px;
  }
  
  /* =========================================================
     6. Order Form
     ======================================================= */
  .order-form{
    margin-top:8px;
    padding-top:10px;
    border-top:1px solid #f1f3f5;
    display:flex; flex-direction:column; gap:8px;
  }
  .form-title{ margin:.3rem 0 .4rem; font-size:1rem; }
  .order-form label{
    font-weight:700; font-size:.9rem;
    color:#344054; margin-bottom:4px; display:block;
  }
  .order-form input,
  .order-form select.input{
    width:100%; padding:10px 12px;
    border:1px solid #d0d5dd; border-radius:10px;
    outline:none; background:#fff;
    transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
  }
  .order-form input:focus,
  .order-form select.input:focus{
    border-color:var(--primary);
    box-shadow:var(--ring);
  }
  .row-2{
    display:grid; grid-template-columns:1fr 1fr; gap:12px;
  }
  .help{
    display:block; color:#667085;
    font-size:.82rem; margin-top:4px;
  }
  
  /* =========================================================
     7. Buttons (General)
     ======================================================= */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    width:100%; padding:12px 14px;
    border-radius:12px; border:none; font-weight:800; cursor:pointer;
    transition:transform .06s ease, box-shadow .15s ease, background .2s ease;
    min-height:44px; box-shadow:0 0 0 0 rgba(37,99,235,0);
    background:var(--primary); color:#fff; border:1px solid var(--primary);
  }
  .btn:active{ transform:translateY(1px); }
  .btn:focus-visible{ outline:none; box-shadow:var(--ring); }
  
  .site-header .social-bar a{ color:#eaf0ff; opacity:.95; }
  .site-header .social-bar a:hover{ opacity:1; text-decoration:underline; }
  
  .btn-primary{
    background:var(--primary); color:#fff;
    width:100%; margin-top:12px;
  }
  .btn-primary:hover{ background:var(--primary-600); }
  
  .whatsapp-btn{
    display:block; width:100%;
    padding:13px 14px; background:#25d366; color:#fff;
    border:none; border-radius:12px; font-weight:800; cursor:pointer;
    margin-top:10px;
    transition:background-color .2s ease;
    min-height:44px; box-shadow:0 0 0 0 rgba(37,99,235,0);
  }
  .whatsapp-btn:hover{ background:#1faa58; }
  .whatsapp-btn:focus-visible{ outline:none; box-shadow:var(--ring); }
  
  /* No-JS */
  .nojs{
    color:#b00020; padding:12px;
    background:#fff; border:1px solid #f3c0c0; border-radius:10px;
    max-width:1200px; margin:20px auto;
  }
  
  /* =========================================================
     8. Responsive - Site Layout
     ======================================================= */
  @media (max-width:1024px){
    .layout{ grid-template-columns:1fr 320px; }
  }
  @media (max-width:840px){
    .layout{ grid-template-columns:1fr; }
    .cart-jump{ display:inline-flex; }
    .cart-card{ position:static; }
    .site-header .header-inner{ padding-bottom:8px; }
    .productos-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width:820px){
    :root{ --header-offset:var(--header-h-sm); }
    #auth-user-badge{ max-width:48vw; }
    .site-header .auth-actions{ gap:6px; }
  }
  @media (max-width:540px){
    .productos-grid{ grid-template-columns:1fr; }
    .row-2{ grid-template-columns:1fr; }
  }
  
  /* =========================================================
     9. Admin / Seller Panel
     ======================================================= */
  .admin-body{ background:#eef2f7; }
  .admin-nav .admin-link{
    color:#fff; text-decoration:none; font-weight:700;
    background:rgba(255,255,255,.18);
    padding:8px 12px; border-radius:10px;
    border:1px solid rgba(255,255,255,.25);
  }
  .admin-nav .admin-link:hover{ background:rgba(255,255,255,.3); }
  .admin-container{ padding-block:30px; }
  .admin-grid{
    display:grid; grid-template-columns:1fr; gap:24px;
  }
  
  .card{
    background:#fff; border:1px solid var(--border);
    border-radius:var(--radius); box-shadow:var(--shadow); padding:16px;
  }
  .card-head{ margin-bottom:8px; }
  .card-title{
    margin:.2rem 0;
    font-size:clamp(1.05rem, 3.4vw, 1.3rem);
  }
  .card-sub{ margin:.15rem 0 0; color:#667085; }
  
  .label{
    display:block; font-weight:700; font-size:.92rem;
    color:#344054; margin-top:10px;
  }
  .card .label:first-of-type{ margin-bottom:4px; }
  
  .input, .card select.input{
    width:100%; padding:11px 12px;
    border:1px solid #d0d5dd; border-radius:12px;
    background:#fff; outline:none;
    transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
    appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23475467'%3E%3Cpath d='M6 8l4 4 4-4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 12px center;
    background-size:16px; cursor:pointer;
  }
  .input:focus,
  .card select.input:focus{
    border-color:var(--primary);
    box-shadow:var(--ring);
  }
  
  .card .input-group{
    display:flex; gap:8px; align-items:flex-end;
  }
  .card .input-group .input{ flex-grow:1; }
  
  .actions{ display:flex; gap:10px; align-items:center; margin-top:8px; }
  .actions .btn{ width:auto; }
  
  .order-detail{
    margin-top:14px; padding:14px;
    border:1px solid var(--primary); background:#f0f8ff;
    border-radius:12px;
  }
  .detail-row{
    margin:6px 0; display:flex; gap:8px; align-items:center;
  }
  
  /* Unify admin button sizing */
  .btn{ min-height:44px; }
  .btn, .btn-primary, .btn-warn, .btn-success{
    box-shadow:0 0 0 0 rgba(37,99,235,0);
    font-size:.9rem; padding:10px 14px; min-height:40px; border-radius:10px;
  }
  .btn-primary{ background:var(--primary); color:#fff; width:100%; margin-top:12px; }
  .btn-primary:hover{ background:var(--primary-600); }
  .card .input-group .btn-warn{ background:var(--primary); color:#fff; border:none; }
  .card .input-group .btn-warn:hover{ background:var(--primary-600); }
  .btn-success{ background:#28a745; color:#fff; width:100%; margin-top:12px; }
  .btn-success:hover{ background:#218838; }
  .card .actions .btn-primary{ margin-top:12px; }
  
  .alert{
    margin-top:12px; padding:10px 12px;
    border-radius:10px;
    background:#f8fafc; border:1px solid #e5e7eb; color:#344054;
  }
  
  /* Table */
  .table-head-actions{
    display:flex; align-items:center; gap:8px; margin-bottom:8px;
  }
  .table-head-actions .input{ flex-grow:1; }
  .table-head-actions .btn-refresh{
    padding:8px 12px; border-radius:8px; min-height:38px;
    font-weight:700; background:#f1f5f9; color:#344054;
    transition:background .15s ease;
  }
  .table-head-actions .btn-refresh:hover{ background:#e2e8f0; }
  
  .table-wrap{
    overflow:auto; border:1px solid var(--border);
    border-radius:12px; box-shadow:0 4px 10px rgba(16,24,40,.02);
  }
  .table{
    width:100%; border-collapse:collapse;
    background:#fff; min-width:720px;
  }
  .table th, .table td{
    padding:12px; border-bottom:1px solid #f1f3f5;
    text-align:left; font-size:.93rem;
  }
  .table thead th{
    position:sticky; top:var(--header-offset); z-index:1;
    background:#f1f5f9; color:#344054;
    font-weight:700; padding:14px 12px; font-size:.9rem;
    border-bottom:1px solid #eaecef;
  }
  .table td{ padding:10px 12px; color:#475467; font-size:.9rem; }
  
  /* =========================================================
     10. Status Badges
     ======================================================= */
  .status-badge{
    display:inline-block; padding:4px 8px; border-radius:999px;
    font-size:.78rem; font-weight:800; color:#fff !important;
  }
  .badge-pago-pendiente, .badge-pendiente{ background:#f59e0b; }
  .badge-pagado{ background:#22c55e; }
  .badge-en-proceso, .badge-proceso{ background:#0ea5e9; }
  .badge-listo{ background:#16a34a; }
  .badge-completado{ background:#0f766e; }
  .badge-cancelado{ background:#ef4444; }
  .table td .status-badge{ padding:4px 10px; border-radius:999px; }
  
  /* =========================================================
     11. Responsive - Admin & Mobile
     ======================================================= */
  @media (max-width:560px){
    .actions{ flex-direction:column; align-items:stretch; }
    .actions .btn{ width:100%; }
    .card .input-group{ flex-direction:column; }
    .card .input-group .input{ width:100%; }
    .card .input-group .btn-warn{ width:100%; margin-top:4px; }
  }
  
  /* =========================================================
     12. Store Config — Social strip & contact line
     ======================================================= */
  #social-strip{
    display:flex; gap:10px; align-items:center;
    flex-wrap:wrap; padding:6px 0 10px;
  }
  .social-pill{
    display:inline-flex; align-items:center; gap:8px;
    padding:7px 12px; border-radius:999px;
    background:rgba(255,255,255,.18);
    border:1px solid rgba(255,255,255,.25);
    color:#fff; text-decoration:none; font-weight:800; line-height:1;
    transition:background .2s ease, transform .06s ease, box-shadow .15s ease;
  }
  .social-pill:hover{ background:rgba(255,255,255,.30); }
  .social-pill:active{ transform:translateY(1px); }
  .social-pill:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
  .social-pill svg{ width:16px; height:16px; display:block; }
  .contact-line{
    margin-top:10px; color:#475569; font-size:.95rem;
  }
  .contact-line a{ color:#2563eb; text-decoration:underline; }
  
  /* Brand patch — SVG icons */
  .social-bar a{ color:#2563eb; font-weight:600; text-decoration:none; }
  .social-icon{
    width:16px; height:16px; display:inline-block;
    background-size:contain; background-repeat:no-repeat;
    background-color:transparent; border-radius:0;
  }
  #social-instagram .social-icon,
  #footer-instagram .social-icon{ background-image:url('/img/instagram.svg'); }
  #social-facebook .social-icon,
  #footer-facebook .social-icon{ background-image:url('/img/facebook.svg'); }
  #social-tiktok .social-icon,
  #footer-tiktok .social-icon{ background-image:url('/img/tiktok.svg'); }
  
  /* Script-built "social-link" */
  .social-link{
    display:inline-flex; align-items:center; gap:8px;
    padding:7px 12px; border-radius:999px;
    background:rgba(255,255,255,.18);
    border:1px solid rgba(255,255,255,.25);
    color:#fff; text-decoration:none; font-weight:800; line-height:1;
    transition:background .2s ease, transform .06s ease, box-shadow .15s ease;
  }
  .social-link:hover{ background:rgba(255,255,255,.30); }
  .social-link:active{ transform:translateY(1px); }
  .social-link:focus-visible{
    outline:2px solid #fff; outline-offset:2px;
  }
  .social-link .social-icon{
    width:16px; height:16px; display:inline-flex;
  }
  
  /* Hide phone/WhatsApp on store page but keep address */
  body[data-page="store"] #contact-phone,
  body[data-page="store"] #footer-phone,
  body[data-page="store"] #contact-whatsapp,
  body[data-page="store"] #footer-whatsapp{
    display:none !important;
  }
  
  /* =========================================================
     13. Footer Social — Polish
     ======================================================= */
  .site-footer .social-bar{
    display:flex; justify-content:center; align-items:center;
    gap:18px; padding:12px 0 22px; flex-wrap:wrap;
  }
  .site-footer .social-bar a{
    display:inline-flex; align-items:center; gap:8px;
    color:#2563eb; text-decoration:none; font-weight:700; line-height:1;
    border-radius:10px; padding:6px 8px;
    transition:background .15s ease, transform .06s ease, color .15s ease;
  }
  .site-footer .social-bar a:hover{ background:#eef5ff; }
  .site-footer .social-bar a:active{ transform:translateY(1px); }
  .site-footer .social-bar .social-icon{
    width:18px; height:18px; display:inline-flex;
    align-items:center; justify-content:center;
    background:none !important; border-radius:0 !important;
  }
  .site-footer .social-bar .social-icon svg{
    width:18px; height:18px; display:block; color:currentColor;
  }
  @media (max-width:540px){
    .site-footer .social-bar{ gap:14px; }
    .site-footer .social-bar a{ padding:6px 6px; }
  }
  
  /* =========================================================
     14. Header Social — Polish
     ======================================================= */
  .site-header #social-strip{
    display:flex; gap:14px; align-items:center;
    flex-wrap:wrap; padding:10px 0 14px;
  }
  .site-header #social-strip a{
    display:inline-flex; align-items:center; gap:10px;
    text-decoration:none; color:#fff;
    background:rgba(255,255,255,.12);
    border:1.5px solid rgba(255,255,255,.55);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
    backdrop-filter:saturate(140%) blur(2px);
    padding:10px 16px; border-radius:999px; font-weight:800; line-height:1;
    transition:background .18s ease, box-shadow .18s ease, transform .06s ease;
  }
  .site-header #social-strip a:hover{
    background:rgba(255,255,255,.22);
    box-shadow:0 6px 18px rgba(0,0,0,.18);
  }
  .site-header #social-strip a:active{ transform:translateY(1px); }
  .site-header #social-strip a:focus-visible{
    outline:3px solid #fff; outline-offset:2px;
  }
  .site-header #social-strip .social-icon{
    width:20px; height:20px; display:inline-flex;
    align-items:center; justify-content:center;
    background:none !important; border-radius:0 !important;
  }
  .site-header #social-strip .social-icon svg{
    width:20px; height:20px; display:block; color:currentColor;
  }
  @media (max-width:540px){
    .site-header #social-strip{ gap:10px; }
    .site-header #social-strip a{ padding:9px 14px; }
  }
  
  /* =========================================================
     15. Header CTA / Warn Buttons
     ======================================================= */
  .admin-nav .login-link,
  .header-cta,
  .btn-warn.header-cta{
    background:#ffd166; color:#1f2937;
    border:1.5px solid rgba(255,255,255,.55);
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
  }
  .admin-nav .login-link:hover,
  .header-cta:hover{ filter:brightness(.96); }
  .btn-warn{
    background:#f59e0b; color:#111827;
    border:1px solid rgba(0,0,0,.06);
  }
  
  /* =========================================================
     16. Admin Nav — Logout
     ======================================================= */
  .admin-nav .logout-link{
    color:#fff; text-decoration:none; font-weight:800;
    background:#ef4444; padding:8px 12px; border-radius:10px;
    border:1px solid rgba(255,255,255,.25);
    box-shadow:0 6px 14px rgba(239,68,68,.15);
  }
  .admin-nav .logout-link:hover{ background:#dc2626; }
  .site-header #btn-logout.btn-danger{ background:#ef4444; }
  .site-header #btn-logout.btn-outline{
    background:#fff; color:#0f172a; border:1px solid #e2e8f0;
  }
  @media (max-width:540px){
    .admin-nav .login-link,
    .admin-nav .logout-link{ padding:8px 10px; }
  }
  
  /* =========================================================
     17. A11y / helpers / Motion
     ======================================================= */
  .sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  .img-fluid{ max-width:100%; height:auto; }
  .product-img{
    width:100%; aspect-ratio:1/1;
    object-fit:cover; border-radius:10px; background:#f3f4f6;
  }
  
  .drawer{
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    transform:translateY(100%); transition:transform .25s ease;
    background:#fff; border-top-left-radius:16px; border-top-right-radius:16px;
    box-shadow:0 -10px 28px rgba(2,8,23,.12);
    max-height:85vh; display:flex; flex-direction:column;
    padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .drawer--open{ transform:translateY(0); }
  .drawer-handle{
    width:44px; height:5px; border-radius:999px;
    background:#e5e7eb; margin:8px auto 6px;
  }
  .drawer-body{ overflow:auto; padding:10px 14px 14px; }
  @media (min-width:841px){ .drawer{ display:none; } }
  
  .sticky-cta{
    position:fixed; left:0; right:0; bottom:0; z-index:55;
    display:none; justify-content:center; padding:10px 12px;
    background:rgba(255,255,255,.92); backdrop-filter:blur(6px);
    border-top:1px solid #e5e7eb;
    padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .sticky-cta__btn{
    display:inline-flex; align-items:center; gap:8px; padding:12px 16px;
    border-radius:999px; font-weight:800;
    background:var(--primary); color:#fff; border:none; box-shadow:var(--shadow);
  }
  .sticky-cta__btn:hover{ background:var(--primary-600); }
  
  .toast{
    position:fixed; left:50%; transform:translateX(-50%);
    bottom:calc(80px + env(safe-area-inset-bottom,0px));
    background:#111827; color:#fff;
    padding:10px 14px; border-radius:12px;
    box-shadow:0 8px 22px rgba(2,8,23,.18); z-index:70;
    font-weight:700;
  }
  .toast--success{ background:#16a34a; }
  .toast--error{ background:#ef4444; }
  
  .skeleton{
    position:relative; overflow:hidden;
    background:#f1f5f9; border-radius:10px;
  }
  .skeleton::after{
    content:""; position:absolute; inset:0; transform:translateX(-100%);
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
    animation:shimmer 1.2s infinite;
  }
  @keyframes shimmer{ 100%{ transform:translateX(100%); } }
  
  .is-loading{ opacity:.8; pointer-events:none; }
  .is-disabled, .btn[disabled], button[disabled]{ opacity:.6; pointer-events:none; }
  .is-invalid{
    border-color:#ef4444 !important;
    box-shadow:0 0 0 3px rgba(239,68,68,.15) !important;
  }
  .field-error{
    color:#ef4444; font-size:.82rem; margin-top:4px;
  }
  
  @media (min-width:1440px){
    .container{ max-width:1320px; }
  }
  
  @media (prefers-reduced-motion:reduce){
    *{
      animation:none !important;
      transition:none !important;
      scroll-behavior:auto !important;
    }
  }
  
  /* =========================================================
     18. Disable auto dark mode styles (final guard)
     ======================================================= */
  @media (prefers-color-scheme:dark){
    :root{ --bg:#f6f7fb; --text:#222; --card:#ffffff; }
    body{
      background:var(--bg) !important;
      color:var(--text) !important;
    }
    #productos, .card, .cart-card{
      background:var(--card); border-color:var(--border);
    }
    .table thead th{
      background:#f1f5f9; color:#344054; border-bottom-color:#eaecef;
    }
    .section-sub, .help, .contact-line{ color:#6b7280; }
  }