/* ==========================================================================
   GLAM FLOW STUDIO — Panel de usuaria (Mi espacio)
   Sidebar izquierdo + contenido + asistente de reserva en 4 pasos.
   ========================================================================== */

.panel-wrap {
  padding-top: var(--space-12);
  padding-bottom: var(--space-section);
  min-height: 100vh;
}

/* ---- Barra superior (sin menú principal) ----
   Fila 1: isotipo centrado. Fila 2: saludo a la izquierda + CTA dorado a la
   derecha, alineados horizontalmente entre sí. */
.panel-topbar {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin-bottom: var(--space-8);
}
.panel-logo {
  grid-column: 1 / -1;
  justify-self: center;
}
.panel-logo img {
  height: clamp(76px, 9vw, 108px);
  width: auto;
}
.panel-greeting h1 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  margin-top: var(--space-2);
}
.panel-reserve-cta { white-space: nowrap; justify-self: end; }

@media (max-width: 720px) {
  .panel-topbar {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: var(--space-4);
  }
  .panel-logo { grid-column: auto; }
  .panel-reserve-cta { justify-self: center; }
}

/* ---- Layout sidebar + contenido ---- */
.panel-grid {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: var(--space-8);
  align-items: start;
}

.panel-sidebar {
  position: sticky;
  top: calc(var(--header-h) + var(--space-4));
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.panel-menu { display: grid; gap: 4px; }

.panel-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: none;
  border: none;
  border-radius: var(--radius-md);
  padding: 0.8rem 1rem;
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.03em;
  text-align: left;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.panel-menu-item svg { width: 19px; height: 19px; flex: none; }
.panel-menu-item:hover { color: var(--color-text); background: var(--color-surface-2); }
.panel-menu-item.is-active {
  background: var(--brand-rosa);
  color: var(--brand-negro);
}
.panel-logout { color: var(--color-text-faint); }
.panel-logout:hover { color: var(--color-error); background: none; }

/* ---- Contenido ---- */
.panel-content { min-width: 0; }

.panel-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}
.panel-card + .panel-card { margin-top: var(--space-6); }
.panel-card h2 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
}
.panel-card .panel-card-sub {
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

/* Badges de estado */
.badge {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
}
.badge-ok      { color: var(--color-success); border-color: currentColor; }
.badge-warn    { color: var(--brand-dorado);  border-color: currentColor; }
.badge-off     { color: var(--color-text-faint); border-color: currentColor; }
.badge-error   { color: var(--color-error);   border-color: currentColor; }

/* Filas de listados (clases, pagos, reseñas) */
.panel-list { display: grid; gap: var(--space-3); }
.panel-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
}
.panel-row.is-muted { opacity: 0.55; }
.panel-row-main { flex: 1 1 240px; min-width: 0; }
.panel-row-title { font-family: var(--font-display); font-size: var(--text-lg); }
.panel-row-meta { color: var(--color-text-muted); font-size: var(--text-sm); }
.panel-row-aside {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.panel-row-aside .link-danger {
  background: none; border: none; padding: 0;
  color: var(--color-error); font-size: var(--text-xs);
  font-family: var(--font-ui); letter-spacing: 0.04em; text-transform: uppercase;
}

/* Fecha cuadrada (mismo lenguaje que reservar.html) */
.panel-date {
  flex: none;
  text-align: center;
  min-width: 56px;
  border-right: 1px solid var(--color-border-soft);
  padding-right: var(--space-4);
}
.panel-date .d { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1; }
.panel-date .m { font-family: var(--font-ui); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--brand-rosa); }

/* ==========================================================================
   Asistente de reserva — 5 pasos
   ========================================================================== */
.wizard-steps {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
}
.wizard-step {
  flex: 1 1 120px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-soft);
  color: var(--color-text-faint);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.wizard-step .n {
  flex: none;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: var(--text-xs);
}
.wizard-step.is-current { color: var(--brand-rosa); border-color: var(--brand-rosa); }
.wizard-step.is-done { color: var(--color-success); }
.wizard-step.is-done .n { background: var(--color-success); border-color: var(--color-success); color: var(--brand-negro); }

/* Opciones tipo tarjeta (disciplina / profesora) */
.option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--space-4);
}
.option-card {
  text-align: left;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  color: var(--color-text);
  transition: border-color var(--dur-fast), transform var(--dur-fast) var(--ease-out-expo);
}
.option-card:hover { border-color: var(--color-border); transform: translateY(-2px); }
.option-card.is-selected {
  border-color: var(--brand-rosa);
  box-shadow: 0 0 0 1px var(--brand-rosa);
}
.option-card h3 { font-size: var(--text-lg); margin-bottom: 4px; }
.option-card p { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0 0 6px; }
.option-card .option-level {
  font-family: var(--font-ui); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--brand-dorado);
}
.option-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
}
.option-card .tag {
  display: inline-block;
  font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--brand-negro);
  background: var(--grad-gold);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  margin-bottom: 6px;
}

/* Paso 3: días y horas */
.day-chips {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-6);
}
.day-chip {
  flex: none;
  min-width: 74px;
  text-align: center;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: 0.6rem 0.8rem;
  color: var(--color-text-muted);
  font-family: var(--font-ui);
}
.day-chip .dow { display: block; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; }
.day-chip .dnum { display: block; font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-text); }
.day-chip.is-selected { border-color: var(--brand-rosa); color: var(--brand-rosa); }
.day-chip.is-selected .dnum { color: var(--brand-rosa); }

.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: var(--space-2);
}
.slot-btn {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--text-sm);
  padding: 0.65rem 0.4rem;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.slot-btn:hover { border-color: var(--brand-rosa); }
.slot-btn.is-selected { border-color: var(--brand-rosa); color: var(--brand-rosa); box-shadow: 0 0 0 1px var(--brand-rosa); }
.slot-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* Horarios seleccionados (planes de varias clases) */
.sel-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.sel-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-surface-2);
  border: 1px solid var(--brand-rosa);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 5px 12px;
}
.sel-chip .x { color: var(--color-error); font-weight: 700; }
.slot-counter {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--brand-dorado);
  margin: var(--space-4) 0 0;
}

/* Paso: resumen y pago */
.summary-list { display: grid; gap: var(--space-2); margin-bottom: var(--space-6); }
.summary-item {
  display: flex; justify-content: space-between; gap: var(--space-4);
  border-bottom: 1px dashed var(--color-border-soft);
  padding-bottom: var(--space-2);
  font-size: var(--text-sm);
}
.summary-item .k { color: var(--color-text-muted); }
.summary-item .v { text-align: right; font-weight: 700; }

.pay-options { display: grid; gap: var(--space-3); margin-bottom: var(--space-6); }
.pay-option {
  display: flex; gap: var(--space-3); align-items: flex-start;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  cursor: pointer;
}
.pay-option input { margin-top: 5px; accent-color: var(--brand-rosa); }
.pay-option .pay-title { font-weight: 700; font-family: var(--font-ui); }
.pay-option .pay-desc { color: var(--color-text-muted); font-size: var(--text-sm); }
.pay-option.is-selected { border-color: var(--brand-rosa); }

/* Navegación del asistente */
.wizard-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

/* Reseñas: estrellas */
.stars { display: inline-flex; gap: 4px; }
.stars button {
  background: none; border: none; padding: 2px;
  font-size: 1.5rem; line-height: 1;
  color: var(--color-text-faint);
  transition: color var(--dur-fast), transform var(--dur-fast);
}
.stars button:hover { transform: scale(1.15); }
.stars button.is-filled { color: var(--brand-dorado); }
.stars-static { color: var(--brand-dorado); letter-spacing: 2px; }

/* Éxito de reserva */
.wizard-success { text-align: center; padding: var(--space-8) var(--space-4); }
.wizard-success .check {
  width: 64px; height: 64px; margin: 0 auto var(--space-6);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-success); color: var(--brand-negro);
  font-size: 1.8rem;
}
.wizard-success h2 { margin-bottom: var(--space-3); }
.wizard-success p { color: var(--color-text-muted); max-width: 44ch; margin-inline: auto; }
.wizard-success .cta-row { display: flex; gap: var(--space-3); justify-content: center; margin-top: var(--space-6); flex-wrap: wrap; }

/* Nota informativa (horarios del estudio, montos por confirmar) */
.panel-note {
  color: var(--color-text-faint);
  font-size: var(--text-xs);
  margin-top: var(--space-4);
}

/* ---- Responsive ---- */
@media (max-width: 880px) {
  .panel-grid { grid-template-columns: 1fr; }
  .panel-sidebar {
    position: static;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    overflow-x: auto;
    padding: var(--space-2);
  }
  .panel-menu { display: flex; gap: 4px; }
  .panel-menu-item { white-space: nowrap; padding: 0.6rem 0.8rem; }
  .panel-menu-item svg { display: none; }
  .panel-logout svg { display: block; }
  .panel-logout { flex: none; }
  .panel-card { padding: var(--space-6); }
}