/* Josh Beats · las pantallas de la app (entrar, recuperar y el panel de Josué): la marca «Firma» en versión tranquila
 * (FICHA.md §8): el marfil del programa de mano de fondo, la tinta y el bronce oscuro, Bodoni Moda y Hanken Grotesk, sin
 * grano, sin video, sin lámina y con los anillos quietos. Los colores y las letras salen de /vitrina/css/marca.css
 * (generado desde sitio.config.mjs) y las medidas y tiempos de /vitrina/css/tokens.css. Contraste sobre el marfil: tinta
 * 14,97 · tinta suave 7,47 · bronce oscuro 5,92 · error claro 6,05 · línea de los campos 3,84 (gráfico). El bermellón no va
 * sobre el marfil (2,49). Ni una itálica. Sin estilos en línea (CSP). */

/* ── Base ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { font-style: normal; }
html {
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis: none; text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
  background: var(--color-marfil); color: var(--color-tinta); color-scheme: light;
}
body { margin: 0; min-height: 100vh; background: var(--color-marfil); color: var(--color-tinta); font-family: var(--fuente-texto); font-size: var(--t-texto); line-height: 1.6; }
h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset, legend { margin: 0; padding: 0; }
fieldset { border: 0; min-width: 0; }
ul, ol { list-style: none; }
img, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-tinta); outline-offset: 4px; }
::selection { background: var(--color-tinta); color: var(--color-marfil); }
[hidden] { display: none !important; }
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saltar {
  position: fixed; top: var(--e-3); left: var(--e-3); z-index: 30; padding: var(--e-3) var(--e-4); background: var(--color-tinta); color: var(--color-marfil);
  font-size: var(--t-dato); transform: translateY(-200%); transition: transform var(--mov-estado) var(--curva-ease-out);
}
.saltar:focus-visible { transform: none; }
/* El contenido recibe el foco al cambiar de pantalla (para seguir con Tab desde ahí); no es un control: sin contorno. */
#contenido:focus { outline: none; }
.sin-js { padding: var(--e-7) var(--margen-celular); text-align: center; }

/* ── Tipos ───────────────────────────────────────────────────────────────── */
.titulo, .sin-conexion h1 { font-family: var(--fuente-titulos); font-weight: var(--peso-titulo); font-size: var(--t-titulo); line-height: var(--t-titulo-alto); text-transform: uppercase; letter-spacing: 0.01em; text-wrap: balance; }
.titulo-2 { font-family: var(--fuente-titulos); font-weight: var(--peso-titulo); font-size: var(--t-titulo-2); line-height: 1.12; text-transform: uppercase; letter-spacing: 0.02em; text-wrap: balance; }
.titulo-3 { font-family: var(--fuente-titulos); font-weight: var(--peso-titulo); font-size: var(--t-titulo-3); line-height: 1.2; text-wrap: balance; }
.etiqueta { font-family: var(--fuente-texto); font-size: var(--t-etiqueta); font-weight: 500; letter-spacing: var(--espaciado-etiqueta); text-transform: uppercase; line-height: 1.5; color: var(--color-tinta-suave); }
.bajada { margin-top: var(--e-3); max-width: 34em; color: var(--color-tinta-suave); text-wrap: pretty; }
.dato { font-size: var(--t-dato); line-height: 1.6; letter-spacing: 0.02em; color: var(--color-tinta-suave); text-wrap: pretty; }
.versales { font-family: var(--fuente-titulos); font-size: var(--t-esquina); text-transform: uppercase; letter-spacing: var(--espaciado-versales); line-height: 1.3; font-weight: 450; }
/* Las marcas (estado, lugar, EJEMPLO…): la base va antes que todas sus variantes (`.marca--…`), que cambian su color o su
   borde punteado; si fuera después, las taparía (así se perdían el punteado de «En pausa» y los colores de los pagos y de las
   clases: remate de la etapa 6). */
.marca {
  display: inline-block; padding: 1px var(--e-2); border: var(--hilo) solid currentColor; color: var(--color-tinta-suave);
  font-size: var(--t-mini); font-weight: 600; letter-spacing: var(--espaciado-etiqueta); text-transform: uppercase; line-height: 1.5;
}

/* La firma: «JOSH BEATS» y debajo quién (en las cuentas) o «Panel». */
.firma { display: inline-flex; flex-direction: column; justify-content: center; min-height: var(--toque); line-height: 1.25; }
.firma-nombre { font-family: var(--fuente-titulos); font-size: clamp(19px, 1.6vw, 23px); font-weight: 480; text-transform: uppercase; letter-spacing: 0.06em; transition: color var(--mov-enlace) var(--curva-ease-out); }
.firma-oficio, .firma-panel { margin-top: var(--e-1); font-size: var(--t-mini); font-weight: 500; letter-spacing: var(--espaciado-etiqueta); text-transform: uppercase; color: var(--color-tinta-suave); }
@media (hover: hover) { .firma:hover .firma-nombre { color: var(--color-bronce-oscuro); } }

/* ── Enlaces (§5: color 0,5 s ease-out; subrayado que crece 0,3 s ease-out) ── */
.enlace {
  position: relative; display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--toque); color: var(--color-tinta);
  transition: color var(--mov-enlace) var(--curva-ease-out);
}
.enlace::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: var(--hilo); background: currentColor;
  transform: scaleX(0.35); transform-origin: 0 50%; transition: transform var(--mov-subrayado) var(--curva-ease-out);
}
.enlace:focus-visible { color: var(--color-bronce-oscuro); }
@media (hover: hover) { .enlace:hover { color: var(--color-bronce-oscuro); } }
.enlace:focus-visible::after { transform: scaleX(1); }
@media (hover: hover) { .enlace:hover::after { transform: scaleX(1); } }
.enlace--versales { font-family: var(--fuente-titulos); font-size: var(--t-esquina); text-transform: uppercase; letter-spacing: var(--espaciado-versales); }
.enlace--peligro, .enlace--peligro:focus-visible { color: var(--color-error-claro); }
@media (hover: hover) { .enlace--peligro:hover { color: var(--color-error-claro); } }
.enlace .flecha { width: 14px; height: 10px; }
.enlace .flecha--fuera { width: 9px; height: 9px; }
.enlace-texto {
  display: inline-flex; align-items: center; gap: var(--e-1); min-height: var(--toque);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--hilo-tinta);
  transition: color var(--mov-enlace) var(--curva-ease-out), text-decoration-color var(--mov-enlace) var(--curva-ease-out);
}
.enlace-texto:focus-visible { color: var(--color-bronce-oscuro); text-decoration-color: currentColor; }
@media (hover: hover) { .enlace-texto:hover { color: var(--color-bronce-oscuro); text-decoration-color: currentColor; } }

/* ── Botón redondo de dos anillos (§3), en tinta y quieto: versión tranquila ── */
.redondo {
  position: relative; display: inline-grid; place-items: center; flex: none; width: var(--boton-caja); height: var(--boton-caja); color: var(--color-tinta);
  transition: color var(--mov-enlace) var(--curva-ease-out);
}
.anillos { position: absolute; inset: calc((var(--boton-caja) - var(--boton-anillo)) / 2); pointer-events: none; }
.anillos i { position: absolute; inset: 0; border: var(--hilo) solid currentColor; border-radius: 54% 46% 58% 42% / 44% 57% 43% 56%; transition: border-color var(--mov-enlace) var(--curva-ease-out); }
.anillos i + i { border-radius: 42% 44% 41% 45% / 44% 41% 45% 42%; }
.redondo:focus-visible { color: var(--color-bronce-oscuro); }
@media (hover: hover) { .redondo:hover { color: var(--color-bronce-oscuro); } }
.redondo:focus-visible { outline-offset: -6px; border-radius: 50%; }
.redondo:active .mas { transform: scale(0.96); }
.redondo[disabled] { cursor: progress; color: var(--color-tinta-suave); }
.mas { position: relative; width: 22px; height: 22px; transition: transform var(--mov-estado) var(--curva-ease-out); }
.mas::before, .mas::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: var(--hilo); background: currentColor; }
.mas::after { transform: rotate(90deg); }
.con-etiqueta { display: inline-flex; align-items: center; gap: var(--e-2); color: var(--color-tinta); }
.con-etiqueta > .versales { transition: transform var(--mov-enlace) var(--curva-ease-out), color var(--mov-enlace) var(--curva-ease-out); }
.con-etiqueta:focus-visible > .versales { transform: translateX(5px); color: var(--color-bronce-oscuro); }
@media (hover: hover) { .con-etiqueta:hover > .versales { transform: translateX(5px); color: var(--color-bronce-oscuro); } }
.con-etiqueta:focus-visible .redondo { color: var(--color-bronce-oscuro); }
@media (hover: hover) { .con-etiqueta:hover .redondo { color: var(--color-bronce-oscuro); } }
.con-etiqueta:focus-visible { outline-offset: 2px; }
.nuevo { margin-right: calc((var(--boton-caja) - var(--boton-anillo)) / -2); }
.redondo .flecha { position: relative; width: 22px; height: 14px; }
.boton-principal > .versales { font-size: var(--t-esquina); min-width: 6.5em; text-align: left; } /* «Publicar» → «Publicando» sin mover lo de al lado */
.boton-principal[disabled] { cursor: progress; color: var(--color-tinta-suave); }
.boton-principal:active .flecha { transform: scale(0.96); }

/* ── Avisos ─────────────────────────────────────────────────────────────── */
.aviso { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2) var(--e-5); margin-bottom: var(--e-6); padding: var(--e-4) 0; border-top: var(--hilo) solid var(--color-tinta); border-bottom: var(--hilo) solid var(--hilo-tinta); }
.aviso p { font-family: var(--fuente-titulos); font-size: var(--t-lista); line-height: 1.3; max-width: 36em; text-wrap: pretty; }
.aviso--error { color: var(--color-error-claro); border-top-color: var(--color-error-claro); }
.aviso--error .enlace-texto { color: var(--color-tinta); }
.aviso:focus-visible { outline-offset: 6px; }
/* Un aviso que recibe el foco solo para anunciarse (lo que acaba de pasar, el espacio que otro tomó): no es un control, sin contorno. */
.aviso[data-foco]:focus { outline: none; }
/* La explicación de un aviso largo (mover o cancelar con menos de 24 h: etapa 6, tanda B): la primera frase en la letra de
   títulos y lo demás en la de leer, como el texto corrido de la cuenta. */
.aviso .aviso-detalle { flex-basis: 100%; max-width: 40em; font-family: var(--fuente-texto); font-size: var(--t-texto); line-height: var(--t-texto-alto); color: var(--color-tinta); }
/* Entre un aviso y los datos que siguen, una sola línea: la del aviso (sin la de los datos, ni su hueco). */
.aviso + .datos { padding-top: 0; border-top: 0; }

/* ── Campos de línea fina (los de Contratar, sobre el marfil) ───────────── */
.campo { display: flex; flex-direction: column; padding-bottom: var(--e-4); min-width: 0; }
.campo label { padding: var(--e-2) 0 var(--e-1); font-family: var(--fuente-titulos); font-size: var(--t-chico); text-transform: uppercase; letter-spacing: var(--espaciado-versales); color: var(--color-tinta); }
.campo-opcional { font-family: var(--fuente-texto); font-size: var(--t-dato); text-transform: none; letter-spacing: 0.02em; color: var(--color-tinta-suave); }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: var(--toque); padding: var(--e-2) 0; border: 0; border-bottom: var(--hilo) solid var(--color-borde-campo-claro); border-radius: 0;
  background: transparent; color: var(--color-tinta); font-size: var(--t-campo);
  transition: border-color var(--mov-estado) var(--curva-ease-out), box-shadow var(--mov-estado) var(--curva-ease-out);
}
.campo select { appearance: none; -webkit-appearance: none; padding-right: var(--e-6); cursor: pointer; }
/* La flecha del selector, dibujada con dos líneas en la tinta (el <select> no admite ::after: va en su envoltura). */
.campo-select { position: relative; display: block; }
.campo-select::after { content: ""; position: absolute; right: 6px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: var(--hilo) solid var(--color-tinta); border-bottom: var(--hilo) solid var(--color-tinta); transform: rotate(45deg); pointer-events: none; }
.campo textarea { min-height: 112px; margin-top: var(--e-2); padding: var(--e-3); border: var(--hilo) solid var(--color-borde-campo-claro); resize: vertical; line-height: 1.6; }
@media (hover: hover) { .campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--color-tinta-suave); } }
.campo [aria-invalid="true"] { border-color: var(--color-error-claro); }
.campo input:focus-visible, .campo select:focus-visible { outline: none; border-color: var(--color-tinta); box-shadow: 0 1px 0 0 var(--color-tinta); }
.campo textarea:focus-visible { outline: none; border-color: var(--color-tinta); box-shadow: inset 0 0 0 1px var(--color-tinta); }
.campo [aria-invalid="true"]:focus-visible { border-color: var(--color-error-claro); box-shadow: 0 1px 0 0 var(--color-error-claro); }
.campo input::placeholder { color: var(--color-tinta-suave); opacity: 1; }
.campo input:-webkit-autofill { -webkit-text-fill-color: var(--color-tinta); box-shadow: inset 0 0 0 100vmax var(--color-marfil); }
.campo-ayuda { margin-top: var(--e-1); font-size: var(--t-dato); line-height: 1.5; color: var(--color-tinta-suave); }
.campo-error { margin-top: var(--e-2); font-size: var(--t-dato); line-height: 1.5; color: var(--color-error-claro); }

/* Casilla */
.casilla { display: flex; align-items: center; gap: var(--e-3); min-height: var(--toque); padding-bottom: var(--e-2); font-size: var(--t-dato); }
.casilla input {
  flex: none; display: grid; place-items: center; width: var(--e-5); height: var(--e-5); margin: 0; appearance: none; -webkit-appearance: none;
  border: var(--hilo) solid var(--color-borde-campo-claro); background: transparent; cursor: pointer;
  transition: border-color var(--mov-estado) var(--curva-ease-out), background-color var(--mov-estado) var(--curva-ease-out);
}
.casilla input::after { content: ""; width: 10px; height: 5px; border-left: 1.5px solid var(--color-marfil); border-bottom: 1.5px solid var(--color-marfil); transform: translateY(-1px) rotate(-45deg); opacity: 0; }
.casilla input:checked { background: var(--color-tinta); border-color: var(--color-tinta); }
.casilla input:checked::after { opacity: 1; }
@media (hover: hover) { .casilla input:hover { border-color: var(--color-tinta); } }
.casilla input:focus-visible { outline: 2px solid var(--color-tinta); outline-offset: 3px; }
.casilla label { cursor: pointer; padding: var(--e-1) 0; }

/* Botones de elección (los formatos de Contratar): el punto en el relleno, el mismo ancho elegido o no */
.eleccion { padding-bottom: var(--e-4); }
.eleccion-opciones { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-2); }
.eleccion-opcion { position: relative; display: inline-flex; }
.eleccion-opcion input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.eleccion-opcion label {
  position: relative; display: inline-flex; align-items: center; min-height: var(--toque); padding: 0 var(--e-4) 0 var(--e-5);
  border: var(--hilo) solid var(--color-borde-campo-claro); font-size: var(--t-dato); letter-spacing: 0.02em; color: var(--color-tinta);
  transition: border-color var(--mov-estado) var(--curva-ease-out), background-color var(--mov-estado) var(--curva-ease-out);
}
.eleccion-opcion label::before { content: ""; position: absolute; left: var(--e-2); top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--color-tinta); opacity: 0; transition: opacity var(--mov-estado) var(--curva-ease-out); }
@media (hover: hover) { .eleccion-opcion input:hover + label { border-color: var(--color-tinta); } }
.eleccion-opcion input:checked + label { border-color: var(--color-tinta); background: var(--tinta-velo); }
.eleccion-opcion input:checked + label::before { opacity: 1; }
.eleccion-opcion input:focus-visible + label { outline: 2px solid var(--color-tinta); outline-offset: 3px; }
.eleccion[data-error] .eleccion-opcion label { border-color: var(--color-error-claro); }

/* La foto de un concierto: miniaturas que se eligen */
.fotos-opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: var(--e-4) var(--e-3); margin-top: var(--e-2); }
.foto-opcion { position: relative; }
.foto-opcion input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.foto-opcion label { display: block; }
.foto-opcion img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--color-tinta); outline: var(--hilo) solid var(--hilo-tinta-tenue); outline-offset: calc(var(--hilo) * -1); transition: box-shadow var(--mov-estado) var(--curva-ease-out); }
.foto-texto { display: block; margin-top: var(--e-1); font-size: var(--t-mini); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-tinta-suave); }
@media (hover: hover) { .foto-opcion input:hover + label img { box-shadow: 0 0 0 1px var(--color-marfil), 0 0 0 2px var(--color-tinta-suave); } }
.foto-opcion input:checked + label img { box-shadow: 0 0 0 2px var(--color-marfil), 0 0 0 4px var(--color-tinta); }
.foto-opcion input:checked + label .foto-texto { color: var(--color-tinta); }
.foto-opcion input:focus-visible + label { outline: 2px solid var(--color-bronce-oscuro); outline-offset: 7px; }

/* ── Entrar y recuperar ──────────────────────────────────────────────────── */
.acceso { display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; padding: 25px var(--margen) var(--e-6); }
.acceso-cabeza { display: flex; justify-content: space-between; align-items: flex-start; min-height: 100px; padding-top: 9px; }
.idiomas { display: flex; align-items: center; gap: var(--e-3); font-family: var(--fuente-titulos); font-size: var(--t-esquina); text-transform: uppercase; letter-spacing: var(--espaciado-versales); }
.idioma { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: var(--toque); min-width: var(--toque); color: var(--color-tinta-suave); transition: color var(--mov-enlace) var(--curva-ease-out); }
.idioma::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 8px; height: var(--hilo); background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--mov-subrayado) var(--curva-ease-out); }
.idioma--actual { color: var(--color-tinta); }
.idioma--actual::after, a.idioma:focus-visible::after { transform: scaleX(1); }
@media (hover: hover) { a.idioma:hover::after { transform: scaleX(1); } }
@media (hover: hover) { a.idioma:hover { color: var(--color-tinta); } }
/* align-content: start: en una pantalla corta (y en el celular, con el título y el formulario en dos filas), lo que sobra de
   alto va al final y no se reparte entre las filas (el hueco de ~100 px de la tanda A entre el título y el contenido). */
.acceso-cuerpo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-5); align-items: start; align-content: start; padding: var(--e-8) 0 var(--e-7); }
.acceso-titulo { grid-column: 1 / 7; }
.acceso-titulo .titulo { font-size: var(--t-titulo-cuenta); }
.acceso-titulo .bajada { font-size: var(--t-bajada); }
.acceso-form { grid-column: 8 / 13; width: 100%; max-width: 440px; }
.form-acceso .form-pie { margin-top: var(--e-3); margin-left: calc((var(--boton-caja) - var(--boton-anillo)) / -2); }
.form-acceso[aria-busy] .boton-principal { cursor: progress; }
.acceso-aviso .aviso p { font-size: var(--t-bajada); }
.acceso-enlaces { margin-top: var(--e-3); font-size: var(--t-dato); }
.acceso-pie { padding-top: var(--e-4); border-top: var(--hilo) solid var(--hilo-tinta); }
.demo-local { margin-top: var(--e-7); padding: var(--e-5); border: var(--hilo) solid var(--color-tinta); }
.demo-marca {
  display: inline-block; padding: 2px var(--e-2); border: var(--hilo) solid var(--color-tinta);
  font-size: var(--t-mini); font-weight: 600; letter-spacing: var(--espaciado-etiqueta); text-transform: uppercase; line-height: 1.5;
}
.demo-texto { margin-top: var(--e-3); font-size: var(--t-dato); color: var(--color-tinta-suave); }
.demo-datos { display: grid; grid-template-columns: auto 1fr; gap: var(--e-1) var(--e-4); margin: var(--e-4) 0 var(--e-2); font-size: var(--t-dato); }
.demo-datos dt { color: var(--color-tinta-suave); }
.demo-datos dd { font-weight: 600; letter-spacing: 0.02em; user-select: all; overflow-wrap: anywhere; }

/* ── La cuenta del alumno (etapa 5): crear la cuenta, la compra, la vuelta del pago y Mi cuenta ──────────────
   La composición de entrar (el título a la izquierda, el formulario a la derecha) y, en Mi cuenta, sus secciones con la
   etiqueta a un lado (la de «Cómo funcionan» de Clases) y las filas con su línea fina (las de la agenda del panel). Pintadas
   en el servidor (src/alumnos/paginas.mjs): sin JavaScript, igual. */
.cuenta-esquina { display: flex; align-items: center; gap: var(--e-5); }
.cuenta-salir { display: inline-flex; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-cuenta .eleccion { padding-bottom: var(--e-5); }
.form-cuenta .eleccion .etiqueta { display: block; margin-bottom: var(--e-1); color: var(--color-tinta); }
.form-cuenta .eleccion-opciones .eleccion-opcion label { font-size: var(--t-chico); }
/* Una casilla con su texto largo (la autorización): la casilla a la altura de la primera línea. */
.casilla-campo { padding-bottom: var(--e-3); }
.casilla-campo .casilla { align-items: flex-start; padding-bottom: 0; }
.casilla-campo .casilla input { margin-top: 1px; }
.casilla-campo .casilla label { padding: 0; line-height: 1.55; text-wrap: pretty; }
.casilla-campo[data-error] .casilla input { border-color: var(--color-error-claro); }
.casilla-campo .campo-error { margin-left: calc(var(--e-5) + var(--e-3)); }
.cuenta-politica { margin: 0 0 var(--e-2) calc(var(--e-5) + var(--e-3)); }
.resumen-datos { grid-template-columns: 112px minmax(0, 1fr); padding-top: 0; border-top: 0; }
.resumen-reglas .enlace-texto { display: inline; }
.resumen-datos dt { line-height: 2.1; }
.resumen-datos dd { padding-bottom: var(--e-2); border-bottom: var(--hilo) solid var(--hilo-tinta-tenue); }
.resumen-total { font-family: var(--fuente-titulos); font-size: var(--t-titulo-3); font-weight: 450; }
.resumen-direccion { display: block; margin-top: var(--e-1); font-size: var(--t-dato); color: var(--color-tinta-suave); overflow-wrap: anywhere; }
.resumen-reglas { margin: var(--e-4) 0 var(--e-3); }
/* El pie de un formulario del alumno: el anillo se sale a la izquierda lo de su caja (como en entrar); lo que va a su lado
   (o debajo, en el celular), alineado con la columna. */
.cuenta-alumno .form-pie { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-6); margin-left: 0; }
.cuenta-alumno .form-pie > .boton-principal { margin-left: calc((var(--boton-caja) - var(--boton-anillo)) / -2); }
.cuenta-salir .enlace { white-space: nowrap; }
.cuenta-alumno .acceso-cabeza { gap: var(--e-4); }
.cuenta-esquina { flex: none; }
.form-pagar .dato { margin-top: var(--e-2); }
.cuenta-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-6); }
.cuenta-referencia { margin-top: var(--e-3); overflow-wrap: anywhere; }
.form-reintentar { margin: var(--e-2) 0 0 calc((var(--boton-caja) - var(--boton-anillo)) / -2); }
.form-reintentar--chico { margin: 0; }
.form-reintentar--chico .versales { font-size: inherit; }
.simulador-marca { margin-bottom: var(--e-4); }
.demo-quien { margin-top: var(--e-4); font-size: var(--t-mini); font-weight: 600; letter-spacing: var(--espaciado-etiqueta); text-transform: uppercase; }
.demo-alumnos li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 var(--e-4); border-top: var(--hilo) solid var(--hilo-tinta-tenue); }
.demo-alumno { display: flex; flex-direction: column; padding: var(--e-2) 0; font-size: var(--t-dato); font-weight: 600; overflow-wrap: anywhere; }
.demo-que { font-weight: 400; color: var(--color-tinta-suave); }
/* Mi cuenta: una sola columna ancha, con sus secciones. */
.cuenta-alumno--ancha .cuenta-cuerpo { display: block; max-width: 1240px; padding-top: var(--e-7); }
.cuenta-cabeza { padding-bottom: var(--e-6); }
.cuenta-cabeza .titulo { font-size: var(--t-titulo-cuenta); }
.cuenta-cabeza .bajada { font-size: var(--t-bajada); }
.cuenta-avisos { max-width: 720px; }
.cuenta-seccion { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-5); padding: var(--e-6) 0 var(--e-7); border-top: var(--hilo) solid var(--color-tinta); }
.cuenta-seccion-titulo { grid-column: 1 / 4; padding-top: var(--e-1); color: var(--color-tinta); }
.cuenta-seccion-cuerpo { grid-column: 4 / 13; min-width: 0; }
.cuenta-seccion-cuerpo > .form-acceso { max-width: 520px; }
.cuenta-subtitulo { margin-top: var(--e-7); margin-bottom: var(--e-2); }
.compras { border-top: var(--hilo) solid var(--hilo-tinta-tenue); }
.compra { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: var(--e-6); align-items: start; padding: var(--e-5) 0; border-bottom: var(--hilo) solid var(--hilo-tinta-tenue); }
.compra-cifra { font-family: var(--fuente-titulos); font-size: 56px; font-weight: 420; line-height: 0.9; color: var(--color-bronce-oscuro); font-variant-numeric: tabular-nums lining-nums; }
.compra[data-momento="pausada"] .compra-cifra, .compra[data-momento="pendiente"] .compra-cifra, .compra[data-momento="vencida"] .compra-cifra,
.compra[data-momento="gastada"] .compra-cifra, .compra[data-momento="anulada"] .compra-cifra { color: var(--color-tinta-suave); }
.compra-plan { font-family: var(--fuente-titulos); font-weight: var(--peso-titulo); font-size: var(--t-titulo-3); line-height: 1.15; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: var(--e-1); }
.compra-texto > .dato + .dato { margin-top: var(--e-1); }
.marca--pausa, .marca--pendiente { color: var(--color-tinta); border-style: dashed; }
.cuenta-vacio { font-family: var(--fuente-titulos); font-size: var(--t-lista); margin-bottom: var(--e-3); }
.cuenta-primer { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2) var(--e-3); margin-top: var(--e-5); }
.pagos-lista { border-top: var(--hilo) solid var(--hilo-tinta-tenue); }
.pago-fila { display: grid; grid-template-columns: 112px minmax(0, 1fr) 150px 130px; gap: var(--e-2) var(--e-5); align-items: baseline; padding: var(--e-4) 0; border-bottom: var(--hilo) solid var(--hilo-tinta-tenue); }
.pago-plan { font-family: var(--fuente-titulos); font-size: var(--t-bajada); line-height: 1.3; }
.pago-ref { overflow-wrap: anywhere; }
.pago-monto { font-family: var(--fuente-titulos); font-size: var(--t-bajada); text-align: right; }
.pago-estado { text-align: right; }
.pago-accion:empty { display: none; }
.pago-accion { grid-column: 2 / -1; }
.marca--pago-aprobado { color: var(--color-bronce-oscuro); }
.marca--pago-rechazado, .marca--pago-anulado, .marca--pago-fallido, .marca--pago-revisar { color: var(--color-error-claro); }
.marca--pago-pendiente { color: var(--color-tinta); border-style: dashed; }
.texto-cuenta { max-width: 40em; margin-bottom: var(--e-4); }
.form-borrar .form-pie { margin-left: 0; }

/* ── Reservar, mover y cancelar una clase, y tus clases en Mi cuenta (etapa 6) ─────────────────────────────────────
   Las horas son los botones de elección de Firma (los de Contratar y «Así lo verán tus alumnos»), de verdad: radios de un
   formulario. En escritorio, lo tuyo a la izquierda (el saldo, el lugar y, al elegir, el resumen con «Reservar», quieto a la
   vista) y los días a la derecha; en el celular, los días en una tira que se desliza. Nada se mueve al elegir (FICHA §8). */
.reservar { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-5); align-items: start; }
.reservar-cabeza { grid-column: 1 / 7; grid-row: 1; padding-bottom: var(--e-5); }
.reservar-cabeza .titulo { font-size: var(--t-titulo-cuenta); }
.reservar-cabeza .bajada { font-size: var(--t-bajada); }
.reservar-cabeza .cuenta-avisos { margin-top: var(--e-5); }
.reservar-cabeza > .aviso { margin: var(--e-5) 0 var(--e-4); }
.reservar-lugar { margin-top: var(--e-5); }
.reservar-cabeza .campo { max-width: 440px; }
.reservar-planes { margin-top: var(--e-4); }
.reservar-planes-opciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-4); margin-top: var(--e-1); font-size: var(--t-dato); }
.reservar-horas { grid-column: 8 / 13; grid-row: 1 / span 2; min-width: 0; padding-top: var(--e-2); }
.reservar-horas-titulo { display: block; margin-bottom: var(--e-1); color: var(--color-tinta); }
.reservar-horas > .dato { margin-bottom: var(--e-3); }
.reservar-horas[data-error] .eleccion-opcion label { border-color: var(--color-error-claro); }
.reservar-tira { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--e-5) var(--e-5); padding-top: var(--e-4); border-top: var(--hilo) solid var(--hilo-tinta-tenue); }
/* Con posición: el nombre largo del día (oculto a la vista, para los lectores de pantalla) queda dentro de su día, y en el
   celular dentro de la tira que se desliza (si no, la página entera se desbordaba). */
.reservar-dia { position: relative; min-width: 0; }
.reservar-dia-nombre { margin-bottom: var(--e-2); font-family: var(--fuente-titulos); font-weight: var(--peso-titulo); font-size: var(--t-chico); text-transform: uppercase; letter-spacing: var(--espaciado-versales); }
.reservar-dia-num { color: var(--color-bronce-oscuro); font-variant-numeric: tabular-nums lining-nums; }
.hora-opcion label { font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.reservar-horas .form-pie { margin-top: var(--e-5); }
.reservar-resumen { grid-column: 1 / 7; grid-row: 2; position: sticky; top: var(--e-6); padding-top: var(--e-4); border-top: var(--hilo) solid var(--color-tinta); }
.reservar-resumen-titulo { margin-bottom: var(--e-2); color: var(--color-tinta); }
/* A lo ancho de su columna: el día y la hora («martes 17 de noviembre, 5:00 p. m.») en una línea. */
.reservar-resumen .resumen-datos { max-width: none; }
.reservar-por-confirmar { margin-top: var(--e-2); }
.reservar--corta .reservar-cabeza { grid-column: 1 / 9; }
.form-avisar { max-width: 440px; margin-top: var(--e-2); }
.form-avisar .form-pie, .form-cancelar .form-pie { margin-left: 0; }
.form-avisar-hecho:focus { outline: none; } /* recibe el foco solo para anunciarse: no es un control */
.cuenta-reservar { margin: 0 0 var(--e-5) calc((var(--boton-caja) - var(--boton-anillo)) / -2); }
.reservas { border-top: var(--hilo) solid var(--hilo-tinta-tenue); margin-bottom: var(--e-2); }
.reserva { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: var(--e-6); align-items: start; padding: var(--e-5) 0; border-bottom: var(--hilo) solid var(--hilo-tinta-tenue); }
.reserva .fila-fecha { display: flex; flex-direction: column; gap: var(--e-1); }
.reserva-cuando { font-family: var(--fuente-titulos); font-weight: var(--peso-titulo); font-size: var(--t-titulo-3); line-height: 1.15; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: var(--e-1); }
.reserva-texto > .dato + .dato { margin-top: var(--e-1); }
.reserva-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--e-6); margin-top: var(--e-2); }
/* «Ya no se puede mover sin perder la clase» parte en dos líneas en el celular: el subrayado, debajo de la última (no encima). */
.reserva-acciones .enlace { padding: var(--e-1) 0 var(--e-3); line-height: 1.3; }
.reserva-acciones .enlace::after { bottom: var(--e-1); }
.reservas--pasadas .fila-fecha { color: var(--color-tinta-suave); }
.reservas--pasadas .reserva-cuando { font-size: var(--t-bajada); }
.marca--reserva-por_confirmar, .marca--reserva-sin_confirmar { color: var(--color-tinta); border-style: dashed; }
.marca--reserva-confirmada { color: var(--color-bronce-oscuro); }
.marca--reserva-no_asistio { color: var(--color-error-claro); }
.marca--reserva-cumplida, .marca--reserva-cancelada { color: var(--color-tinta-suave); }

/* ── El panel ───────────────────────────────────────────────────────────── */
.panel { min-height: 100vh; }
.panel-cabeza {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--e-6);
  padding: var(--e-5) var(--margen); border-bottom: var(--hilo) solid var(--color-tinta);
}
.nav-arriba ul { display: flex; justify-content: center; gap: var(--e-6); }
.nav-enlace {
  position: relative; display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--toque);
  font-family: var(--fuente-titulos); font-size: var(--t-esquina); text-transform: uppercase; letter-spacing: var(--espaciado-versales); color: var(--color-tinta-suave);
  transition: color var(--mov-enlace) var(--curva-ease-out);
}
.nav-arriba .nav-enlace::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: var(--hilo); background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--mov-subrayado) var(--curva-ease-out); }
.nav-enlace:focus-visible, .nav-enlace[aria-current="page"] { color: var(--color-tinta); }
@media (hover: hover) { .nav-enlace:hover { color: var(--color-tinta); } }
.nav-arriba .nav-enlace[aria-current="page"]::after, .nav-arriba .nav-enlace:focus-visible::after { transform: scaleX(1); }
@media (hover: hover) { .nav-arriba .nav-enlace:hover::after { transform: scaleX(1); } }
.nav-abajo { display: none; }
.usuario { display: flex; align-items: center; gap: var(--e-4); }
.usuario-nombre { font-size: var(--t-dato); }
.usuario-rol { font-size: var(--t-mini); font-weight: 500; letter-spacing: var(--espaciado-etiqueta); text-transform: uppercase; color: var(--color-tinta-suave); }
.panel-contenido { width: 100%; max-width: calc(1240px + 2 * var(--margen)); margin: 0 auto; padding: var(--e-7) var(--margen) var(--e-9); }
.pagina-cabeza { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--e-6); padding-bottom: var(--e-5); margin-bottom: var(--e-6); border-bottom: var(--hilo) solid var(--hilo-tinta); }
.pagina-cabeza .bajada { font-size: var(--t-chico); }
.pagina-cabeza--form .fila-marcas { margin-top: var(--e-2); }
.volver { margin-bottom: var(--e-2); margin-left: 0; }

/* Listas de conciertos (inicio y agenda): fecha grande en bronce oscuro, el lugar en versales, la línea fina debajo */
.inicio-bloque, .agenda-grupo, .persona { margin-bottom: var(--e-8); }
.inicio-bloque > .etiqueta, .agenda-grupo > .etiqueta, .persona > .etiqueta { margin-bottom: var(--e-2); }
.filas { border-top: var(--hilo) solid var(--hilo-tinta-tenue); }
.fila-concierto { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; gap: var(--e-6); align-items: start; padding: var(--e-5) 0; border-bottom: var(--hilo) solid var(--hilo-tinta-tenue); }
.fila-fecha { font-family: var(--fuente-titulos); color: var(--color-bronce-oscuro); line-height: 0.9; }
.fila-fecha time { display: flex; flex-direction: column; gap: var(--e-1); }
.fila-dia { font-size: 56px; font-weight: 420; font-variant-numeric: tabular-nums lining-nums; }
.fila-mes { font-size: var(--t-bajada); text-transform: uppercase; letter-spacing: 0.08em; }
.fila-ano { font-size: var(--t-dato); letter-spacing: 0.08em; }
.fila-marcas { display: flex; flex-wrap: wrap; gap: var(--e-2); min-height: 20px; margin-bottom: var(--e-1); }
.marca--borrador { color: var(--color-tinta); border-style: dashed; }
.marca--proximo, .marca--en-vivo { color: var(--color-bronce-oscuro); }
.marca--cancelado { color: var(--color-error-claro); }
.fila-lugar { font-family: var(--fuente-titulos); font-weight: var(--peso-titulo); font-size: var(--t-titulo-3); line-height: 1.15; text-transform: uppercase; letter-spacing: 0.02em; }
.fila-enlace { display: inline-flex; align-items: center; min-height: var(--toque); transition: color var(--mov-enlace) var(--curva-ease-out); }
.fila-enlace:focus-visible { color: var(--color-bronce-oscuro); }
@media (hover: hover) { .fila-enlace:hover { color: var(--color-bronce-oscuro); } }
.fila-concierto--cancelado .fila-enlace { text-decoration: line-through; text-decoration-thickness: 1px; }
.fila-concierto--cancelado .fila-fecha, .fila-concierto[data-momento="pasado"] .fila-fecha { color: var(--color-tinta-suave); }
.fila-acciones { align-self: center; font-size: var(--t-dato); }
.vacio { padding: var(--e-4) 0; color: var(--color-tinta-suave); border-bottom: var(--hilo) solid var(--hilo-tinta-tenue); }
.vacio-grande { padding: var(--e-8) 0; }
.vacio-grande .dato { margin: var(--e-2) 0 var(--e-4); max-width: 34em; }
.vacio-grande .con-etiqueta { margin-left: calc((var(--boton-caja) - var(--boton-anillo)) / -2); }

/* El formulario de un concierto y su vista previa */
.form-columnas { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--e-8); align-items: start; }
.form-concierto { max-width: 720px; }
.grupo { margin-bottom: var(--e-6); }
.grupo > .etiqueta { display: block; width: 100%; margin-bottom: var(--e-1); padding-bottom: var(--e-2); border-bottom: var(--hilo) solid var(--hilo-tinta-tenue); }
.campos-fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-6); }
.campos-fila--tres { grid-template-columns: 2fr 1fr 1fr; }
.campo--texto { margin-top: var(--e-2); }
.form-resumen:empty { display: none; }
.form-resumen { margin-bottom: var(--e-4); color: var(--color-error-claro); font-family: var(--fuente-titulos); font-size: var(--t-bajada); }
.form-resumen .enlace { color: var(--color-tinta); }
.form-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-6); padding-top: var(--e-4); border-top: var(--hilo) solid var(--color-tinta); }
.form-acciones > .boton-principal { margin-left: calc((var(--boton-caja) - var(--boton-anillo)) / -2); }
.acciones-otras { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-6); }
.form-concierto[aria-busy] .boton-principal { cursor: progress; }
.confirmar { width: 100%; padding: var(--e-2) 0; }
.confirmar-texto { font-family: var(--fuente-titulos); font-size: var(--t-lista); line-height: 1.3; max-width: 30em; text-wrap: pretty; }
.confirmar-botones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-6); margin-top: var(--e-4); }
.boton-peligro {
  display: inline-flex; align-items: center; min-height: var(--toque); padding: 0 var(--e-5); border: var(--hilo) solid var(--color-error-claro); color: var(--color-error-claro);
  font-family: var(--fuente-titulos); font-size: var(--t-esquina); text-transform: uppercase; letter-spacing: var(--espaciado-versales);
  transition: background-color var(--mov-estado) var(--curva-ease-out), color var(--mov-estado) var(--curva-ease-out);
}
.boton-peligro:focus-visible { background: var(--color-error-claro); color: var(--color-marfil); }
@media (hover: hover) { .boton-peligro:hover { background: var(--color-error-claro); color: var(--color-marfil); } }
.vista-previa { position: sticky; top: var(--e-6); }
.vista-previa > .dato { margin-top: var(--e-1); }
.vista-figura { margin-top: var(--e-4); }
.vista-lienzo { width: 100%; height: auto; aspect-ratio: 1200 / 630; background: var(--color-fondo); }
.vista-figura figcaption { margin-top: var(--e-1); }

/* El inicio: un bloque por sección (consultas, agenda, horario) */
.inicio-seccion:empty { display: none; }
.inicio-cifra { display: flex; align-items: baseline; gap: var(--e-2); padding: var(--e-3) 0 var(--e-4); font-size: var(--t-chico); color: var(--color-tinta-suave); }
.cifra { font-family: var(--fuente-titulos); font-size: 48px; font-weight: 420; line-height: 1; color: var(--color-bronce-oscuro); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.inicio-alerta { margin-top: var(--e-3); color: var(--color-error-claro); font-size: var(--t-dato); }
.inicio-mas { margin-top: var(--e-2); font-size: var(--t-dato); }
.inicio-enlaces { display: flex; flex-wrap: wrap; gap: 0 var(--e-5); }
.inicio-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-6); margin-top: var(--e-2); }
.inicio-acciones > .con-etiqueta { margin-left: calc((var(--boton-caja) - var(--boton-anillo)) / -2); }
.inicio-registro { margin-top: var(--e-6); font-size: var(--t-dato); }
.solo-celular { display: none; }

/* Marcas de las consultas y del horario (el bermellón no va sobre el marfil: el bronce oscuro y el rojo medido) */
.marca--nueva { color: var(--color-bronce-oscuro); }
.marca--aviso, .marca--bloqueado { color: var(--color-error-claro); }
.marca--extra { color: var(--color-bronce-oscuro); }
.marca--respondida, .marca--archivada, .marca--formato, .marca--lugar { color: var(--color-tinta-suave); }
.fila-consulta { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: var(--e-6); align-items: start; padding: var(--e-5) 0; border-bottom: var(--hilo) solid var(--hilo-tinta-tenue); }
.fila-consulta[data-estado="archivada"] .fila-fecha, .fila-consulta[data-estado="respondida"] .fila-fecha { color: var(--color-tinta-suave); }
.cuenta { font-variant-numeric: tabular-nums lining-nums; }
.grupo-cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--e-1) var(--e-5); margin-bottom: var(--e-2); }
.grupo-cabeza > .etiqueta { margin: 0; }
.grupo-acciones { display: flex; flex-wrap: wrap; gap: 0 var(--e-5); font-size: var(--t-dato); }
.grupo-cabeza .enlace-texto { font-size: var(--t-dato); }

/* El detalle de una consulta: lo que escribió (como texto) y, al lado, qué hacer con ella */
.datos { display: grid; grid-template-columns: 190px minmax(0, 1fr); align-items: baseline; gap: var(--e-2) var(--e-5); padding: var(--e-4) 0; border-top: var(--hilo) solid var(--hilo-tinta-tenue); }
.consulta > .datos:first-child { padding-top: 0; border-top: 0; }
.datos dt { font-size: var(--t-mini); font-weight: 500; letter-spacing: var(--espaciado-etiqueta); text-transform: uppercase; line-height: 1.9; color: var(--color-tinta-suave); }
.datos dd { overflow-wrap: anywhere; }
.consulta-bloque { margin-top: var(--e-6); }
.consulta-bloque > .etiqueta { margin-bottom: var(--e-2); }
.mensaje { padding: var(--e-4) 0; border-top: var(--hilo) solid var(--hilo-tinta-tenue); line-height: var(--t-texto-alto); white-space: pre-wrap; overflow-wrap: anywhere; }
.consulta-acciones { position: sticky; top: var(--e-6); }
.consulta-acciones > .consulta-bloque:first-child { margin-top: 0; }
.consulta-acciones .dato { margin-bottom: var(--e-1); }
.acciones-pila { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-1); }
.acciones-pila > .boton-principal { margin-left: calc((var(--boton-caja) - var(--boton-anillo)) / -2); }
.consulta-borrar { margin-top: var(--e-6); padding-top: var(--e-4); border-top: var(--hilo) solid var(--hilo-tinta-tenue); }
/* Borrar los datos de una persona (al pie de Consultas, solo el dueño): un campo y su resultado. */
.persona-bajada { margin-bottom: var(--e-4); max-width: 34em; }
.form-persona { max-width: 480px; }
.form-persona .form-acciones { padding-top: var(--e-2); border-top: 0; }
.persona-resultado { margin-top: var(--e-4); }
.persona-resultado .consulta-borrar { margin-top: 0; border-top: 0; } /* la última fila ya trae su línea */

/* El horario: la semana por días, las excepciones y «Así lo verán tus alumnos» */
.semana { border-top: var(--hilo) solid var(--hilo-tinta-tenue); }
.semana-dia { display: grid; grid-template-columns: 160px minmax(0, 1fr) auto; gap: var(--e-5); align-items: center; min-height: 64px; padding: var(--e-3) 0; border-bottom: var(--hilo) solid var(--hilo-tinta-tenue); }
.semana-nombre { font-family: var(--fuente-titulos); font-weight: var(--peso-titulo); font-size: var(--t-lista); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-bronce-oscuro); line-height: 1.2; }
.semana-dia:not(:has(.bloque)) .semana-nombre { color: var(--color-tinta-suave); }
.semana-bloques { display: flex; flex-direction: column; gap: var(--e-1); }
.bloque { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-3); min-height: var(--toque); }
.bloque-horas { font-family: var(--fuente-titulos); font-size: var(--t-bajada); letter-spacing: 0.02em; font-variant-numeric: tabular-nums lining-nums; }
.bloque-cambiar { font-size: var(--t-dato); }
.semana-libre { color: var(--color-tinta-suave); }
.semana-agregar {
  display: inline-grid; place-items: center; width: var(--toque); height: var(--toque); border: var(--hilo) solid var(--color-borde-campo-claro); border-radius: 50%;
  font-family: var(--fuente-titulos); font-size: 22px; line-height: 1; color: var(--color-tinta);
  transition: border-color var(--mov-estado) var(--curva-ease-out), color var(--mov-estado) var(--curva-ease-out);
}
.semana-agregar:focus-visible { border-color: var(--color-tinta); color: var(--color-bronce-oscuro); }
@media (hover: hover) { .semana-agregar:hover { border-color: var(--color-tinta); color: var(--color-bronce-oscuro); } }
.semana-agregar:focus-visible { outline-offset: 2px; }
.excepcion { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-2) var(--e-5); align-items: center; padding: var(--e-4) 0; border-bottom: var(--hilo) solid var(--hilo-tinta-tenue); }
.excepcion-tramo { font-family: var(--fuente-titulos); font-size: var(--t-bajada); line-height: 1.3; font-variant-numeric: tabular-nums lining-nums; }
.excepcion-ojo { color: var(--color-error-claro); }
.excepcion .confirmar { grid-column: 1 / -1; padding: 0; }
.vista-explica { max-width: 46em; margin-bottom: var(--e-3); }
.vista-alumnos { margin-top: var(--e-2); }
.vista-alumnos[aria-busy] { opacity: 0.6; }
.vista-dias { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--e-5) var(--e-6); padding-top: var(--e-4); border-top: var(--hilo) solid var(--hilo-tinta-tenue); }
.vista-fecha { font-family: var(--fuente-titulos); font-weight: var(--peso-titulo); font-size: var(--t-chico); text-transform: uppercase; letter-spacing: var(--espaciado-versales); margin-bottom: var(--e-2); }
.horas { display: flex; flex-wrap: wrap; gap: var(--e-2); }
/* Un botón de hora sin acción (la reserva es de la etapa 6): se ve como los de elección, pero no es un control. */
.hora {
  display: inline-flex; align-items: center; min-height: var(--toque); padding: 0 var(--e-4); border: var(--hilo) solid var(--color-borde-campo-claro);
  font-size: var(--t-dato); letter-spacing: 0.02em; font-variant-numeric: tabular-nums lining-nums; color: var(--color-tinta); cursor: default;
}
.datos--ajustes { max-width: 640px; }
.form-columnas--una { grid-template-columns: minmax(0, 1fr); }
.form-horario { max-width: 720px; }
.form-horario .eleccion { padding-bottom: var(--e-2); }
.otras-fechas { margin-top: var(--e-3); }
.bloqueo-resumen:empty { display: none; }
.bloqueo-resumen { margin-top: var(--e-2); }

/* Registro de cambios */
.registro-fila { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--e-5); padding: var(--e-4) 0; border-bottom: var(--hilo) solid var(--hilo-tinta-tenue); }
.registro-lista { border-top: var(--hilo) solid var(--hilo-tinta-tenue); }
.registro-quien { font-weight: 600; }
.registro-cuando, .demo-datos dd, .fila-ano { font-variant-numeric: tabular-nums lining-nums; }

/* Alumnos, pagos y planes (etapa 5, tanda B): las mismas filas de la agenda y de las consultas (la cifra grande en bronce
   oscuro a la izquierda, las marcas, el nombre en versales, la línea fina debajo), los botones de elección de Firma para los
   filtros y la composición del detalle de una consulta (los datos a la izquierda, lo que se hace a la derecha). */
/* Buscar: el campo de línea fina y «Buscar» al lado, en la misma línea de base. */
.form-buscar { display: flex; align-items: flex-end; gap: var(--e-5); max-width: 560px; margin-bottom: var(--e-3); }
.form-buscar .campo { flex: 1 1 auto; padding-bottom: 0; }
.form-buscar .form-acciones { flex: none; padding-top: 0; border-top: 0; }
.campo input[type="search"] { appearance: none; -webkit-appearance: none; }
.campo input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
.filtros { margin: 0 0 var(--e-6); }
.filtros .eleccion { padding-bottom: 0; }
.lista-cuenta { margin-bottom: var(--e-2); }
.ver-mas { padding-top: var(--e-3); }
.fila-alumno, .fila-plan { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: var(--e-6); align-items: start; padding: var(--e-5) 0; border-bottom: var(--hilo) solid var(--hilo-tinta-tenue); }
.fila-pago { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; gap: var(--e-6); align-items: start; padding: var(--e-5) 0; border-bottom: var(--hilo) solid var(--hilo-tinta-tenue); }
.alumno-cifra { font-family: var(--fuente-titulos); font-size: 56px; font-weight: 420; line-height: 0.9; color: var(--color-bronce-oscuro); font-variant-numeric: tabular-nums lining-nums; }
.fila-alumno:not([data-estado="activo"]) .alumno-cifra, .fila-plan[data-activo="false"] .cifra,
.fila-pago:not([data-pago-estado="aprobado"]) .fila-fecha { color: var(--color-tinta-suave); }
.marca--alumno-activo, .marca--momento-viva, .marca--activo { color: var(--color-bronce-oscuro); }
.marca--alumno-pausa, .marca--alumno-pendiente, .marca--momento-pausada, .marca--momento-pendiente { color: var(--color-tinta); border-style: dashed; }
.marca--alumno-vencido, .marca--alumno-gastado, .marca--alumno-anulado, .marca--alumno-sin_plan,
.marca--momento-vencida, .marca--momento-gastada, .marca--momento-anulada { color: var(--color-tinta-suave); }
.inicio-pendientes { margin-top: var(--e-3); }
/* El detalle de un alumno: sus compras (la cifra de lo que le queda), con lo que se hace con cada una debajo. */
.alumno > .datos:first-child { padding-top: 0; border-top: 0; }
.compras--panel .compra { grid-template-columns: 96px minmax(0, 1fr); gap: var(--e-5); }
.compras--panel .compra-cifra { font-size: 48px; }
.compra-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--e-5); margin-top: var(--e-2); }
.compra-acciones .confirmar { padding-top: var(--e-3); }
.compra-acciones .confirmar > .dato { max-width: 34em; margin-top: var(--e-1); }
.form-pausa, .form-extender { max-width: 360px; margin-top: var(--e-3); }
.form-extender .acciones-otras { margin-top: calc(var(--e-2) * -1); }
/* Confirmar algo que no es peligroso (pausar, reanudar, guardar una fecha): el botón de borrar, en la tinta. */
.boton-confirmar {
  display: inline-flex; align-items: center; min-height: var(--toque); padding: 0 var(--e-5); border: var(--hilo) solid var(--color-tinta); color: var(--color-tinta);
  font-family: var(--fuente-titulos); font-size: var(--t-esquina); text-transform: uppercase; letter-spacing: var(--espaciado-versales);
  transition: background-color var(--mov-estado) var(--curva-ease-out), color var(--mov-estado) var(--curva-ease-out);
}
.boton-confirmar:focus-visible { background: var(--color-tinta); color: var(--color-marfil); }
@media (hover: hover) { .boton-confirmar:hover { background: var(--color-tinta); color: var(--color-marfil); } }
.filas--pagos { margin-top: var(--e-1); }
.pago-alumno { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: var(--e-2) var(--e-5); align-items: baseline; padding: var(--e-4) 0; border-bottom: var(--hilo) solid var(--hilo-tinta-tenue); }
.pago-revisar { margin-top: var(--e-2); padding-left: var(--e-3); border-left: var(--hilo) solid var(--color-error-claro); max-width: 46em; }
.pago-revisar > p:first-child { color: var(--color-error-claro); }
.alumno-nota textarea { min-height: 200px; }
.form-nota .form-acciones { padding-top: var(--e-2); border-top: 0; }
.nota-hecho .aviso { margin: var(--e-4) 0 0; }
/* Pagos: el total del mes, los filtros (el mes, el estado) y exportar. */
.pagos-resumen { margin-bottom: var(--e-4); }
.pagos-total { padding-top: 0; flex-wrap: wrap; column-gap: var(--e-3); }
.filtros--pagos { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e-3) var(--e-6); }
.campo--mes { min-width: 240px; padding-bottom: 0; }
.pagos-exportar { margin-left: auto; }
.fila-pago .pago-monto { padding-top: var(--e-5); white-space: nowrap; }
.junto { white-space: nowrap; }
.fila-pago .pago-revisar .dato { margin-top: var(--e-1); }
/* Planes: la cifra de sus clases, sus precios en versales. */
.plan-cifra { display: flex; flex-direction: column; gap: var(--e-1); }
.plan-cifra-texto { font-family: var(--fuente-titulos); font-size: var(--t-chico); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-tinta-suave); }
.plan-precios { margin: var(--e-1) 0; font-family: var(--fuente-titulos); font-size: var(--t-bajada); line-height: 1.3; }
.plan-no-borra { margin-top: var(--e-3); }
/* «Más»: una fila por sección, con su línea y su flecha. */
.mas-lista { margin-top: calc(var(--e-6) * -1); } /* la línea de la cabeza hace de primera */
.mas-enlace {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--e-4); align-items: center; min-height: 72px; padding: var(--e-3) 0;
  border-bottom: var(--hilo) solid var(--hilo-tinta-tenue); transition: color var(--mov-enlace) var(--curva-ease-out);
}
.mas-nombre { font-family: var(--fuente-titulos); font-weight: var(--peso-titulo); font-size: var(--t-lista); text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.2; }
.mas-enlace .dato { grid-column: 1; }
.mas-enlace .flecha { grid-column: 2; grid-row: 1 / span 2; width: 22px; height: 14px; }
.mas-enlace:focus-visible { color: var(--color-bronce-oscuro); }
@media (hover: hover) { .mas-enlace:hover { color: var(--color-bronce-oscuro); } }
/* Con todas las secciones (el dueño), arriba: hasta 1599 px, el registro con su nombre corto y, a la derecha, solo «Salir»;
   hasta 1279 px, las de «Más» dentro de «Más» (en una pantalla ancha caben todas). */
.nav-arriba .nav-mas { display: none; }
@media (max-width: 1599px) {
  .panel-cabeza--llena .nav-resto, .panel-cabeza--llena .usuario-nombre, .panel-cabeza--llena .usuario-rol { display: none; }
}
@media (max-width: 1279px) {
  .nav-arriba [data-en-mas] { display: none; }
  .nav-arriba .nav-mas { display: block; }
}

/* Las clases en el panel (etapa 6, tanda B): las mismas filas de la agenda y de los alumnos (la fecha o la hora grande en bronce
   oscuro, las marcas, la hora y el alumno en versales, la línea fina debajo) y los botones de siempre: «Confirmar» en tinta,
   «Reprogramar» y «Asistió» como enlaces en versales, «Cancelar» en rojo con su confirmación en el mismo sitio. Reprogramar usa los
   botones de hora de Reservar (radios de verdad). Nada se mueve al confirmar (FICHA §8: el panel, tranquilo). */
.fila-clase { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: var(--e-6); align-items: start; padding: var(--e-5) 0; border-bottom: var(--hilo) solid var(--hilo-tinta-tenue); }
.fila-clase[data-momento="cancelada"] .fila-fecha, .fila-clase[data-momento="cumplida"] .fila-fecha, .fila-clase[data-momento="no_asistio"] .fila-fecha { color: var(--color-tinta-suave); }
.fila-hora { font-size: var(--t-lista); letter-spacing: 0.02em; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.fila-clase .fila-cuerpo > .dato + .dato { margin-top: var(--e-1); }
.fila-choque { color: var(--color-error-claro); max-width: 46em; }
.marca--choque { color: var(--color-error-claro); }
.marca--hoy { margin-left: var(--e-2); color: var(--color-bronce-oscuro); vertical-align: middle; }
.clase-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-6); margin-top: var(--e-3); }
.clase-acciones:empty { display: none; }
.clase-acciones > .boton-principal { margin-left: calc((var(--boton-caja) - var(--boton-anillo)) / -2); }
.clase-acciones .confirmar { padding-top: 0; }
.clase-acciones .confirmar > .dato { max-width: 34em; margin-top: var(--e-1); }
.clase-acciones .form-resumen { flex-basis: 100%; margin: 0; }
.clase-acciones .form-resumen p { outline: none; }
.inicio-explica { max-width: 46em; margin-bottom: var(--e-3); }
/* El enlace al buzón del simulador (solo en local): pegado a lo de las clases (como «Ver tus clases de la semana») y con el
   aire de siempre antes del bloque siguiente. El margen negativo se suma al del bloque de arriba (los márgenes se juntan). */
.inicio-buzon { margin: calc(var(--e-4) - var(--e-8)) 0 var(--e-8); }
.fila-aviso { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-1) var(--e-5); align-items: center; padding: var(--e-4) 0; border-bottom: var(--hilo) solid var(--hilo-tinta-tenue); }
.fila-aviso > .fila-marcas, .fila-aviso > .aviso-que, .fila-aviso > .dato, .fila-aviso > .form-resumen { grid-column: 1; }
.fila-aviso > .aviso-acciones { grid-column: 2; grid-row: 1 / span 3; }
.aviso-que { font-family: var(--fuente-titulos); font-size: var(--t-bajada); line-height: 1.3; }
.clases-controles { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--e-3) var(--e-6); margin-bottom: var(--e-6); }
.clases-filtros { display: flex; flex-direction: column; gap: var(--e-3); margin: 0; }
.clases-rango { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-5); }
.clases-rango-texto { font-family: var(--fuente-titulos); font-size: var(--t-bajada); line-height: 1.3; font-variant-numeric: tabular-nums lining-nums; }
/* «← Anterior» y «Siguiente →»: un renglón, con el subrayado debajo de la palabra (como los demás enlaces), a 320 px también. */
.clases-rango .enlace { white-space: nowrap; }
.clases[aria-busy] { opacity: 0.6; }
.clases-dia > .etiqueta { margin-bottom: var(--e-2); }
.clase > .aviso { margin-bottom: var(--e-5); }
.clase > .datos { padding-top: 0; border-top: 0; }
.form-reprogramar { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--e-8); align-items: start; }
.reprogramar-horas { grid-column: auto; grid-row: auto; padding-top: 0; }
.reprogramar-resumen { position: sticky; top: var(--e-6); padding-top: var(--e-4); border-top: var(--hilo) solid var(--color-tinta); }
.reprogramar-nueva { font-family: var(--fuente-titulos); font-size: var(--t-lista); line-height: 1.3; margin-bottom: var(--e-3); }
.reprogramar-resumen .form-acciones { border-top: 0; padding-top: 0; }
.form-reprogramar[aria-busy] .boton-principal { cursor: progress; }
/* Las clases que chocan con lo que se acaba de guardar (un concierto, un bloqueo), dentro de su aviso, con «Reprogramar». */
/* En el aviso de lo que salió bien (publicado, bloqueado), solo esto lleva el tono de alerta: su filete, su frase y su lista. */
.aviso-choques { flex-basis: 100%; padding-top: var(--e-3); border-top: var(--hilo) solid var(--color-error-claro); color: var(--color-error-claro); }
.aviso .aviso-choques .aviso-detalle { color: inherit; }
.aviso-choques-lista { margin-top: var(--e-2); }
.aviso-choques-lista li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-1) var(--e-4); padding: var(--e-1) 0; font-size: var(--t-dato); }
.aviso-choques .enlace-texto { color: var(--color-tinta); }
/* Las clases de un alumno en su detalle. */
.alumno-subtitulo { margin: var(--e-3) 0 var(--e-1); }
.clase-alumno .pago-monto { font-family: var(--fuente-texto); font-size: var(--t-dato); }

/* El buzón del simulador (solo en local y en las pruebas): cada WhatsApp como una burbuja de chat, cada correo como una carta. */
.buzon { width: 100%; max-width: calc(1240px + 2 * var(--margen)); margin: 0 auto; padding: var(--e-7) var(--margen) var(--e-9); }
.buzon-marca { display: inline-block; margin-bottom: var(--e-4); padding: 1px var(--e-2); border: var(--hilo) solid var(--color-error-claro); color: var(--color-error-claro); font-size: var(--t-mini); font-weight: 600; letter-spacing: var(--espaciado-etiqueta); text-transform: uppercase; }
.buzon-bajada { max-width: 44em; margin-top: var(--e-2); font-size: var(--t-chico); }
.buzon-volver { margin: var(--e-4) 0 var(--e-6); }
.buzon-columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-8); align-items: start; }
.buzon-seccion > .etiqueta { margin-bottom: var(--e-2); }
.buzon-lista { border-top: var(--hilo) solid var(--hilo-tinta-tenue); }
.buzon-wa, .buzon-correo { padding: var(--e-4) 0; border-bottom: var(--hilo) solid var(--hilo-tinta-tenue); }
.buzon-de { margin-bottom: var(--e-2); overflow-wrap: anywhere; }
.buzon-burbuja { max-width: 420px; padding: var(--e-3) var(--e-4); border: var(--hilo) solid var(--color-tinta); border-radius: 0 12px 12px 12px; }
.buzon-texto, .buzon-cuerpo { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.buzon-botones { display: flex; flex-direction: column; gap: var(--e-1); margin-top: var(--e-3); padding-top: var(--e-2); border-top: var(--hilo) solid var(--hilo-tinta-tenue); }
.buzon-boton { display: flex; align-items: center; justify-content: center; min-height: var(--toque); color: var(--color-bronce-oscuro); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.buzon-asunto { font-family: var(--fuente-titulos); font-weight: var(--peso-titulo); font-size: var(--t-bajada); line-height: 1.3; margin-bottom: var(--e-2); overflow-wrap: anywhere; }

/* ── Tableta y celular ──────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .form-columnas { grid-template-columns: minmax(0, 1fr); gap: var(--e-6); }
  .vista-previa, .consulta-acciones, .reprogramar-resumen { position: static; max-width: 560px; }
  .form-reprogramar, .buzon-columnas { grid-template-columns: minmax(0, 1fr); gap: var(--e-6); }
  /* Una clase en el celular o la tableta: lo que se hace con ella, arriba (al alcance del pulgar). */
  .clase-detalle > .consulta-acciones { order: -1; }
  .nav-arriba ul { gap: var(--e-5); }
  /* Cinco secciones arriba: el registro con su nombre corto y, a la derecha, solo «Salir». */
  .nav-resto, .usuario-nombre, .usuario-rol { display: none; }
}
@media (max-width: 900px) {
  .acceso-titulo { grid-column: 1 / -1; }
  .acceso-form { grid-column: 1 / -1; margin-top: var(--e-6); }
}
@media (max-width: 767px) {
  :root { --margen: var(--margen-celular); }
  .acceso { padding: 20px var(--margen-celular) var(--e-5); }
  .acceso-cabeza { min-height: 0; padding-top: 0; }
  .acceso-cuerpo { align-items: start; padding: var(--e-7) 0 var(--e-6); }
  .acceso-titulo .titulo { font-size: var(--t-titulo); }
  .acceso-titulo .bajada { font-size: var(--t-chico); }
  .acceso-form { max-width: none; }
  .demo-local { margin-top: var(--e-6); padding: var(--e-4); }
  .cuenta-esquina { gap: var(--e-3); }
  .cuenta-cabeza .titulo { font-size: var(--t-titulo); }
  .cuenta-cabeza .bajada { font-size: var(--t-chico); }
  .cuenta-seccion { grid-template-columns: minmax(0, 1fr); padding: var(--e-5) 0 var(--e-6); }
  .cuenta-seccion-titulo, .cuenta-seccion-cuerpo { grid-column: 1 / -1; }
  .cuenta-seccion-titulo { margin-bottom: var(--e-3); }
  .compra { grid-template-columns: 64px minmax(0, 1fr); gap: var(--e-2) var(--e-4); padding: var(--e-4) 0; }
  .compra-cifra { font-size: 40px; }
  .compra-plan { font-size: var(--t-lista); }
  .pago-fila { grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-1) var(--e-4); }
  .pago-fecha { grid-column: 1 / -1; }
  .pago-que { grid-column: 1 / -1; }
  .pago-monto, .pago-estado { text-align: left; }
  .pago-estado { justify-self: end; }
  .pago-accion { grid-column: 1 / -1; }
  /* Reservar en el celular: una columna, y los días en una tira que se desliza (con el dedo, o con las flechas y Tab: el
     foco lleva a la vista el día de la hora elegida). Se ve asomar el día siguiente; la página no se desborda. */
  .reservar { grid-template-columns: minmax(0, 1fr); }
  .reservar-cabeza, .reservar-horas, .reservar-resumen, .reservar--corta .reservar-cabeza { grid-column: 1 / -1; grid-row: auto; }
  .reservar-cabeza .titulo { font-size: var(--t-titulo); }
  .reservar-cabeza .bajada { font-size: var(--t-chico); }
  .reservar-tira {
    display: flex; gap: var(--e-3); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
    margin: 0 calc(var(--margen-celular) * -1); padding: var(--e-4) var(--margen-celular) var(--e-3); scroll-padding-inline: var(--margen-celular);
    border-top: 0;
  }
  /* La línea fina, dentro de los márgenes (la tira llega de borde a borde para deslizarse). */
  .reservar-horas > .dato { margin-bottom: 0; padding-bottom: var(--e-3); border-bottom: var(--hilo) solid var(--hilo-tinta-tenue); }
  .reservar-dia { flex: 0 0 40%; scroll-snap-align: start; }
  .reservar-dia .horas { flex-direction: column; flex-wrap: nowrap; }
  .reservar-dia .eleccion-opcion, .reservar-dia .eleccion-opcion label { display: flex; width: 100%; }
  .reservar-resumen { position: static; margin-top: var(--e-5); }
  .reserva { grid-template-columns: 64px minmax(0, 1fr); gap: var(--e-2) var(--e-4); padding: var(--e-4) 0; }
  .reserva-cuando { font-size: var(--t-lista); }
  .reservas--pasadas .reserva-cuando { font-size: var(--t-chico); }

  .panel-cabeza { grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-4); padding: var(--e-3) var(--margen-celular); }
  .nav-arriba, .usuario-nombre, .usuario-rol { display: none; }
  .panel-contenido { padding: var(--e-6) var(--margen-celular) calc(84px + var(--e-6) + env(safe-area-inset-bottom)); }
  /* Lo que recibe el foco (una confirmación que se abre abajo, el siguiente control con Tab) se desplaza por encima de la
     barra de abajo, nunca debajo de ella. */
  html { scroll-padding-bottom: calc(84px + var(--e-3) + env(safe-area-inset-bottom)); }
  /* Abajo, al alcance del pulgar: Inicio, Agenda, «Nuevo» y el Registro. Su alto queda reservado en el contenido. */
  .nav-abajo {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    padding-bottom: env(safe-area-inset-bottom); background: var(--color-marfil); border-top: var(--hilo) solid var(--color-tinta);
  }
  /* Cinco secciones: los nombres en caja baja (en versales, «Consultas» no cabe en 64 px a 320) y «Nuevo» en su anillo. */
  .nav-abajo ul { display: flex; }
  .nav-abajo li { flex: 1 1 0; min-width: 0; }
  .nav-abajo li.nav-nuevo { flex: 0 0 60px; }
  .nav-abajo .nav-enlace { display: flex; flex-direction: column; justify-content: center; gap: 2px; width: 100%; min-height: 64px; padding: var(--e-1) 0; font-size: 15px; text-transform: none; letter-spacing: 0.01em; text-align: center; }
  .nav-abajo .nav-enlace[aria-current="page"] .nav-texto { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
  .nav-nuevo .redondo { width: 48px; height: 48px; color: var(--color-tinta); }
  .nav-nuevo .anillos { inset: 4px; }
  .nav-nuevo .mas { width: 16px; height: 16px; }
  .nav-nuevo .nav-enlace { min-height: 76px; color: var(--color-tinta); }

  .pagina-cabeza { flex-direction: column; align-items: flex-start; gap: var(--e-3); }
  .pagina-cabeza .nuevo { margin-left: calc((var(--boton-caja) - var(--boton-anillo)) / -2); margin-right: 0; }
  .fila-concierto { grid-template-columns: 64px minmax(0, 1fr); gap: var(--e-2) var(--e-4); padding: var(--e-4) 0; }
  .fila-dia { font-size: 40px; }
  .fila-mes { font-size: var(--t-chico); }
  .fila-acciones { grid-column: 2; }
  .fila-lugar { font-size: var(--t-lista); }
  .campos-fila { grid-template-columns: minmax(0, 1fr); }
  .campos-fila--tres { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-4); }
  .campos-fila--tres > :first-child { grid-column: 1 / -1; }
  .campos-fila--par { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-4); }
  .fotos-opciones { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .form-acciones { gap: var(--e-2) var(--e-5); }
  .registro-fila { grid-template-columns: minmax(0, 1fr); gap: var(--e-1); }
  .solo-celular { display: block; }
  .fila-consulta { grid-template-columns: 64px minmax(0, 1fr); gap: var(--e-2) var(--e-4); padding: var(--e-4) 0; }
  .cifra { font-size: 40px; }
  .datos { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .datos dd { margin-bottom: var(--e-2); }
  .semana-dia { grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-1) var(--e-3); align-items: start; }
  .semana-nombre { grid-column: 1; font-size: var(--t-chico); padding-top: var(--e-3); }
  .semana-agregar { grid-column: 2; grid-row: 1; }
  .semana-bloques, .semana-libre { grid-column: 1 / -1; }
  .bloque-horas, .excepcion-tramo { font-size: var(--t-chico); }
  .vista-dias { grid-template-columns: minmax(0, 1fr); gap: var(--e-4); }
  .grupo-cabeza { flex-direction: column; align-items: flex-start; }
  .fila-alumno, .fila-plan { grid-template-columns: 64px minmax(0, 1fr); gap: var(--e-2) var(--e-4); padding: var(--e-4) 0; }
  .fila-pago { grid-template-columns: 64px minmax(0, 1fr); gap: var(--e-1) var(--e-4); padding: var(--e-4) 0; }
  .fila-pago .pago-monto { grid-column: 2; padding-top: 0; text-align: left; }
  .alumno-cifra { font-size: 40px; }
  .fila-clase { grid-template-columns: 64px minmax(0, 1fr); gap: var(--e-2) var(--e-4); padding: var(--e-4) 0; }
  .fila-hora { font-size: var(--t-chico); }
  .clase-acciones { gap: var(--e-2) var(--e-5); }
  .clases-controles { flex-direction: column; align-items: stretch; }
  /* El rango arriba y «anterior | siguiente» en un renglón (el orden del teclado sigue siendo el del HTML). */
  .clases-rango { display: grid; grid-template-columns: auto auto; justify-content: space-between; }
  .clases-rango-texto { grid-column: 1 / -1; grid-row: 1; }
  .clases-rango [data-ir="despues"] { justify-self: end; } /* «Siguiente →», al borde derecho, frente a «← Anterior» */
  .fila-aviso { grid-template-columns: minmax(0, 1fr); }
  .fila-aviso > .aviso-acciones { grid-column: 1; grid-row: auto; }
  .buzon { padding: var(--e-6) var(--margen-celular) var(--e-8); }
  .compras--panel .compra { grid-template-columns: 64px minmax(0, 1fr); gap: var(--e-2) var(--e-4); }
  .compras--panel .compra-cifra { font-size: 40px; }
  .pago-alumno { grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-1) var(--e-4); }
  .pago-alumno .pago-cuando { grid-column: 1 / -1; }
  .filtros--pagos { flex-direction: column; align-items: stretch; gap: var(--e-3); }
  .campo--mes { min-width: 0; }
  .pagos-exportar { margin-left: 0; }
  .plan-precios { font-size: var(--t-chico); }
  .mas-nombre { font-size: var(--t-bajada); }
}
/* La barra de abajo a 360 px o menos: sus cinco secciones caben sin apretarse (320 px: 65 px cada una y 60 la de «Nuevo»). */
@media (max-width: 360px) {
  .nav-abajo .nav-enlace { font-size: 13px; letter-spacing: 0; }
}

/* ── Reducir movimiento: nada se desplaza ni crece (los colores siguen respondiendo) ── */
@media (prefers-reduced-motion: reduce) {
  .con-etiqueta:hover > .versales, .con-etiqueta:focus-visible > .versales { transform: none; }
  .redondo:active .mas, .boton-principal:active .flecha { transform: none; }
  .enlace::after, .idioma::after, .nav-enlace::after, .saltar { transition-duration: var(--mov-reducido); }
}