/* DIGISTORE — Portal de clientes
   Tokens y componentes base. Ver sistema de diseño de referencia:
   https://claude.ai/code/artifact/e2a85117-5af3-4909-9bb1-bdf1cfac4ee1 */

:root{
  --canvas:#0D0B16;
  --canvas-2:#141026;
  --surface-1:#1B1830;
  --surface-2:#221D3D;
  --surface-3:#2A2350;
  --border-hairline:rgba(255,255,255,.08);
  --border-strong:rgba(255,255,255,.16);
  --border-focus:#A78BFA;

  --text-primary:#F5F3FA;
  --text-secondary:#ABA4C4;
  --text-tertiary:#79738F;

  --violet-200:#DDD6FE;
  --violet-300:#C4B5FD;
  --violet-400:#A78BFA;
  --violet-500:#8B5CF6;
  --violet-600:#7C4DEF;
  --violet-700:#5F33D7;
  --gradient-brand:linear-gradient(135deg,#8B5CF6 0%,#5F33D7 100%);
  --glow-brand:0 8px 28px rgba(124,77,239,.35);

  --success:#34D399;      --success-bg:rgba(52,211,153,.14);      --success-border:rgba(52,211,153,.4);
  --warning:#FBBF24;      --warning-bg:rgba(251,191,36,.14);      --warning-border:rgba(251,191,36,.4);
  --danger:#FB7185;       --danger-bg:rgba(251,113,133,.14);      --danger-border:rgba(251,113,133,.4);
  --info:#60A5FA;         --info-bg:rgba(96,165,250,.14);         --info-border:rgba(96,165,250,.4);
  --neutral-st:#A79FC4;   --neutral-bg:rgba(167,159,196,.14);     --neutral-border:rgba(167,159,196,.35);
  --waiting-st:#2DD4BF;   --waiting-bg:rgba(45,212,191,.14);      --waiting-border:rgba(45,212,191,.4);
  --cut-st:#FB923C;       --cut-bg:rgba(251,146,60,.14);          --cut-border:rgba(251,146,60,.4);

  --font-display:'Manrope',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'JetBrains Mono',monospace;

  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:20px;
  --radius-pill:999px;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--canvas);
  background-image:
    radial-gradient(900px 480px at 15% -8%, rgba(139,92,246,.16), transparent 60%),
    radial-gradient(700px 420px at 100% 0%, rgba(95,51,215,.14), transparent 55%);
  background-attachment:fixed;
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  overflow-x:hidden;
}
::selection{ background:var(--violet-600); color:#fff; }
a{ color:var(--violet-300); }
:focus-visible{ outline:2px solid var(--border-focus); outline-offset:2px; border-radius:6px; }
img{ max-width:100%; display:block; }
.tabular{ font-variant-numeric:tabular-nums; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:800; margin:0; text-wrap:balance; color:var(--text-primary); }
p{ margin:0; color:var(--text-secondary); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

.card-box{ background:var(--surface-1); border:1px solid var(--border-hairline); border-radius:var(--radius-lg); padding:var(--space-5); }

/* Pastilla de cuenta usada en el header compartido (renderSiteHeader(), ui.js). */
.balance-pill{ display:flex; align-items:center; gap:7px; background:var(--surface-2); border:1px solid var(--border-hairline); border-radius:var(--radius-pill); padding:8px 14px; text-decoration:none; }
.balance-pill .dot-b{ width:7px; height:7px; border-radius:50%; background:var(--gradient-brand); flex:none; }
.balance-pill .amt{ font-family:var(--font-mono); font-size:13px; font-weight:600; color:var(--text-primary); }

.center-screen{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:calc(76px + var(--space-5)) var(--space-5) var(--space-5); }

/* ============ BUTTONS ============ */
.btn{
  font-family:var(--font-body); font-weight:600; font-size:15px; border-radius:var(--radius-pill);
  padding:13px 22px; border:1px solid transparent; cursor:pointer; display:inline-flex; align-items:center;
  justify-content:center; gap:8px;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, opacity .15s ease;
  min-height:44px;
}
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--gradient-brand); color:#fff; box-shadow:var(--glow-brand); }
.btn-primary:hover{ box-shadow:0 10px 32px rgba(124,77,239,.5); }
.btn-secondary{ background:var(--surface-2); color:var(--text-primary); border-color:var(--border-strong); }
.btn-secondary:hover{ background:var(--surface-3); }
.btn-ghost{ background:transparent; color:var(--violet-300); padding-left:8px; padding-right:8px; }
.btn-ghost:hover{ color:var(--violet-200); }
.btn-danger{ background:var(--danger-bg); color:var(--danger); border-color:var(--danger-border); }
.btn:disabled{ opacity:.4; cursor:not-allowed; box-shadow:none; }
.btn svg{ width:16px; height:16px; flex:none; }
.btn-block{ width:100%; }
.btn-row{ display:flex; gap:var(--space-3); flex-wrap:wrap; align-items:center; }

/* ============ FORM ============ */
.field{ margin-bottom:var(--space-4); }
.field label{ display:block; font-size:13.5px; font-weight:600; color:var(--text-primary); margin-bottom:7px; }
.input-shell{
  display:flex; align-items:center; background:var(--surface-2); border:1.5px solid var(--border-strong);
  border-radius:var(--radius-md); padding:0 var(--space-4); transition:border-color .15s ease, background .15s ease;
  min-height:50px;
}
.input-shell:focus-within{ border-color:var(--violet-400); background:var(--surface-3); }
.input-shell input{
  flex:1; background:transparent; border:0; outline:0; color:var(--text-primary); font-size:16px; font-family:var(--font-body);
  padding:13px 0; min-width:0;
}
.input-shell input::placeholder{ color:var(--text-tertiary); }
/* El autocompletado del navegador fuerza su propio fondo (blanco/azul) y no se puede pisar
   con background-color normal — el color sigue ahí aunque no se vea hasta que Chrome decide
   repintarlo (focus, escritura). El truco es un box-shadow inset gigante, que sí gana. */
.input-shell input:-webkit-autofill,
.input-shell input:-webkit-autofill:hover,
.input-shell input:-webkit-autofill:focus,
.input-shell input:-webkit-autofill:active{
  -webkit-box-shadow:0 0 0 1000px var(--surface-2) inset;
  box-shadow:0 0 0 1000px var(--surface-2) inset;
  -webkit-text-fill-color:var(--text-primary);
  caret-color:var(--text-primary);
  transition:background-color 5000s ease-in-out 0s;
}
.input-shell:has(textarea){ min-height:0; align-items:stretch; padding:var(--space-3) var(--space-4); }
.input-shell textarea{
  flex:1; background:transparent; border:0; outline:0; color:var(--text-primary); font-size:15px; font-family:var(--font-body);
  padding:0; min-width:0; resize:vertical;
}
.input-shell textarea::placeholder{ color:var(--text-tertiary); }
.input-shell svg{ width:18px; height:18px; color:var(--text-tertiary); flex:none; }
.input-icon-btn{ background:none; border:0; padding:6px; margin:0 -6px 0 4px; color:var(--text-tertiary); cursor:pointer; display:flex; }
.input-icon-btn:hover{ color:var(--text-secondary); }
.field-help{ font-size:12.5px; color:var(--text-tertiary); margin-top:6px; }
.field-error .input-shell{ border-color:var(--danger); }
.field-error .field-help{ color:var(--danger); }

/* ============ BADGES ============ */
.badge{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--font-body); font-weight:600; font-size:12.5px;
  padding:6px 12px 6px 9px; border-radius:var(--radius-pill); border:1px solid; white-space:nowrap;
}
.badge svg{ width:13px; height:13px; flex:none; }
.badge.success{ color:var(--success); background:var(--success-bg); border-color:var(--success-border); }
.badge.warning{ color:var(--warning); background:var(--warning-bg); border-color:var(--warning-border); }
.badge.danger{ color:var(--danger); background:var(--danger-bg); border-color:var(--danger-border); }
.badge.info{ color:var(--info); background:var(--info-bg); border-color:var(--info-border); }
.badge.neutral{ color:var(--neutral-st); background:var(--neutral-bg); border-color:var(--neutral-border); }
.badge.waiting{ color:var(--waiting-st); background:var(--waiting-bg); border-color:var(--waiting-border); }
.badge.cut{ color:var(--cut-st); background:var(--cut-bg); border-color:var(--cut-border); }

/* ============ SERVICE CARD ============ */
.sub-card{
  background:var(--surface-1); border:1px solid var(--border-hairline); border-left:3px solid var(--state-color,var(--violet-500));
  border-radius:var(--radius-lg); padding:var(--space-4) var(--space-5); margin-bottom:var(--space-3);
}
.sub-head{ display:flex; align-items:flex-start; gap:var(--space-3); }
.sub-logo{ width:44px; height:44px; border-radius:12px; overflow:hidden; flex:none; background:var(--surface-2); display:flex; align-items:center; justify-content:center; font-weight:800; font-family:var(--font-display); color:var(--text-secondary); }
.sub-logo img{ width:100%; height:100%; object-fit:cover; }
.sub-titles{ flex:1; min-width:0; }
.sub-name{ font-weight:700; font-size:15.5px; color:var(--text-primary); }
.sub-plan{ font-size:13px; color:var(--text-secondary); margin-top:1px; }
.sub-meta{ display:flex; gap:var(--space-4); margin-top:var(--space-3); font-size:13px; color:var(--text-secondary); flex-wrap:wrap; }
.sub-meta b{ font-family:var(--font-mono); font-weight:500; color:var(--text-primary); }
.sub-meta .warn{ color:var(--warning); }
.sub-meta .bad{ color:var(--danger); }
.sub-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:var(--space-4); gap:var(--space-3); flex-wrap:wrap; }
/* Lista de servicios del dashboard: en pantallas grandes se acomoda en columnas en vez de una
   sola tira vertical (que quedaba angosta con todo el ancho extra de la barra lateral). */
/* La grilla de tarjetas en escritorio que vivía acá era del dashboard viejo de "Mis servicios"
   (#list) — ese id ahora es el <tbody> de una tabla (Fase 11), no una grilla de .sub-card. El
   único consumidor de .sub-card que queda es #ordersList ("Mis pedidos", pedidos.js), que ya
   tiene el espaciado correcto por su margin-bottom base — no necesita este override. */
.reveal-toggle{
  background:none; border:1px dashed var(--border-strong); color:var(--text-secondary); font-family:var(--font-body);
  font-size:12.5px; font-weight:600; border-radius:var(--radius-pill); padding:8px 14px; cursor:pointer; display:flex; align-items:center; gap:6px;
}
.reveal-toggle:hover{ border-color:var(--violet-400); color:var(--violet-300); }
.reveal-toggle svg{ width:13px; height:13px; }
.creds{
  margin-top:var(--space-4); padding-top:var(--space-4); border-top:1px dashed var(--border-hairline);
  display:none; grid-template-columns:1fr 1fr; gap:var(--space-3);
}
.creds.open{ display:grid; }
@media (max-width:420px){ .creds{ grid-template-columns:1fr; } }
.cred{ background:var(--surface-2); border-radius:var(--radius-sm); padding:10px 12px; }
.cred label{ display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-tertiary); margin-bottom:4px; font-family:var(--font-mono); }
.cred .val{ font-family:var(--font-mono); font-size:13.5px; color:var(--text-primary); display:flex; align-items:center; justify-content:space-between; gap:8px; word-break:break-all; }
.cred .val button{ background:none; border:0; color:var(--text-tertiary); cursor:pointer; padding:2px; display:flex; flex:none; }
.cred .val button:hover{ color:var(--violet-300); }
.masked{ letter-spacing:2px; }

.filter-row{ display:flex; gap:8px; overflow-x:auto; padding-bottom:var(--space-3); margin-bottom:var(--space-1); scrollbar-width:none; }
.filter-row::-webkit-scrollbar{ display:none; }
.filter-chip{ flex:none; font-size:12.5px; font-weight:600; padding:7px 14px; border-radius:var(--radius-pill); border:1px solid var(--border-hairline); color:var(--text-secondary); background:none; cursor:pointer; font-family:var(--font-body); }
.filter-chip.active{ background:var(--violet-600); border-color:var(--violet-600); color:#fff; }
.chip-count{ display:inline-block; background:var(--surface-2); border-radius:10px; padding:1px 7px; font-size:11px; margin-left:5px; }
.filter-chip.active .chip-count{ background:rgba(255,255,255,.25); color:#fff; }

/* Encabezado oscuro para la tabla de "Mis servicios" — igual al inventario.php legado, que
   siempre usa una barra oscura para el <thead> sin importar que el resto de la tabla sea claro. */
.data-table-dark-head thead{ background:#141026; }
.data-table-dark-head th{ color:#F5F3FA; }

/* ============ WALLET ============ */
.wallet-hero{ background:var(--gradient-brand); border-radius:var(--radius-lg); padding:var(--space-6) var(--space-5); position:relative; overflow:hidden; box-shadow:var(--glow-brand); margin-bottom:var(--space-6); }
.wallet-hero::after{ content:""; position:absolute; inset:0; background:radial-gradient(220px 140px at 100% 0%, rgba(255,255,255,.18), transparent 60%); }
.wallet-label{ font-size:13px; color:rgba(255,255,255,.8); font-weight:600; position:relative; }
.wallet-amount{ font-family:var(--font-mono); font-weight:600; font-size:clamp(30px,9vw,40px); color:#fff; margin:6px 0 0; position:relative; }
.wallet-amount span{ font-size:.5em; opacity:.75; margin-right:4px; }
.movement{ display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) 0; border-top:1px solid var(--border-hairline); }
.movement:first-child{ border-top:none; }
.mv-icon{ width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex:none; }
.mv-icon.in{ background:var(--success-bg); color:var(--success); }
.mv-icon.out{ background:var(--danger-bg); color:var(--danger); }
.mv-icon svg{ width:16px; height:16px; }
.mv-body{ flex:1; min-width:0; }
.mv-title{ font-size:14px; font-weight:600; color:var(--text-primary); }
.mv-date{ font-size:12px; color:var(--text-tertiary); font-family:var(--font-mono); margin-top:2px; }
.mv-amount{ font-family:var(--font-mono); font-weight:600; font-size:14.5px; flex:none; }
.mv-amount.pos{ color:var(--success); }
.mv-amount.neg{ color:var(--danger); }

/* ============ SHEET / MODAL ============ */
.sheet-backdrop{ position:fixed; inset:0; background:rgba(5,4,10,.7); backdrop-filter:blur(2px); z-index:90; display:none; align-items:flex-end; justify-content:center; }
.sheet-backdrop.open{ display:flex; }
.sheet{ background:var(--surface-1); border:1px solid var(--border-hairline); border-radius:var(--radius-lg) var(--radius-lg) 0 0; padding:var(--space-5); width:100%; max-width:520px; max-height:88vh; overflow-y:auto; }
@media (min-width:560px){ .sheet-backdrop{ align-items:center; } .sheet{ border-radius:var(--radius-lg); } }
.sheet-handle{ width:36px; height:4px; background:var(--border-strong); border-radius:99px; margin:0 auto var(--space-4); }
.path-cards{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); margin:var(--space-4) 0; }
@media (max-width:420px){ .path-cards{ grid-template-columns:1fr; } }
.path-card{ border:1.5px solid var(--border-strong); border-radius:var(--radius-md); padding:var(--space-4); cursor:pointer; background:none; text-align:left; font-family:var(--font-body); color:inherit; }
.path-card.chosen{ border-color:var(--violet-400); background:var(--surface-2); box-shadow:0 0 0 3px rgba(139,92,246,.15); }
.path-card h4{ font-size:14.5px; margin-bottom:4px; font-family:var(--font-display); }
.path-card p{ font-size:12.5px; margin:0; color:var(--text-tertiary); }
.path-card .price{ font-family:var(--font-mono); font-weight:600; font-size:16px; color:var(--text-primary); margin-top:10px; display:block; }

.note{ display:flex; gap:10px; background:var(--surface-2); border:1px solid var(--border-hairline); border-left:3px solid var(--violet-500); border-radius:var(--radius-md); padding:var(--space-4); font-size:13.5px; color:var(--text-secondary); margin-top:var(--space-4); }
.note svg{ flex:none; width:18px; height:18px; color:var(--violet-400); margin-top:1px; }

/* ============ TOAST / LOADING / EMPTY ============ */
.toast{ position:fixed; left:50%; bottom:calc(var(--space-8) + 64px); transform:translateX(-50%) translateY(20px); opacity:0; pointer-events:none;
  background:var(--surface-3); border:1px solid var(--border-strong); color:var(--text-primary); font-size:13.5px; font-weight:600;
  padding:12px 18px; border-radius:var(--radius-pill); box-shadow:0 12px 30px rgba(0,0,0,.4); z-index:100; transition:opacity .2s ease, transform .2s ease; max-width:90vw; text-align:center; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast.error{ background:var(--danger-bg); border-color:var(--danger-border); color:var(--danger); }
.toast.toast-with-action{ pointer-events:auto; display:flex; align-items:center; gap:14px; text-align:left; }
.toast-action{ color:#fff; font-weight:800; text-decoration:none; white-space:nowrap; border-bottom:1.5px solid rgba(255,255,255,.5); flex:none; }
.toast-action:hover{ border-bottom-color:#fff; }
.toast.ok{ background:var(--success-bg); border-color:var(--success-border); color:var(--success); }

.spinner{ width:20px; height:20px; border-radius:50%; border:2.5px solid rgba(255,255,255,.25); border-top-color:#fff; animation:spin .7s linear infinite; flex:none; }
.spinner.dark{ border:2.5px solid var(--border-strong); border-top-color:var(--violet-400); }
@keyframes spin{ to{ transform:rotate(360deg); } }

.empty-state{ text-align:center; padding:var(--space-10) var(--space-4); color:var(--text-tertiary); }
.empty-state svg{ width:40px; height:40px; margin:0 auto var(--space-3); opacity:.6; }
.empty-state p{ color:var(--text-tertiary); font-size:14px; max-width:340px; margin-left:auto; margin-right:auto; }
.empty-state-title{ font-family:var(--font-display); font-size:22px; letter-spacing:.5px; text-transform:uppercase; margin-bottom:var(--space-2); }
.empty-state-title + p{ margin-top:0; }
.empty-state p b{ color:var(--violet-500); font-weight:700; }

.skeleton{ background:linear-gradient(90deg, var(--surface-1) 25%, var(--surface-2) 37%, var(--surface-1) 63%); background-size:400% 100%; animation:shimmer 1.4s ease infinite; border-radius:var(--radius-lg); }
@keyframes shimmer{ 0%{ background-position:100% 0; } 100%{ background-position:0 0; } }

/* ============================================================
   PANEL ADMIN
   ============================================================ */
.admin-page-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap; margin-bottom:var(--space-6); }
.admin-page-head h1{ font-size:clamp(21px,3.2vw,26px); margin-bottom:4px; }
.admin-page-head p{ font-size:13.5px; }

/* stat cards */
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--space-4); margin-bottom:var(--space-6); }
.stat-card{ background:var(--surface-1); border:1px solid var(--border-hairline); border-radius:var(--radius-lg); padding:var(--space-5); border-top:3px solid var(--accent,var(--violet-500)); }
.stat-card .lbl{ font-size:12.5px; color:var(--text-secondary); font-weight:600; }
.stat-card .num{ font-family:var(--font-mono); font-size:28px; font-weight:600; color:var(--text-primary); margin-top:6px; }
.stat-breakdown{ display:flex; flex-direction:column; gap:8px; }
.stat-breakdown .row{ display:flex; align-items:center; justify-content:space-between; font-size:13.5px; }
.stat-breakdown .row .k{ display:flex; align-items:center; gap:8px; color:var(--text-secondary); }
.stat-breakdown .dot{ width:8px; height:8px; border-radius:50%; flex:none; }
.stat-breakdown .v{ font-family:var(--font-mono); font-weight:600; color:var(--text-primary); }

/* toolbar / filters */
.toolbar{ display:flex; gap:var(--space-3); flex-wrap:wrap; align-items:center; margin-bottom:var(--space-5); }
.toolbar .input-shell, .toolbar .select-shell{ min-height:42px; max-width:240px; }
.select-shell{ background:var(--surface-2); border:1.5px solid var(--border-strong); border-radius:var(--radius-md); padding:0 var(--space-3); display:flex; align-items:center; }
/* appearance:none + flecha propia — sin esto el navegador (Windows/Chrome) le dibuja al
   <select> su propio recuadro nativo por encima, ignorando el background/border transparentes
   de acá — se veía como un rectángulo con borde propio en vez del look plano del resto del panel. */
.select-shell select{
  background:transparent; border:0; outline:0; color:var(--text-primary); font-size:14px; font-family:var(--font-body);
  padding:10px 22px 10px 0; width:100%;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B85A3' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 0 center; background-size:14px;
}
.select-shell select option{ background:var(--surface-2); color:var(--text-primary); }
.toolbar-spacer{ flex:1; }

/* data table */
.data-table-wrap{ background:var(--surface-1); border:1px solid var(--border-hairline); border-radius:var(--radius-lg); overflow-x:auto; }
.data-table{ width:100%; border-collapse:collapse; font-size:13.5px; min-width:640px; }
.data-table th{ text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-tertiary); font-weight:700; padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--border-hairline); white-space:nowrap; }
.data-table td{ padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--border-hairline); color:var(--text-primary); vertical-align:middle; }
.data-table tr:last-child td{ border-bottom:0; }
.data-table tr:hover td{ background:var(--surface-2); }
.cell-sub{ font-size:12px; color:var(--text-tertiary); margin-top:2px; }
.cell-mono{ font-family:var(--font-mono); }
.table-actions{ display:flex; gap:6px; justify-content:flex-end; }

/* Colapso a tarjetas en móvil — clase propia (no ".data-table" a secas) para no tocar las
   tablas del panel admin, que se quedan con scroll horizontal. Usa data-label en cada <td>
   (en vez de nth-child como el tema legado) para no depender del orden exacto de columnas. */
@media (max-width:640px){
  .data-table-collapse{ background:transparent; border:0; overflow-x:visible; }
  .data-table-collapse table{ min-width:0; }
  .data-table-collapse table, .data-table-collapse thead, .data-table-collapse tbody,
  .data-table-collapse tr, .data-table-collapse td{ display:block; width:100%; }
  .data-table-collapse thead{ display:none; }
  .data-table-collapse tbody tr.inv-row{
    background:var(--surface-1); border:1px solid var(--border-hairline);
    border-left:3px solid var(--state-color,var(--violet-500)); border-radius:var(--radius-lg);
    margin-bottom:var(--space-3); padding:var(--space-3) var(--space-4);
  }
  .data-table-collapse tbody tr.creds-row{ margin-top:calc(-1 * var(--space-3)); margin-bottom:var(--space-3); }
  .data-table-collapse tbody tr.creds-row td{ border-bottom:0; padding:0; }
  .data-table-collapse td{ padding:6px 0; border-bottom:0; }
  .data-table-collapse td[data-label]::before{
    content:attr(data-label); display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em;
    color:var(--text-tertiary); margin-bottom:2px; font-family:var(--font-mono);
  }
  .data-table-collapse td.cell-actions{ display:flex; gap:8px; flex-wrap:wrap; padding-top:var(--space-2); }
  .data-table-collapse td.cell-actions::before{ content:none; }
}
.icon-btn{ background:transparent; border:none; color:var(--text-secondary); border-radius:var(--radius-sm); width:32px; height:32px; display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none; }
.icon-btn:hover{ color:var(--violet-300); }
.icon-btn.danger:hover{ color:var(--danger); }
.icon-btn svg{ width:15px; height:15px; }

/* pill tabs (sub-navigation within a page) */
.pill-tabs{ display:flex; gap:6px; background:var(--surface-1); border:1px solid var(--border-hairline); border-radius:var(--radius-pill); padding:4px; width:fit-content; margin-bottom:var(--space-5); }
.pill-tab{ font-family:var(--font-body); font-size:13px; font-weight:600; padding:8px 16px; border-radius:var(--radius-pill); border:0; background:none; color:var(--text-secondary); cursor:pointer; }
.pill-tab.active{ background:var(--violet-600); color:#fff; }

/* modal (desktop-centered variant of sheet) */
.modal{ max-width:520px; }
.modal-wide{ max-width:640px; }
@media (min-width:768px){
  .modal{ max-width:640px; }
  .modal-wide{ max-width:820px; }
}
.modal h3{ font-size:18px; margin-bottom:var(--space-1); }
.field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 var(--space-3); }
@media (max-width:480px){ .field-grid{ grid-template-columns:1fr; } }
.checkbox-row{ display:flex; align-items:center; gap:10px; }
.checkbox-row input[type="checkbox"]{ width:18px; height:18px; accent-color:var(--violet-500); }

/* ============================================================
   TIENDA PÚBLICA
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:60; background:rgba(13,11,22,.85); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border-hairline);
}
.site-header-inner{
  max-width:1180px; margin:0 auto; padding:var(--space-4) var(--space-5);
  display:flex; align-items:center; gap:var(--space-6);
}
.site-logo img{ height:26px; width:auto; display:block; }
.site-nav{ display:flex; gap:var(--space-5); flex:1; }
.site-nav a{ color:var(--text-secondary); text-decoration:none; font-size:14.5px; font-weight:600; }
.site-nav a:hover, .site-nav a.active{ color:var(--text-primary); }
.site-header-actions{ display:flex; align-items:center; gap:var(--space-3); margin-left:auto; }
.site-cart-btn, .site-icon-btn{ position:relative; background:var(--surface-2); border:1px solid var(--border-hairline); border-radius:var(--radius-md); width:42px; height:42px; display:flex; align-items:center; justify-content:center; color:var(--text-primary); text-decoration:none; flex:none; cursor:pointer; }
.site-cart-btn svg, .site-icon-btn svg{ width:19px; height:19px; }
.site-icon-btn:hover{ color:var(--violet-300); border-color:var(--violet-400); }
.site-cart-badge{ position:absolute; top:-5px; right:-5px; background:var(--gradient-brand); color:#fff; font-size:10.5px; font-weight:700; min-width:18px; height:18px; border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 4px; }
.site-header-hamburger{ display:none; background:none; border:1px solid var(--border-strong); color:var(--text-primary); border-radius:var(--radius-sm); padding:8px; cursor:pointer; }
@media (max-width:760px){
  .site-nav{
    display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:2px;
    background:var(--canvas-2); border-bottom:1px solid var(--border-hairline);
    padding:var(--space-3) var(--space-5) var(--space-4);
  }
  .site-nav.open{ display:flex; }
  .site-nav a{ padding:10px var(--space-2); border-radius:var(--radius-sm); }
  .site-nav a:hover, .site-nav a.active{ background:var(--surface-2); }
  .site-header-hamburger{ display:flex; }
}

/* ── Zona clara de la tienda: redefine localmente los tokens de superficie/texto para que
   .shop-grid/.shop-card/.badge/etc. (ya construidos para fondo oscuro) se vean bien sobre
   fondo claro, sin duplicar cada componente en una versión aparte. ── */
.shop-light-zone{
  --canvas:#F3F2F8; --canvas-2:#EAE8F2; --surface-1:#FFFFFF; --surface-2:#F4F3F9; --surface-3:#EBE9F4;
  --border-hairline:rgba(20,15,40,.08); --border-strong:rgba(20,15,40,.16);
  --text-primary:#1C1730; --text-secondary:#5B5578; --text-tertiary:#8B85A3;
  background:var(--canvas); border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  margin-top:-2px; padding:var(--space-8) 0 var(--space-10); color:var(--text-primary);
}
.shop-light-zone .site-main{ padding-top:0; padding-bottom:0; min-height:0; }
.shop-light-zone p{ color:var(--text-secondary); }

/* codigo/pedidos/saldo/Mis servicios: el header ahí es position:fixed (streamvault/header.css),
   así que el aire hasta el título de la página depende 100% de este padding manual — no tocar
   páginas admin, que reusan .shop-light-zone pero con el header viejo (position:sticky, ya
   ocupa su espacio solo). Antes tenía var(--space-8)=32px de aire y quedaba muy pegado al
   header — corregido a var(--space-12)=48px. */
body.client-page .shop-light-zone{ padding-top:calc(76px + var(--space-12)); }

.site-main{ max-width:1180px; margin:0 auto; padding:var(--space-6) var(--space-5) var(--space-12); min-height:60vh; }
.site-page-title{ font-size:clamp(22px,4vw,28px); margin-bottom:var(--space-1); }

/* footer */
.site-footer{ border-top:1px solid var(--border-hairline); margin-top:var(--space-12); }
.site-footer-top{ max-width:1180px; margin:0 auto; padding:var(--space-10) var(--space-5) var(--space-8); display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:var(--space-8); }
@media (max-width:700px){ .site-footer-top{ grid-template-columns:1fr; gap:var(--space-6); } }
.site-footer-logo img{ height:24px; margin-bottom:var(--space-3); }
.site-footer-tagline{ font-size:13.5px; color:var(--text-secondary); line-height:1.6; }
.site-footer-badges{ display:flex; flex-direction:column; gap:8px; margin-top:var(--space-4); }
.site-footer-badge{ font-size:12.5px; color:var(--text-tertiary); display:flex; align-items:center; gap:8px; }
.site-footer-badge .dot{ width:6px; height:6px; border-radius:50%; background:var(--success); flex:none; }
.site-footer-col-title{ font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-tertiary); font-weight:700; margin-bottom:var(--space-3); }
.site-footer-links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.site-footer-links a{ color:var(--text-secondary); text-decoration:none; font-size:13.5px; }
.site-footer-links a:hover{ color:var(--text-primary); }
.site-footer-bottom{ border-top:1px solid var(--border-hairline); padding:var(--space-4) var(--space-5); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-3); max-width:1180px; margin:0 auto; }
.site-footer-copy{ font-size:12.5px; color:var(--text-tertiary); }

/* carrito */
.cart-line{ display:flex; align-items:center; gap:var(--space-3); padding:var(--space-4) 0; border-bottom:1px solid var(--border-hairline); }
.cart-line:last-child{ border-bottom:0; }
.cart-line-logo{ width:44px; height:44px; border-radius:10px; overflow:hidden; background:var(--surface-2); flex:none; display:flex; align-items:center; justify-content:center; font-weight:800; font-family:var(--font-display); color:var(--text-secondary); }
.cart-line-logo img{ width:100%; height:100%; object-fit:cover; }
.cart-line-info{ flex:1; min-width:0; }
.cart-line-name{ font-weight:700; font-size:14.5px; color:var(--text-primary); }
.cart-line-price{ font-family:var(--font-mono); font-size:13px; color:var(--text-secondary); margin-top:2px; }
.cart-line-note{ font-size:12px; color:var(--warning); margin-top:6px; line-height:1.4; }
.cart-qty{ display:flex; align-items:center; gap:8px; }
.cart-qty button{ width:26px; height:26px; border-radius:8px; border:1px solid var(--border-strong); background:var(--surface-2); color:var(--text-primary); cursor:pointer; font-size:15px; line-height:1; }
.cart-qty span{ min-width:18px; text-align:center; font-family:var(--font-mono); font-size:13.5px; }
.cart-line-remove{ background:none; border:0; color:var(--text-tertiary); cursor:pointer; padding:6px; display:flex; flex:none; }
.cart-line-remove:hover{ color:var(--danger); }
.cart-summary-row{ display:flex; justify-content:space-between; align-items:center; padding:var(--space-2) 0; font-size:14px; color:var(--text-secondary); }
.cart-summary-row.total{ font-size:18px; font-weight:700; color:var(--text-primary); font-family:var(--font-mono); border-top:1px solid var(--border-hairline); padding-top:var(--space-3); margin-top:var(--space-2); }