/* ============================================================================
 * ORANGE CRACKS · el panel de administración
 * ----------------------------------------------------------------------------
 * Hereda de estilo.css los colores, los radios y el botón, para que el panel
 * se sienta parte del mismo sitio. Lo que cambia es el CRITERIO: la página
 * pública es un escaparate y esto es una herramienta que se usa de pie, en una
 * cancha, con una mano y con prisa. De ahí las tres reglas que ordenan todo lo
 * de abajo:
 *
 *   1. NADA POR DEBAJO DE 16px en los campos. Safari en iPhone hace zoom solo
 *      al enfocar un input más pequeño y descoloca la pantalla entera.
 *   2. EL BOTÓN QUE MÁS SE TOCA ES EL MÁS GRANDE. Aquí es "Cobré": ese es el
 *      gesto de cada día 5, con el papá enfrente y una fila detrás.
 *   3. EL ESTADO SE VE SIN LEER. Cada tarjeta lleva un filete de color a la
 *      izquierda: verde al corriente, ámbar debiendo, rojo a punto de baja.
 *      Se distingue de un vistazo desde medio metro.
 * ========================================================================== */

.panel-body {
  /* El panel no lleva la foto del estadio: es una herramienta, no un
     escaparate, y un fondo con textura debajo de una lista de cincuenta
     nombres sólo hace que cueste más leerlos. */
  background: var(--negro);
  padding-bottom: 60px;
}

body.sin-scroll { overflow: hidden; }

.pantalla[hidden] { display: none; }

/* ==========================================================================
   1 · ENTRAR
   ========================================================================== */

/* El :not([hidden]) NO sobra. `display: grid` a secas gana por especificidad a
   la regla de arriba y a la del navegador, asi que la pantalla de entrar se
   seguiria viendo por encima del panel aun con el atributo hidden puesto. Es
   la trampa clasica de mezclar [hidden] con display en la misma etiqueta. */
#pantalla-entrar:not([hidden]) {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.entrar {
  width: min(100%, 400px);
  padding: 34px 30px 26px;
  border-radius: var(--radio);
  background: var(--carbon);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra);
  text-align: center;
}
.entrar__logo { width: 84px; margin: 0 auto 12px; }
.entrar__rotulo {
  margin: 0 0 24px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--naranja);
}
.entrar form { display: grid; gap: 16px; text-align: left; }
.entrar__error {
  margin: 0;
  padding: 11px 14px;
  border-radius: var(--radio-s);
  background: rgb(255 90 90 / 12%);
  border: 1px solid rgb(255 90 90 / 34%);
  font-size: 14.5px;
  color: #FFD6D6;
}
.entrar__error[hidden] { display: none; }
.entrar__volver {
  display: inline-block;
  margin-top: 18px;
  font-size: 14px;
  color: var(--tenue);
  text-decoration: none;
}
.entrar__volver:hover { color: var(--naranja); }

/* ==========================================================================
   2 · CAMPOS · los mismos en el login, la hoja y los formularios
   ========================================================================== */

.campo { display: grid; gap: 6px; }
.campo label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gris);
}
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 13px 15px;
  border-radius: var(--radio-s);
  background: var(--humo);
  border: 1px solid var(--borde);
  color: var(--marfil);
  font: inherit;
  font-size: 16px;              /* nunca menos: ver la cabecera del archivo */
  transition: border-color var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva);
}
.campo textarea { resize: vertical; line-height: 1.5; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: rgb(var(--naranja-rgb) / 70%);
  box-shadow: 0 0 0 3px rgb(var(--naranja-rgb) / 16%);
}
.campo__ayuda { margin: 0; font-size: 13.5px; color: var(--tenue); }

.casilla {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--radio-s);
  background: var(--humo);
  border: 1px solid var(--borde);
  font-size: 15px;
  cursor: pointer;
}
.casilla input { width: 20px; height: 20px; margin-top: 1px; accent-color: rgb(var(--naranja-rgb)); }

.form { display: grid; gap: 16px; }

/* ==========================================================================
   3 · CABECERA Y TABLERO
   El panel se lee de arriba abajo en tres bloques y ninguno se mezcla con el
   siguiente: quién soy (cabecera), cómo va la escuela (tablero) y qué quiero
   hacer (las secciones). Antes iba todo suelto, uno detrás de otro, y la
   pantalla parecía una lista de doce cosas sin jerarquía.
   ========================================================================== */

#pantalla-panel:not([hidden]) {
  /* Más ancho que antes (eran 980px). En una tablet o en la laptop de la
     escuela caben las tarjetas sin partirse y la lista respira. */
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 20px 0;
}

.ptop {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--borde);
}
.ptop__marca { display: flex; align-items: center; gap: 13px; min-width: 0; }
.ptop__marca img { width: 44px; }
.ptop__nombre {
  margin: 0;
  font-family: 'Anton', sans-serif;
  font-size: 1.25rem;
  letter-spacing: .02em;
}
.ptop__correo {
  margin: 0;
  font-size: 13.5px;
  color: var(--tenue);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ptop__salir {
  flex-shrink: 0;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgb(255 255 255 / 6%);
  border: 1px solid var(--borde);
  color: var(--gris);
  font: inherit; font-size: 14.5px;
  cursor: pointer;
}
.ptop__salir:hover { color: var(--marfil); border-color: rgb(var(--naranja-rgb) / 50%); }

/* ------------------------------------------------------------- El tablero */
.tablero { margin: 20px 0 18px; }
.tablero__rotulo {
  margin: 0 0 10px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--tenue);
}

.resumen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

/* Cada recuadro es un botón: cuenta y filtra. Ver panel.js → pintarResumen. */
.resumen__caja {
  display: grid;
  gap: 2px;
  padding: 18px 14px 14px;
  border-radius: var(--radio);
  background: var(--carbon);
  border: 1px solid var(--borde);
  color: var(--marfil);
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--rapido) var(--curva),
              background var(--rapido) var(--curva),
              transform var(--rapido) var(--curva);
}
.resumen__caja:hover { border-color: rgb(var(--naranja-rgb) / 45%); }
.resumen__caja:active { transform: scale(.985); }
.resumen__caja b {
  display: block;
  font-family: 'Anton', sans-serif;
  font-size: clamp(2rem, 8vw, 2.9rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.resumen__caja span {
  display: block;
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--gris);
  line-height: 1.3;
}
/* La coletilla de abajo dice qué pasa si lo tocas. Es la diferencia entre un
   número decorativo y un botón; en un teléfono no hay hover que lo insinúe. */
.resumen__pie {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--tenue);
}
.resumen__caja--ok b    { color: var(--verde); }
.resumen__caja--aviso b { color: var(--amarillo); }
.resumen__caja--activo {
  background: rgb(var(--naranja-rgb) / 12%);
  border-color: var(--naranja);
}
.resumen__caja--activo .resumen__pie { color: var(--ambar); }

@media (max-width: 460px) {
  /* En un teléfono estrecho, tres columnas dejan cada etiqueta en tres
     renglones. Mejor el total arriba, a lo ancho, y debajo los dos que de
     verdad se tocan. */
  .resumen { grid-template-columns: repeat(2, 1fr); }
  .resumen__caja:first-child { grid-column: 1 / -1; }
  .resumen__caja:first-child b { font-size: 2.2rem; }
}

/* El aviso del corte. Sale sólo los días en que sirve para algo. */
.corte {
  display: grid; gap: 3px;
  padding: 15px 18px;
  margin-top: 12px;
  border-radius: var(--radio-s);
  background: rgb(var(--naranja-rgb) / 10%);
  border: 1px solid rgb(var(--naranja-rgb) / 30%);
  font-size: 15px;
}
.corte[hidden] { display: none; }
.corte b { font-size: 16px; }
.corte span { color: var(--gris); }
.corte--urgente {
  background: rgb(255 90 90 / 10%);
  border-color: rgb(255 90 90 / 34%);
}
.corte--urgente b { color: #FFC9C9; }

/* ==========================================================================
   4 · LAS SECCIONES (pestañas)
   Van pegadas arriba. En una lista de cincuenta nombres, cambiar de sección
   sin volver al principio es lo que separa un panel de una página larga.
   ========================================================================== */

.pestanias {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
  padding: 6px;
  border-radius: var(--radio);
  background: var(--carbon);
  border: 1px solid var(--borde);
  /* Pegada arriba pasa por encima de las tarjetas: sin fondo opaco y sin
     sombra se leerían los nombres a través de ella. */
  box-shadow: 0 10px 24px rgb(0 0 0 / 45%);
}
.pestania {
  flex: 1;
  display: grid;
  gap: 1px;
  padding: 11px 8px;
  border: 0; border-radius: var(--radio-s);
  background: none;
  color: var(--gris);
  font: inherit;
  cursor: pointer;
  transition: background var(--rapido) var(--curva), color var(--rapido) var(--curva);
}
.pestania__t {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 16px; font-weight: 600;
}
/* El renglón de abajo dice en cristiano qué hay dentro. Se cae en pantallas
   estrechas, donde los tres títulos ya llenan la barra. */
.pestania__s {
  font-size: 12px;
  color: var(--tenue);
  line-height: 1.2;
}
.pestania[aria-selected='true'] { background: var(--llama); color: #170800; }
.pestania[aria-selected='true'] .pestania__s { color: rgb(23 8 0 / 62%); }
.pestania__cuenta {
  min-width: 21px; height: 21px;
  display: grid; place-items: center;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--rojo);
  color: #fff;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.pestania__cuenta[hidden] { display: none; }
.pestania[aria-selected='true'] .pestania__cuenta { background: rgb(0 0 0 / 30%); color: #fff; }

.pestania__corto { display: none; }

@media (max-width: 520px) {
  .pestania__s { display: none; }
  .pestania__t { font-size: 15px; white-space: nowrap; }
  /* "Por confirmar" mas la cuenta no caben en un tercio de un telefono: al
     partirse en dos renglones la bolita roja se iba a bailar sola al lado. */
  .pestania__largo { display: none; }
  .pestania__corto { display: inline; }
}

.tab[hidden] { display: none; }

/* ==========================================================================
   5 · LA CAJA DE CADA SECCIÓN · título, ayuda, buscador y filtros
   Todo lo que no es "la lista" vive dentro de una caja con nombre. Así la
   pantalla se lee como tres o cuatro bloques y no como veinte controles
   sueltos, que era justo la queja.
   ========================================================================== */

.psec {
  padding: 20px 22px;
  margin-bottom: 18px;
  border-radius: var(--radio);
  background: var(--carbon);
  border: 1px solid var(--borde);
}
.psec__cab {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.psec__texto { min-width: 0; flex: 1 1 260px; }
.psec__h {
  margin: 0;
  font-family: 'Anton', sans-serif;
  font-size: 1.5rem;
  letter-spacing: .02em;
}
.psec__ayuda {
  margin: 5px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--gris);
  max-width: 58ch;
}
.psec > .buscador { margin-top: 18px; }

.buscador { position: relative; }
.buscador svg {
  position: absolute;
  left: 15px; top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  fill: none; stroke: var(--tenue); stroke-width: 2; stroke-linecap: round;
  pointer-events: none;
}
.buscador input {
  width: 100%;
  padding: 14px 16px 14px 44px;
  border-radius: 999px;
  background: var(--humo);
  border: 1px solid var(--borde);
  color: var(--marfil);
  font: inherit; font-size: 16px;
}
.buscador input:focus {
  outline: none;
  border-color: rgb(var(--naranja-rgb) / 60%);
  box-shadow: 0 0 0 3px rgb(var(--naranja-rgb) / 16%);
}

.pfiltros { margin-top: 16px; }
.pfiltros__rotulo {
  margin: 0 0 8px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--tenue);
}

.filtro-categoria {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.filtro-categoria::-webkit-scrollbar { display: none; }

.chip {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--humo);
  border: 1px solid var(--borde);
  color: var(--gris);
  font: inherit; font-size: 14.5px; font-weight: 600;
  cursor: pointer;
  transition: border-color var(--rapido) var(--curva), color var(--rapido) var(--curva);
}
.chip:hover { color: var(--marfil); border-color: rgb(var(--naranja-rgb) / 45%); }
.chip--activo {
  background: rgb(var(--naranja-rgb) / 16%);
  border-color: var(--naranja);
  color: var(--ambar);
}
.chip__cuenta {
  font-style: normal;
  font-size: 12px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgb(255 255 255 / 8%);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   6 · LA LISTA DE ALUMNOS
   ========================================================================== */

.lista { display: grid; gap: 12px; }

.grupo {
  display: flex; align-items: baseline; gap: 10px;
  margin: 18px 0 2px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--borde);
}
.grupo:first-child { margin-top: 4px; }
.grupo h3 {
  margin: 0;
  font-family: 'Anton', sans-serif;
  font-size: 1.3rem;
  letter-spacing: .02em;
}
.grupo span { font-size: 13px; color: var(--tenue); }

.pvacio {
  margin: 0;
  padding: 30px 20px;
  border-radius: var(--radio);
  background: var(--carbon);
  border: 1px dashed var(--borde);
  text-align: center;
  color: var(--gris);
  font-size: 15px;
}

.tarjeta {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  border-radius: var(--radio);
  background: var(--carbon);
  border: 1px solid var(--borde);
  /* El filete del estado. Es lo que se ve desde medio metro, sin leer nada. */
  border-left: 4px solid var(--verde);
}
.tarjeta[data-estado='pendiente'],
.tarjeta[data-estado='sin_pagar'] { border-left-color: var(--amarillo); }
.tarjeta[data-estado='vencido']   { border-left-color: var(--rojo); }

.tarjeta__retrato, .ficha-retrato {
  position: relative;
  width: 58px; height: 58px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--humo);
  border: 1px solid var(--borde);
  display: grid; place-items: center;
}
.ficha-retrato { width: 76px; height: 76px; }
.tarjeta__retrato img, .ficha-retrato img { width: 100%; height: 100%; object-fit: cover; }
.retrato__inicial {
  font-family: 'Anton', sans-serif;
  font-size: 18px;
  letter-spacing: .04em;
  color: var(--naranja);
}
.ficha-retrato .retrato__inicial { font-size: 26px; }

.tarjeta__cuerpo { min-width: 0; }
.tarjeta__nombre {
  margin: 0;
  font-size: 17.5px;
  line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tarjeta__linea {
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--gris);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tarjeta__tutor { color: var(--tenue); }
.tarjeta__hasta { display: inline-block; margin-left: 8px; font-size: 12.5px; color: var(--tenue); }

.pmarca {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.pmarca--ok    { background: rgb(78 208 122 / 16%);  color: var(--verde); }
.pmarca--aviso { background: rgb(255 200 74 / 16%);  color: var(--amarillo); }
.pmarca--mal   { background: rgb(255 90 90 / 16%);   color: var(--rojo); }

.tarjeta__acciones { display: grid; gap: 6px; justify-items: stretch; }
.tarjeta__ver {
  background: none; border: 0; padding: 4px 2px;
  font: inherit; font-size: 13.5px; color: var(--tenue);
  cursor: pointer; white-space: nowrap;
}
.tarjeta__ver:hover { color: var(--naranja); }

@media (max-width: 560px) {
  /* En el celular la tarjeta se parte en dos filas: el retrato y los datos
     arriba, los botones abajo a lo ancho. Apretados en tres columnas, el botón
     de cobrar quedaría demasiado pequeño para el dedo, que es justo el que más
     se toca. */
  .tarjeta { grid-template-columns: auto 1fr; }
  .tarjeta__acciones {
    grid-column: 1 / -1;
    grid-auto-flow: column;
    align-items: center;
    gap: 12px;
  }
}

/* ==========================================================================
   7 · PENDIENTES
   ========================================================================== */

.pendiente {
  display: flex; gap: 14px; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  padding: 15px 18px;
  border-radius: var(--radio-s);
  background: var(--carbon);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--amarillo);
}
.pendiente h4 { margin: 0; font-size: 16.5px; line-height: 1.25; }
.pendiente__linea { margin: 2px 0 0; font-size: 13.5px; color: var(--gris); }
.pendiente__cuando { color: var(--tenue); }
.pendiente__derecha { display: grid; gap: 6px; justify-items: end; }
.pendiente__monto {
  font-family: 'Anton', sans-serif;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ambar);
  font-variant-numeric: tabular-nums;
}
.pendiente__descartar {
  background: none; border: 0; padding: 2px;
  font: inherit; font-size: 13px; color: var(--tenue);
  cursor: pointer;
}
.pendiente__descartar:hover { color: var(--rojo); }

/* ==========================================================================
   8 · COBROS
   ========================================================================== */

.bloque {
  padding: 20px 22px;
  margin-bottom: 16px;
  border-radius: var(--radio);
  background: var(--carbon);
  border: 1px solid var(--borde);
}
.bloque h3 {
  margin: 0 0 12px;
  font-family: 'Anton', sans-serif;
  font-size: 1.2rem;
  letter-spacing: .02em;
}
.bloque__cifra {
  margin: 0;
  font-family: 'Anton', sans-serif;
  font-size: clamp(2rem, 9vw, 2.6rem);
  line-height: 1;
  background: var(--llama);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.bloque__nota { margin: 4px 0 14px; font-size: 13.5px; color: var(--tenue); }

.cobros { display: grid; gap: 1px; }
.cobros__fila {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 14px;
  padding: 10px 0;
  border-top: 1px solid var(--borde);
  font-size: 14.5px;
}
/* Las tres celdas van colocadas a mano. Con auto-placement, el importe -que
   ocupa dos filas- se colaba en la primera columna y dejaba el nombre a la
   derecha, que es justo al reves de como se lee una lista de cobros. */
.cobros__fila > span:first-child { grid-column: 1; grid-row: 1; }
.cobros__metodo { grid-column: 1; grid-row: 2; font-size: 13px; color: var(--tenue); }
.cobros__fila b {
  grid-column: 2; grid-row: 1 / span 2;
  align-self: center;
  font-variant-numeric: tabular-nums;
}

.mp-estado {
  margin: 0 0 16px;
  padding: 13px 16px;
  border-radius: var(--radio-s);
  font-size: 14.5px;
  line-height: 1.55;
}
.mp-estado--off    { background: rgb(255 255 255 / 5%);  border: 1px solid var(--borde); color: var(--gris); }
.mp-estado--prueba { background: rgb(255 200 74 / 12%);  border: 1px solid rgb(255 200 74 / 36%); color: #FFE9AE; }
.mp-estado--ok     { background: rgb(78 208 122 / 12%);  border: 1px solid rgb(78 208 122 / 34%); color: #C9F4D8; }

.instrucciones { margin: 0 0 18px; padding-left: 20px; display: grid; gap: 9px; }
.instrucciones li { font-size: 14.5px; line-height: 1.55; color: var(--gris); }
.instrucciones li::marker { color: var(--naranja); font-weight: 700; }

.copiable {
  padding: 13px 16px;
  margin-bottom: 18px;
  border-radius: var(--radio-s);
  background: var(--humo);
  border: 1px solid var(--borde);
}
.copiable__etiqueta {
  margin: 0 0 6px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--tenue);
}
.copiable code {
  display: block;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ambar);
  word-break: break-all;
}
.copiable__boton {
  margin-top: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgb(var(--naranja-rgb) / 14%);
  border: 1px solid rgb(var(--naranja-rgb) / 34%);
  color: var(--ambar);
  font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer;
}

/* ==========================================================================
   9 · LA HOJA
   ========================================================================== */

.hoja {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: end center;
}
.hoja[hidden] { display: none; }
@media (min-width: 720px) { .hoja { place-items: center; padding: 24px; } }

.hoja__fondo {
  position: absolute; inset: 0;
  background: rgb(4 4 6 / 80%);
  backdrop-filter: blur(6px);
}
.hoja__caja {
  position: relative;
  width: min(100%, 520px);
  max-height: 92svh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px 24px 28px;
  border-radius: var(--radio) var(--radio) 0 0;
  background: var(--carbon);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra-alta);
  animation: hoja-sube var(--medio) var(--curva);
}
@media (min-width: 720px) { .hoja__caja { border-radius: var(--radio); } }
@keyframes hoja-sube { from { transform: translateY(28px); opacity: 0; } }

.hoja__cerrar {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgb(255 255 255 / 8%);
  color: var(--marfil);
  cursor: pointer;
  transition: transform var(--rapido) var(--curva), background var(--rapido) var(--curva);
}
.hoja__cerrar:hover { transform: rotate(90deg); background: rgb(var(--naranja-rgb) / 80%); }
.hoja__cerrar svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
}
.hoja__titulo {
  margin: 0 42px 14px 0;
  font-family: 'Anton', sans-serif;
  font-size: 1.35rem;
  line-height: 1.2;
  letter-spacing: .01em;
}
.hoja__ayuda { margin: 0 0 18px; font-size: 14.5px; line-height: 1.6; color: var(--gris); }
.hoja__error {
  margin: 0 0 16px;
  padding: 11px 14px;
  border-radius: var(--radio-s);
  background: rgb(255 90 90 / 12%);
  border: 1px solid rgb(255 90 90 / 34%);
  font-size: 14.5px;
  color: #FFD6D6;
}
.hoja__error[hidden] { display: none; }

.eco-categoria {
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--radio-s);
  background: rgb(var(--naranja-rgb) / 10%);
  border: 1px solid rgb(var(--naranja-rgb) / 28%);
  font-size: 15px; font-weight: 600;
  color: var(--ambar);
}
.eco-categoria[hidden] { display: none; }
.eco-categoria--fuera {
  background: rgb(255 200 74 / 10%);
  border-color: rgb(255 200 74 / 30%);
  color: var(--amarillo);
  font-weight: 400;
}

/* ------------------------------------------------------------- La ficha */
.ficha-cabeza { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.ficha-categoria {
  margin: 0 0 6px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--naranja);
}

/* Subir foto. Es un <label> y no un <button> porque el <input type=file> tiene
   que quedar dentro para que el toque abra la cámara en el celular. */
.subir {
  display: block;
  padding: 12px;
  margin-bottom: 18px;
  border-radius: var(--radio-s);
  background: rgb(255 255 255 / 5%);
  border: 1px dashed var(--borde);
  text-align: center;
  font-size: 14.5px;
  color: var(--gris);
  cursor: pointer;
}
.subir:hover { border-color: rgb(var(--naranja-rgb) / 50%); color: var(--marfil); }
.subir input { display: none; }

/* ---------------------------------------------------------------- El turno
   Encima de los datos porque es lo único de la ficha que el entrenador cambia
   a menudo: el papá elige turno al inscribir y a la semana pide cambiarse.
   El valor se lee en grande y los dos botones son la forma de cambiarlo; sin
   el valor arriba habría que deducirlo de cuál está encendido, que es pedirle
   al que va con prisa que resuelva un acertijo. */
.pturno {
  margin: 0 0 18px;
  padding: 13px 15px;
  border-radius: var(--radio-s);
  background: rgb(255 255 255 / 4%);
  border: 1px solid var(--borde);
}
.pturno__rotulo {
  margin: 0 0 2px;
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--tenue);
}
.pturno__valor {
  margin: 0 0 11px;
  font-size: 16px;
  font-weight: 600;
  color: var(--marfil);
}
.pturno__reja { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pturno__opcion {
  display: grid;
  gap: 1px;
  padding: 9px 8px;
  border-radius: var(--radio-s);
  background: rgb(255 255 255 / 5%);
  border: 1px solid var(--borde);
  color: var(--gris);
  cursor: pointer;
  transition: border-color var(--rapido) var(--curva),
              background var(--rapido) var(--curva);
}
.pturno__opcion b {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-size: 14.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.pturno__opcion span { font-size: 12.5px; color: var(--tenue); }
.pturno__opcion:hover:not(:disabled) { border-color: rgb(var(--naranja-rgb) / 50%); }
.pturno__opcion:disabled { opacity: .5; cursor: default; }
.pturno__opcion.activo {
  background: rgb(var(--naranja-rgb) / 14%);
  border-color: rgb(var(--naranja-rgb) / 60%);
  color: var(--ambar);
}
.pturno__opcion.activo span { color: var(--gris); }

.pdatos { margin: 0 0 18px; display: grid; gap: 1px; }
.pdatos__fila {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 9px 0;
  border-top: 1px solid var(--borde);
  font-size: 14.5px;
}
.pdatos__fila dt { color: var(--tenue); flex-shrink: 0; }
.pdatos__fila dd { margin: 0; text-align: right; }

.ficha-notas {
  margin: 0 0 18px;
  padding: 12px 15px;
  border-radius: var(--radio-s);
  background: var(--humo);
  border: 1px solid var(--borde);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--gris);
}

.ficha-acciones { display: grid; gap: 10px; }

/* Los botones que no tienen vuelta atrás. Discretos hasta que se arman, y
   entonces rojos y anchos: nadie los toca sin querer dos veces. */
.peligro {
  padding: 11px;
  border-radius: var(--radio-s);
  background: none;
  border: 1px solid rgb(255 90 90 / 28%);
  color: var(--rojo);
  font: inherit; font-size: 14.5px;
  cursor: pointer;
  transition: background var(--rapido) var(--curva);
}
.peligro:hover { background: rgb(255 90 90 / 10%); }
.peligro--armado {
  background: rgb(255 90 90 / 18%);
  border-color: var(--rojo);
  font-weight: 700;
}

/* ==========================================================================
   10 · MENOS MOVIMIENTO
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hoja__caja { animation: none; }
  .hoja__cerrar:hover { transform: none; }
}