:root {
  --fondo: #f6f4f7; --superficie: #ffffff; --texto: #1d1720; --suave: #6b6370; --borde: #e2dce5;
  --marca: #b5195d; --marca-suave: #fbe8f0; --ok: #1f7a4d; --ok-suave: #e3f4ea; --aviso: #9a6200; --aviso-suave: #fdf1dc;
  --mal: #b42318; --mal-suave: #fde8e6; --info: #1d5fbf; --info-suave: #e4eefc; --radio: 10px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --fondo: #0e0a10; --superficie: #19131c; --texto: #f3eef5; --suave: #b3a9b8; --borde: #2f2733;
    --marca: #f0609c; --marca-suave: #3a1626; --ok: #5fd39a; --ok-suave: #12301f; --aviso: #f3b94d; --aviso-suave: #3a2a0c;
    --mal: #ff8a7f; --mal-suave: #3d1512; --info: #8db8ff; --info-suave: #14243d; color-scheme: dark; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--fondo); color: var(--texto); }
a { color: var(--marca); }
.cabecera { background: var(--superficie); border-bottom: 1px solid var(--borde); position: sticky; top: 0; z-index: 2; }
.cabecera .fila { max-width: 1100px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.marca { font-weight: 800; letter-spacing: .02em; color: var(--texto); text-decoration: none; }
.marca span { color: var(--marca); }
.quien { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--suave); }
.menu { max-width: 1100px; margin: 0 auto; padding: 0 8px; display: flex; gap: 2px; overflow-x: auto; }
.menu a { padding: 10px 12px; color: var(--suave); text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; font-weight: 600; font-size: 15px; }
.menu a.activo { color: var(--texto); border-bottom-color: var(--marca); }
main { max-width: 1100px; margin: 0 auto; padding: 20px 16px 48px; }
h1 { font-size: 24px; margin: 0 0 16px; }
h2 { font-size: 18px; margin: 28px 0 12px; }
.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px; }
.tarjeta .numero { font-size: 32px; font-weight: 800; line-height: 1.1; }
.tarjeta .etiqueta { color: var(--suave); font-size: 14px; }
.caja { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px; }
.estrecho { max-width: 420px; margin: 8vh auto 0; }
label { display: block; font-weight: 600; font-size: 14px; margin: 12px 0 4px; }
input, select { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie); color: var(--texto); }
input:focus, select:focus, button:focus-visible, a:focus-visible { outline: 3px solid var(--marca); outline-offset: 1px; }
button, .boton { display: inline-block; font: inherit; font-weight: 700; padding: 10px 16px; border-radius: 8px; border: 1px solid var(--marca); background: var(--marca); color: #fff; cursor: pointer; text-decoration: none; }
button.secundario, .boton.secundario { background: transparent; color: var(--marca); }
button.peligro { background: transparent; color: var(--mal); border-color: var(--mal); }
button.pequeno, .boton.pequeno { padding: 6px 12px; font-size: 14px; }
button.enlace { background: none; border: 0; padding: 8px 6px; margin: -8px 0; color: var(--marca); text-decoration: underline; font-weight: 600; font-size: inherit; }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 16px; }
.aviso { padding: 10px 14px; border-radius: 8px; margin: 0 0 16px; font-weight: 600; }
.aviso.ok { background: var(--ok-suave); color: var(--ok); }
.aviso.error { background: var(--mal-suave); color: var(--mal); }
.aviso.info { background: var(--aviso-suave); color: var(--aviso); }
.demo { background: var(--aviso-suave); color: var(--aviso); text-align: center; font-size: 14px; font-weight: 700; padding: 6px; }
.personas { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 8px 0 4px; }
.persona { position: relative; }
.persona input { position: absolute; opacity: 0; pointer-events: none; }
.persona span { display: block; text-align: center; padding: 18px 8px; border: 2px solid var(--borde); border-radius: var(--radio); background: var(--superficie); font-weight: 700; cursor: pointer; }
.persona input:checked + span { border-color: var(--marca); background: var(--marca-suave); }
.persona input:focus-visible + span { outline: 3px solid var(--marca); }
input.pin { font-size: 28px; letter-spacing: .5em; text-align: center; max-width: 220px; }
table { width: 100%; border-collapse: collapse; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--borde); vertical-align: top; font-size: 15px; }
th { font-size: 13px; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; }
tr:last-child td { border-bottom: 0; }
.tabla { overflow-x: auto; }
.etiqueta-papel { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--marca-suave); color: var(--marca); }
.apagado { color: var(--suave); }
.detalle { font-size: 13px; color: var(--suave); word-break: break-word; }
.linea { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; }
.linea > div { flex: 1 1 160px; }
form.en-linea { display: inline; }
fieldset.sin-marco { border: 0; padding: 0; margin: 0; }
fieldset.sin-marco legend { font-weight: 600; margin: 14px 0 4px; padding: 0; }
.formas { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.formas .persona span { padding: 12px 6px; }
.cuotas-actuales, .cuotas-ficha { list-style: none; padding: 0; margin: 0 0 12px; }
.cuotas-actuales li, .cuotas-ficha li { padding: 6px 0; border-bottom: 1px solid var(--borde); }
.cuotas-actuales li:last-child, .cuotas-ficha li:last-child { border-bottom: 0; }
.total { font-size: 20px; }
.aviso.plan { font-weight: 400; }
.pie { color: var(--suave); font-size: 13px; margin-top: 32px; }
.bloque { margin-top: 12px; }
h3 { font-size: 16px; margin: 16px 0 8px; }
.caja > :first-child { margin-top: 0; }
.caja > :last-child { margin-bottom: 0; }
textarea { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie); color: var(--texto); resize: vertical; }
textarea:focus { outline: 3px solid var(--marca); outline-offset: 1px; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.buscador { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.buscador input { flex: 1 1 240px; width: auto; }
.buscador select { flex: 0 1 150px; width: auto; }
.titulo-con-accion { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; margin-bottom: 16px; }
.titulo-con-accion h1 { margin: 0; }
.insignias { display: flex; gap: 6px; flex-wrap: wrap; }
.insignia, .estado-socio { display: inline-block; font-size: 13px; font-weight: 700; padding: 2px 10px; border-radius: 99px; white-space: nowrap; }
.insignia.verde { background: var(--ok-suave); color: var(--ok); }
.insignia.amarillo { background: var(--aviso-suave); color: var(--aviso); }
.insignia.rojo { background: var(--mal-suave); color: var(--mal); }
.insignia.gris { background: var(--fondo); color: var(--suave); border: 1px solid var(--borde); }
.insignia.azul { background: var(--info-suave); color: var(--info); }
.estado-socio { border: 1px solid var(--borde); color: var(--suave); }
.estado-socio.activo { color: var(--texto); }
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 12px; margin-top: 16px; }
.rejilla h2 { margin-top: 0; }
.datos { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.datos dt { color: var(--suave); font-size: 14px; }
.datos dd { margin: 0; word-break: break-word; }
.notas { white-space: pre-wrap; margin: 0; }
.cambios { margin: 0; padding-left: 18px; }
tr.anulado td { color: var(--suave); }
tr.anulado .tachable { text-decoration: line-through; }
.migas { margin: 0 0 8px; font-size: 14px; }
.formulario { max-width: 640px; }
.casilla { display: flex; gap: 8px; align-items: center; font-weight: 600; margin-top: 12px; }
.casilla input { width: auto; }
.aviso ul { margin: 6px 0; }
.aviso p { margin: 0; }
@media (max-width: 600px) {
  .lista-socios thead { display: none; }
  .lista-socios tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 10px 12px; border-bottom: 1px solid var(--borde); }
  .lista-socios tr:last-child { border-bottom: 0; }
  .lista-socios td { display: block; padding: 0; border: 0; }
  .lista-socios td.c-nombre { flex: 1 1 100%; }
  .lista-socios td.c-tel { margin-right: auto; color: var(--suave); }
}
.bloque ul { margin: 0; padding-left: 20px; }
.titulo-con-boton { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.titulo-con-boton h1, .titulo-con-boton h2 { margin-right: auto; }
.acciones-fila { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.archivadas summary { cursor: pointer; font-weight: 700; margin: 24px 0 8px; }
@media (max-width: 600px) {
  .lista-tarifas thead { display: none; }
  .lista-tarifas tr { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 10px 12px; border-bottom: 1px solid var(--borde); }
  .lista-tarifas tr:last-child { border-bottom: 0; }
  .lista-tarifas td { display: block; padding: 0; border: 0; }
  .lista-tarifas td:first-child { flex: 1 1 100%; }
  .lista-tarifas td[data-titulo]::before { content: attr(data-titulo) ": "; color: var(--suave); font-size: 13px; }
}
.tarjetas a.tarjeta { color: inherit; text-decoration: none; display: block; }
.tarjetas a.tarjeta:hover { border-color: var(--marca); }
.tarjeta.rojo .numero { color: var(--mal); }
.tarjeta.amarillo .numero { color: var(--aviso); }
.resumen-socios { color: var(--suave); font-size: 14px; margin: 12px 0 0; }
.comparaciones { display: grid; gap: 12px; }
.comparacion h3 { margin: 0; font-size: 17px; }
.comparacion .datos { margin: 10px 0; }
.pestanas { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.pestanas a { padding: 6px 12px; border: 1px solid var(--borde); border-radius: 99px; background: var(--superficie); color: var(--texto); text-decoration: none; font-weight: 600; font-size: 14px; }
.pestanas a.activo { background: var(--marca); border-color: var(--marca); color: #fff; }
.pestanas .cuenta { font-weight: 800; margin-left: 2px; }
.vencimientos { list-style: none; padding: 0; margin: 0; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); }
.vencimiento { padding: 12px 14px; border-bottom: 1px solid var(--borde); display: grid; gap: 4px; }
.vencimiento:last-child { border-bottom: 0; }
.vencimiento:target { background: var(--marca-suave); }
.vencimiento.avisado .v-nombre { color: var(--suave); }
.v-cabeza { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.v-nombre { font-weight: 700; margin-right: auto; }
.v-avisado { font-size: 14px; color: var(--ok); font-weight: 600; }
.v-pagado { font-size: 14px; color: var(--info); font-weight: 600; }
@media (max-width: 600px) { .insignia { white-space: normal; } }
.v-botones { margin-top: 4px; gap: 8px; }
.v-botones form { display: flex; }
.v-acciones .detalle { margin: 4px 0 0; }
.cuotas-ficha .v-botones { display: flex; flex-wrap: wrap; }
.titulo-seccion { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 28px 0 12px; }
.titulo-seccion h2 { margin: 0; }
/* Las anclas (#cuota-N, #grupos...) quedan por debajo de la cabecera fija. */
[id] { scroll-margin-top: 160px; }
.ancla { display: block; }
.cuotas-ficha .aviso { margin: 4px 0 8px; }
.semana { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 10px; }
.semana .dia h3 { margin: 0 0 4px; }
.semana .dia.hoy { border-color: var(--marca); box-shadow: inset 0 3px 0 var(--marca); }
.clases { list-style: none; padding: 0; margin: 0; }
ul.clases.caja { padding: 2px 14px; }
.clases li { border-bottom: 1px solid var(--borde); }
.clases li:last-child { border-bottom: 0; }
.clase { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 8px 0; color: inherit; text-decoration: none; }
.clase:hover .c-nombre { color: var(--marca); }
.c-hora { font-weight: 800; font-variant-numeric: tabular-nums; }
.c-nombre { font-weight: 600; margin-right: auto; }
.clase .detalle { flex-basis: 100%; }
.dias-semana { display: flex; gap: 0 16px; flex-wrap: wrap; }
.dias-semana .casilla { margin-top: 6px; }
/* Resumen de lo cobrado (entrega 11). */
.periodo { margin: 0; }
.ir-a { margin: 8px 0 16px; align-items: flex-end; }
.rejilla-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 12px; margin: 16px 0; }
.rejilla-resumen .caja { margin: 0; }
.rejilla-resumen h3, .caja > h3 { margin: 0 0 8px; }
table.cifras { width: 100%; border-collapse: collapse; }
table.cifras th, table.cifras td { padding: 6px 4px; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: top; }
table.cifras tr:last-child th, table.cifras tr:last-child td { border-bottom: 0; }
table.cifras th[scope="row"] { font-weight: 600; }
.cifra { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cuantos { color: var(--suave); font-size: 14px; white-space: nowrap; text-align: right !important; }
.por-dia .barra { width: 40%; }
meter { width: 100%; height: 12px; }
.motivos { margin: 0; padding-left: 18px; }
.lista-pagos td.cifra { font-weight: 600; }