/* Rock Camp — estilos base del sistema nuevo.
   Provisional: en el bloque 3 se ajustará a la imagen de la web. */

:root {
  --naranja: #e85f1a;
  --tinta:   #1c1c1e;
  --gris:    #6b6b70;
  --linea:   #dcdce0;
  --fondo:   #fbfbfc;
  --ok:      #17683a;
  --error:   #b3261e;
}

* { box-sizing: border-box; }

/* Lo que lleva el atributo hidden no se ve, nunca. Sin esto, cualquier
   clase con display (un botón inline-flex, una tarjeta…) lo vuelve a
   enseñar: así se colaba el «Recalcular el precio» del paso 3, que solo es
   para navegadores sin JavaScript. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--tinta);
  background: var(--fondo);
}

a { color: var(--naranja); }

/* ── Barra de modo pruebas ─────────────────────────────────────────── */

.barra-pruebas {
  background: var(--naranja);
  color: #fff;
  padding: .55rem 1rem;
  font-size: .875rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
}
.barra-pruebas a { color: #fff; }
.barra-pruebas span { flex: 1 1 auto; }

/* ── Cabecera y pie ────────────────────────────────────────────────── */

.cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--linea);
  background: #fff;
}
.cabecera .logo {
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  color: var(--tinta);
}
.cabecera .logo img { display: block; height: 46px; width: auto; }
.cabecera nav { display: flex; gap: 1rem; align-items: center; }
.cabecera .quien { color: var(--gris); font-size: .875rem; }

.contenido {
  max-width: 38rem;
  margin: 2.5rem auto;
  padding: 0 1.25rem;
}

.pie {
  max-width: 38rem;
  margin: 3rem auto 2rem;
  padding: 0 1.25rem;
  color: var(--gris);
  font-size: .875rem;
}

h1 { font-size: 1.6rem; margin: 0 0 1rem; }
h2 { font-size: 1.2rem; margin: 2rem 0 .75rem; }

.secundario { color: var(--gris); font-size: .9rem; }
.grande { font-size: 1.1rem; }
.centrado { text-align: center; padding: 2rem 0; }

/* ── Avisos ────────────────────────────────────────────────────────── */

.aviso {
  padding: .7rem .9rem;
  border-radius: 6px;
  border: 1px solid;
  margin: 0 0 1.25rem;
}
.aviso-ok    { color: var(--ok);    border-color: #b6dcc4; background: #eef8f1; }
.aviso-error { color: var(--error); border-color: #f0c2be; background: #fdeeed; }

/* ── Formularios ───────────────────────────────────────────────────── */

.formulario {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  max-width: 24rem;
}
.formulario label {
  font-weight: 600;
  font-size: .875rem;
  margin-top: .75rem;
}
.formulario input {
  font: inherit;
  padding: .6rem .7rem;
  border: 1px solid var(--linea);
  border-radius: 6px;
  background: #fff;
}
.formulario input:focus {
  outline: 2px solid var(--naranja);
  outline-offset: 1px;
  border-color: var(--naranja);
}
.formulario small { color: var(--gris); font-size: .8rem; }
.formulario button {
  font: inherit;
  font-weight: 600;
  margin-top: 1.5rem;
  padding: .7rem 1rem;
  border: 0;
  border-radius: 6px;
  background: var(--naranja);
  color: #fff;
  cursor: pointer;
}
.formulario button:hover { filter: brightness(.94); }

/* ── Tablas de diagnóstico ─────────────────────────────────────────── */

.tabla { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabla th, .tabla td {
  text-align: left;
  padding: .45rem .6rem;
  border-bottom: 1px solid var(--linea);
  vertical-align: top;
}
.tabla th { width: 42%; font-weight: 600; }
.si  { color: var(--ok); font-weight: 600; }
.no  { color: var(--error); font-weight: 600; }
.ojo { color: #9a6700; font-weight: 600; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .85em;
  background: #f0f0f2;
  padding: .1em .35em;
  border-radius: 3px;
}

/* ── Pantallas de gestión ──────────────────────────────────────────── */

/* Las tablas y formularios de gestión necesitan más ancho que el flujo
   normal de lectura. */
body.admin .contenido,
body.admin .pie { max-width: 62rem; }

.formulario.ancho { max-width: 100%; }

.formulario select {
  font: inherit;
  padding: .6rem .7rem;
  border: 1px solid var(--linea);
  border-radius: 6px;
  background: #fff;
}

/* Un botón que parece un enlace: para acciones destructivas dentro de
   una tabla, donde un botón sólido pesa demasiado. */
button.enlace {
  font: inherit;
  color: var(--error);
  background: none;
  border: 0;
  padding: 0 0 0 .5rem;
  cursor: pointer;
  text-decoration: underline;
}

/* Las tablas de gestión llevan muchas columnas: que la primera no se
   coma el ancho como en las de diagnóstico. */
.contenido table.tabla th { width: auto; }

/* En pantallas estrechas, que la tabla haga scroll ella sola en vez de
   desbordar la página entera. */
@media (max-width: 47rem) {
  table.tabla { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ── Barra de sesión suplantada ─────────────────────────────────────
   TEMPORAL: se va junto con la contraseña maestra. */

.barra-suplantacion {
  background: var(--error);
  color: #fff;
  padding: .55rem 1rem;
  font-size: .875rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
}
.barra-suplantacion a { color: #fff; }
.barra-suplantacion span { flex: 1 1 auto; }

/* Un borde permanente alrededor de la página, para que no haya forma de
   olvidar que la sesión no es real ni haciendo scroll. */
body.suplantado { box-shadow: inset 0 0 0 3px var(--error); }

/* Casillas de verificación con su etiqueta al lado, no encima */
.formulario label.casilla {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  font-weight: 400;
  margin-top: .2rem;
}
.formulario label.casilla input { width: auto; }

button.enlace.neutro { color: var(--naranja); }

/* Listas de definición de la ayuda en pantalla */
dl.ayuda { font-size: .9rem; }
dl.ayuda dt { font-weight: 600; margin-top: .75rem; }
dl.ayuda dd { margin: .15rem 0 0; color: var(--gris); }

/* ── Formulario de inscripción ──────────────────────────────────────── */

ol.pasos {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  font-size: .875rem;
  color: var(--gris);
}
ol.pasos .actual { color: var(--naranja); font-weight: 600; }
ol.pasos .hecho  { color: var(--ok); }

.turno {
  border: 1px solid var(--linea);
  border-radius: 8px;
  padding: .9rem 1rem;
  margin-bottom: .75rem;
  background: #fff;
}
.turno.no-disponible { opacity: .55; background: var(--fondo); }
.turno .casilla { display: flex; gap: .6rem; align-items: flex-start; }
.turno .detalle-turno { margin: .5rem 0 0 1.6rem; font-size: .875rem; }
.turno .detalle-turno p { margin: .2rem 0; }
.turno .detalle-turno select { margin-top: .3rem; }

a.boton {
  display: inline-block;
  font-weight: 600;
  padding: .7rem 1.2rem;
  border-radius: 6px;
  background: var(--naranja);
  color: #fff;
  text-decoration: none;
}
a.boton:hover { filter: brightness(.94); }

/* Subtítulos dentro de un formulario largo */
.formulario h3 {
  font-size: 1rem;
  margin: 1.75rem 0 .25rem;
  padding-top: .75rem;
  border-top: 1px solid var(--linea);
}
/* Campos que se atenúan al marcar «un solo tutor». Siguen siendo hijos
   directos del formulario, así que se colocan igual que los demás. */
.formulario .atenuado { opacity: .45; transition: opacity .15s; }

/* ── Pagos ─────────────────────────────────────────────────────────── */

.tabla td.num, .tabla th.num { text-align: right; white-space: nowrap; }
.contenido table.tabla td.num { width: auto; }

button.boton {
  display: inline-block;
  padding: .7rem 1.4rem;
  background: var(--naranja);
  color: #fff;
  border: 0;
  border-radius: .4rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
button.boton:hover { filter: brightness(.94); }

/* Situación de la cuenta, arriba del calendario de plazos. */
.resumen-saldo {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1rem 0 1.5rem;
}
.resumen-saldo > div {
  flex: 1 1 8rem;
  padding: .8rem 1rem;
  border: 1px solid var(--borde);
  border-radius: .5rem;
  background: #fff;
}
.resumen-saldo span {
  display: block;
  font-size: .8rem;
  color: var(--gris);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.resumen-saldo strong { font-size: 1.3rem; }
.resumen-saldo .destacado { border-color: var(--naranja); }
.resumen-saldo .destacado strong { color: var(--naranja); }

/* Un plazo pagado se ve apagado; uno vencido, avisando. */
.tabla tr.estado-pagado  { color: var(--gris); }
.tabla tr.estado-vencido td { background: #fdeeed; }
.tabla tr.estado-parcial td { background: #fffbe9; }

fieldset.tarjetas {
  margin: 1.2rem 0;
  padding: .8rem 1rem;
  border: 1px solid var(--borde);
  border-radius: .5rem;
}
fieldset.tarjetas legend { font-weight: 600; padding: 0 .4rem; }
fieldset.tarjetas label { display: block; margin: .4rem 0; }

.campo-check { margin: 1.2rem 0; }

/* ── Recálculo en vivo y modal (paso 3) ────────────────────────────── */

.calculando {
  font-size: .75rem;
  font-weight: 400;
  color: var(--gris);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.formulario label.casilla.no-disponible { opacity: .45; }

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 50;
}
.modal[hidden] { display: none; }
.modal-caja {
  background: #fff;
  border-radius: .6rem;
  padding: 1.5rem;
  max-width: 26rem;
  width: 100%;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, .25);
}
.modal-caja h2 { margin-top: 0; }

/* El instrumento de cada turno: una línea discreta dentro del turno. */
.turno .instrumento-del-turno {
  display: flex;
  gap: .5rem;
  align-items: center;
  margin: .6rem 0 0;
  font-size: .875rem;
}
.turno .instrumento-del-turno label { color: var(--gris); white-space: nowrap; }
.turno .instrumento-del-turno select { margin: 0; width: auto; }

/* ── Condiciones del seguro ────────────────────────────────────────── */

details.condiciones {
  margin: 1rem 0 1.5rem;
  padding: .8rem 1rem;
  border: 1px solid var(--borde);
  border-radius: .5rem;
  background: #fff;
  font-size: .9rem;
}
details.condiciones summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--naranja);
}
details.condiciones[open] summary { margin-bottom: .8rem; }
details.condiciones h3 {
  font-size: .95rem;
  margin: 1.2rem 0 .4rem;
}
details.condiciones h3:first-of-type { margin-top: .4rem; }
details.condiciones ul { margin: .4rem 0 .4rem 1.2rem; padding: 0; }
details.condiciones li { margin: .3rem 0; }

/* ── Bloques de edición en la ficha ────────────────────────────────── */

details.editar {
  margin: .5rem 0 1.5rem;
  padding: .6rem .9rem;
  border: 1px solid var(--linea);
  border-radius: .4rem;
  background: #fff;
}
details.editar summary {
  cursor: pointer;
  font-size: .875rem;
  color: var(--naranja);
}
details.editar[open] summary { margin-bottom: .8rem; }
details.editar .formulario { max-width: 100%; margin: 0; }
details.editar textarea {
  width: 100%;
  padding: .5rem .6rem;
  border: 1px solid var(--linea);
  border-radius: .3rem;
  font: inherit;
}

/* ── Buscador de inscripciones ─────────────────────────────────────── */

.buscador { margin: 1.5rem 0 2rem; }

/* El campo de búsqueda: grande, con la lupa dentro y el naranja del
   campamento solo al enfocarlo. Es lo primero que se toca al abrir la
   pantalla, así que se merece sitio. */
.buscador-caja {
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: .6rem;
  transition: border-color .15s, box-shadow .15s;
}
.buscador-caja:focus-within {
  border-color: var(--naranja);
  box-shadow: 0 0 0 3px rgba(232, 95, 26, .14);
}

.buscador-lupa {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin-left: 1rem;
  fill: none;
  stroke: var(--gris);
  stroke-width: 2;
  stroke-linecap: round;
}
.buscador-caja:focus-within .buscador-lupa { stroke: var(--naranja); }

.buscador input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: .85rem .9rem;
  border: 0;
  background: none;
  font: 400 1.15rem/1.3 inherit;
  color: var(--tinta);
}
.buscador input[type="search"]:focus { outline: none; }
.buscador input[type="search"]::placeholder { color: #a5a2a8; }
.buscador input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }

.buscador-estado {
  flex: 0 0 auto;
  padding-right: 1rem;
  font-size: .78rem;
  color: var(--gris);
  letter-spacing: .02em;
}

/* ── Pastillas de filtro ───────────────────────────────────────────── */

.filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin-top: .9rem;
}

.filtros-rotulo {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gris);
  margin-right: .2rem;
}

.filtros-separador {
  width: 1px;
  height: 1.1rem;
  background: var(--linea);
  margin: 0 .5rem;
}

/* Por dentro sigue siendo un checkbox o un radio: el teclado y los
   lectores de pantalla lo entienden igual. Solo se esconde el cuadrito. */
.pastilla { display: inline-flex; cursor: pointer; }
.pastilla input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.pastilla span {
  display: inline-block;
  padding: .32rem .7rem;
  border: 1px solid var(--linea);
  border-radius: 2rem;
  background: #fff;
  font-size: .82rem;
  color: var(--gris);
  transition: background .12s, border-color .12s, color .12s;
  user-select: none;
}
.pastilla:hover span { border-color: #bfbcc4; color: var(--tinta); }
.pastilla input:checked + span {
  background: var(--naranja);
  border-color: var(--naranja);
  color: #fff;
}
.pastilla input:focus-visible + span {
  outline: 2px solid var(--naranja);
  outline-offset: 2px;
}

/* ── Resultados ────────────────────────────────────────────────────── */

.tabla.resultados { border-collapse: separate; border-spacing: 0; }
.tabla.resultados td {
  vertical-align: middle;
  padding: .75rem .6rem;
  border-bottom: 1px solid var(--linea);
}
.tabla.resultados td:first-child { padding-left: 0; }
.tabla.resultados td:last-child  { padding-right: 0; }
.tabla.resultados tr:hover td { background: #fdf7f3; }

/* Un círculo por plazo. El color dice el estado y el número, cuál es. */
.plazos-vistazo { white-space: nowrap; }

.plazo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  margin-right: .25rem;
  border: 2px solid;
  border-radius: 50%;
  font-size: .78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: help;
}
.plazo.pagado    { color: var(--ok);      border-color: var(--ok); }
.plazo.pendiente { color: var(--error);   border-color: var(--error); }
.plazo.vencido   { color: #fff; background: var(--error); border-color: var(--error); }
.plazo.parcial   { color: #9a6700;        border-color: #9a6700; }
.plazo.saldo     { color: var(--naranja); border-color: var(--naranja); }

button.copiar-enlace {
  border: 0;
  background: none;
  color: #b8b5bd;
  cursor: pointer;
  font-size: .95rem;
  padding: .15rem .25rem;
  line-height: 1;
  border-radius: .25rem;
  vertical-align: .05em;
}
button.copiar-enlace:hover { color: var(--naranja); background: #fdf0e8; }
button.copiar-enlace.hecho { color: var(--ok); }

/* ── Ficha de una inscripción ──────────────────────────────────────── */

/* Cabecera: quién es y en qué estado está, antes que nada. */
.ficha-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .6rem 1rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--tinta);
}
.ficha-cabecera h1 { margin: 0; font-size: 1.8rem; letter-spacing: -.015em; }
.ficha-migas { width: 100%; margin: 0 0 .4rem; font-size: .85rem; }
.ficha-meta {
  width: 100%;
  margin: .5rem 0 0;
  font-size: .85rem;
  color: var(--gris);
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .8rem;
  align-items: center;
}

/* El estado, como una etiqueta que se lee de lejos. */
.estado-pill {
  display: inline-block;
  padding: .2rem .6rem;
  border-radius: 2rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.estado-pill.confirmada     { background: #e6f0e9; color: var(--ok); }
.estado-pill.pendiente_pago { background: #fdf0e8; color: #a8480f; }
.estado-pill.cancelada      { background: #f0eeee; color: var(--gris); }
.estado-pill.prueba         { background: #f7efdc; color: #8a6100; }

/* Las cifras de dinero, en una tira compacta. */
.cifras-ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0;
  margin: 1.5rem 0 2rem;
  border: 1px solid var(--linea);
  border-radius: .6rem;
  background: #fff;
  overflow: hidden;
}
.cifras-ficha > div, .cifras-ficha > a {
  padding: .9rem 1.1rem;
  border-right: 1px solid var(--linea);
}
.cifras-ficha > :last-child { border-right: 0; }
/* «A devolver» lleva a donde se devuelve. */
.cifras-ficha > a { color: inherit; text-decoration: none; transition: background .15s; }
.cifras-ficha > a:hover { background: #fdf3ec; }
.cifras-ficha > a small { display: block; margin-top: .15rem; font-size: .75rem; color: var(--naranja); font-weight: 600; }
.cifras-ficha span {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--gris);
}
.cifras-ficha strong {
  display: block;
  margin-top: .3rem;
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
}
.cifras-ficha .debe strong    { color: var(--naranja); }
.cifras-ficha .al-dia strong  { color: var(--ok); }

/* Dos columnas cuando cabe. */
.ficha-columnas {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 60rem) {
  .ficha-columnas { grid-template-columns: 1fr; }
}

/* Cada bloque, una tarjeta con su título. */
.tarjeta {
  border: 1px solid var(--linea);
  border-radius: .6rem;
  background: #fff;
  margin-bottom: 1.5rem;
  overflow: hidden;
}
.tarjeta > h2 {
  margin: 0;
  padding: .8rem 1.1rem;
  border-bottom: 1px solid var(--linea);
  background: #fbfaf9;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .01em;
}
.tarjeta-cuerpo { padding: 1.1rem; }
.tarjeta-cuerpo > :first-child { margin-top: 0; }
.tarjeta-cuerpo > :last-child  { margin-bottom: 0; }

/* Datos en pares rótulo/valor, sin tabla. */
.datos { margin: 0; font-size: .92rem; }
.datos > div {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: .3rem .9rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--linea-suave, #f0eeec);
}
.datos > div:last-child { border-bottom: 0; }
.datos dt { color: var(--gris); font-size: .82rem; padding-top: .1rem; }
.datos dd { margin: 0; }
.datos dd small { color: var(--gris); }
@media (max-width: 34rem) {
  .datos > div { grid-template-columns: 1fr; gap: .1rem; }
}

/* Un turno dentro de la ficha. */
.turno-ficha {
  padding: .8rem 0;
  border-bottom: 1px solid #f0eeec;
}
.turno-ficha:first-child { padding-top: 0; }
.turno-ficha:last-child  { border-bottom: 0; padding-bottom: 0; }
.turno-ficha h3 { margin: 0 0 .2rem; font-size: 1rem; }
.turno-ficha .etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-top: .45rem;
}
.etiqueta-dato {
  display: inline-block;
  padding: .15rem .55rem;
  border: 1px solid var(--linea);
  border-radius: 2rem;
  font-size: .75rem;
  color: var(--gris);
  background: var(--fondo);
}

/* Plazos, cada uno con su círculo. */
.lista-plazos { list-style: none; margin: 0; padding: 0; }
.lista-plazos li {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .6rem 0;
  border-bottom: 1px solid #f0eeec;
}
.lista-plazos li:last-child { border-bottom: 0; }
.lista-plazos .cuando { flex: 1 1 auto; font-size: .85rem; color: var(--gris); }
.lista-plazos .cuanto {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

/* Movimientos: extracto y cobros. */
.movimientos { width: 100%; border-collapse: collapse; font-size: .88rem; }
.movimientos th, .movimientos td {
  padding: .5rem .4rem;
  border-bottom: 1px solid #f0eeec;
  text-align: left;
  vertical-align: top;
}
.movimientos thead th {
  font-size: .72rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--gris);
  font-weight: 600;
}
.movimientos td.num, .movimientos th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.movimientos tr:last-child td { border-bottom: 0; }
.movimientos .abono { color: var(--ok); }

/* Las acciones, discretas dentro de su tarjeta. */
.tarjeta details.editar {
  margin: 1rem -1.1rem -1.1rem;
  border: 0;
  border-top: 1px solid var(--linea);
  border-radius: 0;
  background: #fbfaf9;
  padding: .7rem 1.1rem;
}
.vacio { color: var(--gris); font-size: .9rem; margin: 0; }

/* ── Cancelar desde la ficha ───────────────────────────────────────── */

details.editar-peligro { border-color: #f0c2be; background: #fffafa; }
details.editar-peligro summary { color: var(--error); }
.boton-peligro, .formulario button.boton-peligro { background: var(--error); }
.boton-peligro:hover { filter: brightness(.9); }

/* ── Inscripciones sin terminar ────────────────────────────────────── */

.cifras-ficha.embudo small {
  display: block; margin-top: .15rem;
  font-size: .8rem; font-weight: 600; color: var(--gris);
}

.embudo-pasos {
  display: grid; gap: .45rem;
  margin: 0 0 1.5rem; padding: 1rem 1.1rem;
  border: 1px solid var(--linea); border-radius: 10px; background: #fff;
}
.embudo-paso { display: grid; grid-template-columns: 10rem 1fr; gap: .9rem; align-items: center; font-size: .9rem; }
.embudo-barra { height: 8px; border-radius: 999px; background: #efedf0; overflow: hidden; }
.embudo-barra span { display: block; height: 100%; border-radius: inherit; background: var(--naranja); min-width: 3px; }

.lista-borradores { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.borrador {
  display: grid;
  grid-template-columns: minmax(12rem, 1.3fr) minmax(12rem, 1.4fr) minmax(11rem, 1.1fr) 7rem;
  gap: .4rem 1.2rem; align-items: start;
  padding: .9rem 1.1rem;
  border: 1px solid var(--linea); border-radius: 10px; background: #fff;
  font-size: .9rem;
}
.borrador:hover { border-color: #e9c3ad; }
.borrador > div { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.borrador-quien strong { font-size: 1rem; }
.borrador-contacto a { color: var(--tinta); text-decoration: none; overflow-wrap: anywhere; }
.borrador-contacto a:hover { color: var(--naranja); text-decoration: underline; }
.borrador-cuando { text-align: right; }
.borrador.estado-terminado, .borrador.estado-descartado { background: #fbfbfc; }
.borrador .estado-pill { align-self: flex-start; }

/* El recordatorio por correo: una etiqueta pequeña bajo la fecha. */
.borrador-recordado {
  align-self: flex-end;
  display: inline-flex; align-items: center; gap: .3rem;
  margin-top: .3rem; padding: .15rem .55rem;
  border-radius: 2rem; background: #eef4fb; color: #2c5c8f;
  font-size: .75rem; font-weight: 600; white-space: nowrap;
}
.borrador-recordado .icono { width: .95rem; height: .95rem; flex: none; }
.aviso-nota { color: #7a5600; border-color: #ecd9a8; background: #fdf8ea; }

.paso-barras { display: flex; gap: .25rem; margin-bottom: .15rem; }
.paso-barras span { width: 1.8rem; height: 6px; border-radius: 999px; background: #e6e4e8; }
.paso-barras span.hecho { background: var(--ok); }
.paso-barras span.ahora { background: var(--naranja); }

.borrador-detalle { grid-column: 1 / -1; }
.borrador-detalle summary { cursor: pointer; color: var(--gris); font-size: .85rem; width: max-content; }
.borrador-detalle[open] summary { margin-bottom: .5rem; }

.vacio-lista {
  padding: 2rem; text-align: center; color: var(--gris);
  border: 1px dashed var(--linea); border-radius: 10px;
}

@media (max-width: 52rem) {
  .borrador { grid-template-columns: 1fr 1fr; }
  .borrador-cuando { text-align: left; }
  .borrador-recordado { align-self: flex-start; }
}
@media (max-width: 34rem) {
  .borrador { grid-template-columns: 1fr; }
  .embudo-paso { grid-template-columns: 1fr; gap: .3rem; }
}

/* ── El formulario guarda solo ─────────────────────────────────────── */

.guardado-aviso { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: baseline; }
.guardado-estado { color: var(--ok); font-weight: 600; font-size: .85rem; }

/* ── Iconos (src/Iconos.php) ────────────────────────────────────────── */

.icono { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }

/* ── La barra de gestión ────────────────────────────────────────────── */

.gestion-nav {
  position: sticky; top: 0; z-index: 40;
  background: var(--tinta);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
}
.gestion-nav-dentro {
  display: flex; align-items: center; gap: .15rem;
  max-width: 76rem; margin: 0 auto; padding: .4rem 1rem;
  overflow-x: auto; scrollbar-width: none;
}
.gestion-nav-dentro::-webkit-scrollbar { display: none; }
.gestion-nav a,
.gestion-nav summary {
  flex: none; display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .75rem; border-radius: 8px;
  color: #d9d8dc; text-decoration: none; font-size: .9rem; font-weight: 600;
  white-space: nowrap; cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.gestion-nav a:hover, .gestion-nav summary:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.gestion-nav a.actual,
.gestion-nav .gn-ajustes.actual > summary { background: var(--naranja); color: #fff; }
.gestion-nav .icono { width: 18px; height: 18px; vertical-align: 0; }
.gn-separador { flex: none; width: 1px; height: 1.4rem; margin: 0 .35rem; background: rgba(255, 255, 255, .15); }

.gn-ajustes { position: relative; flex: none; }
.gn-ajustes summary { list-style: none; }
.gn-ajustes summary::-webkit-details-marker { display: none; }
.gn-menu {
  position: fixed; z-index: 60;
  margin-top: .35rem; min-width: 16rem; padding: .5rem;
  border-radius: 12px; background: #fff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .2);
}
.gn-menu p {
  margin: .5rem .6rem .25rem; font-size: .7rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gris);
}
.gn-menu a { display: flex; color: var(--tinta); font-weight: 500; }
.gn-menu a:hover { background: #f4f3f5; color: var(--tinta); }
.gn-menu a.actual { background: #fdf0e8; color: #a8480f; }

/* ── El panel ───────────────────────────────────────────────────────── */

.panel-cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.panel-cabecera h1 { margin: 0; font-size: 2rem; letter-spacing: -.02em; }
.panel-antetitulo { margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--naranja); }
.panel-cabecera .boton { display: inline-flex; align-items: center; gap: .45rem; }

.panel-cifras {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(7.6rem, 1fr)); gap: .55rem;
  margin: 0 0 2rem;
}
.panel-cifras a {
  display: flex; flex-direction: column; gap: .15rem;
  padding: .8rem .85rem; border-radius: 12px;
  border: 1px solid var(--linea); background: #fff;
  color: var(--tinta); text-decoration: none;
  transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.panel-cifras a:hover { border-color: #e9c3ad; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0, 0, 0, .06); }
.panel-cifras span { font-size: .78rem; font-weight: 700; color: var(--gris); }
.panel-cifras strong { font-size: clamp(1.25rem, 2vw, 1.7rem); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.panel-cifras small { font-size: .78rem; color: var(--gris); }
.panel-cifras .bien strong { color: var(--ok); }
.panel-cifras .atencion { border-color: #f3c9b1; background: #fffaf6; }
.panel-cifras .atencion strong { color: var(--naranja); }
.panel-cifras .mal { border-color: #f0c2be; background: #fdf4f3; }
.panel-cifras .mal strong, .panel-cifras .mal span { color: var(--error); }

.panel-grupo { margin: 0 0 1.75rem; }
.panel-grupo h2 {
  margin: 0 0 .7rem; font-size: .8rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gris);
}
.panel-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: .7rem; }

.panel-tarjeta {
  display: flex; align-items: flex-start; gap: .9rem;
  padding: 1rem 1.1rem; border-radius: 14px;
  border: 1px solid var(--linea); background: #fff;
  color: var(--tinta); text-decoration: none;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.panel-tarjeta:hover { border-color: #e9c3ad; box-shadow: 0 6px 18px rgba(0, 0, 0, .07); transform: translateY(-1px); }
.panel-tarjeta-icono {
  flex: none; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 11px;
  background: #fdf0e8; color: var(--naranja);
}
.panel-tarjeta-icono .icono { width: 21px; height: 21px; }
.panel-tarjeta-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.panel-tarjeta-texto strong { font-size: 1rem; }
.panel-tarjeta-texto span { font-size: .84rem; color: var(--gris); line-height: 1.4; }
.panel-tarjeta-dato {
  align-self: flex-start; margin-top: .35rem;
  padding: .2rem .6rem; border-radius: 999px;
  background: #f4f3f5; color: var(--tinta);
  font-style: normal; font-size: .76rem; font-weight: 700; white-space: nowrap;
}
.panel-tarjeta.atencion .panel-tarjeta-dato { background: #fdf0e8; color: #a8480f; }
.panel-tarjeta.mal .panel-tarjeta-dato { background: #fdeeed; color: var(--error); }

.panel-grupo-discreto .panel-tarjeta-icono { background: #f1f0f3; color: var(--gris); }

.panel-plegado summary { display: flex; align-items: baseline; gap: .75rem; cursor: pointer; list-style: none; }
.panel-plegado summary::-webkit-details-marker { display: none; }
.panel-plegado summary h2 { margin: 0; }
.panel-plegado summary h2::before { content: "▸ "; }
.panel-plegado[open] summary h2::before { content: "▾ "; }
.panel-plegado summary span { font-size: .82rem; color: var(--gris); }
.panel-plegado[open] summary { margin-bottom: .7rem; }

/* ── Lista de espera (admin/lista-espera) ──────────────────────────── */

button.boton.boton-secundario { background: #fff; color: var(--tinta); box-shadow: inset 0 0 0 1px #d8d4dc; }
button.boton.boton-secundario:hover { background: #f6f4f2; filter: none; }
button.boton .icono { width: 1rem; height: 1rem; vertical-align: -.15em; margin-right: .2rem; }

.le-admin-turno { margin: 2rem 0; }
.le-admin-turno h2 { margin: 0 0 .5rem; font-size: 1.35rem; }
.le-admin-turno h3 { margin: 1.1rem 0 .5rem; font-size: 1rem; }
.le-admin-libre { display: flex; gap: .5rem; align-items: flex-start; }
.le-admin-libre .icono { flex: none; width: 1.2rem; height: 1.2rem; }
.le-admin-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.le-admin-lista > li {
  display: grid; grid-template-columns: 2.4rem minmax(0, 1.2fr) minmax(0, 1.2fr) 8.5rem 20rem;
  gap: .8rem; align-items: center;
  padding: .8rem 1rem; border-radius: 12px;
  background: #fff; box-shadow: 0 1px 2px rgba(20, 20, 22, .06), 0 4px 12px rgba(20, 20, 22, .05);
}
.le-admin-lista > li.inactiva { opacity: .6; }
.le-admin-puesto {
  display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  font-weight: 900; color: #fff; background: var(--naranja);
}
.le-admin-lista > li.inactiva .le-admin-puesto { background: #c9c5cc; }
.le-admin-quien, .le-admin-contacto, .le-admin-estado { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.le-admin-espera { display: flex; flex-wrap: wrap; gap: .3rem; margin: .15rem 0; }
.le-admin-espera em {
  font-style: normal; font-size: .72rem; font-weight: 800; letter-spacing: .04em;
  padding: .1rem .5rem; border-radius: 999px; background: #f0eeec; color: var(--gris);
}
.le-admin-espera em.ins { background: #e3f5f4; color: #1f8987; }
.le-admin-contacto a, .le-admin-contacto span {
  color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.le-admin-estado small { color: var(--gris); }
.le-admin-acciones { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }
.le-admin-acciones form { display: flex; gap: .4rem; margin: 0; }
.le-admin-acciones button.boton { padding: .45rem .8rem; font-size: .85rem; }
@media (max-width: 900px) {
  .le-admin-lista > li { grid-template-columns: 2.4rem minmax(0, 1fr); }
  .le-admin-contacto, .le-admin-estado, .le-admin-acciones { grid-column: 2; justify-content: flex-start; }
}


/* ── Años anteriores (Historico): consulta del sistema viejo ────────── */

.estado-pill.historico { background: #eef0f6; color: #48506b; }
.etiqueta-historico {
  display: inline-block; margin-left: .35rem; padding: .05rem .45rem;
  border-radius: 2rem; font-size: .72rem; font-weight: 700;
  background: #eef0f6; color: #48506b; vertical-align: .1em;
}
.historico-aviso { border-left: 4px solid #8a93b4; }
.resultados-historico tr[class^="historico-"] td { opacity: .72; }
.historico-extras { display: flex; flex-wrap: wrap; gap: .2rem .7rem; margin-top: .15rem; color: var(--gris); }
.historico-extras > span { display: inline-flex; align-items: center; gap: .25rem; }
.historico-extras .icono { width: .95rem; height: .95rem; }
/* Los años del sistema antiguo, en otro tono */
.pastilla-historico span { background: #f3f4f8; }
.pastilla-historico input:checked + span { background: #48506b; border-color: #48506b; color: #fff; }
.filtros-anos { row-gap: .4rem; }
.filtros-atajos { display: inline-flex; gap: .3rem; margin-left: .3rem; }
.filtros-atajos button {
  margin: 0; padding: .3rem .7rem; border: 0; border-radius: 2rem;
  background: none; color: var(--naranja); font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer;
}
.filtros-atajos button:hover { background: #fdf0e8; }
.resultados-titulo { margin: 1.6rem 0 .4rem; font-size: 1.05rem; }
.resultados-titulo small { color: var(--gris); font-weight: 400; font-size: .85rem; }
.historico-compras, .historico-lista { list-style: none; margin: 0; padding: 0; }
.historico-compras li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .45rem 0; border-bottom: 1px solid var(--linea-suave, #f0eeec); font-size: .92rem;
}
.historico-compras li:last-child, .historico-lista li:last-child { border-bottom: 0; }
.historico-lista li {
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  padding: .45rem 0; border-bottom: 1px solid var(--linea-suave, #f0eeec);
}

/* La mano del logo es alta y estrecha: un poco más grande que los iconos
   de trazo para que pese lo mismo a la vista. */
.icono.icono-relleno { width: 1.35em; height: 1.35em; vertical-align: -.3em; }

/* ── Devolver dinero (ficha de la inscripción y Cobros y devoluciones) ── */

.movimientos tr.es-devolucion td:first-child { color: var(--gris); }

details.devolver[open] { background: #fff; }
.devolver-cobros { border: 0; margin: 0 0 .4rem; padding: 0; display: grid; gap: .45rem; }
.devolver-cobros legend { font-weight: 600; font-size: .9rem; margin-bottom: .35rem; padding: 0; }
.devolver-cobro {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .7rem;
  align-items: start;
  padding: .7rem .8rem;
  border: 1px solid var(--linea);
  border-radius: .5rem;
  background: #fff;
  cursor: pointer;
  font-weight: 400;
  transition: border-color .15s, box-shadow .15s;
}
.devolver-cobro:hover { border-color: #e9b99c; }
.devolver-cobro:has(input:checked) { border-color: var(--naranja); box-shadow: 0 0 0 3px #fbe3d4; }
.devolver-cobro input { margin: .25rem 0 0; accent-color: var(--naranja); width: auto; }
.devolver-cobro-que { font-size: .88rem; line-height: 1.4; }
.devolver-cobro-que small { display: block; color: var(--gris); font-size: .78rem; margin-top: .15rem; }
.devolver-cobro-cuanto { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.devolver-cobro-cuanto small { display: block; font-weight: 400; font-size: .7rem; color: var(--gris); }
.devolver-seguir { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; margin: .6rem 0 0; }
.devolver-seguir small { color: var(--gris); }

/* El segundo paso: que no se pueda confundir con nada más de la página. */
.devolucion-confirmar {
  margin: 0 0 1.2rem;
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid #f0c2be;
  border-left: 5px solid var(--error);
  border-radius: .5rem;
  background: #fdf4f3;
  animation: devolucion-entra .25s ease-out;
}
.devolucion-confirmar.solo-anotar { border-color: #ecd9a8; border-left-color: #b98500; background: #fdf9ee; }
.devolucion-confirmar-antetitulo {
  margin: 0 0 .2rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--error);
}
.solo-anotar .devolucion-confirmar-antetitulo { color: #8a6100; }
.devolucion-confirmar h3 { margin: 0 0 .7rem; font-size: 1.15rem; font-weight: 600; }
.devolucion-confirmar h3 strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.devolucion-confirmar p { margin: 0 0 .9rem; font-size: .9rem; }
.devolucion-confirmar-datos { margin: 0 0 .8rem; font-size: .88rem; }
.devolucion-confirmar-datos > div { display: grid; grid-template-columns: 5.5rem 1fr; gap: .6rem; padding: .3rem 0; border-bottom: 1px solid rgba(0,0,0,.06); }
.devolucion-confirmar-datos dt { color: var(--gris); }
.devolucion-confirmar-datos dd { margin: 0; }
.devolucion-confirmar-botones { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; }
.devolucion-confirmar-botones form { margin: 0; }
.devolucion-confirmar-no { color: var(--tinta); font-size: .9rem; }
@keyframes devolucion-entra { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .devolucion-confirmar { animation: none; } }
@media (max-width: 34rem) {
  .devolver-cobro { grid-template-columns: auto 1fr; }
  .devolver-cobro-cuanto { grid-column: 2; text-align: left; }
}
/* El botón que mueve dinero de verdad, en rojo: button.boton lo ponía naranja. */
.devolucion-confirmar button.boton.boton-peligro { background: var(--error); }
.solo-anotar button.boton { background: #8a6100; }
.devolucion-confirmar h3 strong { white-space: nowrap; }
/* «¿Has olvidado la contraseña?», pegado a su campo. */
.formulario a.olvide { align-self: flex-end; font-size: .85rem; margin: -.1rem 0 .4rem; }

/* ── Gestión → Forma de pago ─────────────────────────────────────────── */
.fp .panel-cabecera { margin-bottom: .6rem; }
.fp-volver { font-size: .9rem; color: var(--gris); text-decoration: none; }
.fp-volver:hover { color: var(--naranja); }
.fp-intro { margin: 0 0 1.4rem; max-width: 46rem; color: #3d3d42; line-height: 1.55; }
.fp-intro a { color: var(--naranja); }

.fp-rejilla { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 1.4rem; align-items: start; }
.fp-formulario { display: grid; gap: 1rem; margin: 0; }

.fp-tarjeta {
  padding: 1.15rem 1.25rem 1.2rem; border-radius: 14px;
  border: 1px solid var(--linea); background: #fff;
}
.fp-tarjeta > header { display: flex; gap: .85rem; align-items: flex-start; margin-bottom: .9rem; }
.fp-tarjeta h2 { margin: .1rem 0 .2rem; font-size: 1.05rem; letter-spacing: -.01em; }
.fp-tarjeta > header p { margin: 0; font-size: .85rem; color: var(--gris); line-height: 1.45; }
.fp-tarjeta > small { display: block; margin-top: .55rem; color: var(--gris); font-size: .8rem; line-height: 1.45; }
.fp-chapa {
  flex: none; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 11px;
  background: #fdf0e8; color: var(--naranja);
}
.fp-chapa .icono { width: 21px; height: 21px; }

.fp-fila {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem 1rem;
  flex-wrap: wrap; padding: .5rem 0; border-top: 1px dashed #ececef;
}
.fp-tarjeta > header + .fp-fila { border-top: 0; padding-top: 0; }
.fp-fila label { display: block; font-size: .93rem; line-height: 1.45; }
.fp-fila label .fp-n { margin-right: .45rem; vertical-align: 1px; }
.fp-numero { display: inline-flex; align-items: center; gap: .45rem; }
.fp-numero input {
  width: 4.6rem; padding: .5rem .55rem; text-align: right;
  font: inherit; font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums;
  border: 1px solid var(--linea); border-radius: 8px; background: #fff;
}
.fp-numero input:focus { outline: 2px solid var(--naranja); outline-offset: 1px; border-color: var(--naranja); }
.fp-numero em { font-style: normal; font-size: .85rem; color: var(--gris); }
.fp-numero em.fp-ud { min-width: 8.6rem; }
.fp-numero-chico input { width: 4rem; font-size: .95rem; padding: .4rem .5rem; }
.fp-n {
  display: inline-grid; place-items: center; flex: none;
  width: 1.45rem; height: 1.45rem; border-radius: 50%;
  background: var(--tinta); color: #fff; font-size: .75rem; font-weight: 800;
}

/* La barra que enseña el reparto de la plaza */
.fp-barra { display: flex; gap: 3px; margin: .1rem 0 .7rem; border-radius: 9px; overflow: hidden; min-height: 2.1rem; }
.fp-parte {
  display: flex; align-items: center; justify-content: center; gap: .3rem;
  min-width: 0; padding: 0 .5rem; white-space: nowrap; overflow: hidden;
  font-size: .78rem; font-weight: 700; color: #fff; transition: flex-basis .2s ease;
}
.fp-parte b { font-weight: 800; }
.fp-parte i { font-style: normal; font-weight: 600; opacity: .85; }
.fp-leyenda { display: flex; align-items: center; gap: .45rem; margin: -.2rem 0 0; font-size: .8rem; color: var(--gris); }
.fp-leyenda::before { content: ""; width: .8rem; height: .8rem; border-radius: 3px; background: var(--naranja); flex: none; }
.fp-parte-1 { background: var(--naranja); }
.fp-parte-2 { background: #43434a; }
.fp-parte-3 { background: #77777f; }

.fp-regla { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .35rem; }
.fp-regla li { padding: .45rem .7rem; border-radius: 8px; background: #f7f6f8; font-size: .88rem; }
.fp-regla span { font-weight: 800; font-variant-numeric: tabular-nums; }

.fp-guardar { display: grid; gap: .8rem; }
.fp-guardar .aviso { margin: 0; font-size: .86rem; }
.fp-guardar .boton { justify-self: start; }

/* El ejemplo de la derecha */
.fp-ejemplo {
  position: sticky; top: 1rem;
  padding: 1.15rem 1.2rem 1.25rem; border-radius: 16px;
  background: #1f1f23; color: #f4f4f6;
  transition: opacity .15s ease;
}
.fp-ejemplo.fp-actualizando { opacity: .75; }
.fp-ejemplo h2 { margin: 0 0 .2rem; font-size: 1.05rem; color: #fff; }
.fp-ejemplo-sub { margin: 0 0 .9rem; font-size: .8rem; color: #a9a9b2; line-height: 1.45; }
.fp-ejemplo-datos { display: flex; flex-wrap: wrap; gap: .6rem .8rem; margin-bottom: 1rem; }
.fp-ejemplo-datos label { display: grid; gap: .25rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #a9a9b2; }
.fp-ejemplo-datos select,
.fp-ejemplo-datos input[type=date] {
  font: inherit; font-size: .9rem; text-transform: none; letter-spacing: 0; font-weight: 600;
  padding: .4rem .5rem; border-radius: 8px; border: 1px solid #3a3a41; background: #2a2a30; color: #fff;
  color-scheme: dark;
}
.fp-ejemplo .fp-numero input { border-color: #3a3a41; background: #2a2a30; color: #fff; }
.fp-ejemplo .fp-numero em { color: #a9a9b2; }

.fp-formas { display: grid; gap: .6rem; }
.fp-forma { padding: .8rem .9rem; border-radius: 12px; background: #2a2a30; }
.fp-forma h3 { margin: 0; font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #a9a9b2; }
.fp-total { margin: .15rem 0 .5rem; font-size: 1.45rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.fp-ahorro { margin-left: .3rem; padding: .1rem .45rem; border-radius: 999px; background: rgba(232, 95, 26, .18); color: #ff9a64; font-size: .8rem; vertical-align: middle; }
.fp-forma ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.fp-forma li { display: grid; grid-template-columns: auto 1fr auto; gap: .55rem; align-items: center; font-size: .9rem; }
.fp-forma li .fp-n { background: #45454d; }
.fp-forma li:first-child .fp-n { background: var(--naranja); }
.fp-forma li strong { font-variant-numeric: tabular-nums; }
.fp-forma time { color: #a9a9b2; font-size: .82rem; }
.fp-forma-no { background: transparent; border: 1px dashed #45454d; }
.fp-forma-no p { margin: .3rem 0 0; font-size: .85rem; color: #a9a9b2; }
.fp-ejemplo-pie, .fp-cargando { margin: .2rem 0 0; font-size: .78rem; color: #8d8d96; }
.fp-ejemplo .aviso { color: #ffb4ad; background: #3a2422; border-color: #5a2f2b; font-size: .85rem; }
.fp-ejemplo .aviso ul { margin: 0; padding-left: 1.1rem; }

@media (max-width: 52rem) {
  .fp-rejilla { grid-template-columns: 1fr; }
  .fp-ejemplo { position: static; }
}
@media (max-width: 34rem) {
  .fp-fila { align-items: flex-start; }
  .fp-parte i { display: none; }
}
@media (prefers-reduced-motion: reduce) { .fp-parte { transition: none; } }
/* «Avisar a la familia por correo», en la confirmación de una devolución */
.devolucion-avisar {
  display: grid; grid-template-columns: auto 1fr; gap: .1rem .55rem; align-items: start;
  margin: .2rem 0 .9rem; font-size: .9rem; font-weight: 600; cursor: pointer;
}
.devolucion-avisar input { margin: .2rem 0 0; width: 1rem; height: 1rem; accent-color: var(--naranja); }
.devolucion-avisar small { grid-column: 2; font-weight: 400; font-size: .8rem; color: var(--gris); line-height: 1.4; }

/* ── ¿Has olvidado la contraseña? ────────────────────────────────────── */
/* Campo trampa: fuera de la vista de las personas, al alcance de los robots. */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.clave-verificacion { margin-top: 1rem; min-height: 65px; }
.clave-enviada {
  max-width: 30rem; margin: 0 0 1.2rem; padding: 1.1rem 1.25rem;
  border: 1px solid #b6dcc4; border-left: 4px solid var(--ok); border-radius: 12px; background: #eef8f1;
}
.clave-enviada p { margin: 0 0 .6rem; line-height: 1.5; }
.clave-enviada p:last-child { margin-bottom: 0; }
.clave-enviada-titulo { font-size: 1.1rem; font-weight: 800; color: var(--ok); }

/* Inscripciones canceladas en el listado de gestión: en gris y con su
   etiqueta, para que no se confundan con las vivas. */
.resultados tr.fila-cancelada > td { background: #f7f6f6; color: var(--gris); }
.resultados tr.fila-cancelada a strong { color: var(--gris); text-decoration: line-through; text-decoration-thickness: 1px; }
.resultados tr.fila-cancelada .estado-pill { margin-left: .35rem; vertical-align: 1px; font-size: .64rem; padding: .12rem .5rem; }