/* ═══════════════════════════════════════════════════════════════════
   Consola de cliente: Inicio, Configuración › Resumen, primeros pasos y
   conmutador de cuenta (superadmin). Mobile-first; breakpoints 640/900/1280.
   ═══════════════════════════════════════════════════════════════════ */

.cliente-inicio { display: flex; flex-direction: column; gap: var(--space-5); }

.cliente-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 900px) { .cliente-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Cards de la consola: cabecera con título + link de acción a la derecha */
.cliente-card { display: flex; flex-direction: column; gap: var(--space-3); }
.cliente-card h2 { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-base); font-weight: 700; margin: 0; }
.cliente-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.cliente-card > .btn { align-self: flex-start; }
.cliente-card__link { font-size: var(--text-sm); font-weight: 600; color: var(--c-primary); text-decoration: none; white-space: nowrap; }
.cliente-card__link:hover { text-decoration: underline; }
.cliente-card__intro { font-size: var(--text-sm); margin: 0; }
.cliente-card__foot { font-size: var(--text-sm); color: var(--gray-500); margin: 0; }
.cliente-card__foot a { color: var(--c-primary); }

.cliente-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cliente-list li {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: 0.55rem 0; border-bottom: 1px solid var(--gray-100); font-size: var(--text-sm);
}
.cliente-list li:last-child { border-bottom: none; }
.cliente-list a { color: inherit; }
.cliente-list__main { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.cliente-list__main .text-muted { font-size: var(--text-xs); }
.cliente-list__side { display: inline-flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.cliente-list li.cliente-list__meter { padding-top: 0; }
.cliente-ok { display: flex; align-items: center; gap: var(--space-2); color: var(--c-success); font-size: var(--text-sm); margin: 0; }

/* Barra de consumo (progress nativo estilizado) */
.meter { width: 100%; height: 6px; appearance: none; border: 0; border-radius: var(--radius-full); overflow: hidden; background: var(--gray-200); }
.meter::-webkit-progress-bar { background: var(--gray-200); border-radius: var(--radius-full); }
.meter::-webkit-progress-value { background: var(--c-primary); border-radius: var(--radius-full); }
.meter::-moz-progress-bar { background: var(--c-primary); border-radius: var(--radius-full); }
.meter--over::-webkit-progress-value { background: var(--c-danger); }
.meter--over::-moz-progress-bar { background: var(--c-danger); }

/* Márgenes proveedor × tienda: grupos por tienda, input con sufijo % + guardar en línea */
.margin-group + .margin-group { margin-top: var(--space-2); }
.margin-group__store {
  display: flex; align-items: center; gap: 0.35rem;
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--gray-500); padding: 0.35rem 0 0.1rem;
}
.margin-inline { display: inline-flex; align-items: center; gap: var(--space-2); justify-content: flex-end; }
.input-affix { display: inline-flex; align-items: center; border: 1px solid var(--gray-300); border-radius: var(--radius); background: var(--color-surface); overflow: hidden; }
.input-affix input[type="number"] { width: 5.5rem; border: 0; padding: 0.35rem 0.5rem; font-size: var(--text-sm); text-align: right; font-variant-numeric: tabular-nums; }
.input-affix input[type="number"]:focus { outline: none; }
.input-affix:focus-within { border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-bg); }
.input-affix__unit { padding: 0 0.5rem; font-size: var(--text-xs); color: var(--gray-500); background: var(--gray-50); align-self: stretch; display: inline-flex; align-items: center; border-left: 1px solid var(--gray-200); }

/* Primeros pasos (Inicio de una cuenta nueva): checklist con estado */
.onboarding { border-left: 3px solid var(--c-primary); }
.onboarding__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
@media (min-width: 900px) { .onboarding__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.onboarding__step {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3); border: 1px solid var(--gray-200); border-radius: var(--radius);
  background: var(--color-surface);
}
.onboarding__step--done { opacity: 0.7; border-style: dashed; }
.onboarding__num {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--text-xs); font-weight: 700; background: var(--c-primary-bg); color: var(--c-primary);
}
.onboarding__step--done .onboarding__num { background: var(--c-success-bg); color: var(--c-success); }
.onboarding__body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.onboarding__title { font-weight: 600; font-size: var(--text-sm); }
.onboarding__hint { font-size: var(--text-xs); color: var(--gray-500); line-height: 1.45; }
.onboarding__hint a { color: var(--c-primary); font-weight: 600; }

/* Conmutador de cuenta (superadmin) en la cabecera de la sidebar */
.account-switcher { padding: 0 var(--space-3) var(--space-3); }
.account-switcher select {
  width: 100%; font-size: var(--text-xs); padding: 0.3rem 0.5rem;
  border-radius: var(--radius); border: 1px solid var(--color-border);
  background: var(--color-surface); color: var(--color-text);
}
.account-switcher__label { display: block; font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: 0.2rem; }
.sidebar-account { font-size: var(--text-xs); color: var(--color-text-muted); padding: 0 var(--space-3) var(--space-2); }
.sidebar--collapsed .account-switcher, .sidebar--collapsed .sidebar-account { display: none; }