/* ============================================================
   Student Profile Card — Admin sidebar (.sp-*)
   ============================================================ */

.sp-card {
  display: flex;
  flex-direction: column;
}

.sp-hero {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--line);
}

.sp-hero-actions {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  flex-shrink: 0;
}

.sp-hero-actions button {
  font-size: 12px;
  padding: 5px 14px;
  white-space: nowrap;
  min-height: 0;
}

.sp-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--sage-2);
  border: 2px solid var(--sage);
  color: var(--sage);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, serif;
  font-size: 17px;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}

.sp-hero-body {
  flex: 1;
  min-width: 0;
}

.sp-name {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  font-weight: 500;
  margin: 0 0 3px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-meta {
  font-size: 11.5px;
  color: var(--muted);
  margin: 0 0 9px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}

.sp-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--line);
}

.sp-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 14px 6px;
  border-right: 1px solid var(--line);
  transition: background 0.14s;
  cursor: default;
}

.sp-stat:last-child {
  border-right: none;
}

.sp-stat:hover {
  background: var(--soft);
}

.sp-stat-val {
  font-size: 26px;
  font-weight: 700;
  font-family: Georgia, serif;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.sp-stat-val--sm {
  font-size: 16px;
}

.sp-stat-lbl {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  text-align: center;
}

.sp-stat--warn .sp-stat-val { color: var(--clay); }
.sp-stat--muted .sp-stat-val { color: var(--muted); }

.sp-section {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}

.sp-section-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 10px;
}

.sp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}

.sp-row:last-child { border-bottom: none; }

.sp-row--past { opacity: 0.6; }

.sp-date-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 4px 7px;
  min-width: 38px;
  flex-shrink: 0;
  transition: background 0.14s;
}

.sp-date-chip--past {
  background: transparent;
  border-color: transparent;
}

.sp-chip-day {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.sp-chip-num {
  font-size: 19px;
  font-weight: 700;
  font-family: Georgia, serif;
  color: var(--ink);
  line-height: 1.1;
}

.sp-row-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sp-row-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-row-sub {
  font-size: 11px;
  color: var(--muted);
}

.sp-empty {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  padding: 4px 0;
}

.sp-collapse {
  border-bottom: 1px solid var(--line);
}

.sp-collapse > summary {
  padding: 9px 16px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
  transition: background 0.14s, color 0.14s;
}

.sp-collapse > summary::-webkit-details-marker { display: none; }

.sp-collapse > summary::after {
  content: "›";
  margin-left: auto;
  font-size: 16px;
  transition: transform 0.18s;
  display: inline-block;
}

.sp-collapse[open] > summary::after { transform: rotate(90deg); }

.sp-collapse > summary:hover {
  color: var(--ink);
  background: var(--soft);
}

.sp-badge {
  background: var(--brand-smoke);
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  color: var(--ink);
}

.sp-collapse-body {
  padding: 4px 16px 12px;
}

.sp-note {
  padding: 8px 16px;
  font-size: 12px;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  margin: 0;
  line-height: 1.5;
}

.sp-note--health {
  color: var(--clay);
  font-weight: 500;
}

.sp-rgpd-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 11.5px;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

.sp-rgpd-label {
  font-weight: 600;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sp-text-btn {
  background: none;
  border: none;
  color: var(--sage);
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  min-height: auto;
  border-radius: 0;
  font-family: inherit;
}

.sp-text-btn:hover { color: var(--ink); }

/* Acciones de la ficha con jerarquía: lo diario grande arriba, lo ocasional
   chico abajo. Evita la pared de botones iguales compitiendo por atención. */
.sp-actions {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}

.sp-actions-main {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.sp-actions-main .primary-button {
  flex: 1 1 180px;
  min-height: 42px;
  font-size: 14px;
  font-weight: 600;
}

.sp-actions-sec {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.sp-actions-sec .soft-button {
  font-size: 12.5px;
  min-height: 32px;
  padding: 0 11px;
  background: transparent;
  border: 1px solid var(--line);
}

.sp-actions-sec .soft-button:hover {
  background: var(--bg);
}

.sp-actions-sec .sp-danger-link {
  color: var(--clay, #b06a5a);
  margin-left: auto;
}

/* Compat: fichas que todavía usen la clase vieja */
.sp-primary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}

.sp-primary-actions .primary-button,
.sp-primary-actions .soft-button {
  font-size: 13px;
  min-height: 36px;
  padding: 0 12px;
}

.sp-collapse--more > summary {
  font-size: 11.5px;
  color: var(--muted);
}

.sp-more-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sp-more-actions button {
  font-size: 12px;
  min-height: 32px;
  padding: 0 10px;
}

/* ============================================================
   Portal Student Hero Card (.ps-*)
   ============================================================ */

.ps-hero-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.ps-greeting {
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--line);
}

.ps-greeting-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 3px;
}

.ps-greeting-name {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  font-weight: 500;
  margin: 0;
  line-height: 1.15;
  color: var(--ink);
}

.ps-next-class {
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--soft);
}

.ps-next-label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 10px;
}

.ps-next-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ps-next-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
  min-width: 46px;
  flex-shrink: 0;
  box-shadow: var(--shadow);
}

.ps-next-chip-day {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sage);
}

.ps-next-chip-num {
  font-size: 22px;
  font-weight: 700;
  font-family: Georgia, serif;
  color: var(--ink);
  line-height: 1.1;
}

.ps-next-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ps-next-type {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ps-next-time {
  font-size: 12px;
  color: var(--muted);
}

.ps-no-next {
  font-size: 13px;
  color: var(--muted);
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  margin: 0;
}

.ps-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--line);
}

.ps-mini-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 12px 6px;
  border-right: 1px solid var(--line);
  transition: background 0.14s;
}

.ps-mini-stat:last-child { border-right: none; }
.ps-mini-stat:hover { background: var(--soft); }

.ps-mini-stat strong {
  font-size: 20px;
  font-weight: 700;
  font-family: Georgia, serif;
  color: var(--ink);
  line-height: 1;
}

.ps-mini-stat span {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}

.ps-card-footer {
  padding: 12px 20px;
  display: flex;
  gap: 8px;
}

/* ============================================================ */

/* ============================================================
   Student Portal Views (.sh-*)
   ============================================================ */

.sh-fifth-class-banner {
  display: grid;
  gap: 10px;
  padding: 16px 20px;
  border-radius: 8px;
  border: 1px solid #ffc107;
  background: #fffbeb;
  margin-bottom: 16px;
}

.sh-fifth-class-banner strong {
  font-size: 14px;
  color: #92400e;
}

.sh-fifth-class-banner span {
  font-size: 13px;
  color: #78350f;
}

.sh-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.sh-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 3px;
}

.sh-name {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  font-weight: 500;
  margin: 0;
  line-height: 1.15;
  color: var(--ink);
}

.sh-next-card {
  margin-bottom: 16px;
  padding: 16px 20px;
}

.sh-next-empty {
  background: var(--soft);
}

.sh-card-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
  margin: 0 0 12px;
}

.sh-next-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.sh-date-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--sage-2);
  border: 1px solid var(--sage);
  border-radius: 8px;
  padding: 6px 12px;
  min-width: 54px;
  flex-shrink: 0;
}

.sh-chip-day {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sage);
}

.sh-chip-num {
  font-size: 26px;
  font-weight: 700;
  font-family: Georgia, serif;
  color: var(--ink);
  line-height: 1.1;
}

.sh-next-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sh-next-type {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sh-next-meta {
  font-size: 12px;
  color: var(--muted);
}

.sh-stats {
  margin-bottom: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.student-cal-pending {
  background: var(--amber) !important;
  color: white !important;
}

/* ============================================================ */


/* ── Portal alumna · tira de cuenta compacta ──────────────────────────────
   Un centro de pilates no es una billetera: el dinero se resume en una línea
   y el detalle (cómo pagar, banco) se despliega solo si la alumna lo toca. */
.sh-money {
  border: 1px solid var(--line);
  border-radius: 12px;
  margin: 0 0 14px;
  background: var(--surface, #fff);
  overflow: hidden;
}
.sh-money > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
  font-size: 14px;
}
.sh-money > summary::-webkit-details-marker { display: none; }
.sh-money .shm-ico { flex: none; font-size: 13px; }
.sh-money .shm-txt { flex: 1; min-width: 0; }
.sh-money .shm-mas {
  flex: none;
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
}
.sh-money[open] .shm-mas { visibility: hidden; }
.sh-money .shm-body {
  padding: 2px 14px 12px;
  border-top: 1px solid var(--line);
}
.sh-money .shm-nota {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}
.sh-money--vencida { border-color: #f0b3b3; background: #fdf3f2; }
.sh-money--vencida .shm-txt { color: #b3261e; }
.sh-money--aPagar  { border-color: #ecd9a8; background: #fdf9ef; }
.sh-money--aPagar  .shm-txt { color: #8a6100; }
.sh-money--favor   { border-color: #b9dcc0; background: #f2f8f3; }
.sh-money--favor   .shm-txt { color: #2f6b3d; }

/* Selector de "clase relacionada" al registrar un pago (con mini-calendario) */
.pay-session-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  background: var(--bg);
}

/* ── Portal de la PROFESORA (mismo lenguaje que el de la alumna) ────────── */
.tp-card { margin-bottom: 10px; padding: 0; overflow: hidden; }
.tp-card > summary {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; cursor: pointer; list-style: none;
}
.tp-card > summary::-webkit-details-marker { display: none; }
.tp-card > summary:hover { background: rgba(0,0,0,.02); }
.tp-card-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tp-card-type { font-weight: 650; font-size: 15px; }
.tp-card-meta { font-size: 12.5px; color: var(--muted); }
.tp-card-body { padding: 0 14px 14px; border-top: 1px solid var(--line); }
.tp-students { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.tp-student {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 13.5px;
}
.tp-student:last-child { border-bottom: none; }
.tp-student-name { flex: 1; min-width: 0; }
.tp-chip {
  font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 5px;
  background: var(--bg); color: var(--muted); white-space: nowrap;
}
.tp-chip--ok    { background: #e7f3ea; color: #2f6b3d; }
.tp-chip--no    { background: #fdecec; color: #b3261e; }
.tp-chip--pend  { background: #fff6e6; color: #8a6100; }
.tp-chip--debe  { background: #fdf0e6; color: #a05a1e; }

/* Portal profe · lo que gana por clase + historial de su cuenta */
.tp-card-gan {
  flex: none; text-align: right; font-weight: 700; font-size: 14px; color: #2f6b3d;
  display: flex; flex-direction: column; line-height: 1.15;
}
.tp-card-gan small { font-size: 9.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
.tp-hist { display: flex; flex-direction: column; }
.tp-hist-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 13px;
}
.tp-hist-row:last-child { border-bottom: none; }
.tp-hist-fecha { flex: 1; min-width: 150px; color: var(--muted); font-size: 12.5px; }
.tp-hist-clase { font-weight: 600; }
.tp-hist-gan { margin-left: auto; color: #2f6b3d; white-space: nowrap; }

/* ── Ficha de la alumna desde el portal de la profe ───────────────────────────
   La fila de cada alumna se toca y abre lo que hace falta para dar la clase:
   salud, nivel, contacto y documentos. Nada de dinero. */
.tp-student--link { cursor: pointer; border-radius: 8px; transition: background .12s; }
.tp-student--link:hover,
.tp-student--link:focus-visible { background: var(--soft, #f2f0ea); outline: none; }
.tp-student--link:focus-visible { box-shadow: 0 0 0 2px var(--sage, #5c7a63); }

.tp-student-ver { color: var(--muted); font-size: 12px; flex-shrink: 0; margin-left: auto; }

/* Aviso de salud: es lo primero que la profe tiene que ver de un vistazo. */
.tp-chip--salud { background: #fdecea; color: #a33a28; font-weight: 700; }
.tp-chip--pend  { background: #fdf6e3; color: #8a6d1f; }