/* ============================================================
   Cadena — tema compartido. Mismos colores/tipografía que las
   demos aprobadas. --store se sobreescribe por tienda (color_primario).
   ============================================================ */
:root{
  --ink:#0D1117;
  --panel:#141A22;
  --panel-2:#1B222C;
  --line:#262F3B;
  --text:#E7EBF0;
  --muted:#8B96A5;
  --muted-2:#5B6472;
  --brass:#C9963E;
  --brass-soft:rgba(201,150,62,.14);
  --teal:#3FB6A8;
  --teal-soft:rgba(63,182,168,.14);
  --violet:#9C82E0;
  --violet-soft:rgba(156,130,224,.14);
  --danger:#E2574C;
  --danger-soft:rgba(226,87,76,.14);
  --radius:14px;
  --radius-sm:9px;
  --font-display:'Space Grotesk',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --store:#3FB6A8;
  --store-soft:rgba(63,182,168,.14);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(1100px 550px at 85% -10%, color-mix(in srgb, var(--store) 10%, transparent), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(63,182,168,.07), transparent 60%),
    var(--ink);
  color:var(--text);
  font-family:var(--font-body);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--store-soft);}
a{color:inherit; text-decoration:none;}
button, input, select, textarea{font-family:var(--font-body);}
code{font-family:var(--font-mono);}

/* ============ TIENDA PÚBLICA ============ */
.storefront-header{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 28px; border-bottom:1px solid var(--line);
  background:rgba(13,17,23,.85); backdrop-filter:blur(10px);
}
.store-brand{display:flex; align-items:center; gap:12px; min-width:0;}
.store-mark{
  width:38px; height:38px; border-radius:11px; flex-shrink:0; overflow:hidden;
  background:linear-gradient(140deg, var(--store), color-mix(in srgb, var(--store) 40%, var(--violet)));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:.9rem; color:#0D1117;
}
.store-mark img{width:100%; height:100%; object-fit:cover;}
.store-name{font-family:var(--font-display); font-weight:700; font-size:1.05rem; letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.store-tagline{font-size:.72rem; color:var(--muted-2); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.header-right{display:flex; align-items:center; gap:12px; flex-shrink:0;}
.cart-btn{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:11px;
  border:1px solid var(--line); background:var(--panel-2); color:var(--text);
  cursor:pointer;
}
.cart-btn svg{width:18px; height:18px;}
.cart-count{
  position:absolute; top:-6px; right:-6px;
  min-width:18px; height:18px; padding:0 4px; border-radius:999px;
  background:var(--store); color:#0D1117; font-family:var(--font-mono); font-weight:700; font-size:.66rem;
  display:flex; align-items:center; justify-content:center;
}
.hero{
  padding:44px 28px 34px; text-align:center;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, color-mix(in srgb, var(--store) 8%, transparent), transparent);
}
.hero-tag{
  display:inline-flex; align-items:center; gap:7px; margin-bottom:14px;
  padding:5px 12px; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--store) 40%, transparent); background:var(--store-soft);
  font-size:.72rem; font-weight:600; color:var(--store); text-transform:uppercase; letter-spacing:.4px;
}
.hero h1{font-family:var(--font-display); font-size:clamp(1.5rem,4vw,2.1rem); margin:0 0 10px; font-weight:600;}
.hero p{margin:0 auto; max-width:520px; color:var(--muted); font-size:.9rem; line-height:1.55;}
.catalog{max-width:1080px; margin:0 auto; padding:32px 28px 70px;}
.catalog-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:18px; flex-wrap:wrap;}
.catalog-head h2{font-family:var(--font-display); font-size:1.05rem; font-weight:600; margin:0;}
.catalog-head .hint{font-size:.78rem; color:var(--muted-2);}
.product-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:16px;}
.product-card{
  display:flex; flex-direction:column; gap:12px;
  padding:16px; border-radius:var(--radius);
  border:1px solid var(--line); background:var(--panel);
  transition:border-color .15s ease, transform .15s ease;
}
.product-card:hover{border-color:color-mix(in srgb, var(--store) 45%, var(--line)); transform:translateY(-2px);}
.product-image{
  width:100%; aspect-ratio:4/3; border-radius:var(--radius-sm); overflow:hidden;
  background:var(--panel-2); display:flex; align-items:center; justify-content:center;
}
.product-image img{width:100%; height:100%; object-fit:cover; display:block;}
.product-image .ph{color:var(--muted-2); font-size:.7rem;}
.product-cat{
  align-self:flex-start; font-size:.66rem; text-transform:uppercase; letter-spacing:.5px; font-weight:600;
  padding:4px 9px; border-radius:999px; color:var(--store); background:var(--store-soft);
}
.product-name{font-family:var(--font-display); font-weight:600; font-size:.98rem; line-height:1.3;}
.product-plan-note{font-size:.72rem; color:var(--muted-2);}
.product-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:6px;}
.product-price{font-family:var(--font-mono); font-size:1.2rem; font-weight:600;}
.add-btn, .btn-view{
  display:flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:999px; border:1px solid transparent;
  background:var(--store); color:#0D1117; font-weight:700; font-size:.78rem;
  cursor:pointer; transition:filter .15s ease;
}
.add-btn:hover, .btn-view:hover{filter:brightness(1.1);}
.add-btn svg{width:13px; height:13px;}
.add-btn[data-added="true"]{background:var(--panel-2); color:var(--teal); border-color:rgba(63,182,168,.4);}
.add-btn:disabled{background:var(--panel-2); color:var(--muted-2); cursor:not-allowed;}

.cart-scrim{display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:45;}
.cart-scrim[data-open="true"]{display:block;}
.cart-drawer{
  position:fixed; top:0; right:0; bottom:0; width:380px; max-width:92vw; z-index:50;
  background:var(--panel); border-left:1px solid var(--line);
  display:flex; flex-direction:column;
  transform:translateX(104%); transition:transform .25s ease;
  box-shadow:-24px 0 50px rgba(0,0,0,.5);
}
.cart-drawer[data-open="true"]{transform:translateX(0);}
.cart-head{display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--line);}
.cart-head h3{font-family:var(--font-display); font-size:1rem; margin:0; font-weight:600;}
.cart-close{width:30px; height:30px; border-radius:9px; border:1px solid var(--line); background:var(--panel-2); color:var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer;}
.cart-close svg{width:14px; height:14px;}
.cart-body{flex:1; overflow-y:auto; padding:14px 20px;}
.cart-empty{color:var(--muted-2); font-size:.85rem; text-align:center; padding:40px 10px;}
.cart-item{display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line);}
.cart-item:last-child{border-bottom:none;}
.cart-item .info{flex:1; min-width:0;}
.cart-item .name{font-size:.85rem; font-weight:600;}
.cart-item .unit{font-size:.72rem; color:var(--muted-2); font-family:var(--font-mono); margin-top:1px;}
.qty-stepper{display:flex; align-items:center; gap:8px; background:var(--panel-2); border:1px solid var(--line); border-radius:999px; padding:3px;}
.qty-stepper button{width:22px; height:22px; border-radius:50%; border:none; background:transparent; color:var(--text); cursor:pointer; font-size:.9rem; line-height:1; display:flex; align-items:center; justify-content:center;}
.qty-stepper button:hover{background:rgba(255,255,255,.06);}
.qty-stepper .qty-val{font-family:var(--font-mono); font-size:.8rem; min-width:14px; text-align:center;}
.cart-item .line-total{font-family:var(--font-mono); font-size:.85rem; font-weight:600; white-space:nowrap;}
.cart-remove{background:none; border:none; color:var(--muted-2); cursor:pointer; padding:2px; display:flex; align-items:center; justify-content:center;}
.cart-remove:hover{color:var(--danger);}
.cart-remove svg{width:14px; height:14px;}
.cart-foot{padding:18px 20px; border-top:1px solid var(--line);}
.cart-total-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.cart-total-row .label{font-size:.82rem; color:var(--muted);}
.cart-total-row .value{font-family:var(--font-mono); font-size:1.25rem; font-weight:600;}
.checkout-btn{width:100%; padding:13px; border-radius:999px; border:none; background:var(--store); color:#0D1117; font-family:var(--font-body); font-weight:700; font-size:.88rem; cursor:pointer; transition:filter .15s ease;}
.checkout-btn:hover{filter:brightness(1.1);}
.checkout-btn:disabled{background:var(--panel-2); color:var(--muted-2); cursor:not-allowed;}
.cart-note{font-size:.7rem; color:var(--muted-2); text-align:center; margin-top:10px; line-height:1.5;}

.toast{
  position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--panel-2); border:1px solid var(--line); border-radius:999px;
  padding:11px 20px; font-size:.82rem; display:flex; align-items:center; gap:9px;
  opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease; z-index:60;
  max-width:90vw; text-align:left;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
.toast svg{width:15px; height:15px; color:var(--teal); flex-shrink:0;}

.storefront-footer{border-top:1px solid var(--line); padding:30px 28px; text-align:center; color:var(--muted-2); font-size:.78rem;}
.storefront-footer a{color:var(--store);}
.social-row{display:flex; gap:12px; justify-content:center; margin-top:10px;}

/* ============ PANEL PRIVADO ============ */
.shell{display:flex; min-height:100vh;}
.sidebar{width:250px; flex-shrink:0; background:var(--panel); border-right:1px solid var(--line); display:flex; flex-direction:column; padding:22px 16px; position:sticky; top:0; height:100vh; overflow-y:auto;}
.brand{display:flex; align-items:center; gap:10px; padding:4px 8px 22px;}
.brand-mark{width:32px; height:32px; border-radius:9px; background:linear-gradient(140deg,var(--brass),var(--violet)); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:.85rem; color:#0D1117; flex-shrink:0;}
.brand-name{font-family:var(--font-display); font-weight:700; font-size:1rem; letter-spacing:.2px;}
.brand-sub{font-size:.66rem; color:var(--muted-2); text-transform:uppercase; letter-spacing:.6px;}
.role-switch{display:flex; flex-direction:column; gap:6px; padding:10px; margin-bottom:20px; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius);}
.role-switch-label{font-size:.66rem; text-transform:uppercase; letter-spacing:.6px; color:var(--muted-2); padding:2px 6px 4px;}
.role-btn{display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:var(--radius-sm); border:1px solid transparent; background:transparent; color:var(--muted); font-family:var(--font-body); font-size:.82rem; font-weight:600; cursor:pointer; text-align:left; width:100%; transition:background .15s ease, color .15s ease, border-color .15s ease;}
.role-btn:hover{background:rgba(255,255,255,.03); color:var(--text);}
.role-btn .dot{width:7px; height:7px; border-radius:50%; background:var(--muted-2); flex-shrink:0;}
.role-btn[data-active="true"]{background:var(--brass-soft); border-color:rgba(201,150,62,.35); color:var(--text);}
.role-btn[data-active="true"] .dot{background:var(--brass);}
.nav{display:flex; flex-direction:column; gap:2px; flex:1;}
.nav-item{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--radius-sm); color:var(--muted); font-size:.85rem; font-weight:600; cursor:pointer; border:1px solid transparent; transition:background .15s ease, color .15s ease;}
.nav-item svg{width:16px; height:16px; flex-shrink:0;}
.nav-item:hover{background:rgba(255,255,255,.03); color:var(--text);}
.nav-item[data-active="true"]{background:var(--panel-2); color:var(--text); border-color:var(--line);}
.sidebar-foot{padding-top:14px; margin-top:14px; border-top:1px solid var(--line);}
.demo-tag{display:flex; align-items:center; gap:7px; font-size:.68rem; color:var(--muted-2); letter-spacing:.3px;}
.main{flex:1; min-width:0; display:flex; flex-direction:column;}
.topbar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 28px; border-bottom:1px solid var(--line); position:sticky; top:0; background:rgba(13,17,23,.85); backdrop-filter:blur(10px); z-index:5;}
.topbar-title{font-family:var(--font-display); font-weight:600; font-size:1.15rem;}
.topbar-sub{font-size:.78rem; color:var(--muted-2); margin-top:2px;}
.topbar-right{display:flex; align-items:center; gap:10px;}
.plan-pill{display:flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px; border:1px solid rgba(63,182,168,.35); background:var(--teal-soft); font-family:var(--font-mono); font-size:.76rem; font-weight:500; color:var(--teal); white-space:nowrap;}
.plan-pill[data-warn="true"]{border-color:rgba(226,87,76,.4); background:var(--danger-soft); color:var(--danger);}
.plan-pill .plan-dot{width:6px; height:6px; border-radius:50%; background:currentColor;}
.badge-demo{padding:6px 11px; border-radius:999px; border:1px dashed var(--line); font-size:.68rem; letter-spacing:.4px; color:var(--muted-2); text-transform:uppercase;}
.view{padding:26px 28px 60px;}
.view-head{margin-bottom:22px;}
.view-head h1{font-family:var(--font-display); font-size:1.5rem; margin:0 0 4px; font-weight:600;}
.view-head p{margin:0; color:var(--muted); font-size:.88rem; max-width:640px; line-height:1.5;}

.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:26px;}
.stat-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px;}
.stat-card .label{font-size:.72rem; color:var(--muted-2); text-transform:uppercase; letter-spacing:.4px; margin-bottom:8px;}
.stat-card .value{font-family:var(--font-mono); font-size:1.5rem; font-weight:600;}
.stat-card .delta{font-size:.76rem; margin-top:6px; color:var(--teal);}

.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px; margin-bottom:20px;}
.card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; gap:12px; flex-wrap:wrap;}
.card-head h2{font-family:var(--font-display); font-size:1rem; font-weight:600; margin:0;}
.card-head .hint{font-size:.78rem; color:var(--muted-2);}

.cascade{display:flex; align-items:stretch; gap:0; overflow-x:auto; padding:6px 2px 10px;}
.cascade-step{flex:1; min-width:190px; display:flex; flex-direction:column; gap:10px; padding:18px; border-radius:var(--radius); border:1px solid var(--line); background:var(--panel-2); position:relative; opacity:.55; transform:scale(.97); transition:opacity .2s ease, transform .2s ease, border-color .2s ease;}
.cascade-step[data-me="true"]{opacity:1; transform:scale(1); border-color:var(--tier-color, var(--brass)); box-shadow:0 0 0 1px var(--tier-color, var(--brass)) inset, 0 14px 30px -18px var(--tier-color, var(--brass));}
.cascade-step .tier-tag{display:inline-flex; align-items:center; gap:6px; align-self:flex-start; font-size:.68rem; text-transform:uppercase; letter-spacing:.5px; font-weight:600; padding:4px 9px; border-radius:999px; color:var(--tier-color); background:color-mix(in srgb, var(--tier-color) 16%, transparent);}
.cascade-step .store-name{font-family:var(--font-display); font-weight:600; font-size:.95rem;}
.cascade-step .price-row{display:flex; align-items:baseline; gap:6px; margin-top:2px;}
.cascade-step .price{font-family:var(--font-mono); font-size:1.35rem; font-weight:600;}
.cascade-step .price-label{font-size:.7rem; color:var(--muted-2);}
.cascade-step .margin{font-family:var(--font-mono); font-size:.78rem; color:var(--teal); padding-top:8px; border-top:1px dashed var(--line);}
.cascade-step .margin.is-cost{color:var(--muted-2);}
.cascade-arrow{flex:0 0 44px; display:flex; align-items:center; justify-content:center; color:var(--muted-2);}
.cascade-arrow svg{width:20px; height:20px;}

.tree{display:flex; flex-direction:column; gap:10px;}
.tree-node{display:flex; align-items:center; gap:12px; padding:13px 16px; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--panel-2);}
.tree-node[data-me="true"]{border-color:var(--tier-color); box-shadow:0 0 0 1px var(--tier-color) inset;}
.tree-node .avatar{width:34px; height:34px; border-radius:9px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:.8rem; background:color-mix(in srgb, var(--tier-color) 20%, transparent); color:var(--tier-color);}
.tree-node .info{flex:1; min-width:0;}
.tree-node .info .name{font-weight:600; font-size:.88rem;}
.tree-node .info .meta{font-size:.74rem; color:var(--muted-2); font-family:var(--font-mono); margin-top:1px;}
.tree-indent-1{margin-left:26px;}
.tree-indent-2{margin-left:52px;}
.status-pill{font-size:.68rem; padding:4px 9px; border-radius:999px; font-weight:600; border:1px solid rgba(63,182,168,.35); background:var(--teal-soft); color:var(--teal);}
.status-pill[data-paused="true"]{border-color:rgba(226,87,76,.4); background:var(--danger-soft); color:var(--danger);}

table{width:100%; border-collapse:collapse; font-size:.85rem;}
thead th{text-align:left; font-size:.7rem; text-transform:uppercase; letter-spacing:.4px; color:var(--muted-2); font-weight:600; padding:0 12px 10px; border-bottom:1px solid var(--line);}
tbody td{padding:12px; border-bottom:1px solid var(--line); vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
td.num, th.num{font-family:var(--font-mono); text-align:right;}
.prod-name{font-weight:600;}
.prod-cat{font-size:.74rem; color:var(--muted-2);}
.margin-tag{font-family:var(--font-mono); font-size:.76rem; color:var(--teal);}
.table-scroll{overflow-x:auto;}

/* tarjetas de pedido (en vez de tabla, para celular) */
.order-cards{display:flex; flex-direction:column; gap:12px;}
.order-card{border:1px solid var(--line); background:var(--panel-2); border-radius:var(--radius-sm); padding:16px;}
.order-card-top{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:10px; flex-wrap:wrap;}
.order-card-id{font-family:var(--font-mono); color:var(--muted-2); font-size:.76rem;}
.order-card-customer{font-weight:600; font-size:.9rem;}
.order-card-total{font-family:var(--font-mono); font-weight:600;}
.order-card-items{font-size:.8rem; color:var(--muted); margin:8px 0;}
.order-card-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;}

/* selector de estado con estilo propio */
.status-select{position:relative; display:inline-block;}
.status-select select{
  appearance:none; -webkit-appearance:none;
  padding:7px 30px 7px 12px; border-radius:999px; border:1px solid var(--line);
  background:var(--panel); color:var(--text); font-size:.76rem; font-weight:600; cursor:pointer;
}
.status-select::after{
  content:''; position:absolute; right:11px; top:50%; width:7px; height:7px;
  border-right:2px solid var(--muted-2); border-bottom:2px solid var(--muted-2);
  transform:translateY(-70%) rotate(45deg); pointer-events:none;
}
.status-select select[data-status="pendiente"]{color:var(--brass); border-color:rgba(201,150,62,.35);}
.status-select select[data-status="pendiente_stock"]{color:var(--danger); border-color:rgba(226,87,76,.35);}
.status-select select[data-status="procesando"]{color:var(--violet); border-color:rgba(156,130,224,.35);}
.status-select select[data-status="completada"]{color:var(--teal); border-color:rgba(63,182,168,.35);}
.status-select select[data-status="cancelada"]{color:var(--muted-2);}

.ticket-row{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--panel-2); margin-bottom:10px;}
.ticket-row .subject{font-weight:600; font-size:.86rem; flex:1; min-width:180px;}
.ticket-row .meta{font-size:.74rem; color:var(--muted-2); font-family:var(--font-mono);}
.route{display:flex; align-items:center; gap:6px; font-size:.76rem;}
.route .chip{padding:4px 9px; border-radius:999px; background:var(--panel); border:1px solid var(--line); font-size:.72rem;}
.route svg{width:13px; height:13px; color:var(--muted-2);}
.route .chip.to{color:var(--brass); border-color:rgba(201,150,62,.35); background:var(--brass-soft);}
.route .chip.to.admin{color:var(--violet); border-color:rgba(156,130,224,.35); background:var(--violet-soft);}

.chat{display:flex; flex-direction:column; gap:10px; max-height:420px; overflow-y:auto; padding:6px 2px;}
.chat-msg{max-width:78%; padding:10px 14px; border-radius:var(--radius-sm); font-size:.85rem; line-height:1.45;}
.chat-msg.mine{align-self:flex-end; background:var(--store-soft, var(--teal-soft)); border:1px solid rgba(63,182,168,.3);}
.chat-msg.theirs{align-self:flex-start; background:var(--panel-2); border:1px solid var(--line);}
.chat-msg .who{font-size:.68rem; color:var(--muted-2); margin-bottom:3px; text-transform:uppercase; letter-spacing:.3px;}

.plan-hero{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding:28px; border-radius:var(--radius); border:1px solid var(--line); background:linear-gradient(135deg, var(--panel), var(--panel-2)); margin-bottom:18px;}
.plan-hero[data-warn="true"]{border-color:rgba(226,87,76,.4);}
.plan-hero[data-expired="true"]{border-color:rgba(226,87,76,.55); background:linear-gradient(135deg, rgba(226,87,76,.1), var(--panel-2));}
.plan-count{font-family:var(--font-mono); font-size:2.3rem; font-weight:600;}
.plan-count[data-warn="true"]{color:var(--danger);}
.plan-count-label{font-size:.78rem; color:var(--muted-2); margin-top:4px;}
.plan-renewer{font-size:.85rem; color:var(--muted); max-width:340px; line-height:1.5;}
.plan-renewer b{color:var(--text);}
.child-plan-row{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--panel-2); margin-bottom:10px;}
.child-plan-row .name{font-weight:600; font-size:.86rem; flex:1; min-width:160px;}
.child-plan-row .count{font-family:var(--font-mono); font-size:.82rem;}
.cascade-banner{display:flex; align-items:flex-start; gap:12px; padding:14px 16px; border-radius:var(--radius-sm); border:1px solid rgba(226,87,76,.4); background:var(--danger-soft); color:#f0b3ad; font-size:.82rem; line-height:1.5; margin-bottom:16px;}
.cascade-banner svg{width:18px; height:18px; flex-shrink:0; margin-top:1px; color:var(--danger);}

.btn{display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px; border:1px solid var(--line); background:var(--panel-2); color:var(--text); font-weight:600; font-size:.82rem; cursor:pointer; transition:border-color .15s ease, background .15s ease; font-family:var(--font-body);}
.btn:hover{border-color:var(--muted-2);}
.btn.primary{background:var(--brass); border-color:var(--brass); color:#171009;}
.btn.primary:hover{filter:brightness(1.08);}
.btn.danger-outline{border-color:rgba(226,87,76,.4); color:var(--danger); background:var(--danger-soft);}
.btn.small{padding:7px 12px; font-size:.76rem;}
.btn svg{width:14px; height:14px;}
.btn:disabled{opacity:.5; cursor:not-allowed;}

/* menú de 3 puntos por tarjeta de producto */
.kebab-wrap{position:relative;}
.kebab-btn{width:28px; height:28px; border-radius:8px; border:1px solid var(--line); background:var(--panel-2); color:var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer;}
.kebab-menu{
  display:none; position:absolute; right:0; top:32px; z-index:15; min-width:190px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-sm);
  box-shadow:0 14px 30px rgba(0,0,0,.4); padding:6px; flex-direction:column;
}
.kebab-menu[data-open="true"]{display:flex;}
.kebab-menu a, .kebab-menu button{
  display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:7px;
  color:var(--text); font-size:.82rem; font-weight:500; background:none; border:none; text-align:left;
  width:100%; cursor:pointer; font-family:var(--font-body);
}
.kebab-menu a:hover, .kebab-menu button:hover{background:rgba(255,255,255,.05);}
.kebab-menu svg{width:14px; height:14px; flex-shrink:0;}
.kebab-menu .danger{color:var(--danger);}

.product-panel-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px;}
.product-panel-card{border:1px solid var(--line); background:var(--panel-2); border-radius:var(--radius); padding:14px; display:flex; flex-direction:column; gap:10px; position:relative;}
.product-panel-card .image{width:100%; aspect-ratio:4/3; border-radius:var(--radius-sm); overflow:hidden; background:var(--panel);}
.product-panel-card .image img{width:100%; height:100%; object-fit:cover;}
.product-panel-card .name{font-weight:600; font-size:.9rem;}
.product-panel-card .plans{font-size:.76rem; color:var(--muted-2);}
.product-panel-card[data-inactive="true"]{opacity:.5;}

/* ============ FORMULARIOS / WIZARD ============ */
.form-group{margin-bottom:16px;}
.form-group label{display:block; font-size:.78rem; font-weight:600; color:var(--muted); margin-bottom:6px;}
.form-group .hint-text{font-size:.72rem; color:var(--muted-2); margin-top:5px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
input[type=text], input[type=email], input[type=password], input[type=number], input[type=tel], input[type=file], select, textarea{
  width:100%; padding:11px 13px; border-radius:var(--radius-sm); border:1px solid var(--line);
  background:var(--panel-2); color:var(--text); font-size:.86rem;
}
input:focus, select:focus, textarea:focus{outline:none; border-color:var(--brass);}
textarea{resize:vertical; min-height:80px;}
.color-swatch-row{display:flex; gap:10px; flex-wrap:wrap;}
.color-swatch{width:36px; height:36px; border-radius:50%; cursor:pointer; border:2px solid transparent;}
.color-swatch[data-active="true"]{border-color:var(--text);}
.font-choice-row{display:flex; gap:10px; flex-wrap:wrap;}
.font-choice{padding:12px 16px; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--panel-2); cursor:pointer;}
.font-choice[data-active="true"]{border-color:var(--brass); background:var(--brass-soft);}
.checkbox-row{display:flex; flex-wrap:wrap; gap:10px;}
.checkbox-pill{display:flex; align-items:center; gap:8px; padding:9px 14px; border-radius:999px; border:1px solid var(--line); background:var(--panel-2); font-size:.82rem; cursor:pointer;}
.checkbox-pill input{width:auto;}

.wizard-steps{display:flex; gap:8px; margin-bottom:24px; flex-wrap:wrap;}
.wizard-step-dot{display:flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:var(--panel-2); font-size:.78rem; color:var(--muted-2); font-weight:600;}
.wizard-step-dot[data-active="true"]{border-color:var(--brass); color:var(--text); background:var(--brass-soft);}
.wizard-step-dot[data-done="true"]{color:var(--teal);}
.wizard-panel{display:none;}
.wizard-panel[data-shown="true"]{display:block;}
.wizard-nav{display:flex; justify-content:space-between; margin-top:20px; gap:10px;}

.alert{padding:14px 16px; border-radius:var(--radius-sm); font-size:.85rem; margin-bottom:18px; border:1px solid;}
.alert.success{background:var(--teal-soft); border-color:rgba(63,182,168,.35); color:var(--teal);}
.alert.error{background:var(--danger-soft); border-color:rgba(226,87,76,.4); color:var(--danger);}
.alert.info{background:var(--brass-soft); border-color:rgba(201,150,62,.35); color:var(--brass);}

.auth-shell{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;}
.auth-card{width:100%; max-width:400px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:32px;}
.auth-card h1{font-family:var(--font-display); font-size:1.3rem; margin:0 0 6px;}
.auth-card p.sub{color:var(--muted); font-size:.85rem; margin:0 0 22px;}
.auth-card .switch{text-align:center; margin-top:16px; font-size:.82rem; color:var(--muted);}
.auth-card .switch a{color:var(--brass); font-weight:600;}

.stock-row{display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); flex-wrap:wrap;}
.stock-row:last-child{border-bottom:none;}
.stock-row .payload{flex:1; min-width:180px; font-family:var(--font-mono); font-size:.78rem; word-break:break-all;}
.stock-row .badge{font-size:.68rem; padding:3px 9px; border-radius:999px; font-weight:600;}
.stock-row .badge.disponible{background:var(--teal-soft); color:var(--teal);}
.stock-row .badge.entregado{background:var(--panel-2); color:var(--muted-2); border:1px solid var(--line);}

.menu-btn{display:none; align-items:center; justify-content:center; width:34px; height:34px; border-radius:9px; border:1px solid var(--line); background:var(--panel-2); color:var(--text); cursor:pointer;}
.menu-btn svg{width:17px; height:17px;}
.sidebar-scrim{display:none;}
.sidebar-scrim[data-open="true"]{display:block; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:35;}

@media (max-width:880px){
  .sidebar{position:fixed; left:0; top:0; bottom:0; transform:translateX(-104%); transition:transform .2s ease; z-index:40; box-shadow:20px 0 40px rgba(0,0,0,.5);}
  .sidebar[data-open="true"]{transform:translateX(0);}
  .menu-btn{display:flex !important;}
  .stat-grid{grid-template-columns:1fr 1fr;}
  .topbar{padding:14px 16px;}
  .view{padding:18px 16px 50px;}
  .form-row{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .storefront-header{padding:14px 16px;}
  .hero{padding:32px 16px 26px;}
  .catalog{padding:26px 16px 60px;}
  .cart-drawer{width:100%; max-width:100%;}
  .stat-grid{grid-template-columns:1fr;}
}