/* mi-agenda.css - Area privada de la alumna. Movil primero, una sola columna.
   Comparte base.css (lila de noche, Big Shoulders y Jost). Targets tactiles de 44 px o mas. */

.ma-cab {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: .75rem; min-height: 4rem;
  padding: .4rem var(--pad); background: var(--fondo); border-bottom: 1px solid var(--borde);
}
.ma-cab .marca { margin-right: auto; }
.ma-cab__volver {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: .25rem;
  font: 500 .8125rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
}
.ma-cab__volver:hover { text-decoration: underline; text-underline-offset: .35em; }

.ma { width: 100%; max-width: 46rem; margin: 0 auto; padding: 1.5rem var(--pad) 5rem; display: grid; gap: 1.5rem; }
.ma h1 { font-size: clamp(2rem, 7vw, 3rem); line-height: 1.05; }
.ma h2 { font-size: 1.5rem; }
.ma h3 { font-size: 1.2rem; }
.ma :where(h1, h2)[tabindex="-1"]:focus { outline: none; }
.ma__sub { color: var(--texto-2); font-size: .9375rem; }
.ma .enlace { text-decoration: underline; text-underline-offset: .3em; }

/* ── Acceso ─────────────────────────────── */
.acceso { display: grid; gap: 1.25rem; padding-top: .5rem; }
.acceso__intro { display: grid; gap: .6rem; }
.acceso__intro p { color: var(--texto-2); max-width: 40ch; }
.acceso__tarjeta { background: var(--superficie); border: 1px solid var(--borde); }
.tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--borde); }
.tab {
  min-height: 3.25rem; padding: .5rem 1rem; background: transparent; border: 0; border-bottom: 3px solid transparent;
  font: 500 .8125rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
}
.tab + .tab { border-left: 1px solid var(--borde); }
.tab[aria-selected="true"] { background: var(--lila); color: var(--fondo); border-bottom-color: var(--fondo); }
.tab:not([aria-selected="true"]):hover { background: var(--fondo); }
.acceso__form { display: grid; gap: 1rem; padding: 1.25rem; }
.acceso__form > p { color: var(--texto-2); font-size: .9375rem; }
.acceso__nota { color: var(--texto-3); font-size: .875rem; }
/* "Mostrar contrasena": area tactil de 44 px */
.ver-clave { display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; font-size: .9375rem; font-weight: 400; cursor: pointer; }
.ver-clave input[type="checkbox"] { width: 1.25rem; height: 1.25rem; min-height: 0; padding: 0; accent-color: var(--lila); }
.campo input[readonly] { background: var(--fondo); color: var(--texto-3); }
@media (min-width: 720px) { .acceso__form { padding: 1.75rem; } }

/* ── Bloques de la sesion ───────────────── */
.saludo { display: grid; gap: .4rem; }
.saludo__acciones { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.bloque { display: grid; gap: 1rem; padding: 1.15rem 1.25rem; background: var(--superficie); border: 1px solid var(--borde); }
.bloque__cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1rem; }
.bloque__acciones { display: flex; flex-wrap: wrap; gap: .6rem; }
.vacio { color: var(--texto-3); font-size: .9375rem; }
.estado { min-height: 1.5rem; font-size: .9375rem; }
.estado--ok { padding: .85rem 1rem; border: 1px solid var(--verde); background: var(--fondo); color: var(--verde-texto); }

.sello {
  display: inline-block; padding: .15rem .55rem; border: 1px solid var(--borde);
  font: 500 .75rem/1.35 var(--sans); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.sello--ok { background: var(--verde); border-color: var(--verde); color: var(--fondo); }
.sello--espera { border-style: dashed; }
.sello--no { border-color: var(--error); color: var(--error); }
.sello--gris { border-color: var(--texto-3); color: var(--texto-3); }

/* Avisos */
.avisos { display: grid; gap: .75rem; }
.aviso-clase { display: grid; gap: .6rem; padding: 1rem 1.15rem; background: var(--superficie); border: 1px solid var(--borde); border-left: 8px solid var(--lila); }
.aviso-clase p strong { font-weight: 500; }

/* Como pagar: un dato por fila, con su boton de copiar */
.pago { margin: 0; display: grid; border-top: 1px solid var(--borde); }
.pago__fila { display: grid; gap: .3rem .75rem; padding: .7rem 0; border-bottom: 1px solid var(--borde); }
.pago dt { font: 500 .75rem/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); }
.pago dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.pago__valor { font: 500 1.125rem/1.3 var(--sans); font-variant-numeric: lining-nums; overflow-wrap: anywhere; }
.copiar { gap: .45rem; }
.copiar svg { width: 1.1rem; height: 1.1rem; flex: none; }
@media (min-width: 520px) { .pago__fila { grid-template-columns: 12rem 1fr; align-items: center; } }

/* Saldo */
.saldo { display: grid; gap: .75rem; }
.saldo__cifra { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; }
.saldo__cifra b { font: 500 2.75rem/1 var(--display); font-variant-numeric: lining-nums; }
.saldo__cifra span { color: var(--texto-3); }
.cuadros { display: flex; flex-wrap: wrap; gap: .3rem; }
.cuadros .sq { width: 1.1rem; height: 1.1rem; border: 2px solid var(--verde); }
.cuadros .sq.lleno { background: var(--verde); }
.saldo__nota { color: var(--texto-3); font-size: .9375rem; }
.comprobantes { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--borde); }
.comprobantes li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem 1rem; padding: .6rem 0; border-bottom: 1px solid var(--borde); font-size: .9375rem; }
.comprobantes small { color: var(--texto-3); display: block; }

/* Reservas */
.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.reserva { display: grid; gap: .6rem; padding: 1rem 1.15rem; background: var(--fondo); border: 1px solid var(--borde); border-left-width: 8px; border-left-color: var(--verde); }
.reserva--cancelada { border-style: dashed; border-left-color: var(--texto-3); background: transparent; }
.reserva__cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem .75rem; }
.reserva__hora { font: 500 1.4rem/1.1 var(--display); font-variant-numeric: lining-nums; }
.reserva__dia { font-weight: 500; }
.reserva__titulo { color: var(--texto-2); }
.reserva__marcas { display: flex; flex-wrap: wrap; gap: .4rem; }
.cuenta { font-size: .9375rem; color: var(--texto-3); }
.cuenta strong { color: var(--texto); font-weight: 500; font-variant-numeric: tabular-nums; }
.reserva__pie { display: grid; gap: .6rem; justify-items: start; }
.pasadas { border-top: 1px solid var(--borde); padding-top: .5rem; }
.pasadas summary { display: flex; align-items: center; min-height: 2.75rem; cursor: pointer; font-weight: 500; }
.pasadas .lista { padding-top: .5rem; }
.pasadas .reserva { opacity: .75; border-left-color: var(--texto-3); }

/* Reservar una clase */
.semana { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.semana h3 { flex: 1 1 10rem; }
.dia-bloque { display: grid; gap: .5rem; }
.dia-bloque > h4 { font: 500 .8125rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; padding-bottom: .4rem; border-bottom: 1px solid var(--borde); }
.fila-clase { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .4rem .75rem; padding: .7rem 0; border-bottom: 1px solid var(--borde); }
.fila-clase__hora { font: 500 1.25rem/1.1 var(--display); font-variant-numeric: lining-nums; }
.fila-clase__datos { display: grid; gap: .15rem; }
.fila-clase__datos small { color: var(--texto-3); font-size: .875rem; }
.fila-clase--cerrada { color: var(--texto-3); }
.fila-clase .boton { min-width: 8.5rem; }
.pagar-aviso { display: grid; gap: .6rem; padding: .85rem 1rem; border: 1px solid var(--error); background: var(--fondo); }
.pagar-aviso__acciones { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Dialogos (comprobante, datos, cancelar) */
.cp-preview { margin: 0; display: grid; gap: .4rem; }
.cp-preview img { width: auto; max-width: 100%; max-height: 14rem; border: 1px solid var(--borde); background: var(--fondo); object-fit: contain; justify-self: start; }
.cp-preview figcaption { color: var(--texto-3); font-size: .875rem; }
.cp-avance { display: grid; gap: .4rem; }
.cp-avance progress { width: 100%; height: 1rem; border: 1px solid var(--borde); background: var(--fondo); accent-color: var(--lila); }
.cp-avance p { font-size: .9375rem; }
.ma-nota { color: var(--texto-3); font-size: .875rem; }

@media (min-width: 720px) {
  .bloque { padding: 1.5rem 1.75rem; }
  .fila-clase { padding-block: .85rem; }
}