/* ============================================================
   EL ZAPATÓN — Identidad visual por canal
   Mobile-first. Solo tokens de tokens.css. Sin hex nuevos.
   Sobreescribe tokens semánticos en body[data-canal="..."].
   unitario: SIN override → queda idéntico a la demo actual.
   ============================================================ */

/* ── Overrides por canal ────────────────────────────────────
   Cada body[data-canal] sobreescribe únicamente los tokens
   semánticos. Los componentes usan var(--accent) etc. y
   heredan el cambio sin necesidad de if(canal===...).
   ─────────────────────────────────────────────────────────── */

/* unitario: sin override. --accent = var(--naranja) por defecto. */

body[data-canal="revendedor"] {
  --accent:       var(--verde-ok);
  --accent-strong: var(--tinta-60);
  --focus-ring:   var(--verde-ok);
  --tag-bg:       var(--verde-ok);
}

body[data-canal="mayorista"] {
  --accent:       var(--tinta);
  --accent-strong: var(--tinta-60);
  --focus-ring:   var(--tinta);
  --tag-bg:       var(--tinta);
}

/* ── Barra de identidad del canal (canal-bar) ───────────────
   Franja delgada debajo del header principal.
   Recibe el color de acento del canal vía var(--accent).
   ─────────────────────────────────────────────────────────── */

.canal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-1) var(--sp-4);
  background: var(--accent);
  min-height: 32px;
  flex-wrap: wrap;
}

/* Nombre del canal activo */
.canal-bar__nombre {
  font-family: var(--font-util);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-util);
  text-transform: uppercase;
  color: var(--blanco);
  white-space: nowrap;
}

/* Leyenda de contexto (opcional, se muestra solo en desktop) */
.canal-bar__leyenda {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--blanco);
  opacity: 0.8;
  display: none;
}

@media (min-width: 640px) {
  .canal-bar__leyenda {
    display: block;
  }
}

/* ── Selector de canal ──────────────────────────────────────
   Grupo de botones/enlaces accesibles para cambiar de canal.
   ─────────────────────────────────────────────────────────── */

.canal-selector {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.canal-selector__item {
  display: contents; /* el li no añade box propio */
}

.canal-selector__btn {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-pill);
  font-family: var(--font-util);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-util);
  text-transform: uppercase;
  color: var(--blanco);
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition:
    background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
  /* Área táctil segura en mobile */
  min-width: var(--touch);
}

.canal-selector__btn:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.7);
}

/* Canal activo: fondo sólido blanco semitransparente, sin hover extra */
.canal-selector__btn[aria-current="true"],
.canal-selector__btn[aria-current="page"] {
  background: rgba(255, 255, 255, 0.25);
  border-color: var(--blanco);
  font-weight: var(--fw-bold);
  cursor: default;
  pointer-events: none;
}

/* Foco visible: anillo blanco sobre el fondo de acento */
.canal-selector__btn:focus-visible {
  outline: 2px solid var(--blanco);
  outline-offset: 2px;
}

/* Separador visual entre botones (solo visual, no semántico) */
.canal-selector__sep {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}

/* ── Mayorista: ajuste de legibilidad ───────────────────────
   Con --accent = var(--tinta) el fondo es muy oscuro.
   Usamos el texto blanco que ya está configurado arriba.
   Añadimos un tinte más claro en los bordes para que resalten.
   ─────────────────────────────────────────────────────────── */
body[data-canal="mayorista"] .canal-selector__btn {
  border-color: rgba(255, 255, 255, 0.35);
}

body[data-canal="mayorista"] .canal-selector__btn:hover {
  background: rgba(255, 255, 255, 0.14);
}

body[data-canal="mayorista"] .canal-selector__btn[aria-current="true"],
body[data-canal="mayorista"] .canal-selector__btn[aria-current="page"] {
  background: rgba(255, 255, 255, 0.18);
}

/* ── Selector de canal en drawer mobile ─────────────────────
   Bloque superior del drawer que muestra el canal activo
   y permite cambiar de canal sin salir del menú.
   ─────────────────────────────────────────────────────────── */

.drawer-canal-section {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  background: var(--surface-alt);
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--border);
}

.drawer-canal-label {
  font-family: var(--font-util);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-util);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-1);
}

.drawer-canal-btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.drawer-canal-btn {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding: 0 var(--sp-4);
  border-radius: var(--r-pill);
  font-family: var(--font-util);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-util);
  text-transform: uppercase;
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--border);
  text-decoration: none;
  transition:
    background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

.drawer-canal-btn:hover {
  background: var(--naranja-tenue);
  border-color: var(--accent);
  color: var(--accent-strong);
}

/* Canal activo en drawer: acento del canal vía var(--accent) */
.drawer-canal-btn--activo {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--blanco);
  font-weight: var(--fw-bold);
  cursor: default;
  pointer-events: none;
}

.drawer-canal-btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ── prefers-reduced-motion ─────────────────────────────────
   Ya gestionado globalmente en tokens.css (--dur-fast: 0ms).
   No se necesitan reglas adicionales aquí.
   ─────────────────────────────────────────────────────────── */