/* ============================================================
   SOCCER CAGE — Sistema de diseño
   Estética: SaaS empresarial + inventario profesional + retail premium
   El dorado es SOLO acento: nunca fondos grandes, nunca texto largo.
   ============================================================ */

:root {
  /* Neutrales (base de la interfaz) */
  --ink-900: #0b0c0e;
  --ink-800: #131519;
  --ink-700: #1c1f25;
  --ink-600: #272b33;
  --ink-500: #3a3f4a;
  --ink-400: #6b7280;
  --ink-300: #9aa1ad;
  --ink-200: #d3d7de;
  --ink-100: #e9ebef;
  --ink-50:  #f5f6f8;
  --white:   #ffffff;

  /* Acento dorado — uso restringido */
  --gold-600: #9a7b14;
  --gold-500: #c9a227;
  --gold-400: #e0bb3e;
  --gold-100: #fbf3d8;

  /* Semánticos */
  --ok-600: #0f7b52;
  --ok-100: #e2f4ec;
  --warn-600: #9a6b08;
  --warn-100: #fdf1d7;
  --danger-600: #b3261e;
  --danger-100: #fbe6e4;
  --info-600: #1f5f9e;
  --info-100: #e4eefa;

  /* Superficies */
  --surface: var(--white);
  --surface-sunken: var(--ink-50);
  --border: var(--ink-100);
  --border-strong: var(--ink-200);

  /* Escala de espaciado (4px) */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px;

  /* Radios */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-full: 999px;

  /* Sombras */
  --sh-1: 0 1px 2px rgba(11,12,14,.06), 0 1px 3px rgba(11,12,14,.04);
  --sh-2: 0 2px 4px rgba(11,12,14,.06), 0 4px 12px rgba(11,12,14,.06);
  --sh-3: 0 8px 24px rgba(11,12,14,.12), 0 2px 6px rgba(11,12,14,.08);
  --sh-4: 0 24px 60px rgba(11,12,14,.24);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;

  --nav-h: 60px;
  --side-w: 236px;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--surface-sunken);
  color: var(--ink-800);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Al bloquear el scroll de fondo (modal o carrito abierto) desaparece la
   barra de desplazamiento y la página gana ~15px: sin compensarlo, toda
   la interfaz salta a la derecha al abrir y vuelve al cerrar.
   `scrollbar-gutter` la reserva siempre; el padding es el respaldo para
   navegadores que aún no lo soportan. */
html { scrollbar-gutter: stable; }
body.no-scroll { overflow: hidden; }

/* Respaldo para navegadores sin `scrollbar-gutter` (Safari < 18): ahí sí
   hay que compensar a mano, porque el hueco no queda reservado. */
@supports not (scrollbar-gutter: stable) {
  body.no-scroll { padding-right: var(--scrollbar-w, 0px); }
}

h1,h2,h3,h4 { margin: 0; font-weight: 640; letter-spacing: -0.015em; color: var(--ink-900); }
h1 { font-size: 24px; line-height: 1.25; }
h2 { font-size: 18px; line-height: 1.3; }
h3 { font-size: 15px; line-height: 1.35; }
p  { margin: 0; }
a  { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
img { max-width: 100%; display: block; }

.mono { font-family: var(--mono); font-size: .92em; font-variant-numeric: tabular-nums; }
.num  { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-400); }
.tiny { font-size: 12px; }
.strong { font-weight: 620; }
.center { text-align: center; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }

.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;
}

/* ============================================================
   TOPBAR — conmutador Tienda / Admin
   ============================================================ */
.topbar {
  position: sticky; top: 0; z-index: 60;
  height: var(--nav-h);
  background: var(--ink-900);
  color: var(--white);
  display: flex; align-items: center; gap: var(--s5);
  padding: 0 var(--s5);
  border-bottom: 1px solid var(--ink-700);
  /* La barra nunca debe partirse en dos líneas ni crecer en alto:
     los elementos se comprimen u ocultan, pero la altura es fija. */
  flex-wrap: nowrap; min-width: 0; overflow: hidden;
}
.topbar-actions { min-width: 0; }
.user-chip span { white-space: nowrap; }

.brand { display: flex; align-items: center; gap: var(--s3); flex-shrink: 0; }
.brand-mark {
  width: 30px; height: 30px; border-radius: 8px;
  background: linear-gradient(145deg, var(--gold-400), var(--gold-600));
  display: grid; place-items: center;
  color: var(--ink-900); font-weight: 800; font-size: 13px;
  letter-spacing: -.04em;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset;
}
.brand-name { font-weight: 660; font-size: 15px; letter-spacing: -.02em; color: var(--white); }
.brand-sub {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-400); font-weight: 600; margin-top: -2px;
}

.mode-switch {
  margin-left: auto;
  display: flex; gap: 2px; padding: 3px;
  background: var(--ink-700);
  border-radius: var(--r-full);
  flex-shrink: 0;
}
.mode-btn {
  border: 0; background: transparent; color: var(--ink-300);
  padding: 7px 18px; border-radius: var(--r-full);
  font-weight: 580; font-size: 13px; cursor: pointer;
  transition: color .18s var(--ease), background .18s var(--ease);
  white-space: nowrap;
}
.mode-btn:hover { color: var(--white); }
.mode-btn.active { background: var(--white); color: var(--ink-900); }

.topbar-actions { display: flex; align-items: center; gap: var(--s3); }

/* Botón de idioma: mismo lenguaje visual que cart-btn, pero más angosto
   porque solo lleva un código de dos letras. */
.lang-btn {
  display: flex; align-items: center; justify-content: center;
  min-width: 40px; height: 34px; padding: 0 10px;
  background: var(--ink-700); border: 1px solid var(--ink-600);
  color: var(--white); border-radius: var(--r-full);
  cursor: pointer; font-weight: 650; font-size: 12px; letter-spacing: .03em;
  transition: background .18s var(--ease), transform .12s var(--ease);
}
.lang-btn:hover { background: var(--ink-600); }
.lang-btn:active { transform: scale(.97); }

.cart-btn {
  position: relative; display: flex; align-items: center; gap: var(--s2);
  background: var(--ink-700); border: 1px solid var(--ink-600);
  color: var(--white); padding: 8px 14px; border-radius: var(--r-full);
  cursor: pointer; font-weight: 560; font-size: 13px;
  transition: background .18s var(--ease), transform .12s var(--ease);
}
.cart-btn:hover { background: var(--ink-600); }
.cart-btn:active { transform: scale(.97); }
/* Fuera de la tienda: sigue ocupando su sitio para que la barra no salte,
   pero queda inerte y fuera del recorrido de teclado. */
.cart-btn.is-inactive {
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity .2s var(--ease), visibility .2s var(--ease);
}
.cart-count {
  min-width: 19px; height: 19px; padding: 0 5px;
  background: var(--gold-500); color: var(--ink-900);
  border-radius: var(--r-full); font-size: 11px; font-weight: 750;
  display: grid; place-items: center;
}
.cart-count.pulse { animation: pop .38s var(--ease); }
@keyframes pop {
  0% { transform: scale(1); } 45% { transform: scale(1.38); } 100% { transform: scale(1); }
}

.user-chip {
  display: flex; align-items: center; gap: var(--s2);
  padding: 4px 12px 4px 4px; border-radius: var(--r-full);
  background: var(--ink-700); border: 1px solid var(--ink-600);
}
.avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--ink-500); color: var(--white);
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
}
.user-chip span { font-size: 12.5px; color: var(--ink-200); font-weight: 550; }

/* ============================================================
   LAYOUT
   ============================================================ */
.app { display: none; }
.app.active { display: block; }

.admin-layout { display: flex; min-height: calc(100vh - var(--nav-h)); }

.sidebar {
  width: var(--side-w); flex-shrink: 0;
  background: var(--ink-900);
  border-right: 1px solid var(--ink-700);
  padding: var(--s5) var(--s3);
  position: sticky; top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  overflow-y: auto;
}
.side-label {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-500); font-weight: 700;
  padding: var(--s4) var(--s3) var(--s2);
}
.side-link {
  display: flex; align-items: center; gap: var(--s3);
  padding: 9px var(--s3); border-radius: var(--r-sm);
  color: var(--ink-300); font-weight: 530; font-size: 13.5px;
  cursor: pointer; border: 0; background: transparent; width: 100%;
  text-align: left; position: relative;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.side-link:hover { background: var(--ink-700); color: var(--white); }
.side-link.active { background: var(--ink-700); color: var(--white); }
.side-link.active::before {
  content: ""; position: absolute; left: -12px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 0 3px 3px 0;
  background: var(--gold-500);
}
.side-link .ico { width: 17px; height: 17px; opacity: .85; flex-shrink: 0; }
.side-badge {
  margin-left: auto; min-width: 19px; height: 19px; padding: 0 6px;
  border-radius: var(--r-full); font-size: 11px; font-weight: 700;
  display: grid; place-items: center;
  background: var(--danger-600); color: var(--white);
}

.content { flex: 1; min-width: 0; padding: var(--s7); }
.page { display: none; animation: fade .26s var(--ease); }
.page.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s5); margin-bottom: var(--s6); flex-wrap: wrap;
}
.page-head .sub { color: var(--ink-400); font-size: 13.5px; margin-top: 3px; }
.head-actions { display: flex; gap: var(--s2); flex-wrap: wrap; }

/* ============================================================
   BOTONES
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: 9px 16px; border-radius: var(--r-sm);
  border: 1px solid var(--border-strong); background: var(--white);
  color: var(--ink-800); font-weight: 570; font-size: 13.5px;
  cursor: pointer; white-space: nowrap;
  transition: background .16s var(--ease), border-color .16s var(--ease),
              transform .1s var(--ease), box-shadow .16s var(--ease);
}
.btn:hover { background: var(--ink-50); border-color: var(--ink-300); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn .ico { width: 16px; height: 16px; }

.btn-primary {
  background: var(--ink-900); border-color: var(--ink-900); color: var(--white);
  box-shadow: var(--sh-1);
}
.btn-primary:hover { background: var(--ink-700); border-color: var(--ink-700); }

.btn-gold {
  background: var(--gold-500); border-color: var(--gold-600); color: var(--ink-900);
  font-weight: 650; box-shadow: var(--sh-1);
}
.btn-gold:hover { background: var(--gold-400); border-color: var(--gold-500); }

.btn-danger { color: var(--danger-600); border-color: #f0c9c6; background: var(--white); }
.btn-danger:hover { background: var(--danger-100); border-color: var(--danger-600); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-500); }
.btn-ghost:hover { background: var(--ink-100); color: var(--ink-800); }

.btn-sm { padding: 6px 11px; font-size: 12.5px; }
.btn-lg { padding: 13px 24px; font-size: 15px; }
.btn-block { width: 100%; }

.icon-btn {
  width: 32px; height: 32px; padding: 0; border-radius: var(--r-sm);
  display: grid; place-items: center; border: 1px solid transparent;
  background: transparent; color: var(--ink-400); cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.icon-btn:hover { background: var(--ink-100); color: var(--ink-800); }
.icon-btn .ico { width: 16px; height: 16px; }

/* ============================================================
   TARJETAS / KPI
   ============================================================ */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.card-head {
  padding: var(--s5) var(--s6);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
}
.card-body { padding: var(--s6); }
.card-body.flush { padding: 0; }

.kpi-grid {
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  margin-bottom: var(--s5);
}
.kpi {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--s5);
  box-shadow: var(--sh-1); position: relative; overflow: hidden;
  transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}
.kpi:hover { box-shadow: var(--sh-2); transform: translateY(-1px); }
.kpi-label {
  font-size: 11.5px; font-weight: 620; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-400);
  display: flex; align-items: center; gap: var(--s2);
}
.kpi-value {
  font-size: 27px; font-weight: 680; letter-spacing: -.028em;
  margin-top: var(--s3); color: var(--ink-900);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.kpi-foot { margin-top: var(--s2); font-size: 12.5px; color: var(--ink-400); }

/* Sin barras de color en el borde: decoraban sin informar —el dato ya está
   en la cifra y en el pie— y son una firma visual de plantilla genérica.
   La jerarquía la hacen el tamaño, el peso y el espacio.

   El color queda reservado para lo único que lo merece: que algo exija
   una decisión. Una tarjeta en alerta cambia de superficie, no se adorna. */
.kpi-alerta {
  background: #fffdfa;
  border-color: #f0dcc4;
}
.kpi-alerta .kpi-value { color: var(--warn-600); }

.kpi-critico {
  background: #fffbfb;
  border-color: #f2cbc7;
}
.kpi-critico .kpi-value { color: var(--danger-600); }

/* La métrica principal de la vista: destaca por tamaño, no por color. */
.kpi-principal .kpi-value { font-size: 32px; }

.delta { font-weight: 640; }
.delta.up { color: var(--ok-600); }
.delta.down { color: var(--danger-600); }

.grid-2 { display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--s5); align-items: start; }
.grid-halves { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); align-items: start; }

/* ============================================================
   TABLAS
   ============================================================ */
/* `min-width: 0` es imprescindible: sin él, el contenido de la tabla
   impone su ancho al contenedor y el scroll interno nunca se activa,
   empujando toda la página hacia la derecha en pantallas estrechas. */
.table-wrap { overflow-x: auto; min-width: 0; max-width: 100%; }
.card, .cmp-card { min-width: 0; }
.content, .page { min-width: 0; max-width: 100%; }
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data thead th {
  text-align: left; padding: 11px var(--s5);
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-400);
  background: var(--ink-50); border-bottom: 1px solid var(--border);
  white-space: nowrap; position: sticky; top: 0; z-index: 2;
}
table.data tbody td {
  padding: 13px var(--s5); border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
table.data tbody tr { transition: background .14s var(--ease); }
table.data tbody tr:hover { background: var(--ink-50); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data td.right, table.data th.right { text-align: right; }

.cell-main { font-weight: 580; color: var(--ink-900); }
.cell-sub { font-size: 12px; color: var(--ink-400); margin-top: 1px; }

.thumb {
  width: 38px; height: 38px; border-radius: var(--r-sm);
  display: grid; place-items: center; flex-shrink: 0;
  font-weight: 750; font-size: 12px; color: var(--white);
  letter-spacing: -.02em;
}
.cell-flex { display: flex; align-items: center; gap: var(--s3); }

/* ============================================================
   BADGES / ESTADOS
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--r-full);
  font-size: 11.5px; font-weight: 640; white-space: nowrap;
  border: 1px solid transparent;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-ok      { background: var(--ok-100);     color: var(--ok-600);     border-color: #bfe3d3; }
.badge-warn    { background: var(--warn-100);   color: var(--warn-600);   border-color: #efdcae; }
.badge-danger  { background: var(--danger-100); color: var(--danger-600); border-color: #f2cbc7; }
.badge-info    { background: var(--info-100);   color: var(--info-600);   border-color: #c6dcf3; }
.badge-neutral { background: var(--ink-100);    color: var(--ink-500);    border-color: var(--border-strong); }
.badge-gold    { background: var(--gold-100);   color: var(--gold-600);   border-color: #ecdca6; }

/* Barra de stock */
.stock-bar {
  height: 5px; border-radius: var(--r-full); background: var(--ink-100);
  overflow: hidden; margin-top: 5px; min-width: 76px;
}
.stock-fill { height: 100%; border-radius: var(--r-full); transition: width .5s var(--ease); }
.stock-fill.ok { background: var(--ok-600); }
.stock-fill.warn { background: var(--gold-500); }
.stock-fill.danger { background: var(--danger-600); }

/* ============================================================
   FORMULARIOS / FILTROS
   ============================================================ */
.field { margin-bottom: var(--s4); }
.field label {
  display: block; font-size: 12.5px; font-weight: 600;
  color: var(--ink-600); margin-bottom: 6px;
}
.field .hint { font-size: 11.5px; color: var(--ink-400); margin-top: 5px; }
.req { color: var(--danger-600); }

.input, .select, textarea.input {
  width: 100%; padding: 9px 12px;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--white); color: var(--ink-900);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.input:focus, .select:focus, textarea.input:focus {
  outline: none; border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(201,162,39,.16);
}
.input::placeholder { color: var(--ink-300); }
.input.error { border-color: var(--danger-600); box-shadow: 0 0 0 3px rgba(179,38,30,.12); }
.err-msg { color: var(--danger-600); font-size: 12px; margin-top: 5px; display: none; }
.err-msg.show { display: block; }

.select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  padding-right: 32px; cursor: pointer;
}

.search-box { position: relative; flex: 1; min-width: 190px; }
.search-box .ico {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--ink-400); pointer-events: none;
}
.search-box .input { padding-left: 34px; }

.filter-bar {
  display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center;
  padding: var(--s4) var(--s6); border-bottom: 1px solid var(--border);
  background: var(--white);
}
.filter-bar .select { width: auto; min-width: 150px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s4); }
.form-grid .span-2 { grid-column: span 2; }

/* Chips de filtro */
.chips { display: flex; gap: var(--s2); flex-wrap: wrap; }
.chip {
  padding: 7px 15px; border-radius: var(--r-full);
  border: 1px solid var(--border-strong); background: var(--white);
  font-size: 13px; font-weight: 550; cursor: pointer; color: var(--ink-600);
  transition: background-color .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
}
.chip:hover { border-color: var(--ink-400); }
.chip.active { background: var(--ink-900); color: var(--white); border-color: var(--ink-900); }

/* ============================================================
   MODALES / DRAWER
   ============================================================ */
.overlay {
  position: fixed; inset: 0; background: rgba(11,12,14,.55);
  backdrop-filter: blur(3px); z-index: 90;
  display: none; align-items: center; justify-content: center; padding: var(--s5);
}
.overlay.open { display: flex; animation: fadeIn .2s var(--ease); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--white); border-radius: var(--r-lg);
  width: 100%; max-width: 660px; max-height: 88vh;
  display: flex; flex-direction: column;
  box-shadow: var(--sh-4); animation: rise .28s var(--ease);
}
.modal.wide { max-width: 880px; }
.modal.narrow { max-width: 460px; }
@keyframes rise { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }

.modal-head {
  padding: var(--s5) var(--s6); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  flex-shrink: 0;
}
.modal-body { padding: var(--s6); overflow-y: auto; flex: 1; }
.modal-foot {
  padding: var(--s4) var(--s6); border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: var(--s3);
  background: var(--ink-50); border-radius: 0 0 var(--r-lg) var(--r-lg);
  flex-shrink: 0; flex-wrap: wrap;
}

/* Drawer lateral (carrito) */
.drawer-overlay {
  position: fixed; inset: 0; background: rgba(11,12,14,.5);
  backdrop-filter: blur(3px); z-index: 95; display: none;
}
.drawer-overlay.open { display: block; animation: fadeIn .2s var(--ease); }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 420px;
  background: var(--white); z-index: 96; box-shadow: var(--sh-4);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .3s var(--ease), visibility .3s var(--ease);
  /* Cerrado: fuera de pantalla Y fuera del árbol de accesibilidad.
     Sin esto, el desplazamiento crea área desplazable a la derecha
     y obliga a tapar el síntoma con overflow-x: hidden. */
  visibility: hidden;
}
.drawer.open { transform: none; visibility: visible; }
.drawer-head {
  padding: var(--s5); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.drawer-body { flex: 1; overflow-y: auto; padding: var(--s5); }
.drawer-foot { border-top: 1px solid var(--border); padding: var(--s5); background: var(--ink-50); }

/* ============================================================
   TOASTS
   ============================================================ */
.toast-zone {
  /* Arriba y centrado, bajo la barra: los botones de acción viven abajo
     (pagar, confirmar, carrito), el menú a la izquierda y las acciones de
     página arriba a la derecha. Aquí un aviso no tapa nada que se pulse. */
  position: fixed; top: calc(var(--nav-h) + var(--s3)); left: 50%; transform: translateX(-50%);
  width: min(370px, calc(100vw - 24px)); z-index: 120;
  display: flex; flex-direction: column; gap: var(--s2);
  pointer-events: none;
}
.toast { pointer-events: auto; cursor: pointer; }
.toast {
  background: var(--ink-900); color: var(--white);
  border-radius: var(--r-md); padding: var(--s4) var(--s5);
  box-shadow: var(--sh-3); display: flex; gap: var(--s3);
  align-items: flex-start; animation: slideIn .3s var(--ease);
  border-left: 3px solid var(--gold-500);
}
.toast.ok     { border-left-color: #34d399; }
.toast.danger { border-left-color: #f87171; }
.toast.warn   { border-left-color: var(--gold-400); }
.toast .ico { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; }
.toast-title { font-weight: 640; font-size: 13.5px; }
.toast-msg { font-size: 12.5px; color: var(--ink-300); margin-top: 2px; }
@keyframes slideIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.toast.hide { animation: slideOut .25s var(--ease) forwards; }
@keyframes slideOut { to { opacity: 0; transform: translateY(-10px); } }

/* ============================================================
   TIENDA
   ============================================================ */
.shop-wrap { max-width: 1240px; margin: 0 auto; padding: var(--s6) var(--s5) var(--s9); }

.hero {
  background: var(--ink-900); border-radius: var(--r-lg);
  padding: var(--s9) var(--s8); color: var(--white);
  position: relative; overflow: hidden; margin-bottom: var(--s7);
}
.hero::after {
  content: ""; position: absolute; right: -70px; top: -70px;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,162,39,.16), transparent 68%);
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-400); font-weight: 700; margin-bottom: var(--s4);
}
.hero h1 {
  font-size: 40px; line-height: 1.1; color: var(--white);
  max-width: 620px; letter-spacing: -.03em; font-weight: 700;
}
.hero p {
  margin-top: var(--s4); color: var(--ink-300);
  max-width: 480px; font-size: 15.5px; line-height: 1.6;
}
.hero-actions { margin-top: var(--s6); display: flex; gap: var(--s3); flex-wrap: wrap; }
.hero-stats {
  margin-top: var(--s8); display: flex; gap: var(--s8); flex-wrap: wrap;
  position: relative; z-index: 1;
}
.hero-stat .v { font-size: 21px; font-weight: 700; color: var(--white); }
.hero-stat .l {
  font-size: 11px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--ink-400); font-weight: 600; margin-top: 2px;
}

.shop-toolbar {
  display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap;
  margin-bottom: var(--s5);
}
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s4); margin-bottom: var(--s5); flex-wrap: wrap;
}

.product-grid {
  display: grid; gap: var(--s5);
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
}

.p-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column;
  /* Resalta sin moverse: la elevación de 3 px se percibía como un salto. */
  transition: box-shadow .28s ease-out, border-color .28s ease-out;
}
.p-card:hover { box-shadow: var(--sh-2); border-color: var(--ink-300); }
.p-card:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }

.p-media {
  aspect-ratio: 4 / 3; position: relative;
  display: grid; place-items: center; overflow: hidden;
}
.p-media .jersey { width: 62%; height: auto; filter: drop-shadow(0 8px 18px rgba(11,12,14,.22)); }
.p-flags { position: absolute; top: var(--s3); left: var(--s3); display: flex; flex-direction: column; gap: 5px; }
.p-info { padding: var(--s4) var(--s5) var(--s5); flex: 1; display: flex; flex-direction: column; }
.p-cat {
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-400); font-weight: 680;
}
.p-name { font-weight: 620; font-size: 14.5px; margin-top: 5px; color: var(--ink-900); line-height: 1.35; }
.p-meta { margin-top: auto; padding-top: var(--s4); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s3); }
.p-price { font-size: 18px; font-weight: 690; letter-spacing: -.02em; }
.p-stock { font-size: 11.5px; }

/* Detalle de producto */
.pd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7); }
.pd-media {
  border-radius: var(--r-md); aspect-ratio: 1; display: grid; place-items: center;
  position: relative; overflow: hidden;
}
.pd-media .jersey { width: 66%; filter: drop-shadow(0 14px 28px rgba(11,12,14,.26)); }

.opt-group { margin-bottom: var(--s5); }
.opt-label {
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-500);
  margin-bottom: var(--s3); display: flex; justify-content: space-between; align-items: center;
}
.size-row { display: flex; gap: var(--s2); flex-wrap: wrap; }
.size-btn {
  min-width: 52px; padding: 10px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--border-strong); background: var(--white);
  font-weight: 620; font-size: 13.5px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transition: background-color .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease); position: relative;
}
.size-btn:hover:not(.out) { border-color: var(--ink-800); }
.size-btn.sel { background: var(--ink-900); color: var(--white); border-color: var(--ink-900); }
.size-btn.sel .s-qty { color: var(--ink-300); }
.size-btn .s-qty { font-size: 10px; font-weight: 550; color: var(--ink-400); }
.size-btn.out {
  opacity: .42; cursor: not-allowed; background: var(--ink-50);
  text-decoration: line-through; text-decoration-color: var(--danger-600);
}
.size-btn.low { border-color: var(--gold-500); }

.color-row { display: flex; gap: var(--s3); flex-wrap: wrap; }
.color-btn {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  border: 2px solid var(--white); box-shadow: 0 0 0 1px var(--border-strong);
  transition: box-shadow .16s var(--ease), transform .16s var(--ease);
}
.color-btn:hover { transform: scale(1.08); }
.color-btn.sel { box-shadow: 0 0 0 2px var(--ink-900); transform: scale(1.08); }

.qty-stepper {
  display: inline-flex; align-items: center;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm); overflow: hidden;
}
.qty-stepper button {
  width: 36px; height: 38px; border: 0; background: var(--white);
  cursor: pointer; font-size: 17px; color: var(--ink-600); font-weight: 500;
  transition: background .14s var(--ease);
}
.qty-stepper button:hover:not(:disabled) { background: var(--ink-100); }
.qty-stepper button:disabled { opacity: .35; cursor: not-allowed; }
.qty-stepper input {
  width: 52px; height: 38px; border: 0; text-align: center;
  font-weight: 650; border-left: 1px solid var(--border); border-right: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.qty-stepper input:focus-visible {
  outline: 2px solid var(--gold-500); outline-offset: -2px;
  background: var(--gold-100);
}
.qty-stepper button:focus-visible,
.chip:focus-visible, .size-btn:focus-visible, .color-btn:focus-visible,
.mode-btn:focus-visible, .side-link:focus-visible, .icon-btn:focus-visible,
.cart-btn:focus-visible, .tab:focus-visible {
  outline: 2px solid var(--gold-500); outline-offset: 2px;
  position: relative; z-index: 1;
}

/* Carrito */
.cart-line { display: flex; gap: var(--s3); padding: var(--s4) 0; border-bottom: 1px solid var(--border); }
.cart-line:last-child { border-bottom: 0; }
.cart-thumb { width: 54px; height: 54px; border-radius: var(--r-sm); flex-shrink: 0; display: grid; place-items: center; }
.cart-info { flex: 1; min-width: 0; }
.cart-name { font-weight: 600; font-size: 13.5px; line-height: 1.3; }
.cart-variant { font-size: 12px; color: var(--ink-400); margin-top: 2px; }
.cart-line-foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--s2); gap: var(--s2); }

.sum-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13.5px; }
.sum-row.total {
  border-top: 1px solid var(--border-strong); margin-top: var(--s3);
  padding-top: var(--s3); font-size: 17px; font-weight: 700;
}

.empty {
  text-align: center; padding: var(--s9) var(--s5); color: var(--ink-400);
}
.empty .ico { width: 42px; height: 42px; margin: 0 auto var(--s4); opacity: .3; }
.empty h3 { color: var(--ink-600); margin-bottom: 5px; }
.empty p { font-size: 13.5px; max-width: 320px; margin: 0 auto; }

/* Checkout */
.steps { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s6); flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: var(--s2); font-size: 12.5px; font-weight: 580; color: var(--ink-400); }
.step .n {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--ink-100); color: var(--ink-400);
  display: grid; place-items: center; font-size: 11.5px; font-weight: 700;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.step.active { color: var(--ink-900); }
.step.active .n { background: var(--ink-900); color: var(--white); }
.step.done .n { background: var(--ok-600); color: var(--white); }
.step.done { color: var(--ok-600); }
.step-line { flex: 1; height: 1px; background: var(--border-strong); min-width: 16px; }

.pay-card {
  background: var(--ink-900); border-radius: var(--r-md);
  padding: var(--s5); color: var(--white); margin-bottom: var(--s5);
}
.pay-card .row { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-300); padding: 3px 0; }
.pay-card .row b { color: var(--white); }

.processing { text-align: center; padding: var(--s8) var(--s5); }
.spinner {
  width: 42px; height: 42px; margin: 0 auto var(--s5);
  border: 3px solid var(--ink-100); border-top-color: var(--gold-500);
  border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.pay-steps { max-width: 330px; margin: 0 auto; text-align: left; }
.pay-step {
  display: flex; align-items: center; gap: var(--s3);
  padding: 8px 0; font-size: 13px; color: var(--ink-300);
  opacity: .4; transition: opacity .3s var(--ease), color .3s var(--ease);
}
.pay-step.on { opacity: 1; color: var(--ink-800); font-weight: 560; }
.pay-step .tick {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--border-strong); display: grid; place-items: center;
}
.pay-step.on .tick { background: var(--ok-600); border-color: var(--ok-600); }
.pay-step.on .tick svg { width: 10px; height: 10px; color: var(--white); }

.success-mark {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto var(--s5);
  background: var(--ok-100); display: grid; place-items: center;
  animation: bounceIn .5s var(--ease);
}
.success-mark svg { width: 30px; height: 30px; color: var(--ok-600); }
@keyframes bounceIn {
  0% { transform: scale(.3); opacity: 0; }
  55% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

.receipt {
  background: var(--ink-50); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--s5); text-align: left; margin: var(--s5) 0;
}
.receipt .r-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 13px; }
.receipt .r-row b { font-weight: 640; }

/* Traza de inventario (post-compra) */
.trace {
  border: 1px solid var(--gold-500); background: var(--gold-100);
  border-radius: var(--r-md); padding: var(--s4) var(--s5); text-align: left; margin-top: var(--s5);
}
.trace-title {
  font-size: 11.5px; font-weight: 720; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gold-600); margin-bottom: var(--s3);
  display: flex; align-items: center; gap: var(--s2);
}
.trace-line {
  display: flex; justify-content: space-between; gap: var(--s3);
  font-size: 13px; padding: 5px 0; border-bottom: 1px dashed rgba(154,123,20,.28);
}
.trace-line:last-child { border-bottom: 0; }
.trace-delta { font-weight: 700; color: var(--danger-600); font-family: var(--mono); }

/* Línea de tiempo de movimientos */
.mov-flow { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 12.5px; }
.mov-flow .from { color: var(--ink-400); }
.mov-flow .arrow { color: var(--ink-300); }
.mov-flow .to { font-weight: 700; color: var(--ink-900); }
.mov-delta { font-weight: 700; font-family: var(--mono); }
.mov-delta.in { color: var(--ok-600); }
.mov-delta.out { color: var(--danger-600); }

/* Barras de reporte */
.bar-row { display: flex; align-items: center; gap: var(--s3); padding: 9px 0; }
.bar-label { width: 168px; font-size: 13px; flex-shrink: 0; }
.bar-track { flex: 1; height: 22px; background: var(--ink-50); border-radius: var(--r-sm); overflow: hidden; }
.bar-fill {
  height: 100%; border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--ink-800), var(--ink-600));
  transition: width .7s var(--ease); min-width: 2px;
}
.bar-fill.gold { background: linear-gradient(90deg, var(--gold-600), var(--gold-400)); }
.bar-val { width: 92px; text-align: right; font-weight: 640; font-size: 13px; flex-shrink: 0; font-variant-numeric: tabular-nums; }

.alert {
  display: flex; gap: var(--s3); padding: var(--s4) var(--s5);
  border-radius: var(--r-md); border: 1px solid; margin-bottom: var(--s4);
  align-items: flex-start;
}
.alert .ico { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.alert-title { font-weight: 640; font-size: 13.5px; }
.alert-body { font-size: 13px; margin-top: 2px; }
.alert-warn   { background: var(--warn-100);   border-color: #eddbaa; color: var(--warn-600); }
.alert-danger { background: var(--danger-100); border-color: #f2cbc7; color: var(--danger-600); }
.alert-info   { background: var(--info-100);   border-color: #c6dcf3; color: var(--info-600); }

.var-editor { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.var-head {
  display: grid; grid-template-columns: 1.4fr 1fr .8fr .8fr .8fr 36px;
  gap: var(--s2); padding: 9px var(--s4); background: var(--ink-50);
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-400);
}
.var-row {
  display: grid; grid-template-columns: 1.4fr 1fr .8fr .8fr .8fr 36px;
  gap: var(--s2); padding: 7px var(--s4); align-items: center;
  border-top: 1px solid var(--border);
}
.var-row .input { padding: 6px 9px; font-size: 12.5px; }

.tabs { display: flex; gap: var(--s5); border-bottom: 1px solid var(--border); margin-bottom: var(--s5); }
.tab {
  padding: var(--s3) 0; border: 0; background: transparent; cursor: pointer;
  font-weight: 580; font-size: 13.5px; color: var(--ink-400);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
.tab:hover { color: var(--ink-800); }
.tab.active { color: var(--ink-900); border-bottom-color: var(--gold-500); }

.list-row {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) 0; border-bottom: 1px solid var(--border);
}
.list-row:last-child { border-bottom: 0; }

.kv { display: flex; justify-content: space-between; padding: 7px 0; font-size: 13.5px; border-bottom: 1px solid var(--border); }
.kv:last-child { border-bottom: 0; }
.kv .k { color: var(--ink-400); }
.kv .v { font-weight: 580; }

.pager { display: flex; align-items: center; justify-content: space-between; padding: var(--s4) var(--s6); border-top: 1px solid var(--border); gap: var(--s3); flex-wrap: wrap; }

.demo-banner {
  background: var(--gold-100); border: 1px solid #ecdca6;
  border-radius: var(--r-md); padding: var(--s3) var(--s4);
  font-size: 12.5px; color: var(--gold-600);
  display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s5);
}
.demo-banner .ico { width: 15px; height: 15px; flex-shrink: 0; }

.sidebar-toggle { display: none; }
/* Gana a la regla del breakpoint: oculto fuera del panel admin. */
.sidebar-toggle.is-hidden { display: none !important; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .grid-2 { grid-template-columns: 1fr; }
  .hero h1 { font-size: 33px; }
}

@media (max-width: 900px) {
  .pd-grid { grid-template-columns: 1fr; gap: var(--s5); }
  .grid-halves { grid-template-columns: 1fr; }
  .var-head { display: none; }
  .var-row {
    grid-template-columns: 1fr 1fr; padding: var(--s4);
    gap: var(--s2); background: var(--ink-50); border-radius: var(--r-sm);
    margin: var(--s2); border-top: 0;
  }
}

@media (max-width: 820px) {
  :root { --side-w: 100%; }
  .sidebar-toggle { display: grid; }
  .admin-layout { flex-direction: column; }
  .sidebar {
    position: fixed; top: var(--nav-h); left: 0; bottom: 0; width: 264px;
    z-index: 70; transform: translateX(-100%);
    transition: transform .28s var(--ease); height: calc(100vh - var(--nav-h));
  }
  .sidebar.open { transform: none; box-shadow: var(--sh-4); }
  .content { padding: var(--s5) var(--s4); }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: span 1; }

  /* Con tres pestañas, el nombre ya no cabe y se partía en dos líneas,
     rompiendo la altura de la barra. Queda el avatar, que basta. */
  .user-chip span { display: none; }
  .user-chip { padding: 4px; }
  .topbar { gap: var(--s3); padding: 0 var(--s4); }
}

@media (max-width: 640px) {
  .topbar { padding: 0 var(--s2); gap: var(--s2); }
  .brand-sub { display: none; }
  .brand-name { font-size: 14px; }
  .brand { min-width: 0; }
  .mode-btn { padding: 7px 12px; font-size: 12px; }
  .user-chip { display: none; }          /* el avatar no aporta en móvil */
  .cart-btn span.label { display: none; }
  .cart-btn { padding: 8px 11px; }
  .topbar-actions { flex-shrink: 0; }
  .hero { padding: var(--s7) var(--s5); }
  .hero h1 { font-size: 26px; }
  .hero-stats { gap: var(--s5); }
  .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s3); }
  .kpi { padding: var(--s4); }
  .kpi-value { font-size: 22px; }
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: var(--s3); }
  .p-info { padding: var(--s3) var(--s4) var(--s4); }
  .content { padding: var(--s4) var(--s3); }
  .shop-wrap { padding: var(--s4) var(--s3) var(--s8); }
  .card-body, .card-head { padding: var(--s4); }
  .filter-bar { padding: var(--s3) var(--s4); }
  table.data thead th, table.data tbody td { padding: 10px var(--s3); }
  .modal-foot { flex-direction: column-reverse; }
  .modal-foot .btn { width: 100%; }
  .page-head { flex-direction: column; align-items: stretch; }
  h1 { font-size: 20px; }
}

@media (max-width: 400px) {
  .brand-name { display: none; }
  .mode-btn { padding: 7px 10px; font-size: 11.5px; }
  /* Anchos fijos que ya no caben: se ceden a favor de la barra. */
  .bar-label { width: 108px; }
  .bar-val { width: auto; min-width: 58px; font-size: 12px; }
}

@media print {
  .topbar, .sidebar, .head-actions, .filter-bar { display: none !important; }
  .content { padding: 0; }
  .card { box-shadow: none; border-color: #ccc; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  /* Con "efectos de animación" desactivados en el sistema, un resaltado
     instantáneo se ve como un salto. Sombra y borde no son movimiento:
     se dejan con una transición corta. */
  .p-card, .kit-card, .store-tab, .btn, .chip {
    transition-duration: .18s !important;
    transform: none !important;
  }
}

/* ============================================================
   ANÁLISIS COMPARATIVO — Shopify vs. plataforma propia
   ============================================================ */
.cmp-wrap { max-width: 1120px; margin: 0 auto; padding: var(--s6) var(--s5) var(--s9); }

.cmp-hero {
  background: var(--ink-900); border-radius: var(--r-lg);
  padding: var(--s8); color: var(--white);
  position: relative; overflow: hidden; margin-bottom: var(--s6);
}
.cmp-hero::after {
  content: ""; position: absolute; right: -80px; top: -80px;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,162,39,.15), transparent 68%);
}
.cmp-hero h1 {
  font-size: 34px; line-height: 1.12; color: var(--white);
  letter-spacing: -.03em; max-width: 620px; text-wrap: balance;
}
.cmp-hero p {
  margin-top: var(--s4); color: var(--ink-300);
  max-width: 560px; font-size: 15px; line-height: 1.6; text-wrap: pretty;
}

.cmp-verdict {
  margin-top: var(--s6); padding: var(--s5);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--ink-600);
  border-radius: var(--r-md);
  position: relative; z-index: 1; max-width: 560px;
}
.cmp-verdict-label {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-400); font-weight: 700;
}
.cmp-verdict-main {
  font-size: 20px; font-weight: 640; margin-top: 6px; color: var(--white);
  line-height: 1.3;
}
.cmp-verdict-main strong { color: var(--gold-400); font-variant-numeric: tabular-nums; }
.cmp-verdict-sub { font-size: 13px; color: var(--ink-300); margin-top: 5px; }

.cmp-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--sh-1); margin-bottom: var(--s5);
}
.cmp-card-head {
  padding: var(--s5) var(--s6); border-bottom: 1px solid var(--border);
}
.cmp-card-body { padding: var(--s6); }
.cmp-card-body.flush { padding: 0; }

/* --- Controles --- */
.cmp-controls {
  display: grid; gap: var(--s5) var(--s6);
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
}
.cmp-field label, .cmp-label {
  display: block; font-size: 12.5px; font-weight: 620;
  color: var(--ink-600); margin-bottom: 6px;
}
.cmp-out {
  display: block; font-size: 23px; font-weight: 700;
  letter-spacing: -.025em; color: var(--ink-900);
  font-variant-numeric: tabular-nums; margin-bottom: 8px; line-height: 1.1;
}

/* Deslizador con estética propia del sistema */
.cmp-field input[type="range"] {
  width: 100%; height: 5px; border-radius: var(--r-full);
  background: var(--ink-100); appearance: none; -webkit-appearance: none;
  cursor: pointer; margin: 4px 0 2px;
}
.cmp-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--ink-900); border: 3px solid var(--white);
  box-shadow: 0 1px 4px rgba(11,12,14,.3); cursor: grab;
  transition: transform .14s var(--ease);
}
.cmp-field input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.14); }
.cmp-field input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; }
.cmp-field input[type="range"]::-moz-range-thumb {
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--ink-900); border: 3px solid var(--white);
  box-shadow: 0 1px 4px rgba(11,12,14,.3); cursor: grab;
}
.cmp-field input[type="range"]:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 4px; }

/* Segmentos */
.cmp-seg {
  display: flex; gap: 4px; padding: 4px;
  background: var(--ink-50); border: 1px solid var(--border);
  border-radius: var(--r-md); flex-wrap: wrap;
}
.cmp-seg-btn {
  flex: 1; min-width: 78px; border: 0; background: transparent;
  padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--ink-500);
  display: flex; flex-direction: column; gap: 2px; align-items: center;
  transition: background-color .16s var(--ease), color .16s var(--ease);
}
.cmp-seg-btn span { font-size: 10.5px; font-weight: 500; opacity: .75; }
.cmp-seg-btn:hover { background: var(--ink-100); color: var(--ink-800); }
.cmp-seg-btn.active { background: var(--ink-900); color: var(--white); }
.cmp-seg-btn.active span { opacity: .8; }
.cmp-seg-btn:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }

.cmp-check {
  display: flex; gap: var(--s3); align-items: flex-start;
  margin-top: var(--s5); padding: var(--s4);
  background: var(--ink-50); border: 1px solid var(--border);
  border-radius: var(--r-md); cursor: pointer; font-size: 13.5px;
  transition: border-color .16s var(--ease);
}
.cmp-check:hover { border-color: var(--border-strong); }
.cmp-check input { margin-top: 2px; accent-color: var(--gold-500); cursor: pointer; flex-shrink: 0; }

/* --- Enfrentamiento de opciones --- */
.cmp-versus {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: var(--s4); align-items: stretch; margin-bottom: var(--s5);
}
.cmp-col {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--s6);
  position: relative; box-shadow: var(--sh-1);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.cmp-col.is-win { border-color: var(--gold-500); box-shadow: var(--sh-2); }
.cmp-flag {
  position: absolute; top: -10px; left: var(--s6);
  background: var(--gold-500); color: var(--ink-900);
  font-size: 10.5px; font-weight: 750; letter-spacing: .05em;
  text-transform: uppercase; padding: 4px 10px; border-radius: var(--r-full);
}
.cmp-col h3 { font-size: 15px; color: var(--ink-500); font-weight: 620; }
.cmp-big {
  font-size: 36px; font-weight: 700; letter-spacing: -.035em;
  margin-top: var(--s2); color: var(--ink-900);
  font-variant-numeric: tabular-nums; line-height: 1.05;
}
.cmp-big-sub { font-size: 12.5px; color: var(--ink-400); margin-top: 3px; }

.cmp-bar {
  height: 7px; background: var(--ink-100); border-radius: var(--r-full);
  margin: var(--s4) 0 var(--s5); overflow: hidden;
}
.cmp-bar-fill {
  height: 100%; width: 0; border-radius: var(--r-full);
  transition: width .7s var(--ease);
}
.cmp-bar-fill.sh { background: linear-gradient(90deg, var(--ink-700), var(--ink-500)); }
.cmp-bar-fill.pr { background: linear-gradient(90deg, var(--gold-600), var(--gold-400)); }

.cmp-dl { margin: 0; }
.cmp-dl > div {
  display: flex; justify-content: space-between; gap: var(--s3);
  padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px;
}
.cmp-dl > div:last-child { border-bottom: 0; }
.cmp-dl dt { color: var(--ink-400); margin: 0; }
.cmp-dl dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.cmp-dl dd.is-warn { color: var(--warn-600); }
.cmp-dl .is-total { border-top: 1px solid var(--border-strong); margin-top: 5px; padding-top: 10px; }
.cmp-dl .is-total dt { color: var(--ink-800); font-weight: 620; }
.cmp-dl .is-total dd { font-size: 16px; }

.cmp-note {
  margin-top: var(--s4); padding-top: var(--s4);
  border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--ink-500); line-height: 1.55;
}
.cmp-vs {
  display: grid; place-items: center; font-weight: 750;
  color: var(--ink-300); font-size: 13px; text-transform: uppercase;
  letter-spacing: .08em;
}

.cmp-equilibrio {
  display: flex; gap: var(--s4); align-items: flex-start;
  padding: var(--s5); border-radius: var(--r-md);
  background: var(--ok-100); border: 1px solid #bfe3d3;
  color: var(--ok-600); margin-bottom: var(--s5);
}
.cmp-equilibrio.is-never { background: var(--info-100); border-color: #c6dcf3; color: var(--info-600); }
.cmp-equilibrio .ico { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.cmp-eq-title { font-weight: 660; font-size: 14.5px; }
.cmp-eq-body { font-size: 13px; margin-top: 3px; line-height: 1.55; color: var(--ink-600); }

/* --- Tablas --- */
.cmp-table td.is-best { background: rgba(15,123,82,.05); font-weight: 600; }
.cmp-table .tick { color: var(--ok-600); margin-right: 6px; font-size: 10px; }
.cmp-yes { color: var(--ok-600); font-weight: 750; font-size: 15px; }
.cmp-no { color: var(--danger-600); font-weight: 750; font-size: 15px; }
.cmp-partial { color: var(--warn-600); font-weight: 750; font-size: 15px; }

.bar-fill.cmp-sh   { background: linear-gradient(90deg, var(--ink-800), var(--ink-600)); }
.bar-fill.cmp-pr   { background: linear-gradient(90deg, var(--gold-600), var(--gold-400)); }
.bar-fill.cmp-warn { background: linear-gradient(90deg, #b45309, #f59e0b); }
#cmpRoot .bar-fill { width: 0; }

/* --- Recomendación --- */
.cmp-final { border-color: var(--border-strong); }
.cmp-lead {
  font-size: 15.5px; line-height: 1.65; color: var(--ink-600);
  padding-bottom: var(--s5); border-bottom: 1px solid var(--border);
  text-wrap: pretty;
}
.cmp-lead strong { color: var(--ink-900); }
.cmp-steps { display: grid; gap: var(--s5); margin-top: var(--s5); }
.cmp-step { display: flex; gap: var(--s4); align-items: flex-start; }
.cmp-step .n {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: var(--ink-900); color: var(--white);
  display: grid; place-items: center; font-size: 12.5px; font-weight: 700;
}
.cmp-step h4 { font-size: 14px; font-weight: 640; color: var(--ink-900); }
.cmp-step p { font-size: 13.5px; color: var(--ink-500); margin-top: 3px; line-height: 1.6; text-wrap: pretty; }

.cmp-fuentes {
  border-top: 1px solid var(--border); padding-top: var(--s5); margin-top: var(--s6);
}
.cmp-fuentes h3 {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-400); font-weight: 700; margin-bottom: var(--s4);
}
.cmp-fuentes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.cmp-fuentes li {
  display: flex; justify-content: space-between; gap: var(--s4);
  font-size: 12.5px; color: var(--ink-500);
  padding-bottom: 7px; border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.cmp-fuentes code {
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-400);
}

@media (max-width: 860px) {
  .cmp-versus { grid-template-columns: 1fr; }
  .cmp-vs { padding: var(--s2) 0; }
  .cmp-hero { padding: var(--s6) var(--s5); }
  .cmp-hero h1 { font-size: 26px; }
}
@media (max-width: 640px) {
  .cmp-wrap { padding: var(--s4) var(--s3) var(--s8); }
  .cmp-card-head, .cmp-card-body { padding: var(--s4); }
  .cmp-hero h1 { font-size: 22px; }
  .cmp-big { font-size: 29px; }
  .cmp-controls { grid-template-columns: 1fr; }
}
.cmp-tag {
  display: inline-block; font-size: 9.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  background: var(--ok-100); color: var(--ok-600);
  padding: 1px 6px; border-radius: var(--r-full); margin-left: 4px;
  vertical-align: middle;
}

/* Índice navegable del análisis: la página mide ~5.800px y sin él
   hay secciones que nadie llega a ver. */
.cmp-indice {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  margin-bottom: var(--s5); padding: var(--s4);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.cmp-indice-item {
  padding: 7px 14px; border-radius: var(--r-full);
  border: 1px solid var(--border-strong); background: var(--white);
  font-size: 12.5px; font-weight: 560; color: var(--ink-600);
  cursor: pointer; white-space: nowrap;
  transition: background-color .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
}
.cmp-indice-item:hover { background: var(--ink-900); border-color: var(--ink-900); color: var(--white); }
.cmp-indice-item:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
/* La sección que el usuario podría no encontrar por sí solo. */
.cmp-indice-item.is-destacado {
  background: var(--gold-100); border-color: #ecdca6; color: var(--gold-600); font-weight: 660;
}
.cmp-indice-item.is-destacado:hover { background: var(--gold-500); border-color: var(--gold-600); color: var(--ink-900); }

/* El encabezado fijo tapa el destino al saltar: se compensa. */
#sec-calc, #sec-resultado, #sec-diy, #sec-tabla, #sec-inv, #sec-crecer, #sec-final {
  scroll-margin-top: calc(var(--nav-h) + 16px);
}

/* Conmutador "quién construye": la decisión que más cambia la comparación.
   Va en el hero porque sin él el veredicto principal puede ser engañoso. */
.cmp-quien {
  margin-top: var(--s6); position: relative; z-index: 1; max-width: 560px;
}
.cmp-quien-label {
  display: block; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-400);
  font-weight: 700; margin-bottom: var(--s3);
}
.cmp-seg-oscuro {
  background: rgba(255,255,255,.06);
  border-color: var(--ink-600);
}
.cmp-seg-oscuro .cmp-seg-btn { color: var(--ink-300); }
.cmp-seg-oscuro .cmp-seg-btn:hover { background: rgba(255,255,255,.08); color: var(--white); }
.cmp-seg-oscuro .cmp-seg-btn.active { background: var(--white); color: var(--ink-900); }

/* Nombre del proveedor junto al concepto: hace verificable cada cifra. */
.cmp-mini {
  display: block; font-size: 10.5px; font-weight: 500;
  color: var(--ink-400); letter-spacing: 0; text-transform: none;
  margin-top: 1px;
}
.cmp-dl dt .cmp-mini { margin-top: 0; }

/* ============================================================
   TIENDAS, KITS, CUENTAS Y ENTREGAS
   ============================================================ */
input[type="checkbox"], input[type="radio"] { accent-color: var(--gold-500); cursor: pointer; }

.btn-on-dark { background: transparent; color: var(--white); border-color: var(--ink-500); }
.btn-on-dark:hover { background: var(--ink-700); border-color: var(--ink-400); color: var(--white); }

/* Tienda pública (enlace del QR): solo la tienda, sin panel ni análisis. */
body.storefront .mode-switch,
body.storefront .user-chip,
body.storefront .sidebar-toggle { display: none !important; }
body.storefront .topbar-actions { margin-left: auto; }

/* --- Selector de tienda --- */
.store-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin-bottom: var(--s5); }
.store-tab {
  text-align: left; padding: 12px 16px; border-radius: var(--r-md);
  border: 1px solid var(--border-strong); background: var(--white); cursor: pointer;
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  transition: background-color .16s var(--ease), border-color .16s var(--ease);
}
.store-tab:hover { border-color: var(--ink-400); }
.store-tab:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.store-tab-name { font-weight: 640; font-size: 14px; color: var(--ink-900); }
.store-tab-meta { font-size: 11.5px; color: var(--ink-400); }
.store-tab.active { background: var(--ink-900); border-color: var(--ink-900); }
.store-tab.active .store-tab-name { color: var(--white); }
.store-tab.active .store-tab-meta { color: var(--gold-400); }

.shop-section { margin-bottom: var(--s8); scroll-margin-top: calc(var(--nav-h) + 16px); }
.shop-foot { text-align: center; line-height: 1.6; max-width: 620px; margin: 0 auto; }

/* --- Cuenta del comprador --- */
.acct-bar {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4) var(--s5); margin-bottom: var(--s7);
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg);
}
.acct-ico {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: var(--ink-100); color: var(--ink-500);
  display: grid; place-items: center; font-weight: 700; font-size: 13px;
}
.acct-ico .ico { width: 18px; height: 18px; }
.acct-ico.on { background: var(--ink-900); color: var(--white); }
.acct-text { flex: 1; min-width: 0; }
.acct-title { font-weight: 620; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.acct-sub { font-size: 12.5px; color: var(--ink-400); margin-top: 2px; overflow-wrap: anywhere; }

/* --- Foto de producto ---
   Las fotos vienen sobre fondo blanco; `multiply` las funde con el gris
   de la tarjeta en lugar de dejar un recuadro blanco. */
.p-photo { width: 100%; height: 100%; object-fit: contain; display: block; mix-blend-mode: multiply; }
.p-media { aspect-ratio: 1 / 1; }
.p-media .p-photo { padding: 6%; }
.pd-media .p-photo { padding: 5%; }
.p-meta { align-items: baseline; }
.p-stock { white-space: nowrap; }
.p-sizes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 9px; min-height: 19px; font-size: 11.5px; color: var(--ink-400); }
.sz {
  padding: 1px 5px; border: 1px solid var(--border-strong); border-radius: 4px;
  font-weight: 620; font-size: 10.5px; color: var(--ink-600);
}
.sz.off { opacity: .42; text-decoration: line-through; }

.thumb-media { background: linear-gradient(160deg, #f7f8fa, #e9ebef); padding: 3px; overflow: hidden; }
.thumb-media .jersey { width: 100%; height: 100%; }

.tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tag {
  display: inline-block; padding: 2px 7px; border-radius: 4px; white-space: nowrap;
  font-size: 11px; font-weight: 620; background: var(--ink-100); color: var(--ink-600);
}
.tag-ok { background: var(--ok-100); color: var(--ok-600); }
.tag-off { background: transparent; color: var(--ink-300); box-shadow: inset 0 0 0 1px var(--border-strong); }

/* --- Kits --- */
.kit-grid { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); }
.kit-card {
  display: grid; grid-template-columns: 200px 1fr;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden; cursor: pointer;
  transition: box-shadow .28s ease-out, border-color .28s ease-out;
}
.kit-card:hover { box-shadow: var(--sh-2); border-color: var(--ink-300); }
.kit-card:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.kit-media { position: relative; display: grid; place-items: center; min-height: 200px; overflow: hidden; }
.kit-media .p-photo { padding: 7%; }
.kit-media .jersey { width: 74%; filter: drop-shadow(0 8px 18px rgba(11,12,14,.2)); }
.kit-info { padding: var(--s5); display: flex; flex-direction: column; min-width: 0; }
.kit-name { font-size: 17px; margin-top: 4px; }
.kit-list {
  list-style: none; margin: 10px 0 0; padding: 0;
  display: grid; gap: 3px var(--s3); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  font-size: 13px; color: var(--ink-500);
}
.kit-list .q, .kit-row-name .q { color: var(--ink-900); font-weight: 650; font-variant-numeric: tabular-nums; }
.kit-foot { margin-top: auto; padding-top: var(--s4); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s3); }
.was { font-size: 13px; font-weight: 500; color: var(--ink-400); text-decoration: line-through; letter-spacing: 0; }
.kit-save { font-size: 12px; font-weight: 640; color: var(--ok-600); }

/* --- Detalle de producto y configurador de kit --- */
.pd-price {
  font-size: 30px; font-weight: 700; letter-spacing: -.03em;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px;
}
.tax-note { font-size: 12.5px; font-weight: 500; color: var(--ink-400); letter-spacing: 0; }
.pd-desc { color: var(--ink-500); margin-top: 12px; line-height: 1.65; font-size: 13.5px; }
.pd-thumbs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.pd-thumb {
  width: 50px; height: 50px; padding: 2px; border-radius: var(--r-sm); cursor: pointer; overflow: hidden;
  border: 1px solid var(--border-strong); background: #eef0f3;
}
.pd-thumb.sel { border-color: var(--ink-900); box-shadow: 0 0 0 1px var(--ink-900); }
.pd-thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.opt-aside { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ink-400); }
.size-btn.compact { min-width: 44px; padding: 8px 10px; }

.kit-rows { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.kit-row {
  display: grid; grid-template-columns: 38px 1fr minmax(118px, 150px);
  align-items: center; gap: var(--s3); padding: 8px var(--s3);
  border-top: 1px solid var(--border);
}
.kit-row:first-child { border-top: 0; }
.kit-row.bad { background: var(--danger-100); }
.kit-row-name { font-size: 13.5px; font-weight: 560; min-width: 0; }
.kit-row .select { padding: 7px 30px 7px 10px; font-size: 13px; }

/* --- Carrito --- */
.cart-thumb { overflow: hidden; }
.cart-thumb .p-photo { padding: 4px; }
.cart-thumb .jersey { width: 76%; }
.cart-comps { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 1px; font-size: 12px; color: var(--ink-500); }
.cart-comps b { color: var(--ink-800); }
.qty-stepper.sm button { width: 30px; height: 32px; font-size: 15px; }
.qty-stepper.sm input { width: 40px; height: 32px; }
.gate-banner { margin-bottom: var(--s4); }
.gate-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }

/* --- Checkout --- */
.form-h { margin: 18px 0 12px; }
.fulfill-opts { display: grid; gap: var(--s2); margin-bottom: var(--s4); }
.fulfill-opt {
  display: flex; align-items: center; gap: var(--s3); padding: 12px 14px; cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  transition: border-color .16s var(--ease), background-color .16s var(--ease);
}
.fulfill-opt.sel { border-color: var(--ink-900); box-shadow: 0 0 0 1px var(--ink-900); background: var(--ink-50); }
.fo-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.fo-title { font-weight: 620; }
.fo-sub { font-size: 12px; color: var(--ink-400); }
.fo-price { font-weight: 650; white-space: nowrap; }
.form-grid.tight { gap: 0 var(--s3); }
.pay-method {
  display: flex; gap: var(--s3); align-items: center; padding: 12px 14px;
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
}
.pay-method .ico { width: 22px; height: 22px; color: var(--ink-500); flex-shrink: 0; }
.pm-title { font-weight: 620; }
.pm-sub { font-size: 12px; color: var(--ink-400); margin-top: 2px; }
.pay-card .row { gap: var(--s4); }
.pay-card .row.sub { font-size: 11.5px; color: var(--ink-400); padding-top: 0; }
.receipt .r-row { gap: var(--s4); }
.receipt .r-row.sub { font-size: 12px; color: var(--ink-400); padding-top: 0; }

.chip-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.field label.chip-check { display: inline-flex; margin-bottom: 0; font-size: 13px; font-weight: 550; color: var(--ink-600); }
.chip-sm { padding: 4px 10px; font-size: 12px; }

/* --- Panel: detalles --- */
.kpi-of { font-size: 18px; color: var(--ink-300); font-weight: 600; }
.side-badge-soft { background: var(--ink-500); }
.select-sm { padding: 5px 28px 5px 9px; font-size: 12.5px; width: auto; }
table.data tr.sub-row td { padding-top: 5px; padding-bottom: 5px; background: var(--ink-50); }
.bar-label.wide { width: 230px; }

/* --- Formulario de producto --- */
.pf-top { display: grid; grid-template-columns: 148px 1fr; gap: var(--s5); margin-bottom: var(--s2); }
.pf-image { display: flex; flex-direction: column; gap: 6px; }
.pf-preview {
  aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden;
  border: 1px dashed var(--border-strong); background: linear-gradient(160deg, #f7f8fa, #e9ebef);
  display: grid; place-items: center;
}
.pf-preview .jersey { width: 70%; }
.pf-upload { cursor: pointer; }
.pf-section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); flex-wrap: wrap; margin: 18px 0 12px;
}
.size-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: var(--s2); }
.size-cell {
  display: flex; flex-direction: column; gap: 6px; padding: 8px;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--ink-50);
}
.size-cell.on { background: var(--white); border-color: var(--border-strong); }
.size-cell label { display: flex; align-items: center; gap: 6px; font-weight: 640; font-size: 13px; cursor: pointer; }
.size-cell .input { padding: 5px 8px; font-size: 13px; }
.comp-editor { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.comp-row {
  display: grid; grid-template-columns: 1fr 70px 78px 32px; gap: var(--s2);
  align-items: center; padding: 7px var(--s3); border-top: 1px solid var(--border);
}
.comp-row:first-child { border-top: 0; }
.comp-row .input, .comp-row .select { padding: 6px 9px; font-size: 13px; }
.comp-row .select { padding-right: 30px; min-width: 0; }
.comp-sub { text-align: right; }

/* --- Página de tiendas --- */
.store-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--s5); align-items: start; }
.store-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
.store-stats .v { font-size: 20px; font-weight: 680; letter-spacing: -.02em; }
.store-stats .l { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-400); font-weight: 640; }
.field.store-checks label {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px; cursor: pointer;
  font-weight: 500; font-size: 13px; color: var(--ink-800);
}
.store-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.store-link {
  display: flex; gap: var(--s4); align-items: flex-start;
  margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--border);
}
.store-link .qr { border: 1px solid var(--border); border-radius: var(--r-sm); flex-shrink: 0; }
.store-link-text { min-width: 0; flex: 1; }
.store-url { word-break: break-all; color: var(--ink-600); background: var(--ink-50); padding: 6px 8px; border-radius: var(--r-sm); }

@media (max-width: 900px) {
  .kit-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .store-tabs { grid-template-columns: 1fr; gap: 6px; margin-bottom: var(--s4); }
  .store-tab { padding: 9px 12px; flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--s3); }
  .acct-bar { flex-wrap: wrap; padding: var(--s3) var(--s4); margin-bottom: var(--s5); gap: var(--s3); }
  .acct-text { flex: 1 1 calc(100% - 60px); }
  .acct-bar .btn { flex: 1 1 100%; }
  /* En la tienda pública no hay pestañas: la marca cabe y debe verse. */
  body.storefront .brand-name { display: block; }
  /* La imagen no debe empujar las tallas fuera de la primera pantalla. */
  .pd-media { aspect-ratio: 16 / 10; }
  .p-meta { flex-wrap: wrap; gap: 2px var(--s3); }
  .kit-card { grid-template-columns: 124px 1fr; }
  .kit-media { min-height: 150px; }
  .kit-info { padding: var(--s4); }
  .kit-list { grid-template-columns: 1fr; }
  .kit-foot { flex-wrap: wrap; }
  .kit-row { grid-template-columns: 34px 1fr 112px; gap: var(--s2); }
  .shop-toolbar .select { flex: 1; }
  .overlay { padding: var(--s2); }
  .modal { max-height: 95vh; }
  .modal-head, .modal-body { padding: var(--s4); }
  .pd-price { font-size: 25px; }
  .pf-top { grid-template-columns: 1fr; gap: var(--s3); }
  .pf-image { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .pf-preview { width: 88px; }
  .comp-row { grid-template-columns: 1fr 54px 32px; }
  .comp-sub { display: none; }
  .store-grid { grid-template-columns: 1fr; }
  .store-stats { grid-template-columns: repeat(2, 1fr); }
  .store-link { flex-direction: column; }
  .bar-label.wide { width: 128px; }
  .hero-stat .v { font-size: 18px; }
}

@media (max-width: 380px) {
  .kit-card { grid-template-columns: 1fr; }
  .kit-media { min-height: 0; aspect-ratio: 16 / 10; }
}

/* ============================================================
   TIENDA — aspecto de tienda en línea (reunión del 5 de octubre)
   Producto primero, identidad de cada tienda (--brand) y la cuenta
   en la barra superior. Las reglas de abajo sustituyen a las de la
   versión anterior de kits y tarjetas.
   ============================================================ */
.hidden { display: none !important; }
.store-mark {
  display: inline-grid; place-items: center; flex-shrink: 0;
  border-radius: 22%; overflow: hidden; font-weight: 800; letter-spacing: -.03em;
}
.store-mark img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.brand-mark.store-mark { border-radius: 8px; }

.btn-brand {
  background: var(--brand, var(--ink-900)); border-color: var(--brand, var(--ink-900));
  color: var(--brand-ink, #fff); font-weight: 650;
}
.btn-brand:hover { filter: brightness(1.08); background: var(--brand, var(--ink-900)); border-color: var(--brand, var(--ink-900)); }
.badge-brand { background: var(--brand, var(--ink-900)); color: var(--brand-ink, #fff); border-color: transparent; }
.link-btn {
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--ink-900); font-weight: 650; text-decoration: underline; text-underline-offset: 3px;
}

/* Cuenta en la barra superior */
.acct-btn {
  display: flex; align-items: center; gap: var(--s2);
  background: var(--ink-700); border: 1px solid var(--ink-600); color: var(--white);
  padding: 6px 12px 6px 8px; border-radius: var(--r-full); cursor: pointer;
  font-weight: 560; font-size: 13px; white-space: nowrap;
  transition: background .18s var(--ease);
}
.acct-btn:hover { background: var(--ink-600); }
.acct-btn .ico { width: 16px; height: 16px; }
.acct-btn.is-inactive { opacity: 0; pointer-events: none; visibility: hidden; }
.acct-dot {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gold-500); color: var(--ink-900); font-size: 10.5px; font-weight: 750;
}

/* Selector de tiendas (solo en la demo) */
.store-tabs { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.store-tab { flex-direction: row; align-items: center; gap: var(--s3); }
.store-tab-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.store-tab-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Franja de la tienda: compacta, para que el producto entre en la primera pantalla */
.sf-band {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--s5); align-items: center;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg);
  border-top: 4px solid var(--brand, var(--ink-900));
  padding: var(--s5) var(--s6); margin-bottom: var(--s4);
}
.sf-eyebrow {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 750;
  color: var(--ink-400);
}
.sf-band h1 { font-size: 26px; letter-spacing: -.025em; margin-top: 2px; line-height: 1.15; }
.sf-band p { margin-top: 4px; color: var(--ink-500); font-size: 14px; max-width: 560px; line-height: 1.5; }
.sf-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 12.5px; color: var(--ink-600); }
.sf-perks li { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.sf-perks .ico { width: 16px; height: 16px; color: var(--brand, var(--ink-900)); flex-shrink: 0; }

/* Menú de la tienda */
.sf-nav {
  position: sticky; top: var(--nav-h); z-index: 20;
  display: flex; gap: var(--s5); overflow-x: auto; scrollbar-width: none;
  background: var(--surface-sunken); border-bottom: 1px solid var(--border);
  padding: 0 2px; margin-bottom: var(--s6);
}
.sf-nav::-webkit-scrollbar { display: none; }
.sf-nav-link {
  border: 0; background: none; cursor: pointer; white-space: nowrap;
  padding: 12px 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-500); border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
.sf-nav-link:hover { color: var(--ink-900); }
.sf-nav-link.active { color: var(--ink-900); border-bottom-color: var(--brand, var(--ink-900)); }
.sf-nav-link:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.shop-section { scroll-margin-top: calc(var(--nav-h) + 56px); }

/* Estado del kit para quien ya ingresó */
.kit-status {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  font-size: 13px; color: var(--ink-600); margin: calc(-1 * var(--s2)) 0 var(--s4);
}
.kit-status .ico { width: 16px; height: 16px; color: var(--ink-400); flex-shrink: 0; }
/* En teléfono el icono acompaña al texto en la misma línea y el enlace va debajo. */
@media (max-width: 640px) {
  .kit-status { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: start; }
  .kit-status .ico { margin-top: 2px; }
  .kit-status > .link-btn { grid-column: 2; justify-self: start; }
  .kit-status.ok, .kit-status.pending { grid-template-columns: 1fr; }
}

/* Kits: foto grande arriba, tallas a la vista */
.kit-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.kit-card { display: flex; flex-direction: column; }
.kit-media { min-height: 0; aspect-ratio: 4 / 3; }
.kit-media .p-photo { padding: 5%; }
.kit-media .jersey { width: 78%; }
.kit-media .p-flags { flex-direction: row; flex-wrap: wrap; }
.kit-info { padding: var(--s4) var(--s5) var(--s5); flex: 1; }
.kit-name { font-size: 18px; margin-top: 4px; line-height: 1.25; }
.kit-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.kit-price .p-price { font-size: 22px; }
.kit-includes { font-size: 12.5px; color: var(--ink-500); margin-top: 8px; line-height: 1.5; }
.kit-includes b { color: var(--ink-700); font-weight: 650; }
.kit-sizes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s4); }
.sz-pick {
  min-width: 40px; padding: 6px 8px; border-radius: var(--r-sm); cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--white);
  font-size: 12px; font-weight: 650; color: var(--ink-700);
  transition: border-color .16s var(--ease), background-color .16s var(--ease);
}
.sz-pick:hover:not(:disabled) { border-color: var(--brand, var(--ink-900)); background: var(--brand-soft, var(--ink-50)); }
.sz-pick.off { opacity: .4; text-decoration: line-through; cursor: not-allowed; }
.kit-cta { margin-top: auto; }
.kit-sizes + .kit-cta { margin-top: var(--s4); }

/* Un solo kit (Summer Camp): ocupa todo el ancho, foto e información lado a lado */
.kit-grid.single { grid-template-columns: 1fr; }
.kit-grid.single .kit-card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.kit-grid.single .kit-media { aspect-ratio: auto; min-height: 300px; height: 360px; }
.kit-grid.single .kit-media .jersey, .kit-grid.single .kit-media svg { width: auto; height: 82%; max-width: 88%; }
.kit-grid.single .kit-media .p-photo { height: 100%; width: 100%; object-fit: contain; }
.kit-grid.single .kit-info { padding: var(--s6) var(--s7); justify-content: center; }
.kit-grid.single .kit-name { font-size: 24px; }
.kit-grid.single .kit-price .p-price { font-size: 28px; }

/* Piezas sueltas: imagen dominante, precio claro */
.sf-singles-head { align-items: flex-end; }
.sf-singles-head .shop-toolbar { margin-bottom: 0; flex-wrap: nowrap; }
.sf-singles-head .search-box { min-width: 200px; width: 240px; flex: 0 1 240px; }
.sf-singles-head .select { width: auto; min-width: 150px; }
.sf-count { margin: calc(-1 * var(--s3)) 0 var(--s4); }
.product-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.p-media { aspect-ratio: 1 / 1; }
.p-info { padding: var(--s3) var(--s4) var(--s4); }
.p-name { font-size: 14.5px; margin-top: 3px; }
.p-info .p-price { font-size: 17px; margin-top: 6px; }
.p-info .p-sizes { margin-top: 8px; }

/* Campos del jugador en el kit */
.kit-player { margin-bottom: var(--s4); }
.kit-player .field { margin-bottom: var(--s3); }

@media (max-width: 900px) {
  .sf-band { grid-template-columns: auto 1fr; }
  .sf-perks { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 16px; }
  .kit-grid.single .kit-card { grid-template-columns: 1fr; }
  .kit-grid.single .kit-media { min-height: 0; height: auto; aspect-ratio: 16 / 10; }
  .kit-grid.single .kit-info { padding: var(--s5); }
}
@media (max-width: 640px) {
  .acct-btn .label { display: none; }
  .acct-btn { padding: 6px; }
  .store-tabs { grid-template-columns: 1fr; }
  .sf-band { padding: var(--s4); gap: var(--s3); margin-bottom: var(--s2); }
  .sf-band .store-mark { width: 44px !important; height: 44px !important; }
  .sf-band h1 { font-size: 19px; }
  .sf-band p { display: none; }
  .sf-perks { font-size: 12px; gap: 4px 12px; }
  .sf-nav { gap: var(--s4); margin-bottom: var(--s4); }
  .sf-singles-head { flex-direction: column; align-items: stretch; }
  .sf-singles-head .shop-toolbar { flex-wrap: wrap; }
  .sf-singles-head .search-box { width: 100%; flex: 1 1 100%; }
  .sf-singles-head .select { flex: 1; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kit-grid { grid-template-columns: 1fr; }
  .kit-grid.single .kit-name { font-size: 20px; }
  .kit-grid.single .kit-price .p-price { font-size: 24px; }
}

/* ============================================================
   PANEL — tiendas, correo de pedido, envíos e importación
   ============================================================ */
.store-card .card-head .cell-flex { gap: var(--s3); }
.store-kv { margin: var(--s4) 0; }
.store-kv .kv { padding: 7px 0; }
.store-checks { display: flex; flex-wrap: wrap; gap: 8px 20px; padding-top: 4px; }
.store-checks label { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 500; color: var(--ink-700); cursor: pointer; text-transform: none; letter-spacing: 0; }
.store-logo-preview { display: grid; place-items: center; overflow: hidden; }
.store-logo-preview img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.store-logo-preview .store-mark { width: 100% !important; height: 100% !important; border-radius: 0; font-size: 40px !important; }

.swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.swatch {
  width: 28px; height: 28px; border-radius: var(--r-full); cursor: pointer;
  border: 2px solid var(--white); box-shadow: 0 0 0 1px var(--border);
  transition: box-shadow .15s ease;
}
.swatch:hover { box-shadow: 0 0 0 1px var(--ink-400); }
.swatch.sel { box-shadow: 0 0 0 2px var(--ink-900); }
.swatch:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.swatches input[type="color"] { width: 34px; height: 30px; padding: 0 2px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--white); cursor: pointer; }

/* Correo de pedido */
.mail-row {
  display: flex; align-items: center; gap: var(--s3); margin-top: var(--s5);
  padding: var(--s3) var(--s4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--ink-50);
}
.mail-row > .ico { width: 18px; height: 18px; color: var(--ink-500); flex-shrink: 0; }
.mail-wrap { background: var(--ink-50); }
.mail { max-width: 600px; margin: var(--s4) auto 0; background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; font-size: 14px; line-height: 1.5; color: #111827; }
.mail h2 { font-size: 19px; letter-spacing: -.01em; }
.mail h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #6b7280; font-weight: 650; }
.mail-brand { padding: 14px 24px; font-weight: 680; letter-spacing: -.01em; }
.mail-body { padding: 22px 24px 26px; }

/* Envíos */
#page-shipments input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--ink-900); }

/* Importación de inventario */
.imp-steps { list-style: none; counter-reset: imp; padding: 0; margin: 0 0 var(--s4); display: grid; gap: var(--s4); }
.imp-steps > li { counter-increment: imp; position: relative; padding-left: 36px; }
.imp-steps > li::before {
  content: counter(imp); position: absolute; left: 0; top: -1px;
  width: 24px; height: 24px; border-radius: var(--r-full); display: grid; place-items: center;
  background: var(--ink-900); color: var(--white); font-size: 12px; font-weight: 680;
}
.imp-step-title { font-weight: 640; font-size: 14px; color: var(--ink-900); }
.imp-mode { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-top: var(--s2); }
.imp-opt {
  display: flex; gap: 10px; align-items: flex-start; padding: var(--s3); cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--white);
  transition: border-color .15s ease, background-color .15s ease;
}
.imp-opt:hover { border-color: var(--ink-400); }
.imp-opt:has(input:checked) { border-color: var(--ink-900); background: var(--ink-50); }
.imp-opt input { margin-top: 3px; accent-color: var(--ink-900); }
.imp-opt span { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.imp-opt small { color: var(--ink-500); font-size: 12px; line-height: 1.45; }
.imp-drop {
  display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: var(--s2);
  padding: var(--s5); border: 1.5px dashed var(--ink-300); border-radius: var(--r-md);
  color: var(--ink-600); font-size: 13.5px; font-weight: 560; cursor: pointer; background: var(--white);
  transition: border-color .15s ease, background-color .15s ease;
}
.imp-drop:hover { border-color: var(--ink-600); background: var(--ink-50); }
.imp-drop:focus-within { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.imp-drop .ico { width: 18px; height: 18px; }
.imp-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: var(--s4); border-top: 1px solid var(--border); margin-bottom: var(--s3); }
.imp-table { max-height: 320px; overflow: auto; border: 1px solid var(--border); border-radius: var(--r-md); }
.imp-table thead th { position: sticky; top: 0; background: var(--white); z-index: 1; }
.imp-errors { margin-top: var(--s4); padding: var(--s3) var(--s4); border: 1px solid var(--danger-100); background: #fef7f7; border-radius: var(--r-md); }
.imp-errors ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.6; color: var(--ink-700); }

@media (max-width: 640px) {
  .imp-mode { grid-template-columns: 1fr; }
  .mail-row { flex-wrap: wrap; }
  .mail-body { padding: 18px 16px 20px; }
}

/* ============================================================
   COMPRAS — pedidos a proveedor y estado por uniforme
   ============================================================ */
.po-bar { height: 6px; border-radius: var(--r-full); background: var(--ink-100); margin-top: 5px; overflow: hidden; }
.po-bar span { display: block; height: 100%; background: var(--ok-600); border-radius: inherit; }
.po-zero, .po-need { color: var(--danger-600); font-weight: 650; }
.po-coming { color: var(--info-600); font-weight: 600; margin-top: 3px; }
.po-stages td, .po-stages th { white-space: nowrap; }
.po-row { cursor: pointer; }
.po-row:hover td { background: var(--ink-50); }
.po-row:focus-visible { outline: 2px solid var(--gold-500); outline-offset: -2px; }
.po-stages .sub-row td { background: var(--surface-sunken); padding-top: 7px; padding-bottom: 7px; }
.po-stages .sub-row td:first-child { padding-left: 34px; }

.po-items { display: grid; gap: var(--s3); margin: var(--s2) 0 var(--s3); }
.po-item { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s3) var(--s4); background: var(--white); }
.po-item-head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.po-item-head .cell-flex { flex: 1; min-width: 0; }
.po-item-cost { display: flex; flex-direction: column; gap: 2px; width: 110px; }
.po-sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
.po-size { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 640; color: var(--ink-700); }
.po-size small { font-weight: 500; color: var(--ink-400); font-size: 11px; }
.input-sm { height: 34px; padding: 4px 8px; font-size: 14px; }
.po-recv { width: 84px; text-align: right; margin-left: auto; }
.po-add .select { width: 100%; }
.po-foot-total { margin-right: auto; font-weight: 640; color: var(--ink-700); font-size: 14px; }

@media (max-width: 640px) {
  .po-item-head { flex-wrap: wrap; }
  .po-item-cost { width: 100%; flex-direction: row; align-items: center; gap: 8px; }
  .po-item-cost .input { width: 110px; }
  .po-foot-total { width: 100%; margin-bottom: 4px; }
}

/* ============================================================
   BASE COMPARTIDA — carga, sesión e indicador de guardado
   ============================================================ */
.boot-screen { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; background: var(--surface-sunken); }
.boot-box { text-align: center; max-width: 360px; padding: var(--s6); display: grid; gap: 10px; justify-items: center; color: var(--ink-700); font-size: 14.5px; }
.boot-spin { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--ink-100); border-top-color: var(--ink-900); animation: boot-spin .8s linear infinite; }
@keyframes boot-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .boot-spin { animation-duration: 2.4s; } }

.sync-chip { font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: var(--r-full); white-space: nowrap; color: var(--ink-200); background: rgba(255,255,255,.08); }
.sync-chip.sync-saving { color: var(--gold-400); }
.sync-chip.sync-error { color: #ffb4b4; background: rgba(220, 38, 38, .22); }
.user-chip.is-action { cursor: pointer; }
.user-chip.is-action:hover { background: var(--ink-600); }
.user-chip.is-action:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.user-chip .avatar .ico { width: 15px; height: 15px; }

button.imp-opt { font: inherit; text-align: left; color: inherit; width: 100%; }
.team-list { margin-top: 6px; border-top: 1px solid var(--border); }
.team-add { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--border); }

@media (max-width: 640px) {
  .sync-chip { display: none; }
  .team-add .form-grid { grid-template-columns: 1fr !important; }
}

/* Contraseña con botón de ojo para ver lo escrito */
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 46px; }
.pw-eye {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 34px; border: 0; background: transparent; border-radius: var(--r-sm);
  display: grid; place-items: center; color: var(--ink-500); cursor: pointer;
}
.pw-eye:hover { color: var(--ink-900); background: var(--ink-50); }
.pw-eye:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 1px; }
.pw-eye .ico { width: 18px; height: 18px; }


/* ============================================================
   INVENTARIO POR UNIFORME — tallas a la vista, conteo rápido
   ============================================================ */
.inv-hint { margin: 0; padding: 10px 16px; font-size: 12.5px; color: var(--ink-500); border-bottom: 1px solid var(--border); }
.inv-list { display: grid; }
.inv-group { padding: 14px 16px 16px; border-bottom: 1px solid var(--border); display: grid; gap: 12px; }
.inv-group:last-child { border-bottom: 0; }
.inv-head { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.inv-title { flex: 1 1 220px; min-width: 0; }
.inv-title .cell-sub .tags { display: inline-flex; gap: 4px; vertical-align: middle; }
.inv-total { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.inv-total b { font-size: 20px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.inv-total span { font-size: 12px; color: var(--ink-500); }
.inv-actions { display: flex; gap: 6px; margin-left: auto; }
.size-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.size-cell {
  display: grid; grid-template-columns: auto auto; gap: 2px 8px; align-items: baseline;
  min-width: 68px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--white); color: var(--ink-900); font: inherit; cursor: pointer; text-align: left;
  transition: border-color .15s ease, background-color .15s ease;
}
.size-cell:hover { border-color: var(--ink-500); }
.size-cell:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.size-cell .sz { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: var(--ink-500); }
.size-cell .qty { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.size-cell .inc { grid-column: 1 / -1; font-size: 11px; color: var(--info-600); font-weight: 600; }
.size-cell.bajo { background: var(--warn-100); border-color: #efd9b0; }
.size-cell.bajo .qty { color: var(--warn-600); }
.size-cell.agotado { background: var(--danger-100); border-color: #f1c2c2; }
.size-cell.agotado .qty { color: var(--danger-600); }
.size-cell.sincargar { background: var(--ink-50); color: var(--ink-400); border-style: dashed; }
.count-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.count-cell { display: grid; gap: 4px; font-size: 12px; font-weight: 700; color: var(--ink-600); letter-spacing: .04em; }
.count-cell .input { text-align: center; font-size: 16px; font-weight: 600; }
.count-cell small { font-weight: 500; color: var(--ink-400); letter-spacing: 0; }
@media (max-width: 640px) {
  .inv-actions { margin-left: 0; width: 100%; }
  .inv-actions .btn { flex: 1; }
  .size-cell { min-width: 60px; }
}