/* shopCELL — estilos de tienda pública y panel de ventas, construidos sobre los
   tokens de nocturne.css. No redefine tokens, solo layout/composición. */

.container { max-width: 1240px; margin-inline: auto; padding-inline: clamp(12px, 4vw, 32px); }

/* ── Barra de anuncio + Header ─────────────────────────────────────────── */
.anuncio-bar {
  background: linear-gradient(to right, transparent, color-mix(in srgb, var(--color-accent) 16%, transparent), transparent);
  font-size: 12px; text-align: center; padding: 6px var(--space-3);
}
.anuncio-bar .cuenta { color: var(--color-accent-300); font-variant-numeric: tabular-nums; font-weight: 500; }
.anuncio-bar a { color: var(--color-text); text-decoration: underline; text-underline-offset: 2px; }

.tienda-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-divider);
}
.tienda-header .container { display: flex; align-items: center; gap: var(--space-6); min-height: 64px; flex-wrap: wrap; padding-block: 8px; }
.logo { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 500; text-decoration: none; color: var(--color-text); }
.logo .dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--color-accent);
  box-shadow: 0 0 12px 2px var(--color-accent);
}
.tienda-nav { display: flex; align-items: center; gap: var(--space-2); margin-right: auto; }
.tienda-nav a {
  color: var(--color-text); text-decoration: none; font-size: 14px; opacity: .82;
  padding: 8px 12px; border-radius: var(--radius-md);
}
.tienda-nav a:hover, .tienda-nav a.activo { color: var(--color-accent); opacity: 1; }
.buscador { position: relative; flex: 0 1 260px; }
.buscador input { padding-left: 34px; }
.buscador i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); opacity: .6; }
.carrito-btn { position: relative; }
.carrito-btn .badge {
  position: absolute; top: -6px; right: -6px; background: var(--color-accent);
  color: var(--color-bg); font-size: 10px; font-weight: 600; min-width: 16px; height: 16px;
  border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 3px;
}
.whatsapp-flotante {
  position: fixed; right: 20px; bottom: 20px; z-index: 50;
  width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--color-surface); border: 1px solid var(--color-accent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--color-accent) 45%, transparent);
  color: var(--color-accent); font-size: 24px; text-decoration: none;
}
.tienda-footer { border-top: 1px solid var(--color-divider); margin-top: var(--space-8); padding: var(--space-8) 0; opacity: .75; font-size: 13px; }

/* ── Secciones genéricas ───────────────────────────────────────────────── */
.seccion { padding: var(--space-8) 0; }
.seccion-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-4); gap: var(--space-3); }
.kicker { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--color-accent); margin-bottom: var(--space-1); }

/* ── Hero carrusel ─────────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--color-surface); }
.hero-slide { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: center; padding: var(--space-8); }
[x-cloak] { display: none !important; }
.hero h1 { font-size: clamp(32px, 4.6vw, 52px); margin-bottom: var(--space-3); }
.hero-visual {
  height: 340px; border-radius: var(--radius-lg); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--space-2); text-align: center;
  background: radial-gradient(circle at 50% 30%, var(--tone, var(--color-accent-800)), var(--color-neutral-900) 75%);
}
.hero-dots { display: flex; gap: 6px; justify-content: center; padding: var(--space-3) 0; }
.hero-dots button { border: 0; height: 6px; border-radius: 999px; cursor: pointer; background: var(--color-neutral-700); width: 10px; padding: 0; }
.hero-dots button.activo { width: 28px; background: var(--color-accent); }
.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--color-divider);
  background: color-mix(in srgb, var(--color-bg) 70%, transparent); color: var(--color-text);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.hero-arrow.izq { left: var(--space-3); } .hero-arrow.der { right: var(--space-3); }

/* ── Beneficios ────────────────────────────────────────────────────────── */
.beneficios { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--space-3); }
.beneficio { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; padding: var(--space-3); }
.beneficio i { color: var(--color-accent); font-size: 20px; }

/* ── Categorías ────────────────────────────────────────────────────────── */
.categorias-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: var(--space-3); }
.categoria-tile {
  min-height: 120px; display: flex; flex-direction: column; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none; color: var(--color-text);
}
.categoria-tile i { font-size: 26px; color: var(--color-accent); }
.categoria-tile small { opacity: .65; font-size: 12px; }

/* ── Carruseles horizontales ───────────────────────────────────────────── */
.rail { display: flex; gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-2); }
.rail::-webkit-scrollbar { height: 6px; }
.rail::-webkit-scrollbar-thumb { background: var(--color-neutral-700); border-radius: 999px; }
.rail > * { scroll-snap-align: start; flex: 0 0 auto; width: clamp(210px, 24vw, 232px); }

/* ── Tarjeta de producto ───────────────────────────────────────────────── */
.producto-card { position: relative; padding: 12px; text-decoration: none; color: var(--color-text); }
.producto-card:hover { box-shadow: var(--shadow-md); }
.producto-visual { position: relative; border-radius: var(--radius-md); margin-bottom: var(--space-2); overflow: hidden; }
.producto-tag-top { position: absolute; top: 8px; left: 8px; }
.producto-tag-dcto { position: absolute; top: 8px; right: 8px; }
.producto-tag-stock { position: absolute; bottom: 8px; left: 8px; }
.producto-marca { font-size: 11px; text-transform: uppercase; opacity: .6; letter-spacing: .04em; }
.producto-nombre { font-size: 16px; font-weight: 500; margin: 2px 0; }
.producto-specs { font-size: 12px; opacity: .65; margin-bottom: 6px; min-height: 32px; }
.producto-precio { font-size: 18px; font-weight: 500; }
.producto-precio-antes { font-size: 12px; opacity: .55; text-decoration: line-through; margin-left: 6px; }
.producto-acciones { display: flex; gap: 6px; margin-top: var(--space-2); }
.producto-acciones .btn-primary, .producto-acciones .btn-secondary:not(.btn-icon) { flex: 1; }
.producto-acciones .btn-icon { flex: none; }

/* ── Catálogo ──────────────────────────────────────────────────────────── */
.catalogo-layout { display: flex; gap: var(--space-6); align-items: flex-start; flex-wrap: wrap; }
.catalogo-sidebar { width: 220px; flex: 0 0 220px; display: flex; flex-direction: column; gap: var(--space-4); }
.catalogo-sidebar h6 { margin-bottom: var(--space-2); }
.catalogo-grid { flex: 1 1 480px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: var(--space-3); }
.chip-group { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-size: 12px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--color-divider);
  cursor: pointer; background: transparent; color: var(--color-text);
}
.chip.activo { border-color: var(--color-accent); color: var(--color-accent); }
.check-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; padding: 3px 0; cursor: pointer; }
.compare-bar {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 30;
  display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-3); align-items: center;
  padding: var(--space-2) var(--space-4); max-width: calc(100vw - 40px);
}

/* ── Detalle de producto ───────────────────────────────────────────────── */
.detalle-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: var(--space-6); }
.detalle-visual { height: clamp(320px, 40vw, 480px); border-radius: var(--radius-lg); margin-bottom: var(--space-3); }
.miniaturas { display: flex; gap: 8px; }
.miniatura { width: 72px; height: 72px; border-radius: var(--radius-md); cursor: pointer; border: 2px solid transparent; }
.miniatura.activa { border-color: var(--color-accent); }
.precio-grande { font-size: 32px; font-weight: 500; }
.color-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.qty-control { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--color-divider); border-radius: var(--radius-md); padding: 4px 10px; }
.qty-control button { border: 0; background: transparent; color: var(--color-text); cursor: pointer; font-size: 16px; }
.specs-table td:first-child { opacity: .6; width: 40%; }

/* ── Carrito ───────────────────────────────────────────────────────────── */
.carrito-item { display: grid; grid-template-columns: 76px 1fr auto; gap: var(--space-3); align-items: center; padding: var(--space-3) 0; }
.carrito-thumb { width: 76px; height: 76px; border-radius: var(--radius-md); }
.carrito-resumen { position: sticky; top: 84px; }
.linea-resumen { display: flex; justify-content: space-between; font-size: 14px; padding: 4px 0; }
.linea-resumen.total { font-size: 18px; font-weight: 500; border-top: 1px solid var(--color-divider); margin-top: var(--space-2); padding-top: var(--space-2); }
.metodos-mini { display: flex; gap: 8px; flex-wrap: wrap; margin-top: var(--space-3); }

/* ── Checkout ──────────────────────────────────────────────────────────── */
.checkout-pasos { display: flex; gap: var(--space-2); margin-bottom: var(--space-6); }
.checkout-paso { display: flex; align-items: center; gap: 8px; font-size: 13px; opacity: .5; }
.checkout-paso.activo, .checkout-paso.hecho { opacity: 1; }
.checkout-paso .num {
  width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--color-divider);
  display: flex; align-items: center; justify-content: center; font-size: 12px;
}
.checkout-paso.activo .num { border-color: var(--color-accent); color: var(--color-accent); }
.checkout-paso.hecho .num { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); }
.checkout-layout { display: grid; grid-template-columns: 1fr 340px; gap: var(--space-6); align-items: flex-start; }
.metodo-opcion { display: flex; gap: 10px; align-items: flex-start; padding: var(--space-3); border: 1px solid var(--color-divider); border-radius: var(--radius-md); cursor: pointer; margin-bottom: 8px; }
.metodo-opcion.activo { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.metodo-opcion i { font-size: 20px; color: var(--color-accent); }

/* ── Seguimiento ───────────────────────────────────────────────────────── */
.timeline { display: flex; flex-direction: column; gap: 0; }
.timeline-paso { display: flex; gap: var(--space-3); position: relative; padding-bottom: var(--space-6); }
.timeline-paso:last-child { padding-bottom: 0; }
.timeline-paso::before {
  content: ''; position: absolute; left: 11px; top: 24px; bottom: 0; width: 2px; background: var(--color-neutral-800);
}
.timeline-paso:last-child::before { display: none; }
.timeline-dot {
  width: 24px; height: 24px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--color-neutral-700); font-size: 12px; z-index: 1; background: var(--color-bg);
}
.timeline-paso.completo .timeline-dot { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); }
.timeline-paso.completo::before { background: var(--color-accent); }
.timeline-paso.actual .timeline-dot { border-color: var(--color-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 25%, transparent); }

/* ── Panel de ventas ───────────────────────────────────────────────────── */
.panel-layout { display: flex; min-height: 100vh; }
.panel-sidebar {
  width: 232px; flex: 0 0 232px; border-right: 1px solid var(--color-divider);
  display: flex; flex-direction: column; padding: var(--space-4);
  position: sticky; top: 0; height: 100vh;
}
.panel-tag { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; opacity: .6; margin-left: 6px; }
.panel-nav { display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-6); }
.panel-nav a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 10px; border-radius: var(--radius-md); color: var(--color-text); text-decoration: none; font-size: 14px;
}
.panel-nav a:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.panel-nav a.activo { color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.panel-nav .badge {
  font-size: 11px; background: var(--color-accent-800); color: var(--color-accent-100);
  border-radius: 999px; padding: 1px 7px;
}
.panel-content { flex: 1; min-width: 0; padding: var(--space-6) var(--space-8); }
.panel-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-6); flex-wrap: wrap; gap: var(--space-3); }
.panel-fecha { font-size: 12px; opacity: .6; }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--space-3); margin-bottom: var(--space-6); }
.kpi-card { display: flex; flex-direction: column; gap: 4px; }
.kpi-valor { font-size: 26px; font-weight: 500; }
.kpi-delta { font-size: 12px; display: flex; align-items: center; gap: 4px; }
.kpi-delta.bueno { color: var(--color-accent-300); }
.kpi-delta.malo { color: var(--color-neutral-400); }

.panel-grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-4); margin-bottom: var(--space-6); }
.chart-bars { display: flex; align-items: flex-end; gap: 10px; height: 180px; }
.chart-bar-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 2px; cursor: default; }
.chart-bar-stack { width: 100%; max-width: 28px; display: flex; flex-direction: column-reverse; border-radius: 3px 3px 0 0; overflow: hidden; }
.chart-bar-web { background: var(--color-accent); }
.chart-bar-tienda { background: var(--color-accent-800); }
.chart-bar-col small { font-size: 10px; opacity: .6; }
.chart-bar-col.atenuado { opacity: .45; }

.metodo-barra-row { margin-bottom: 8px; }
.metodo-barra-row .top { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 3px; }
.metodo-barra-track { height: 6px; border-radius: 999px; background: var(--color-neutral-800); overflow: hidden; }
.metodo-barra-fill { height: 100%; background: var(--color-accent); }

.stock-barra-track { height: 6px; border-radius: 999px; background: var(--color-neutral-800); overflow: hidden; width: 100px; }
.stock-barra-fill { height: 100%; background: var(--color-neutral-500); }
.stock-barra-fill.bajo { background: var(--color-accent); }

.drawer-backdrop { position: fixed; inset: 0; background: color-mix(in srgb, var(--color-neutral-900) 55%, transparent); z-index: 60; }
.drawer { position: fixed; top: 0; right: 0; height: 100vh; width: min(420px, 100%); background: var(--color-surface); z-index: 61; padding: var(--space-4); overflow-y: auto; box-shadow: var(--shadow-lg); }

@media (max-width: 720px) {
  .tienda-nav { order: 3; width: 100%; justify-content: center; margin-right: 0; gap: 4px; }
  .buscador { order: 2; flex: 1 1 auto; min-width: 0; }
  .logo { order: 1; }
  .carrito-btn { order: 1; margin-left: auto; }
}

@media (max-width: 860px) {
  .hero-slide { grid-template-columns: 1fr; }
  .catalogo-layout { flex-direction: column; }
  .catalogo-sidebar { width: 100%; flex-basis: auto; }
  .checkout-layout { grid-template-columns: 1fr; }
  .panel-layout { flex-direction: column; }
  .panel-sidebar { width: 100%; flex-basis: auto; height: auto; position: static; }
  .panel-grid-2 { grid-template-columns: 1fr; }
}