/* ===========================================================================
   PuntoClub — panel de administración
   Interfaz oscura, compacta y usable desde el celular al borde de la piscina.
   =========================================================================== */

/* Los colores salen del logo, igual que en la página de venta: el azul de
   "Club" es #23459c y el marino del símbolo #031835. Antes el panel iba en cian
   y la página en azul, y se notaba hasta en las capturas del carrusel.

   Verde, amarillo y rojo NO se tocan: no son de marca, son el significado de
   "al día", "por vencer" y "debe". Cambiarlos por gusto rompería la lectura de
   la planilla, que es de lo que vive este panel. */
:root{
  --azul:#7da6ff;          /* acento sobre fondo oscuro: el azul del logo aclarado */
  --azul-2:#3d63d8;        /* relleno de botón, con texto blanco */
  --naranja:#ff8a5c;
  --fondo:#040d1e;
  --fondo-2:#08152a;
  --panel:#0c1c33;
  --panel-2:#122543;
  --linea:#1e3559;
  --texto:#eaf0fb;
  --texto-2:#a2b4d1;
  --texto-3:#7285a6;
  --ok:#35c17f;
  --warn:#f5b53d;
  --bad:#ff6b6b;
  --radio:14px;
  --sombra:0 10px 30px rgba(0,0,0,.35);
  /* Sin descargas externas: si Inter está instalada se usa, y si no, la del
     sistema, que en un panel se ve prácticamente igual. */
  --fuente:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{
  font-family:var(--fuente);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(18,179,227,.10), transparent 60%),
    radial-gradient(900px 500px at 0% 100%, rgba(255,106,43,.06), transparent 60%),
    var(--fondo);
  color:var(--texto);
  font-size:15px;
  line-height:1.55;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--azul);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0 0 .4em;line-height:1.2;font-weight:700;letter-spacing:-.01em}
h1{font-size:1.6rem}
h2{font-size:1.2rem}
h3{font-size:1rem}
p{margin:0 0 .8em}
small{color:var(--texto-2)}

/* ------------------------------- estructura ----------------------------- */
.app{display:flex;min-height:100vh}

.side{
  width:250px;flex:0 0 250px;
  background:linear-gradient(180deg,#0b1721,#080f16);
  border-right:1px solid var(--linea);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.side__brand{display:block;padding:20px 18px 18px;border-bottom:1px solid var(--linea)}
/* El logo completo, no el símbolo suelto: ya trae el nombre dibujado, así que
   repetirlo al lado en texto era decir dos veces lo mismo. La versión clara es
   la que se ve sobre el panel oscuro; el original es azul marino. */
.side__logo{width:min(214px,100%);height:auto;display:block}

.side__club{margin:14px 14px 6px;padding:10px 12px;background:var(--panel);border:1px solid var(--linea);border-radius:12px}
.side__club b{display:block;font-size:13px;line-height:1.3}
.side__club small{font-size:11px}
.side__club a{font-size:11.5px}

.nav{padding:10px 10px 30px;flex:1}
.nav__grupo{margin:14px 0 6px;padding:0 10px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--texto-3)}
.nav a{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;margin:2px 0;border-radius:10px;
  color:var(--texto-2);font-size:14px;font-weight:500;text-decoration:none;
}
.nav a:hover{background:var(--panel);color:var(--texto)}
.nav a.activo{background:linear-gradient(90deg,rgba(18,179,227,.18),rgba(18,179,227,.02));color:#fff}
.nav a.activo::before{content:'';width:3px;height:18px;background:var(--azul);border-radius:3px;margin-left:-12px;margin-right:9px}
.nav__ico{width:20px;text-align:center;font-size:15px;flex:0 0 20px}
.nav__pill{margin-left:auto;background:var(--naranja);color:#fff;font-size:10px;font-weight:700;padding:1px 7px;border-radius:20px}

.main{flex:1;min-width:0;display:flex;flex-direction:column}

.top{
  display:flex;align-items:center;gap:14px;
  padding:14px 26px;border-bottom:1px solid var(--linea);
  background:rgba(7,14,21,.85);backdrop-filter:blur(10px);
  position:sticky;top:0;z-index:20;
}
.top__titulo{font-size:1.15rem;font-weight:700;margin:0}
.top__sub{font-size:12.5px;color:var(--texto-2);margin:0}
.top__acciones{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.top__user{display:flex;align-items:center;gap:9px;padding-left:12px;margin-left:auto;
  border-left:1px solid var(--linea)}
/* Con acciones al lado, el margen automático lo pone solo la primera. */
.top__acciones+.top__user{margin-left:0}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--azul-2);
  display:grid;place-items:center;font-weight:700;font-size:13px;color:#fff;flex:0 0 auto}
/* La cara de quien se está mirando, arriba de su ficha. */
.persona-cabeza{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.persona-cabeza__foto{width:60px;height:60px;border-radius:50%;flex:0 0 auto;display:grid;
  place-items:center;font-size:20px;font-weight:700;color:#fff;background:var(--azul-2)}
.persona-cabeza b{display:block;font-size:1.05rem;line-height:1.2}
.persona-cabeza small{color:var(--texto-2);font-size:12.5px}

/* Cuando hay foto, el mismo círculo la recorta en vez de mostrar iniciales. */
.avatar--foto,.pers__av--foto,.persona-cabeza__foto--foto{object-fit:cover;background:var(--panel-2)}
.top__user b{font-size:13px;display:block;line-height:1.2}
.top__user small{font-size:11px}

.contenido{padding:24px 26px 60px;max-width:1280px;width:100%}

.menu-btn{display:none;background:none;border:1px solid var(--linea);color:var(--texto);border-radius:10px;
  width:38px;height:38px;font-size:18px;cursor:pointer}

/* ------------------------------- componentes ---------------------------- */
.card{background:var(--panel);border:1px solid var(--linea);border-radius:var(--radio);padding:18px 20px;margin-bottom:18px}
.card--plano{background:transparent;border-style:dashed}
.card__head{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.card__head h2,.card__head h3{margin:0}
.card__head .btn{margin-left:auto}
/* Filtros que viven en el encabezado de una tarjeta: a la derecha del título en
   el computador, en su propio renglón y repartidos a lo ancho en el celular. */
.filtros-linea{margin-left:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.filtros-linea select{width:auto}

/* Sin esto, un hijo de rejilla nunca baja de su ancho mínimo y en vez de
   encogerse revienta la fila hacia afuera de la pantalla. */
/* Las tarjetas traían margen inferior pero las rejillas no, así que un bloque
   de indicadores seguido de una tarjeta quedaba pegado, sin aire. Mismo ritmo
   vertical para los dos. */
.grid{display:grid;gap:16px;margin-bottom:18px}
.grid:last-child{margin-bottom:0}
.grid>*{min-width:0}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}

.kpi{background:var(--panel);border:1px solid var(--linea);border-radius:var(--radio);padding:16px 18px;position:relative;overflow:hidden}
.kpi::after{content:'';position:absolute;inset:auto -20px -30px auto;width:110px;height:110px;border-radius:50%;
  background:radial-gradient(circle,rgba(18,179,227,.14),transparent 70%)}
.kpi b{display:block;font-size:1.9rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.kpi span{font-size:12px;color:var(--texto-2);text-transform:uppercase;letter-spacing:.06em}
.kpi small{display:block;margin-top:5px;font-size:12px}
.kpi--ok b{color:var(--ok)} .kpi--warn b{color:var(--warn)} .kpi--bad b{color:var(--bad)}

.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11.5px;font-weight:600;white-space:nowrap;
  border:1px solid transparent}
.badge--ok{background:rgba(46,204,143,.14);color:var(--ok);border-color:rgba(46,204,143,.3)}
.badge--warn{background:rgba(245,181,61,.14);color:var(--warn);border-color:rgba(245,181,61,.3)}
.badge--bad{background:rgba(255,90,99,.14);color:var(--bad);border-color:rgba(255,90,99,.3)}
.badge--azul{background:rgba(18,179,227,.14);color:var(--azul);border-color:rgba(18,179,227,.3)}
.badge--gris{background:rgba(143,169,189,.12);color:var(--texto-2);border-color:rgba(143,169,189,.25)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 16px;border-radius:10px;border:1px solid transparent;
  font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;text-decoration:none;
  transition:transform .12s ease,filter .12s ease;white-space:nowrap;
}
.btn:hover{filter:brightness(1.1);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--azul-2);color:#fff}
.btn--primary:hover{background:#527ff0}
.btn--naranja{background:var(--naranja);color:#fff}
.btn--ghost{background:transparent;border-color:var(--linea);color:var(--texto)}
.btn--ghost:hover{background:var(--panel-2)}
.btn--peligro{background:transparent;border-color:rgba(255,90,99,.4);color:var(--bad)}
.btn--peligro:hover{background:rgba(255,90,99,.12)}
.btn--sm{padding:5px 11px;font-size:12.5px;border-radius:8px}
.btn--full{width:100%}

.tabla-wrap{overflow-x:auto;border:1px solid var(--linea);border-radius:var(--radio)}
table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:520px}
thead th{
  text-align:left;padding:11px 14px;background:var(--fondo-2);
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-3);font-weight:700;
  border-bottom:1px solid var(--linea);white-space:nowrap;
}
tbody td{padding:11px 14px;border-bottom:1px solid rgba(30,51,70,.6);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:rgba(22,40,58,.5)}
td .btn{margin-right:4px}
.td-acciones{text-align:right;white-space:nowrap}

label{display:block;font-size:12.5px;font-weight:600;color:var(--texto-2);margin:0 0 5px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],
input[type=time],input[type=tel],input[type=url],input[type=search],select,textarea{
  width:100%;padding:9px 12px;border-radius:10px;
  background:var(--fondo-2);border:1px solid var(--linea);color:var(--texto);
  font-family:inherit;font-size:14px;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(18,179,227,.15)}
textarea{resize:vertical;min-height:90px}
input[type=color]{width:52px;height:38px;padding:3px;border-radius:8px;background:var(--fondo-2);border:1px solid var(--linea)}
/* iOS le da a los campos de fecha y hora un ancho propio, calculado sobre el
   formato de la fecha, que ignora el del contenedor: en el celular se salían de
   la tarjeta. Quitarles la apariencia nativa los vuelve campos normales. */
input[type=date],input[type=month],input[type=time],input[type=datetime-local]{
  -webkit-appearance:none;appearance:none;min-width:0;max-width:100%}
input[type=date]::-webkit-date-and-time-value,
input[type=month]::-webkit-date-and-time-value,
input[type=time]::-webkit-date-and-time-value{text-align:left;margin:0}
/* Y las rejillas de campos dejan de estirarse por culpa de uno solo. */
.fila>*,.campo{min-width:0}
.campo{margin-bottom:14px}
.campo__ayuda{font-size:11.5px;color:var(--texto-3);margin:5px 0 0}
.fila{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.check{display:flex;align-items:flex-start;gap:9px;font-weight:500;color:var(--texto);font-size:13.5px;margin:0 0 9px;cursor:pointer}
.check input{width:16px;height:16px;margin:2px 0 0;accent-color:var(--azul);flex:0 0 auto}

.flash{padding:12px 16px;border-radius:12px;margin-bottom:16px;font-size:14px;border:1px solid}
.flash--ok{background:rgba(46,204,143,.1);border-color:rgba(46,204,143,.35);color:#9df0cd}
.flash--error{background:rgba(255,90,99,.1);border-color:rgba(255,90,99,.35);color:#ffb3b7}
.flash--info{background:rgba(18,179,227,.1);border-color:rgba(18,179,227,.35);color:#a9e4f8}

.vacio{padding:34px 20px;text-align:center;color:var(--texto-3);font-size:14px}
.vacio b{display:block;color:var(--texto-2);font-size:15px;margin-bottom:5px}

/* Fichas de paleta: se elige por lo que se ve, no por un código hexadecimal.
   La muestra usa el fondo real y encima los dos colores que irían sobre él. */
.paleta{border:1px solid var(--linea);border-radius:12px;padding:12px 14px;
  align-items:flex-start;cursor:pointer;margin:0}
.paleta--puesta{border-color:var(--azul)}
.paleta__muestra{display:flex;gap:6px;align-items:center;height:36px;border-radius:9px;
  padding:0 10px;margin-bottom:9px;border:1px solid rgba(255,255,255,.14)}
.paleta__muestra i{width:17px;height:17px;border-radius:50%;display:block;flex:0 0 auto}
.paleta b{display:block;font-size:13.5px}
.paleta small{display:block;color:var(--texto-3);font-size:11.5px}

/* Una pista, no un botón. Antes decía "Cambiar" en azul y con peso, así que se
   leía como un control: uno lo tocaba esperando una acción y lo que pasaba era
   que se desplegaba el bloque. Ahora se ve como lo que es —una indicación— y
   desaparece cuando ya está abierto, porque ahí ya no dice nada útil. */
.pista-abrir{margin-left:8px;font-size:11.5px;font-weight:400;color:var(--texto-3);
  font-style:italic}
details[open] > summary .pista-abrir{display:none}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{background:var(--panel-2);border:1px solid var(--linea);border-radius:20px;padding:3px 11px;font-size:12px;color:var(--texto-2)}
.chip--radio{padding:3px 9px;font-size:11.5px;display:inline-flex;align-items:center;gap:4px}
.chip--radio input{width:13px;height:13px;margin:0}
/* Distingue sin usar los colores de estado, que están reservados para la cartera. */
.chip--marca{border-color:var(--azul);color:var(--azul);background:transparent}

.chart{width:100%;height:auto;display:block}

/* Barras de asistencia: cada una es un enlace a esa sesión. */
.barras{width:100%;height:auto;display:block}   /* sin overflow: nada se sale del lienzo */
.barras__hueco{fill:transparent}
.barras__b{fill:var(--azul-2);transition:fill .15s}
.barras a:hover .barras__b{fill:var(--azul)}
.barras a:hover .barras__hueco{fill:rgba(255,255,255,.04)}
.barras__n{fill:var(--texto-2);font-size:11px;font-weight:700;text-anchor:middle}
.barras__d{fill:var(--texto-3);font-size:9.5px;text-anchor:middle;text-transform:uppercase;letter-spacing:.04em}
.chart__grid{stroke:rgba(143,169,189,.14);stroke-width:1}
.chart__pie{font-size:12px;color:var(--texto-2);margin:6px 0 0}
.chart__pie .up{color:var(--ok)} .chart__pie .down{color:var(--bad)}
/* La miniatura dentro de una tabla se lee sola: el pie de texto solo estorba. */
td .chart__pie{display:none}

details.caja{border:1px solid var(--linea);border-radius:var(--radio);background:var(--panel);margin-bottom:14px}
details.caja>summary{padding:13px 18px;cursor:pointer;font-weight:600;list-style:none;display:flex;align-items:center;gap:9px}
details.caja>summary::-webkit-details-marker{display:none}
details.caja>summary::before{content:'▸';color:var(--azul);transition:transform .15s}
details.caja[open]>summary::before{transform:rotate(90deg)}
details.caja>div{padding:0 18px 18px}

.tabs{display:flex;gap:5px;border-bottom:1px solid var(--linea);margin-bottom:18px;overflow-x:auto}
.tabs a{padding:9px 15px;font-size:13.5px;font-weight:600;color:var(--texto-2);border-bottom:2px solid transparent;white-space:nowrap}
.tabs a:hover{color:var(--texto);text-decoration:none}
.tabs a.activo{color:#fff;border-bottom-color:var(--azul)}

.lista-limpia{list-style:none;padding:0;margin:0}
.lista-limpia li{padding:10px 0;border-bottom:1px solid rgba(30,51,70,.6);display:flex;gap:12px;align-items:center}
.lista-limpia li:last-child{border-bottom:none}

.persona{display:flex;align-items:center;gap:10px;min-width:0}
.persona b{display:block;font-size:13.5px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.persona small{font-size:11.5px}

.barra{height:7px;background:var(--fondo-2);border-radius:20px;overflow:hidden;margin-top:5px}
.barra i{display:block;height:100%;background:linear-gradient(90deg,var(--azul),var(--ok));border-radius:20px}

.semaforo{border-radius:var(--radio);padding:20px;text-align:center;border:2px solid}
.semaforo--ok{background:rgba(46,204,143,.1);border-color:var(--ok)}
.semaforo--bad{background:rgba(255,90,99,.1);border-color:var(--bad)}
.semaforo b{display:block;font-size:1.7rem;font-weight:800;letter-spacing:.02em}

.migas{font-size:12.5px;color:var(--texto-3);margin-bottom:10px}
.migas a{color:var(--texto-2)}

hr{border:none;border-top:1px solid var(--linea);margin:18px 0}

@media (max-width:900px){
  .side{position:fixed;left:-260px;z-index:60;transition:left .25s ease;box-shadow:var(--sombra)}
  .side.abierto{left:0}
  .menu-btn{display:block}
  .contenido{padding:18px 15px 60px}
  .top{padding:12px 15px}
  /* En el celular queda solo la inicial: el nombre lo sabe quien está usando el sistema. */
  .top__quien{display:none}
  .backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:55}
}
@media print{
  .side,.top__acciones,.menu-btn,.btn{display:none!important}
  body{background:#fff;color:#000}
  .card{border-color:#ccc}
}

/* --------------------------- buscador de afiliado ----------------------- */
.buscador{position:relative;margin-bottom:14px}
.buscador__campo{width:100%}
.buscador__lista{
  position:absolute;z-index:40;left:0;right:0;top:100%;margin:6px 0 0;padding:6px;
  list-style:none;max-height:320px;overflow-y:auto;
  background:var(--panel-2);border:1px solid var(--linea);border-radius:12px;
  box-shadow:var(--sombra);
}
.buscador__lista li{padding:9px 12px;border-radius:9px;cursor:pointer;display:flex;gap:10px;align-items:center}
.buscador__lista li:hover,.buscador__lista li.activo{background:rgba(18,179,227,.16)}
.buscador__lista b{font-size:13.5px;display:block;line-height:1.25}
.buscador__lista small{font-size:11.5px;color:var(--texto-2)}
.buscador__lista .badge{margin-left:auto;flex:0 0 auto}
.buscador__vacio{padding:14px 12px;color:var(--texto-3);font-size:13px;text-align:center}
.buscador__elegido{display:flex;align-items:center;gap:8px;margin:8px 0 0;font-size:13px;
  background:rgba(18,179,227,.12);border:1px solid rgba(18,179,227,.3);color:var(--azul);
  border-radius:10px;padding:7px 12px}
.buscador__elegido span{flex:1}
.buscador__quitar{background:none;border:none;color:var(--azul);font-size:17px;cursor:pointer;line-height:1;padding:0 2px}

/* ---------------------------- pasar asistencia --------------------------
   Una pulsación por deportista y áreas grandes: esto se usa de pie, con el
   celular en una mano, al borde de la piscina. El desplegable por persona era
   demasiado trabajo para la operación más repetida del club. */

.asis-barra{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.asis-barra input[type=search]{flex:1;min-width:200px}

.asis-grupo{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-3);
  margin:20px 0 10px;font-weight:700}
.asis-grupo small{color:var(--texto-3);font-weight:500}

.asis-lista{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}

.pers{display:flex;align-items:stretch;gap:0;border:1px solid var(--linea);border-radius:12px;
  background:var(--fondo-2);overflow:hidden;transition:border-color .12s,background .12s}
.pers:hover{border-color:var(--texto-3)}
/* El panel de "llegó tarde / tiene excusa" cuelga por fuera de la ficha. Con el
   recorte puesto siempre, el menú se abría y no se veía nada: parecía que el
   botón de los tres puntos estuviera muerto. */
.pers:has(.pers__mas[open]){overflow:visible}
.pers--si{background:rgba(46,204,143,.10);border-color:rgba(46,204,143,.45)}
.pers--matiz{background:rgba(245,181,61,.10);border-color:rgba(245,181,61,.45)}

/* Toda la ficha es el botón; la casilla real queda oculta pero sigue siendo el dato. */
.pers__toque{display:flex;align-items:center;gap:11px;flex:1;min-width:0;
  padding:12px 14px;margin:0;cursor:pointer;font-weight:500;color:var(--texto)}
.pers__toque input{position:absolute;opacity:0;width:0;height:0}
.pers__av{width:36px;height:36px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  font-size:13px;font-weight:700;background:var(--panel-2);color:var(--texto-2)}
.pers--si .pers__av{background:var(--ok);color:#04121f}
.pers--matiz .pers__av{background:var(--warn);color:#04121f}
.pers__nom{flex:1;min-width:0;font-size:14px;line-height:1.25}
.pers__nom small{display:block;font-size:11.5px;color:var(--texto-2);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.pers__tick{width:26px;height:26px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  border:2px solid var(--linea);color:transparent;font-size:14px;font-weight:800}
.pers--si .pers__tick{border-color:var(--ok);background:var(--ok);color:#04121f}
.pers--matiz .pers__tick{border-color:var(--warn);background:var(--warn);color:#04121f}

/* El matiz (tarde, excusa) es la excepción: no estorba el camino normal. */
.pers__mas{position:relative;border-left:1px solid var(--linea)}
.pers__mas>summary{list-style:none;cursor:pointer;padding:0 13px;height:100%;
  display:grid;place-items:center;color:var(--texto-3);font-size:16px;letter-spacing:1px}
.pers__mas>summary::-webkit-details-marker{display:none}
.pers__mas>summary:hover{background:var(--panel-2);color:var(--texto)}
.pers__panel{position:absolute;right:0;top:100%;z-index:30;width:210px;margin-top:4px;
  background:var(--panel-2);border:1px solid var(--linea);border-radius:12px;padding:12px;
  box-shadow:var(--sombra)}
.pers__panel .check{margin-bottom:6px}
/* Al pasar de página el navegador ancla en la lista. El margen evita que la
   primera fila quede pegada al borde o debajo de la barra de arriba. */
[id]{scroll-margin-top:80px}

/* ------------------------------ paginación ------------------------------ */
.paginacion{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-top:16px;font-size:13px;color:var(--texto-2)}
/* Cuando todo cabe en una página no hay nada que navegar, pero sí conviene
   decir cuántos son: si no, uno no sabe si está viendo todo o un pedazo. */
.paginacion--sola{justify-content:flex-start;margin-top:12px;font-size:12.5px;color:var(--texto-3)}
.btn--inactivo{opacity:.35;pointer-events:none}

/* Barra de guardar pegada abajo: en una lista larga el botón quedaba lejos y
   había que bajar hasta el final para confirmar la asistencia. */
/* El margen inferior era negativo (-60px) para pegar la barra al borde de la
   página. El efecto secundario: TODO lo que viene después se sube 60px y queda
   por debajo de la barra —la gráfica del mes aparecía tapada—. Ahora la barra
   ocupa su sitio en el flujo y deja aire al bloque siguiente. */
.barra-guardar{
  position:sticky;bottom:0;z-index:30;display:flex;align-items:center;gap:14px;
  justify-content:space-between;flex-wrap:wrap;
  margin:0 -26px;padding:14px 26px;
  background:rgba(7,14,21,.94);backdrop-filter:blur(10px);border-top:1px solid var(--linea);
}
.barra-guardar span{font-weight:700;font-size:14px}
/* Lo que siga a la barra arranca despegado de ella. */
.barra-guardar+*{margin-top:22px}
@media (max-width:900px){ .barra-guardar{margin:0 -15px;padding:12px 15px} }

/* ---------------------------- pasar asistencia -------------------------- */
/* La fila entera es el botón: se toca a quien llegó y listo. */
.asis{cursor:pointer;transition:background .12s}
.asis td{opacity:.55}
.asis:hover td{opacity:.8}
.asis--si td{opacity:1}
.asis--si{background:rgba(46,204,143,.07)}
.asis--si td:first-child{box-shadow:inset 3px 0 0 var(--ok)}
.asis__tick{margin-left:auto;color:var(--ok);font-size:17px;font-weight:800;opacity:0;transition:opacity .12s}
.asis--si .asis__tick{opacity:1}
.asis__estado{font-size:12.5px;padding:6px 9px}
.asis .persona{width:100%}

/* --------------------- planilla de mensualidades ------------------------
   Reproduce la hoja de cálculo que los clubes llevan hoy a mano: una fila por
   persona, una columna por mes y el color diciendo cómo va cada casilla. */
table.planilla{min-width:760px}
table.planilla td{padding:6px 8px}
.planilla__mes{text-align:center}
.celda{text-align:center;font-size:12.5px;font-weight:600;border-left:1px solid rgba(30,51,70,.6)}
.celda--completo{background:rgba(46,204,143,.16);color:#9df0cd}
.celda--parcial{background:rgba(245,181,61,.18);color:#f7d089}
.celda--pendiente{background:rgba(255,90,99,.16);color:#ffb3b7}
.celda--inactivo{background:rgba(143,169,189,.08);color:var(--texto-3);font-weight:500}
.celda--sin_cobro{color:var(--texto-3);font-weight:400}
.celda__menu{display:block}
.celda__menu>summary{list-style:none;cursor:pointer;padding:5px 4px;border-radius:7px}
.celda__menu>summary::-webkit-details-marker{display:none}
.celda__menu>summary:hover{background:rgba(255,255,255,.08)}
.celda__menu[open]>summary{outline:2px solid var(--azul);outline-offset:-2px}
.celda__acciones{position:absolute;z-index:50;margin-top:6px;min-width:250px;text-align:left;
  background:var(--panel-2);border:1px solid var(--linea);border-radius:12px;padding:14px;
  box-shadow:var(--sombra);display:flex;flex-direction:column;gap:8px}
.celda__acciones b{font-size:13.5px}
.celda__acciones small{color:var(--texto-2);font-size:12px}
/* Un mes saldado por acuerdo no se pinta como pagado: no entró plata. */
.celda--acordado{background:rgba(18,179,227,.16);color:#a9e4f8}
.celda--suspendido{background:rgba(143,169,189,.08);color:var(--texto-3);font-weight:500}
/* Meses en que no estaba en el club: dejó de venir y no se le cobraron. */
.celda--fuera{background:rgba(143,169,189,.08);color:var(--texto-3);font-weight:500}

/* ===========================================================================
   Móvil
   En la piscina no hay computadores: el panel se usa desde el celular, de pie
   y con una mano. Todo lo de abajo existe para que eso funcione de verdad.
   =========================================================================== */

@media (max-width:760px){

  /* iOS hace zoom al enfocar un campo con letra menor a 16px y descuadra la
     pantalla. Subirlos evita ese salto en cada toque. */
  input[type=text],input[type=email],input[type=password],input[type=number],
  input[type=date],input[type=month],input[type=time],input[type=tel],
  input[type=url],input[type=search],select,textarea{font-size:16px;padding:11px 13px}

  /* Objetivo táctil cómodo: 44px es el mínimo que se acierta sin mirar. */
  .btn{min-height:44px;padding:11px 18px}
  .btn--sm{min-height:38px}

  /* Menú, título y avatar en la primera línea; los botones debajo, a lo ancho.
     El avatar se alinea con el botón de menú, que es lo que se ve al entrar.
     Con esos tres renglones la barra ocupa casi un tercio del celular, así que
     aquí deja de ir pegada arriba: se va con el contenido y la pantalla queda
     para la lista, que es a lo que uno entró. */
  .top{flex-wrap:wrap;padding:10px 15px;align-items:center;position:static}
  .top>div:not(.top__acciones):not(.top__user){flex:1;min-width:0}
  .top__acciones{width:100%;margin-left:0;order:3;gap:8px}
  .top__acciones .btn{flex:1;justify-content:center}
  .top__user{order:2;margin-left:auto;padding-left:0;border-left:none;gap:0}
  .top__titulo{font-size:1.05rem}
  .top__sub{font-size:12px}
  .avatar{width:38px;height:38px}

  /* Dos indicadores por fila: cuatro apilados son cuatro pantallas de scroll.
     Solo la rejilla de cuatro, que es la de los indicadores; forzar también la
     de tres metía a la fuerza dos tarjetas de contenido que no caben. */
  .grid--4{grid-template-columns:repeat(2,1fr);gap:10px}
  .grid--3,.grid--2{gap:12px}
  .kpi{padding:12px 14px}
  .kpi b{font-size:1.5rem}
  .kpi span{font-size:10.5px}
  .kpi small{font-size:11px}

  .card{padding:15px 14px}
  .card__head{gap:10px}
  .filtros-linea{width:100%;margin-left:0}
  .filtros-linea select{flex:1 1 130px;width:auto;min-width:0}
  .fila{gap:10px}

  /* Un menú flotante anclado a la derecha se sale de la pantalla: se ancla al
     ancho disponible. */
  .celda__acciones,.buscador__lista{
    left:0;right:0;width:auto;min-width:0;max-width:calc(100vw - 40px)}
  /* Este cuelga del botón "···", que mide 40px de ancho: estirarlo de borde a
     borde de su botón lo dejaba de 43px. Se ancla a la derecha y toma el ancho
     que necesita, sin pasarse de la pantalla. */
  .pers__panel{right:0;left:auto;width:min(240px, calc(100vw - 36px));min-width:0}

  /* ------------- las tablas dejan de ser tablas y pasan a fichas -----------
     Seis columnas no caben en un celular ni con desplazamiento lateral cómodo:
     arrastrar la pantalla para leer un dato es justo lo que se siente mal. Así
     que aquí abajo cada fila se vuelve una tarjeta y cada dato dice de qué
     columna viene, leyendo la etiqueta del atributo data-col de la celda.

     Es el comportamiento por omisión, no algo que haya que recordar activar:
     ninguna tabla del panel obliga a moverse hacia el lado. Si alguna vez una
     tabla necesita seguir siendo una rejilla de verdad, se marca con
     .tabla--matriz y conserva su propio desplazamiento dentro del marco. */
  .tabla-wrap{border:none;border-radius:0;overflow:visible;background:none}
  .tabla-wrap:has(.tabla--matriz){
    border:1px solid var(--linea);border-radius:var(--radio);overflow-x:auto}

  table:not(.tabla--matriz),
  table:not(.tabla--matriz) thead,
  table:not(.tabla--matriz) tbody,
  table:not(.tabla--matriz) tr,
  table:not(.tabla--matriz) td{display:block;min-width:0;width:auto}
  table:not(.tabla--matriz) thead{display:none}
  table:not(.tabla--matriz) tr{
    border:1px solid var(--linea);border-radius:14px;margin-bottom:12px;
    padding:12px 14px;background:var(--fondo-2)}
  table:not(.tabla--matriz) tr:hover{background:var(--fondo-2)}
  table:not(.tabla--matriz) tbody tr:last-child{margin-bottom:0}
  /* La celda es una línea "etiqueta · valor". Si el valor no cabe al lado de la
     etiqueta se pasa al renglón siguiente, donde tiene el ancho completo: antes
     se salía cuatro pixeles y eso bastaba para volver a scroll horizontal. */
  table:not(.tabla--matriz) td{
    border:none;padding:7px 0;display:flex;align-items:center;gap:8px;
    flex-wrap:wrap;overflow-wrap:anywhere;
    border-bottom:1px solid rgba(30,51,70,.5);text-align:left}
  table:not(.tabla--matriz) td>*{min-width:0;max-width:100%}
  /* Una etiqueta larga ("No se le cobra · Fundador y entrenador") prefiere
     partirse en dos renglones antes que empujar la tarjeta fuera de pantalla. */
  table:not(.tabla--matriz) .badge{white-space:normal}
  table:not(.tabla--matriz) td:first-child{
    border-bottom:1px solid var(--linea);padding-bottom:10px;margin-bottom:4px;display:block}
  table:not(.tabla--matriz) td:last-child{border-bottom:none;padding-top:10px}
  table:not(.tabla--matriz) td[data-col]::before{
    content:attr(data-col);flex:0 0 auto;width:78px;font-size:10.5px;letter-spacing:.05em;
    text-transform:uppercase;color:var(--texto-3);font-weight:700;line-height:1.35}
  table:not(.tabla--matriz) td:empty{display:none}
  /* Un guion sirve para no descuadrar una columna, pero en una ficha es un
     renglón que no dice nada: la celda marcada como vacía desaparece. */
  table:not(.tabla--matriz) td.td-vacio{display:none}
  /* Dos campos dentro de una misma celda (el cobro y su nota) se apilan en vez
     de pelearse el ancho. */
  table:not(.tabla--matriz) td>input,
  table:not(.tabla--matriz) td>select{flex:1 1 100%}
  /* El pie de tabla es un total, no una ficha más: queda como una línea de
     resumen debajo de las tarjetas. */
  table:not(.tabla--matriz) tfoot{display:block}
  table:not(.tabla--matriz) tfoot tr{
    display:flex;justify-content:space-between;align-items:baseline;gap:10px;
    background:none;border:none;border-top:1px solid var(--linea);border-radius:0;
    padding:11px 2px 0;margin:0}
  table:not(.tabla--matriz) tfoot td{display:block;border:none;padding:0;width:auto}
  /* El color de estado se conserva en una barrita, no en el fondo de la celda. */
  table:not(.tabla--matriz) td.celda{background:none;box-shadow:inset 3px 0 0 currentColor;padding-left:10px}
  /* En la planilla convertida en tarjetas, cada mes es una fila que se toca
     para registrar el pago. Con 2px de relleno el área quedaba en 23px de
     alto: la mitad de lo que necesita un pulgar, así que se fallaba el toque y
     parecía que no respondía. 44px es el mínimo que se sostiene con el dedo. */
  table:not(.tabla--matriz) .celda__menu>summary{text-align:left;padding:12px 8px;
    min-height:44px;display:flex;align-items:center;margin:0 -8px;border-radius:8px}
  table:not(.tabla--matriz) .celda__menu>summary:active{background:rgba(255,255,255,.06)}
  table:not(.tabla--matriz) .td-acciones{justify-content:flex-start;flex-wrap:wrap;gap:6px;white-space:normal}
  /* Un nombre largo se recorta con puntos suspensivos; para eso el bloque de
     texto tiene que poder encogerse. */
  .persona>div{min-width:0}

  /* Las pestañas se desplazaban hacia el lado y la última quedaba cortada: el
     mismo problema de las tablas. En el celular se reparten en dos renglones. */
  /* Al lado de un título largo la pista se parte en dos: mejor su propio renglón. */
  /* El summary es un flex sin wrap: un hijo en display:block se vuelve ítem
     flexible y en vez de bajar de línea ensancha la caja, desbordando la
     pantalla 11px. Con wrap baja completo, que es lo que se buscaba. */
  details.caja > summary{flex-wrap:wrap}
  .pista-abrir{display:block;flex:1 0 100%;margin:4px 0 0;min-width:0}
  .tabs{flex-wrap:wrap;overflow-x:visible;gap:2px 4px}
  .tabs a{padding:9px 12px;font-size:13px}
  .asis-barra{gap:8px}
  .asis-barra input[type=search]{min-width:100%;order:-1}
  .asis-barra .btn{flex:1}
  .barra-guardar{padding:12px 15px}
  .barra-guardar .btn{flex:1;justify-content:center}
  [id]{scroll-margin-top:12px}   /* en el celular la barra no se queda pegada */
  .paginacion{justify-content:center;gap:10px}
  .paginacion .btn{flex:1 1 auto}
  .paginacion span{flex:1 1 100%;order:-1;text-align:center}
  .paginacion--sola{justify-content:center}
  .contenido{padding:14px 15px 80px}
}

/* Pantallas muy angostas de verdad: una sola columna. */
@media (max-width:359px){
  .grid--4,.grid--3{grid-template-columns:1fr}
  .top__acciones{flex-direction:column}
  .top__acciones .btn{width:100%}
}

/* Elegir a qué entrenamiento se le pasa lista. La tarjeta es el control: se ve
   de un vistazo a quién convoca y si ya está registrada, que es lo que evita
   pasar la misma lista dos veces. */
.card--pick{display:flex;flex-direction:column;gap:3px;text-decoration:none;cursor:pointer;
  transition:border-color .12s,transform .12s}
.card--pick b{color:var(--texto);font-size:15px}
.card--pick small{color:var(--texto-2);font-size:12.5px}
.card--pick:hover{border-color:var(--azul);transform:translateY(-1px)}
.card--pick:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
.card--pick-on{border-color:var(--azul);box-shadow:inset 3px 0 0 var(--azul)}
.pick__estado{margin-top:5px;color:var(--texto-3,var(--texto-2));font-size:12px}
.pick__estado--ok{color:var(--ok)}
/* Un entrenamiento que no toca hoy: sigue elegible, pero no compite con el que sí. */
.card--pick-off{opacity:.62}
.card--pick-off:hover,.card--pick-off:focus-visible{opacity:1}
.pick__otro{margin-left:7px;font-weight:400;color:var(--texto-3);font-size:12px}
/* Reponer un entreno de otro día es normal, no un error: informa sin alarmar. */
.aviso-repone{margin:0 0 10px;padding:9px 13px;border-radius:10px;font-size:13px;
  color:var(--texto-2);background:var(--panel-2);border:1px solid var(--linea);
  border-left:3px solid var(--azul)}
.aviso-repone b{color:var(--texto)}
/* El selector de entrenamiento vive dentro de la misma tarjeta de la fecha:
   sin borde propio ni fondo, para que no parezcan dos bloques distintos. */
.caja--elegir{margin:14px 0 0;border:0;background:transparent;padding:0}
.caja--elegir > summary{padding:0;background:transparent}
.caja--elegir > div{padding:12px 0 0}
/* La fecha necesita lo que necesita: estirarla a media fila empujaba la lista
   de gente fuera de la primera pantalla. .fila es un grid de columnas iguales,
   así que esta fila se sale del molde y se arma a la medida. */
.fila--fecha{display:flex;flex-wrap:wrap;align-items:end;gap:12px}
.fila--fecha .campo--fecha{flex:0 0 190px}
@media (max-width:520px){ .fila--fecha .campo--fecha{flex:1 1 150px} }

/* Confirmación antes de borrar. Es la última pantalla que ve alguien antes de
   perder algo, así que Cancelar queda primero y con el foco. */
.dialogo{border:1px solid var(--linea);border-radius:14px;background:var(--fondo-2);
  color:var(--texto);padding:22px;max-width:420px;width:calc(100% - 32px);box-shadow:0 18px 50px rgba(0,0,0,.45)}
.dialogo::backdrop{background:rgba(3,10,22,.62)}
.dialogo__msg{margin:0 0 18px;font-size:15px;line-height:1.5}
.dialogo__pie{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
@media (max-width:420px){ .dialogo__pie .btn{flex:1 1 100%} }

/* Elegir plantilla: la muestra es el argumento, así que la imagen manda y el
   texto acompaña. Es un <button> porque cada una envía su propio formulario. */
.plantilla{display:block;width:100%;text-align:left;cursor:pointer;padding:0;overflow:hidden;
  background:var(--fondo-2);border:1px solid var(--linea);border-radius:12px;color:inherit;
  font:inherit;transition:border-color .12s,transform .12s}
.plantilla:hover{border-color:var(--azul);transform:translateY(-2px)}
.plantilla:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
.plantilla--on{border-color:var(--azul);box-shadow:inset 0 0 0 1px var(--azul)}
.plantilla img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.plantilla b{display:block;padding:11px 13px 2px;font-size:14px;color:var(--texto)}
.plantilla small{display:block;padding:0 13px 13px;font-size:12px;color:var(--texto-2);line-height:1.45}

/* El estado del afiliado, al lado del nombre. Se ve de una y se cambia de un
   toque: antes había que abrir la ficha y bajar hasta la segunda tarjeta. */
.persona-cabeza__estado{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-left:auto}
.estado-chip{font-size:12px;font-weight:600;padding:6px 12px;border-radius:20px;
  border:1px solid var(--linea);background:var(--panel-2);color:var(--texto-2);white-space:nowrap}
.estado-chip--activo{border-color:var(--ok);color:var(--ok);background:rgba(46,204,143,.12)}
.estado-chip--inactivo{border-color:var(--warn);color:var(--warn);background:rgba(255,176,32,.12)}
.estado-chip--retirado{border-color:var(--bad);color:var(--bad);background:rgba(255,107,107,.12)}
.estado-chip--btn{cursor:pointer;font-family:inherit;transition:border-color .12s,color .12s}
.estado-chip--btn:hover{border-color:var(--azul);color:var(--azul)}
.estado-chip--btn:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
@media (max-width:600px){
  /* La cabecera pasa a dos renglones: nombre arriba, estado abajo. Sin el wrap
     los chips se montaban encima del nombre, que en móvil se parte en tres
     líneas. flex-basis:100% los baja completos en vez de apretarlos al lado. */
  .persona-cabeza{flex-wrap:wrap}
  /* :not() para no pisar al bloque de estado, que también es un div: sin esto
     '.persona-cabeza > div' le ganaba por especificidad y los chips se
     quedaban al lado del nombre, encimados. */
  .persona-cabeza > div:not(.persona-cabeza__estado){flex:1 1 auto}
  .persona-cabeza > .persona-cabeza__estado{flex:1 0 100%;margin-left:0;margin-top:6px}
  .estado-chip{flex:1 1 auto;text-align:center}
}

/* La ficha del afiliado, plegable en el celular.
   
   Son cinco tarjetas y una ficha completa obliga a recorrerlas todas para
   llegar a un campo del final. En el celular cada una se abre por separado;
   en pantalla ancha se ven todas, porque ahí caben en dos columnas y plegarlas
   solo agregaría clics. Los campos ocultos igual se envían: <details> esconde,
   no saca del formulario. */
details.card--pliega{padding:0}
details.card--pliega > .card__head{margin:0;padding:16px 18px;cursor:pointer;list-style:none;
  display:flex;align-items:center;gap:10px}
details.card--pliega > .card__head::-webkit-details-marker{display:none}
/* El chevrón se dibuja con bordes y no con un carácter: el ▸ no existe en
   todas las fuentes y salía como un "<" suelto. */
details.card--pliega > .card__head::after{content:'';margin-left:auto;width:7px;height:7px;
  border-right:2px solid var(--azul);border-bottom:2px solid var(--azul);
  transform:rotate(-45deg);transition:transform .15s}
details.card--pliega[open] > .card__head::after{transform:rotate(45deg)}
details.card--pliega > *:not(.card__head){padding-left:18px;padding-right:18px}
details.card--pliega > *:last-child{padding-bottom:18px}

@media (min-width:761px){
  /* En escritorio no hay nada que plegar: caben en dos columnas y esconderlas
     solo agregaría clics. Chrome ya no oculta el contenido de un <details>
     cerrado con display:none sino con content-visibility sobre
     ::details-content, así que hay que levantar las dos cosas: con una sola
     las tarjetas seguían plegadas en pantalla ancha. */
  details.card--pliega > *:not(.card__head){display:block !important}
  details.card--pliega::details-content{content-visibility:visible !important;
    block-size:auto !important}
  details.card--pliega > .card__head{cursor:default}
  details.card--pliega > .card__head::after{display:none}
}

/* El nombre del afiliado en la planilla es el enlace a su ficha. Medía 16px de
   alto: se toca con el dedo y se falla. En escritorio no cambia nada porque
   ahí se apunta con el mouse. */
@media (max-width:760px){
  .enlace-nombre{display:inline-flex;align-items:center;min-height:40px;padding:2px 0}
}