/* ============================================================
   sunra-lista.css — estilos compartidos por lista-mayorista
   y lista-revendedores.
   ============================================================ */

    /* Reglas globales que antes llegaban desde store.css (22 KB de los que
       esta página no usaba ninguna clase). */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body { font-family: 'DM Sans', sans-serif; color: #0f172a; -webkit-font-smoothing: antialiased; }
    a { text-decoration: none; color: inherit; }
    img { max-width: 100%; display: block; }

    :root {
      --ancho-max:    1680px;
      --sunra-black:  #1a1a1a;
      --sunra-yellow: #f5c518;
      --sunra-gray:   #f5f5f5;
      --sunra-line:   #e5e5e5;
      --gain-green:   #16a34a;
      --gain-bg:      #ecfdf5;
    }
    body { background: var(--sunra-gray); }

    /* Hero */
    .hero {
      background:var(--sunra-black); color:#fff; padding:40px 20px 32px;
    }
    .hero-inner { max-width:var(--ancho-max); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
    .hero-title-wrap { display:flex; flex-direction:column; }
    .hero-title {
      font-family:'Bebas Neue',sans-serif; font-size:44px; letter-spacing:3px; line-height:1;
    }
    .hero-title .yellow { color:var(--sunra-yellow); }
    .hero-sub { font-size:14px; color:#bbb; margin-top:6px; }
    .hero-badge {
      background:var(--sunra-yellow); color:var(--sunra-black); padding:8px 18px;
      border-radius:50px; font-weight:800; font-size:14px; letter-spacing:1px;
      text-transform:uppercase;
    }

    /* Toolbar */
    .toolbar {
      max-width:var(--ancho-max); margin:0 auto; padding:14px 20px;
      display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    }
    /* Queda a mano durante todo el scroll del catálogo */
    .toolbar-sticky {
      position:sticky; top:-1px; z-index:50; margin-top:20px;
      background:var(--sunra-gray); border-bottom:1px solid transparent;
      transition:box-shadow .18s, border-color .18s;
    }
    .toolbar-sticky.pegada {
      box-shadow:0 4px 16px rgba(0,0,0,.07); border-bottom-color:var(--sunra-line);
    }
    .search {
      flex:1; min-width:220px; display:flex; align-items:center; gap:10px; padding:10px 16px;
      background:#fff; border-radius:50px; border:1px solid var(--sunra-line);
    }
    .search input { flex:1; border:none; outline:none; font-family:inherit; font-size:14px; background:none; }
    .cat-chips { display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; max-width:100%; }
    .cat-chips::-webkit-scrollbar { height:4px; }
    .cat-chip {
      padding:8px 16px; border-radius:50px; background:#fff; border:1px solid var(--sunra-line);
      font-family:inherit; font-size:13px; font-weight:600; color:#333; cursor:pointer; white-space:nowrap;
      transition:all .15s;
    }
    .cat-chip:hover { border-color:var(--sunra-yellow); }
    .cat-chip.active { background:var(--sunra-black); color:#fff; border-color:var(--sunra-black); }
    .cat-chip .cnt { font-size:11px; color:#999; margin-left:4px; font-weight:400; }
    .cat-chip.active .cnt { color:#f5c518; }

    /* Grid */
    .catalog {
      max-width:var(--ancho-max); margin:24px auto 60px; padding:0 20px;
      display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:16px;
    }
    .prod {
      background:#fff; border-radius:14px; overflow:hidden;
      box-shadow:0 4px 16px rgba(0,0,0,.06);
      display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s;
    }
    .prod:hover { transform:translateY(-3px); box-shadow:0 12px 32px rgba(0,0,0,.12); }
    .prod-img {
      background:#fafafa; height:180px; display:flex; align-items:center; justify-content:center;
      border-bottom:1px solid var(--sunra-line); position:relative;
    }
    .prod-img img { max-width:100%; max-height:100%; object-fit:contain; padding:12px; }
    .prod-img-ph { font-size:64px; opacity:.15; }
    .prod-badge {
      position:absolute; top:12px; right:12px; background:var(--sunra-yellow);
      color:var(--sunra-black); font-size:9px; font-weight:800;
      padding:4px 10px; border-radius:12px; text-transform:uppercase; letter-spacing:.5px;
    }
    .prod-badge.discount { background:#dc2626; color:#fff; }
    .prod-body { padding:16px; display:flex; flex-direction:column; gap:10px; flex:1; }
    .prod-name {
      font-family:'Bebas Neue',sans-serif; font-size:24px; letter-spacing:1.5px;
      color:var(--sunra-black); line-height:1;
    }
    .prod-specs { font-size:12px; color:#666; line-height:1.5; }
    .prod-specs strong { color:var(--sunra-black); font-weight:700; }
    .prod-colors { display:flex; flex-wrap:wrap; gap:4px; margin-top:2px; }
    .color-chip {
      font-size:10px; padding:2px 8px; border-radius:10px;
      background:#f0f0f0; color:#555; font-weight:600;
    }

    /* Precios */
    .prod-prices { margin-top:auto; padding-top:12px; border-top:1px solid var(--sunra-line); display:flex; flex-direction:column; gap:8px; }
    .price-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
    .price-block { padding:10px 12px; border-radius:10px; text-align:center; }
    .price-block.mayorista {
      background:var(--sunra-black); color:#fff;
      border:1px solid var(--sunra-black);
    }
    .price-block.mayorista .price-lbl { color:var(--sunra-yellow); opacity:1; }
    .price-block.sugerido {
      background:var(--sunra-yellow); color:var(--sunra-black);
      border:1px solid var(--sunra-yellow);
    }
    .price-lbl {
      font-size:9px; text-transform:uppercase; letter-spacing:.6px; font-weight:800;
      opacity:.75; margin-bottom:3px;
    }
    .price-val {
      font-family:'Bebas Neue',sans-serif; font-size:22px; letter-spacing:1px; line-height:1;
    }
    .price-val small { font-size:11px; font-weight:600; opacity:.7; margin-right:3px; }

    /* Ganancia */
    .ganancia-block {
      background:var(--gain-bg); border:1.5px solid #86efac; border-radius:10px;
      padding:9px 12px; display:flex; align-items:center; justify-content:space-between; gap:8px;
    }
    .ganancia-lbl {
      font-size:10px; text-transform:uppercase; letter-spacing:.5px; font-weight:800;
      color:#065f46;
    }
    .ganancia-val {
      font-family:'Bebas Neue',sans-serif; font-size:20px; letter-spacing:.8px; line-height:1;
      color:var(--gain-green);
    }
    .ganancia-val small { font-size:10px; font-weight:700; margin-right:2px; opacity:.7; }
    .ganancia-pct {
      font-size:10px; font-weight:800; color:#065f46;
      background:#bbf7d0; padding:2px 7px; border-radius:10px; margin-left:6px;
    }

    .prod-cert {
      text-align:center; font-size:9.5px; color:#555;
      background:#fffbeb; border:1px solid #fde68a; border-radius:6px;
      padding:5px 8px; font-weight:600; margin-top:6px;
    }
    .prod-cert.big-disc {
      background:#fef2f2; border-color:#fecaca; color:#b91c1c;
    }

    /* Info banner */
    .info-bar {
      max-width:var(--ancho-max); margin:16px auto; padding:14px 20px;
      background:#fff; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,.05);
      display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
    }
    .info-bar .stats { display:flex; gap:24px; flex-wrap:wrap; }
    .info-bar .stat { font-size:12px; color:#666; }
    .info-bar .stat strong { color:var(--sunra-black); font-weight:800; font-size:16px; display:block; }
    .info-bar .actions { display:flex; gap:8px; }
    .info-bar .btn-print, .info-bar .btn-back {
      display:inline-flex; align-items:center; gap:6px;
      padding:8px 14px; background:var(--sunra-black); color:#fff;
      border-radius:50px; font-size:12px; font-weight:600;
      border:none; cursor:pointer; text-decoration:none; font-family:inherit;
    }
    .info-bar .btn-print:hover { background:var(--sunra-yellow); color:var(--sunra-black); }
    .info-bar .btn-back { background:#e5e5e5; color:var(--sunra-black); }
    .info-bar .btn-back:hover { background:var(--sunra-black); color:#fff; }

    /* Leyenda para revendedores */
    .revend-note {
      max-width:var(--ancho-max); margin:0 auto 4px; padding:14px 20px;
      background:linear-gradient(135deg, #ecfdf5 0%, #fef3c7 100%);
      border:1px solid #fde68a; border-radius:12px;
      display:flex; align-items:center; gap:14px;
      font-size:13px; color:#374151; line-height:1.5;
    }
    .revend-note .rn-ico { font-size:28px; }
    .revend-note strong { color:var(--sunra-black); }

    /* Botón "Compartir con tu cliente" */
    .btn-share {
      display:inline-flex; align-items:center; gap:6px;
      padding:8px 14px; background:#25d366; color:#fff;
      border-radius:50px; font-size:12px; font-weight:700;
      border:none; cursor:pointer; text-decoration:none; font-family:inherit;
    }
    .btn-share:hover { background:#1ea952; }

    /* Modal Compartir */
    .sh-overlay {
      position:fixed; inset:0; background:rgba(15,23,42,.65); backdrop-filter:blur(4px);
      display:none; align-items:center; justify-content:center; z-index:9999; padding:20px;
    }
    .sh-overlay.show { display:flex; }
    .sh-card {
      background:#fff; border-radius:20px; max-width:520px; width:100%;
      max-height:92vh; overflow-y:auto;
      box-shadow:0 30px 80px rgba(0,0,0,.4);
    }
    .sh-header {
      padding:24px 28px 12px; border-bottom:1px solid var(--sunra-line); position:relative;
    }
    .sh-header h2 {
      font-family:'Bebas Neue',sans-serif; font-size:26px; letter-spacing:2px;
      color:var(--sunra-black); margin:0;
    }
    .sh-header p { color:#666; font-size:13px; margin:6px 0 0; line-height:1.5; }
    .sh-close {
      position:absolute; top:14px; right:14px;
      background:#f1f5f9; border:none; width:32px; height:32px; border-radius:50%;
      font-size:16px; cursor:pointer; color:#475569;
    }
    .sh-close:hover { background:#e2e8f0; }
    .sh-body { padding:22px 28px; }
    .sh-field { margin-bottom:14px; }
    .sh-field label {
      display:block; font-size:11px; font-weight:700; text-transform:uppercase;
      letter-spacing:.5px; color:#475569; margin-bottom:6px;
    }
    .sh-field input {
      width:100%; padding:12px 14px; border:1.5px solid var(--sunra-line); border-radius:10px;
      font-family:inherit; font-size:14px; outline:none; transition:border-color .15s;
      background:#fff;
    }
    .sh-field input:focus { border-color:#25d366; }
    .sh-linkbox {
      background:#f8fafc; border:1px dashed #cbd5e1; border-radius:10px;
      padding:12px 14px; font-family:'DM Mono',monospace; font-size:11px;
      color:#334155; word-break:break-all; margin-bottom:12px;
      max-height:80px; overflow:auto;
    }
    .sh-btns { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
    .sh-btn {
      padding:12px; border:none; border-radius:10px; cursor:pointer;
      font-family:inherit; font-size:13px; font-weight:800; text-transform:uppercase;
      letter-spacing:.5px; transition:all .15s; display:inline-flex;
      align-items:center; justify-content:center; gap:6px;
    }
    .sh-btn-copy { background:var(--sunra-black); color:#fff; }
    .sh-btn-copy:hover { background:#000; }
    .sh-btn-wa { background:#25d366; color:#fff; }
    .sh-btn-wa:hover { background:#1ea952; }
    .sh-hint {
      margin-top:12px; padding:10px 12px; background:#eff6ff; border:1px solid #bfdbfe;
      border-radius:8px; font-size:12px; color:#1e40af; line-height:1.5;
    }

    /* Modo Cliente: sin precios, con botón WhatsApp por producto */
    .cliente-badge {
      display:inline-block; padding:6px 14px; background:#25d366; color:#fff;
      font-size:12px; font-weight:800; letter-spacing:1px; text-transform:uppercase;
      border-radius:50px; margin-bottom:8px;
    }
    .btn-wa-prod {
      display:inline-flex; align-items:center; justify-content:center; gap:8px;
      width:100%; padding:13px; margin-top:auto;
      background:#25d366; color:#fff; border:none; border-radius:10px;
      font-family:inherit; font-size:14px; font-weight:800; text-transform:uppercase;
      letter-spacing:.5px; cursor:pointer; text-decoration:none;
      transition:background .15s;
    }
    .btn-wa-prod:hover { background:#1ea952; }
    .cliente-hero-cta {
      max-width:var(--ancho-max); margin:16px auto 0; padding:20px 24px;
      background:linear-gradient(135deg,#ecfdf5 0%, #d1fae5 100%);
      border:1.5px solid #86efac; border-radius:14px;
      display:flex; align-items:center; gap:16px; flex-wrap:wrap;
    }
    .cliente-hero-cta .chc-ico { font-size:36px; }
    .cliente-hero-cta .chc-txt { flex:1; min-width:220px; color:#065f46; }
    .cliente-hero-cta .chc-txt strong { color:#064e3b; font-size:15px; display:block; margin-bottom:2px; }
    .cliente-hero-cta .chc-btn {
      display:inline-flex; align-items:center; gap:8px;
      padding:12px 22px; background:#25d366; color:#fff;
      border-radius:50px; font-weight:800; text-decoration:none;
      font-size:14px; text-transform:uppercase; letter-spacing:.5px;
    }
    .cliente-hero-cta .chc-btn:hover { background:#1ea952; }

    @media(max-width:640px){
      .hero-title { font-size:34px; }
      .price-row { grid-template-columns:1fr; }
    }
    @media print {
      body { background:#fff; }
      .toolbar, .info-bar, .revend-note, #navbar, #topbar, footer, #wa-fab { display:none !important; }
      .catalog { grid-template-columns:repeat(2,1fr); gap:8px; }
      .prod { break-inside:avoid; box-shadow:none; border:1px solid #ddd; }
      .hero { background:#fff; color:#000; padding:12px 20px; }
      .hero-title { color:#000; }
      .hero-title .yellow { color:#c9a20f; }
      .price-block.mayorista { background:#f5f5f5; color:#000; border-color:#999; }
      .price-block.mayorista .price-lbl { color:#666; }
    }
    /* ═════════ PASSWORD GATE ═════════ */
    #gateWrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:40px 20px; }
    #content  { display:none; }
    /* El catálogo sin precios (?wa=) y la sesión ya validada entran directo */
    html.is-cliente #gateWrap, html.is-auth #gateWrap { display:none; }
    html.is-cliente #content,  html.is-auth #content  { display:block; }
    .gate-card {
      background:#fff; border-radius:20px; padding:40px; max-width:440px; width:100%;
      box-shadow:0 20px 60px rgba(0,0,0,.1); text-align:center;
    }
    .gate-icon { font-size:48px; margin-bottom:12px; }
    .gate-card h1 { font-family:'Bebas Neue',sans-serif; font-size:32px; letter-spacing:2px; margin-bottom:8px; color:var(--sunra-black); }
    .gate-card p { color:#666; font-size:14px; margin-bottom:24px; line-height:1.6; }
    .gate-card input {
      width:100%; padding:14px 18px; border:2px solid var(--sunra-line); border-radius:12px;
      font-family:inherit; font-size:16px; outline:none; margin-bottom:14px; transition:border-color .15s;
    }
    .gate-card input:focus { border-color:var(--sunra-yellow); }
    .gate-card button {
      width:100%; padding:14px; background:var(--sunra-black); color:#fff; border:none;
      border-radius:12px; font-family:inherit; font-size:15px; font-weight:700; cursor:pointer;
      text-transform:uppercase; letter-spacing:1px; transition:all .15s;
    }
    .gate-card button:hover { background:var(--sunra-yellow); color:var(--sunra-black); }
    .gate-error { color:#dc2626; font-size:13px; margin-top:8px; min-height:18px; }

    /* ── Precio único (cada lista muestra un solo precio) ──────── */
    .price-block.price-solo { width:100%; padding:14px 16px; }
    .price-block.price-solo .price-val { font-size:30px; }
    .precio-ref {
      margin-top:8px; font-size:11px; line-height:1.4; text-align:center;
      color:#92400e; background:#fffbeb; border:1px solid #fde68a;
      border-radius:8px; padding:6px 10px;
    }

    .price-block.price-solo + .price-block.price-solo { margin-top:8px; }
    .price-sub { font-size:10px; opacity:.75; margin-top:2px; font-weight:600; }
    .price-nota {
      margin-top:8px; font-size:11px; text-align:center; color:#555;
      background:#f5f5f5; border-radius:8px; padding:6px 10px;
    }