/* Valores de Diseño/tokens.json (dirección «Dorsal del club», color «Mar», letra «Cartel»).
   Componentes de DISENO.md y MVP.md §6: dorsal, aviso, tarjeta, fila de día o de cita, botón. */
:root {
  --mar:#39accb; --claro:#7bcad7; --hondo:#2176a1; --tinta:#14283f; --tinta-fuerte:#0f2238; --morado:#554381; --papel:#ffffff; --gris:#3d4f66; --linea:#14283f;
  --f-cartel:"Anton", "Arial Narrow", "Archivo", sans-serif; --f-texto:"Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-hora:76px; --t-frase:28px; --t-titulo:22px; --t-texto:16px; --t-etq:12px;
  --borde:3px; --sombra:6px; --sombra-s:4px; --e1:8px; --e2:12px; --e3:16px; --e4:24px; --e5:32px;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--papel); color:var(--tinta); font:var(--t-texto)/1.45 var(--f-texto); }
h1, h2, h3, p, ul { margin:0; padding:0; }
ul { list-style:none; }
a { color:inherit; }
button, input { font:inherit; color:inherit; }
button { cursor:pointer; }
:focus-visible { outline:3px solid var(--morado); outline-offset:3px; }
[hidden] { display:none !important; }

/* Herramienta de prueba: NO es parte de la web. Sirve para ver qué diría otro día. */
.prueba { background:#fff4d6; color:#5c3d00; border-bottom:2px dashed #b98900; padding:10px var(--e3); font-size:14px; }
.prueba summary { font-weight:800; cursor:pointer; min-height:28px; }
.prueba .fila { display:flex; gap:var(--e1); flex-wrap:wrap; align-items:center; margin-top:var(--e1); }
.prueba label { font-weight:600; }
.prueba input, .prueba button { min-height:44px; padding:6px 10px; border:1.5px solid #b98900; background:#fff; border-radius:6px; font-size:14px; }

.pagina { max-width:1080px; margin:0 auto; padding:0 var(--e3) 56px; }
.cabecera { display:flex; align-items:flex-end; gap:var(--e2); margin:0 calc(-1 * var(--e3)) var(--e3); padding:var(--e4) var(--e3) var(--e3); background:var(--tinta); color:#fff; border-bottom:var(--borde) solid var(--linea); }
.escudo { width:60px; height:60px; border-radius:50%; flex:none; border:3px solid #fff; background:var(--hondo) center / cover no-repeat; }
.cabecera .nombre { font-weight:800; font-size:19px; text-decoration:none; }
.cabecera .fecha { margin-left:auto; font-size:14px; text-align:right; }

.menu { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:var(--e3); }
.menu a { display:inline-flex; flex:1 1 auto; align-items:center; justify-content:center; min-height:44px; padding:6px; border:2px solid var(--linea); font-size:14px; font-weight:800; text-decoration:none; }
.menu a[aria-current] { background:var(--tinta); color:#fff; }

.vista { display:none; }
.vista.activa { display:block; }
.etq { display:block; font-size:var(--t-etq); font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.cartel { font-family:var(--f-cartel); font-weight:400; text-transform:uppercase; letter-spacing:.01em; line-height:1.08; }
.nota { font-size:14px; color:var(--gris); margin-top:var(--e3); max-width:70ch; }

.caja { border:var(--borde) solid var(--linea); background:var(--papel); box-shadow:var(--sombra-s) var(--sombra-s) 0 var(--linea); }
a.caja { transition:transform .08s ease-out, box-shadow .08s ease-out; }
a.caja:active { transform:translate(var(--sombra-s), var(--sombra-s)); box-shadow:0 0 0 var(--linea); }
@media (prefers-reduced-motion: reduce) { a.caja { transition:none; } }

.aviso { padding:var(--e2) var(--e3); border:var(--borde) solid var(--linea); border-left:12px solid var(--morado); margin-bottom:var(--e3); }
.sin-avisos { padding:var(--e1) var(--e3); border:2px dashed var(--gris); color:var(--gris); font-size:14px; }
.aviso .etq { color:var(--morado); }
.aviso p { font-weight:600; }
.aviso small { font-size:14px; color:var(--gris); }

.dorsal { position:relative; background:var(--mar); color:var(--tinta-fuerte); border:var(--borde) solid var(--linea); box-shadow:var(--sombra) var(--sombra) 0 var(--linea); padding:var(--e5) var(--e4) var(--e4); }
.dorsal::before, .dorsal::after { content:""; position:absolute; top:10px; width:12px; height:12px; border-radius:50%; background:var(--papel); border:2px solid var(--linea); }
.dorsal::before { left:10px; } .dorsal::after { right:10px; }
.dorsal h1 { font-size:inherit; font-weight:400; line-height:1; }
.dorsal .frase { display:block; font-size:var(--t-frase); line-height:1.12; margin:var(--e1) 0 6px; }
.dorsal .hora { display:block; font-size:var(--t-hora); line-height:.95; }
.dorsal .detalle { margin-top:var(--e2); font-weight:600; }
.dorsal .demo { display:inline-block; margin-top:var(--e1); font-size:13px; font-weight:600; background:var(--papel); border:2px solid var(--linea); padding:1px 6px; }
.dorsal.vacio { background:var(--papel); }

.rejilla { display:grid; gap:var(--e3); margin-top:var(--e4); }
.tarjetas { display:grid; grid-template-columns:1fr 1fr; gap:var(--e3); }
.tarjeta { display:block; text-decoration:none; padding:var(--e3); min-height:44px; }
.tarjeta .etq { color:var(--gris); }
.tarjeta b { display:block; font-size:var(--t-titulo); margin:4px 0 2px; }
.tarjeta .s { font-size:14px; color:var(--gris); display:block; }
.tarjeta .ir { display:block; margin-top:var(--e1); font-size:14px; font-weight:800; text-decoration:underline; text-underline-offset:3px; }

.volver { display:inline-flex; align-items:center; min-height:44px; font-weight:800; margin-bottom:var(--e2); }
.titulo { font-size:36px; margin-bottom:var(--e2); }
.paso { display:flex; gap:var(--e2); align-items:center; flex-wrap:wrap; margin-bottom:var(--e3); }
.paso a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; padding:6px 12px; border:var(--borde) solid var(--linea); font-weight:800; text-decoration:none; }
.dias { display:grid; gap:var(--e2); }
.dia { display:grid; grid-template-columns:92px 1fr; gap:var(--e3); align-items:center; padding:var(--e2) var(--e3); border:var(--borde) solid var(--linea); }
.dia.hoy { background:var(--mar); color:var(--tinta-fuerte); box-shadow:var(--sombra-s) var(--sombra-s) 0 var(--linea); }
.dia.libre { border-style:dashed; color:var(--gris); }
.dia.corrida { opacity:.75; }
.dia .d { font-family:var(--f-cartel); text-transform:uppercase; font-size:20px; }
.dia .q b { display:block; font-weight:800; }
.dia .q span { font-size:14px; display:block; }
.dia .q > * + * { margin-top:2px; }
.tipo, .cambio, .marca { display:inline-block !important; font-size:12px !important; font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:1px 6px; }
.tipo { border:2px solid currentColor; margin-bottom:4px; }
.cambio { background:var(--morado); color:#fff; }
.marca { background:var(--papel); color:var(--tinta); border:2px solid var(--linea); }
.enlaces { display:flex !important; gap:var(--e3); flex-wrap:wrap; margin-top:6px; }
.dia .q .llevar b { display:inline; }
details.llevar { margin-top:6px; font-size:14px; }
details.llevar summary { font-weight:800; cursor:pointer; min-height:32px; display:flex; align-items:center; gap:6px; }
details.llevar summary::before { content:'+'; font-family:var(--f-cartel); }
details.llevar[open] summary::before { content:'–'; }
details.llevar summary::-webkit-details-marker { display:none; }
.enlaces a { font-weight:800; min-height:32px; display:inline-flex; align-items:center; }
.grupo { margin:var(--e4) 0 var(--e2); }

/* Calendario: el mes de un vistazo y, debajo, los días que tienen algo */
.cal { display:grid; gap:var(--e4); }
.cal > div { min-width:0; }
.mes { display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; max-width:460px; }
.mes .cab { text-align:center; font-size:var(--t-etq); font-weight:800; color:var(--gris); }
.casilla { position:relative; display:flex; align-items:flex-start; justify-content:center; min-height:46px; padding-top:6px; border:2px solid transparent; font-weight:800; text-decoration:none; font-variant-numeric:tabular-nums; }
.casilla.pasado { color:var(--gris); }
.casilla.cita { background:var(--mar); color:var(--tinta-fuerte); border-color:var(--linea); }
.casilla.hoy { border-color:var(--linea); box-shadow:3px 3px 0 var(--linea); }
.punto { display:inline-block; width:8px; height:8px; border-radius:50%; background:currentColor; }
.casilla .punto { position:absolute; bottom:6px; left:50%; margin-left:-4px; }
.cuadro { display:inline-block; width:14px; height:14px; background:var(--mar); border:2px solid var(--linea); vertical-align:-2px; }
.cuadro.aro { background:var(--papel); box-shadow:2px 2px 0 var(--linea); }
.leyenda span { display:inline-flex; align-items:center; gap:6px; }
.leyenda { display:flex; gap:var(--e3); flex-wrap:wrap; margin-top:var(--e2); font-size:14px; color:var(--gris); }
.dia:focus { outline:3px solid var(--morado); outline-offset:3px; }

/* Lo que no caduca: bloques de portada y preguntas */
.seccion { margin-top:var(--e5); padding-top:var(--e4); border-top:var(--borde) solid var(--linea); }
.seccion h2 { font-size:var(--t-frase); margin-bottom:var(--e2); }
.seccion h2.segundo { margin-top:var(--e4); }
.seccion p { max-width:62ch; }
.seccion .botones { margin-top:var(--e3); }
.apoyan { display:grid; gap:6px; font-weight:800; }
.grupo-faq { margin-top:var(--e4); }
.grupo-faq h2 { font-size:var(--t-titulo); margin-bottom:var(--e2); }
.faq { display:grid; gap:var(--e2); max-width:720px; }
.faq details { border:var(--borde) solid var(--linea); }
.faq summary { cursor:pointer; padding:var(--e2) var(--e3); font-weight:800; min-height:48px; display:flex; align-items:center; }
.faq details[open] summary { border-bottom:1px solid var(--linea); }
.faq p { padding:var(--e2) var(--e3); }
.fila-faq { grid-template-columns:1fr; }
.fila-faq .botones { margin-top:var(--e1); }
#p-lista, .lista-admin { margin-top:var(--e4); max-width:720px; }

.aviso.caducado { border-left-color:var(--gris); opacity:.8; }
.aviso.caducado .etq { color:var(--gris); }
.pie { margin-top:var(--e5); padding-top:var(--e3); border-top:1px solid var(--linea); font-size:14px; color:var(--gris); display:flex; gap:var(--e4); flex-wrap:wrap; }
.pie a { min-height:44px; display:inline-flex; align-items:center; }

/* Administrar: botón, formulario y confirmación, como en el prototipo */
.boton { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:10px 18px; background:var(--tinta); color:#fff; border:var(--borde) solid var(--tinta); font-weight:800; text-decoration:none; }
.boton.claro { background:var(--papel); color:var(--tinta); }
.boton.apagado { background:#e6e9ee; color:var(--gris); border-color:var(--gris); border-style:dashed; cursor:not-allowed; }
.boton:active { transform:translate(2px, 2px); }
.botones { display:flex; gap:var(--e2); flex-wrap:wrap; margin-top:var(--e1); }
.tareas { display:grid; gap:var(--e3); margin-top:var(--e3); }
.tarea { display:block; text-decoration:none; padding:var(--e3) var(--e4); }
.tarea b { display:block; font-size:var(--t-titulo); }
.tarea span { font-size:14px; color:var(--gris); }
.tarea.principal { background:var(--mar); color:var(--tinta-fuerte); }
.tarea.principal span { color:var(--tinta-fuerte); }
.asi { margin-top:var(--e4); padding:var(--e3); border:2px dashed var(--gris); }
.asi .cartel { font-size:22px; margin-top:4px; }
form { display:grid; gap:var(--e3); max-width:560px; }
label { display:grid; gap:6px; font-weight:800; }
label small { font-weight:400; color:var(--gris); font-size:14px; }
label.quien { max-width:560px; }
input, textarea, select { font:inherit; color:var(--tinta); padding:12px; min-height:48px; border:var(--borde) solid var(--linea); background:#fff; border-radius:0; width:100%; }
textarea { min-height:96px; resize:vertical; }
fieldset { border:0; padding:0; margin:0; display:grid; gap:var(--e1); }
legend { font-weight:800; padding:0; margin-bottom:6px; }
#e-campos { display:grid; gap:var(--e3); }
.radio { display:flex; gap:10px; align-items:flex-start; padding:12px; border:var(--borde) solid var(--linea); font-weight:600; min-height:48px; }
.radio input { width:22px; min-height:22px; height:22px; margin-top:1px; flex:none; padding:0; accent-color:var(--tinta); }
.radio small { display:block; font-weight:400; color:var(--gris); font-size:14px; }
.error { color:#8a1f1f; font-weight:800; }
.error:empty { display:none; }
.error::before { content:"No se ha guardado: "; }
.hecho { padding:var(--e4); background:var(--mar); color:var(--tinta-fuerte); border:var(--borde) solid var(--linea); box-shadow:var(--sombra) var(--sombra) 0 var(--linea); max-width:560px; }
.hecho .cartel { font-size:var(--t-frase); }
.hecho textarea { margin-top:var(--e2); font-size:15px; }
.prueba input[type="date"] { width:auto; }

@media (min-width: 860px) {
  .tareas { grid-template-columns:repeat(2, 1fr); }
  .cal { grid-template-columns:minmax(320px, 460px) 1fr; align-items:start; }
  .menu a { flex:none; padding:6px 16px; font-size:16px; }
  .dos { display:grid; grid-template-columns:1fr 1fr; gap:var(--e5); }
  .seccion h2.segundo { margin-top:0; }
  :root { --t-hora:128px; --t-frase:40px; --t-titulo:26px; --t-texto:17px; }
  .pagina { padding:0 var(--e5) 72px; }
  .cabecera { margin:0 calc(-1 * var(--e5)) var(--e4); padding:var(--e5) var(--e5) var(--e3); }
  .rejilla { grid-template-columns:1.3fr 1fr; align-items:start; gap:var(--e4); }
  .dorsal { padding:44px 36px 36px; }
  .titulo { font-size:52px; }
}
@media (max-width: 380px) { :root { --t-hora:64px; --t-frase:24px; } .tarjetas { grid-template-columns:1fr; } }

/* ---------- perfiles (D-31) ---------- */
body.servidor .prueba { display:none; }
body.servidor:not(.entrenador) .solo-entrenador { display:none; }
.para { display:inline-block; margin-left:6px; padding:0 6px; border:2px solid var(--morado); color:var(--morado); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.guardado { position:sticky; top:0; z-index:5; margin:0 calc(-1 * var(--e3)); padding:10px var(--e3); background:var(--tinta); color:#fff; font-weight:600; }
.guardado.error { background:#8a1c1c; }
.zona-texto { white-space:pre-line; border:var(--borde) solid var(--linea); padding:var(--e3); margin-bottom:var(--e3); }
fieldset.opciones { border:0; padding:0; margin:0 0 var(--e3); }
fieldset.opciones legend { font-weight:800; margin-bottom:6px; }
fieldset.opciones legend small { display:block; font-weight:400; color:var(--gris); font-size:14px; }
.viendo { position:sticky; top:0; z-index:6; margin:0 calc(-1 * var(--e3)); padding:10px var(--e3); background:#ffd23f; color:var(--tinta); font-weight:600; border-bottom:3px solid var(--tinta); }
.viendo button { margin-left:6px; font:inherit; font-weight:800; text-decoration:underline; background:none; border:0; color:inherit; padding:6px 0; min-height:32px; cursor:pointer; }
.ver-como { margin:var(--e2) 0 var(--e3); }
body.viendo-como .solo-entrenador { display:none; }
body.servidor .solo-local, body:not(.servidor) .solo-servidor { display:none; }