/* =========================================================
   TeamSync
   Sin framework: son pocas pantallas y el CSS propio evita
   depender de un paso de compilación que en FTP no tenemos.

   Los componentes NUNCA llevan un color escrito: usan las
   variables de abajo. El color del club entra por el atributo
   style del <body>, que pisa --color-primary y sus derivados,
   y con eso cambia toda la aplicación.
   ========================================================= */

:root {
  /* --- Base neutra: es la que manda en casi toda la pantalla --- */
  --color-background:     #f3f5f7;
  --color-surface:        #ffffff;
  --color-surface-2:      #fafbfc;
  --color-border:         #d8dee7;
  --color-border-strong:  #c3cbd6;

  --color-text:           #101828;
  --color-text-secondary: #5b6472;
  --color-text-muted:     #98a2b3;

  /* --- Color del club. El tema lo pisa en <body> --- */
  --color-primary:        #03c381;
  --color-primary-hover:  #02ab71;
  --color-primary-light:  #e6f9f2;
  --color-primary-border: #b3ecd9;
  --color-on-primary:     #081626;
  --color-secondary:      #081626;
  --color-on-secondary:   #ffffff;

  /* --- Estados: NO dependen del club. Un club verde no hace
         que "pendiente" sea verde. --- */
  --color-success:        #067647;
  --color-success-light:  #e7f6ec;
  --color-warning:        #b54708;
  --color-warning-light:  #fdf3e7;
  /* Un amarillo con más cuerpo que el -light, para lo que no se tiene
     que perder de vista aunque el resto de la pantalla esté cargada. */
  --color-atencion-fondo: #fdf0c0;
  --color-atencion-borde: #e0bd66;
  --color-atencion-texto: #8a4b07;
  --color-danger:         #b42318;
  --color-danger-light:   #fdeceb;
  --color-info:           #175cd3;
  --color-info-light:     #eaf1fd;

  --radio:      10px;
  --radio-sm:   7px;
  --sombra:     0 1px 2px rgba(16,24,40,.05);
  --sombra-md:  0 2px 6px rgba(16,24,40,.07);

  --sidebar-ancho: 236px;
  --header-alto:   58px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --color-background:     #0f1216;
    --color-surface:        #171b21;
    --color-surface-2:      #1c2128;
    --color-border:         #2f3742;
    --color-border-strong:  #414a57;
    --color-text:           #e6e9ee;
    --color-text-secondary: #a3adbb;
    --color-text-muted:     #6b7688;
    --color-success-light:  #10251a;
    --color-warning-light:  #2a1d0d;
    --color-atencion-fondo: #3b2a0b;
    --color-atencion-borde: #7a5a16;
    --color-atencion-texto: #f3cd86;
    --color-danger-light:   #2b1514;
    --color-info-light:     #111d33;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font: 14.5px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;

  /* --- Sidebar: el tercer color del club, que es opcional.
         Mientras no elija ninguno, estas variables apuntan a la base
         neutra y la franja se ve igual que siempre; el modo oscuro las
         sigue solo, sin excepciones escritas a mano.

         Van acá y no en :root porque var() se resuelve en el elemento
         donde se declara: el color del club entra por el style del
         <body>, así que un fallback declarado en :root se quedaría con
         el verde por defecto. Cuando el club sí eligió un color, el
         style del <body> pisa estas siete de una. --- */
  --color-sidebar:              var(--color-surface);
  --color-on-sidebar:           var(--color-text);
  --color-sidebar-tenue:        var(--color-text-secondary);
  --color-sidebar-borde:        var(--color-border);
  --color-sidebar-hover:        var(--color-surface-2);
  --color-sidebar-activo-fondo: var(--color-primary-light);
  --color-sidebar-activo-texto: var(--color-primary);
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* =========================================================
   AppShell: sidebar fija + header + contenido
   ========================================================= */

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

/* --- Sidebar ------------------------------------------- */
.sidebar {
  width: var(--sidebar-ancho);
  flex: 0 0 var(--sidebar-ancho);
  background: var(--color-sidebar);
  border-right: 1px solid var(--color-sidebar-borde);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

/* Misma altura exacta que el header, para que las dos líneas de abajo
   queden a la misma altura y se lean como una sola. */
.sidebar-club {
  height: var(--header-alto);
  flex: 0 0 var(--header-alto);
  padding: 0 16px;
  border-bottom: 1px solid var(--color-sidebar-borde);
  display: flex; align-items: center; gap: 10px;
}
.escudo { width: 34px; height: 34px; object-fit: contain; flex: 0 0 34px; }
.escudo-vacio {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  display: grid; place-items: center;
  font-weight: 700; font-size: 13px;
  flex: 0 0 34px;
}
.sidebar-club-nombre {
  font-weight: 650; font-size: 15px;
  line-height: 1.2; letter-spacing: -.01em;
  color: var(--color-on-sidebar);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* La camada, debajo del bloque del club: mismo lugar tenga el club una
   camada sola (texto) o varias (selector). */
.sidebar-camada-caja:not(:empty) { padding: 10px 14px 2px; }
.sidebar-camada {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--color-sidebar-borde);
  border-radius: var(--radio-sm);
  background: var(--color-sidebar-hover);
  color: var(--color-on-sidebar);
  font: inherit; font-size: 13px;
  cursor: pointer;
}
.sidebar-camada:hover { border-color: var(--color-sidebar-tenue); }
/* La lista desplegada la dibuja el sistema operativo, no el CSS: sobre
   un sidebar oscuro conviene que las opciones sigan siendo legibles. */
.sidebar-camada option { background: var(--color-surface); color: var(--color-text); }
.sidebar-camada-fija { padding: 0 4px; font-size: 13px; color: var(--color-sidebar-tenue); }

.sidebar-nav { flex: 1; overflow-y: auto; padding: 10px 10px 12px; }
/* El título del grupo va al color pleno del sidebar y no al tenue: al
   ser el mismo color que los ítems, pero más chico, se leía como un
   epígrafe y desaparecía. Ahora que además se clickea para plegar,
   tiene que verse como el encabezado que manda sobre lo de abajo. */
.nav-grupo {
  font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--color-on-sidebar);
  padding: 14px 8px 6px;
}
.nav-grupo:first-child { padding-top: 2px; }

/* El título del grupo es el que pliega. Se le saca el triangulito que
   pone el navegador —lo reemplaza la flecha, que va del otro lado— y se
   agranda el área de clic: un renglón de 10px de letra es un blanco muy
   chico para el dedo. */
.nav-seccion > summary.nav-grupo {
  display: flex; align-items: center; gap: 6px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  border-radius: var(--radio-sm);
  padding: 12px 8px 6px;
}
.nav-seccion > summary.nav-grupo::-webkit-details-marker { display: none; }
.nav-seccion > summary.nav-grupo:hover { background: var(--color-sidebar-hover); }
.nav-seccion > summary.nav-grupo:focus-visible {
  outline: 2px solid var(--color-sidebar-activo-texto);
  outline-offset: 1px;
}

/* La flecha queda tenue a propósito: el que tiene que pesar es el
   nombre del grupo, no el control. */
.nav-grupo-flecha {
  margin-left: auto;
  flex: 0 0 auto;
  stroke-width: 2.2;
  color: var(--color-sidebar-tenue);
  transition: transform .15s ease;
}
/* Cerrado, la flecha apunta a la derecha; abierta, hacia abajo. */
.nav-seccion:not([open]) .nav-grupo-flecha { transform: rotate(-90deg); }

@media (prefers-reduced-motion: reduce) {
  .nav-grupo-flecha { transition: none; }
}

.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 9px;
  border-radius: var(--radio-sm);
  color: var(--color-sidebar-tenue);
  font-size: 14px; font-weight: 500;
  text-decoration: none;
  margin-bottom: 1px;
}
.nav-item:hover { background: var(--color-sidebar-hover); color: var(--color-on-sidebar); text-decoration: none; }
.nav-item svg { flex: 0 0 auto; stroke-width: 1.85; }
.nav-item.activo {
  background: var(--color-sidebar-activo-fondo);
  color: var(--color-sidebar-activo-texto);
  font-weight: 600;
}
.nav-item .contador-nav {
  margin-left: auto;
  font-size: 11.5px; font-weight: 600;
  background: var(--color-danger-light);
  color: var(--color-danger);
  border-radius: 20px; padding: 0 6px;
}

.sidebar-pie { padding: 10px; border-top: 1px solid var(--color-sidebar-borde); }

/* --- Header -------------------------------------------- */
.contenido { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.header {
  height: var(--header-alto);
  flex: 0 0 var(--header-alto);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex; align-items: center; gap: 14px;
  padding: 0 22px;
  position: sticky; top: 0; z-index: 20;
}
.header-titulo { font-size: 15.5px; font-weight: 620; letter-spacing: -.01em; }
.miga { color: var(--color-text-muted); font-weight: 400; }
.miga a { color: var(--color-text-secondary); }
.header-derecha { margin-left: auto; display: flex; align-items: center; gap: 6px; }

.boton-icono {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 0; background: none;
  border-radius: var(--radio-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
}
.boton-icono:hover { background: var(--color-surface-2); color: var(--color-text); }

.usuario-menu {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 9px 5px 6px;
  border-radius: var(--radio-sm);
  color: var(--color-text); font-size: 14px;
  text-decoration: none;
}
.usuario-menu:hover { background: var(--color-surface-2); text-decoration: none; }
.avatar-inicial {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--color-primary); color: var(--color-on-primary);
  display: grid; place-items: center;
  font-size: 11.5px; font-weight: 650;
}

.principal { padding: 22px; flex: 1; }
.contenedor-ancho { max-width: 1180px; margin: 0 auto; }

/* --- Mobile -------------------------------------------- */
.abrir-menu { display: none; }
#menu { display: none; }

@media (max-width: 900px) {
  .sidebar {
    position: fixed; z-index: 50;
    transform: translateX(-100%);
    transition: transform .18s ease;
    box-shadow: var(--sombra-md);
  }
  /* Sin JavaScript: un checkbox oculto abre y cierra la sidebar. */
  #menu:checked ~ .app .sidebar { transform: translateX(0); }
  #menu:checked ~ .app .velo { display: block; }
  .abrir-menu { display: grid; }
  .velo { display: none; position: fixed; inset: 0; background: rgba(16,24,40,.35); z-index: 40; }
  .principal { padding: 16px; }
  .header { padding: 0 14px; }

  /* En el celular el título del grupo se toca con el dedo, no con el
     mouse: 34px es un blanco chico para plegar algo. */
  .nav-seccion > summary.nav-grupo { padding-top: 14px; padding-bottom: 12px; }
}

/* =========================================================
   Componentes
   ========================================================= */

/* El wrap no es decorativo: sin él, en un celular los botones de la
   derecha se salen de la pantalla y la página entera agarra scroll
   horizontal. Se veía en Deudores, donde "Registrar aporte" quedaba
   cortado. Lo mismo vale para .acciones-cabecera, más abajo. */
.pagina-cabecera { display: flex; align-items: center; flex-wrap: wrap;
                   gap: 14px; margin-bottom: 18px; }
.pagina-cabecera h1 { margin: 0; font-size: 20px; letter-spacing: -.02em; }
/* Solo empuja a la derecha si hay más de un hijo: con uno solo, el
   :last-child es también el primero y el título terminaba alineado a la
   derecha. */
.pagina-cabecera > :first-child { margin-right: auto; }
.pagina-cabecera > :last-child:not(:first-child) { margin-left: auto; }
.pagina-sub { color: var(--color-text-secondary); font-size: 14px; margin: -10px 0 18px; }

.tarjeta {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radio);
  padding: 16px 18px;
  box-shadow: var(--sombra);
}

/* El título de sección tenía el mismo gris que un dato secundario y se
   perdía. Ahora es más oscuro y lleva una línea corta en el color del
   club: es el detalle que le pone identidad sin llenar la pantalla de
   color. El acento va en el borde y no en el texto, para que el título
   siga siendo legible en un club de amarillo. */
.tarjeta-cabecera {
  display: flex; align-items: center; gap: 8px;
  margin: -2px 0 14px;
  padding-left: 9px;
  border-left: 3px solid var(--color-primary);
}
.tarjeta-cabecera h2,
.tarjeta-cabecera > strong {
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-text); margin: 0;
}
/* Solo empuja a la derecha si hay algo más que el título: con un hijo
   solo, el :last-child es también el primero y el título terminaba
   alineado a la derecha. Mismo arreglo que .pagina-cabecera. */
.tarjeta-cabecera > :last-child:not(:first-child) { margin-left: auto; }
.tarjeta-link { font-size: 13px; font-weight: 500; }

/* --- Tarjeta que se pliega ------------------------------------------
   Para listas que crecen sin techo: los aportes de una gira son 28 hoy
   y 120 en marzo, y dejan la pantalla impracticable.

   Es <details>/<summary> y no un div con JavaScript, igual que los
   grupos del menú: pliega sin JS, y el teclado y el lector de pantalla
   ya saben qué es. El summary ES la cabecera de la tarjeta, así que lo
   que se ve plegado sigue siendo el título con su contador al lado.

   Los márgenes negativos son para que el área clicable llegue hasta el
   borde de la tarjeta: sin eso la tarjeta parece un botón grande pero
   solo responde una franja de 25px en el medio, que en el celular es
   imposible de acertar. El padding vuelve a meter para adentro lo que
   el margen se comió, así que se ve igual. */
.tarjeta-plegable > summary.tarjeta-cabecera {
  cursor: pointer;
  list-style: none;
  user-select: none;
  margin: -16px -18px 14px;
  padding: 16px 18px 14px 27px;   /* 18 del borde + 9 del acento */
  border-radius: var(--radio) var(--radio) 0 0;
}
.tarjeta-plegable > summary.tarjeta-cabecera::-webkit-details-marker { display: none; }
.tarjeta-plegable > summary.tarjeta-cabecera:hover { background: var(--color-surface-2); }

/* El acento de la izquierda se corre con el margen negativo, asi que se
   redibuja adentro. */
.tarjeta-plegable > summary.tarjeta-cabecera { border-left: none; position: relative; }
.tarjeta-plegable > summary.tarjeta-cabecera::before {
  content: '';
  position: absolute;
  left: 18px; top: 16px; bottom: 14px;
  width: 3px;
  background: var(--color-primary);
}

/* Plegada, la cabecera es toda la tarjeta: no queda un hueco abajo. */
.tarjeta-plegable:not([open]) > summary.tarjeta-cabecera {
  margin-bottom: -16px;
  border-radius: var(--radio);
}
.tarjeta-plegable > summary.tarjeta-cabecera:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* La flecha va pegada al título y no al margen derecho: entre medio
   está el contador, y una flecha al fondo se lee como si fuera de él. */
.tarjeta-flecha {
  flex: 0 0 auto;
  color: var(--color-text-secondary);
  transition: transform .15s ease;
}
.tarjeta-plegable:not([open]) .tarjeta-flecha { transform: rotate(-90deg); }

@media (prefers-reduced-motion: reduce) {
  .tarjeta-flecha { transition: none; }
}

.grilla { display: grid; gap: 14px; }
.grilla-2 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.grilla-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grilla-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.grilla-checkbox {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px 14px; margin-top: 4px;
}

.indicador {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radio);
  padding: 14px 16px;
}
.indicador .etiqueta {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--color-text-secondary);
  margin-bottom: 6px;
}
.indicador .valor {
  font-size: 25px; font-weight: 640;
  letter-spacing: -.03em; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.indicador .detalle { font-size: 12.5px; color: var(--color-text-muted); }
.indicador.alerta .valor  { color: var(--color-warning); }
.indicador.peligro .valor { color: var(--color-danger); }
.indicador.bien .valor    { color: var(--color-success); }

.boton, .boton-sec, .boton-plano {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px;
  border-radius: var(--radio-sm);
  font-size: 14px; font-weight: 550;
  border: 1px solid transparent;
  cursor: pointer; font-family: inherit;
  text-decoration: none; white-space: nowrap;
}
.boton:hover, .boton-sec:hover, .boton-plano:hover { text-decoration: none; }
.boton { background: var(--color-primary); color: var(--color-on-primary); }
.boton:hover { background: var(--color-primary-hover); }
.boton-sec { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border-strong); }
.boton-sec:hover { background: var(--color-surface-2); }
.boton-plano { background: none; color: var(--color-text-secondary); }
.boton-plano:hover { background: var(--color-surface-2); color: var(--color-text); }
.boton-ancho { width: 100%; justify-content: center; }
.opcion-elegida { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.opcion-elegida:hover { background: var(--color-primary-hover); }

.etiqueta-estado {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: 20px;
  font-size: 12px; font-weight: 550; white-space: nowrap;
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}
.etiqueta-estado.ok      { background: var(--color-success-light); color: var(--color-success); border-color: transparent; }
.etiqueta-estado.aviso   { background: var(--color-warning-light); color: var(--color-warning); border-color: transparent; }
.etiqueta-estado.peligro { background: var(--color-danger-light);  color: var(--color-danger);  border-color: transparent; }
.etiqueta-estado.info    { background: var(--color-info-light);    color: var(--color-info);    border-color: transparent; }

/* El resumen del rol que se está por asignar, debajo del selector. */
.resumen-rol {
  border: 1px solid var(--color-border);
  border-radius: var(--radio-sm);
  background: var(--color-surface-2);
  padding: 12px 14px;
  margin: -6px 0 16px;
}

/* Varias etiquetas seguidas, con un título chico arriba. */
.fila-pastillas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.etiqueta-bloque {
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--color-text-muted);
  margin: 0 0 6px;
}

.aviso {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 14px; border-radius: var(--radio);
  margin-bottom: 16px; font-size: 14px;
}
.aviso-error { background: var(--color-danger-light); color: var(--color-danger); }
.aviso-ok    { background: var(--color-success-light); color: var(--color-success); }
/* Ni bien ni mal: algo que todavía no venció, como la cuota del mes en
   curso. Lleva borde, que los otros avisos no tienen, porque es el que
   se lee salteado —"ah, estoy al día"— y hay que frenar ahí. */
.aviso-atencion {
  background: var(--color-atencion-fondo);
  color: var(--color-atencion-texto);
  border: 1px solid var(--color-atencion-borde);
  font-weight: 550;
}

/* En oscuro, el verde y el rojo de los estados son los mismos que en
   claro: texto oscuro sobre fondo oscuro, contraste 2.6. En pantalla
   grande se adivina; en el formulario público, que se abre del celular,
   el "figurás con $X pendientes" directamente no se lee. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .aviso-error { color: #f5a8a0; }
  :root:not([data-tema="claro"]) .aviso-ok    { color: #6ed19d; }
}

/* --- Primeros pasos, en el Inicio de una camada que recien arranca ---
   Solo se dibuja mientras falte algo, asi que no hace falta un estado
   "todo listo" bonito: cuando esta todo hecho, no esta. Los colores
   salen de los tokens, o sea que toma el color del club como todo lo
   demas. */
.arranque { margin-bottom: 16px; }
.arranque-aclaracion {
  margin: -4px 0 12px;
  font-size: 13.5px; color: var(--color-text-secondary);
}
.arranque-barra {
  height: 5px; border-radius: 3px; overflow: hidden;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  margin-bottom: 10px;
}
.arranque-barra > span {
  display: block; height: 100%;
  background: var(--color-primary);
  transition: width .3s ease;
}

/* Dos columnas en pantalla ancha: ocho pasos en una sola columna
   empujan todo el tablero para abajo. */
.arranque-pasos {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
}
@media (max-width: 760px) {
  .arranque-pasos { grid-template-columns: 1fr; }
}

.paso {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 4px;
  color: var(--color-text); text-decoration: none;
  /* Separador arriba y no abajo: con dos columnas, un border-bottom
     deja una linea suelta colgando debajo de la ultima fila. */
  border-top: 1px solid var(--color-border);
}
.arranque-pasos > .paso:nth-child(-n+2) { border-top: 0; }
@media (max-width: 760px) {
  .arranque-pasos > .paso:nth-child(2) { border-top: 1px solid var(--color-border); }
}
.paso:hover { text-decoration: none; }
.paso:hover strong { color: var(--color-primary); }

.paso-marca {
  flex: 0 0 auto; line-height: 0; margin-top: 1px;
  color: var(--color-text-muted);
}
.paso-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.paso-texto strong { font-size: 14px; font-weight: 600; }
.paso-detalle { font-size: 12.5px; color: var(--color-text-secondary); }

/* Hecho: se tacha el titulo y se apaga todo. Sigue estando —el valor
   del panel es ver cuanto se avanzo, no solo lo que falta— pero no
   compite por atencion con lo que si hay que hacer. */
.paso-hecho .paso-marca { color: var(--color-success); }
.paso-hecho strong { color: var(--color-text-muted); font-weight: 500; text-decoration: line-through; }
.paso-hecho .paso-detalle { color: var(--color-text-muted); }
.paso-hecho:hover strong { color: var(--color-text-muted); }

.lista-acciones { display: flex; flex-direction: column; }
.item-accion {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text); text-decoration: none; font-size: 14px;
}
.item-accion:last-child { border-bottom: 0; }
.item-accion:hover { text-decoration: none; }
.item-accion:hover .item-texto { color: var(--color-primary); }
.item-punto { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; background: var(--color-text-muted); }
.item-punto.punto-aviso   { background: var(--color-warning); }
.item-punto.punto-peligro { background: var(--color-danger); }
.item-punto.punto-info    { background: var(--color-info); }
.item-texto { flex: 1; min-width: 0; }
.item-flecha { color: var(--color-text-muted); flex: 0 0 auto; }
.item-hora { color: var(--color-text-muted); font-size: 12.5px; }

.partido-fecha {
  text-align: center; padding: 9px 13px;
  background: var(--color-primary-light); color: var(--color-primary);
  border-radius: var(--radio-sm); flex: 0 0 auto; line-height: 1.15;
}
.partido-fecha .dia { font-size: 21px; font-weight: 680; display: block; }
.partido-fecha .mes { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }
.partido-enfrentamiento { display: flex; align-items: center; gap: 12px; }
.partido-versus { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 600; }
.partido-versus .escudo { width: 26px; height: 26px; }
.partido-versus .vs { color: var(--color-text-muted); font-weight: 500; font-size: 13px; }

.dia-agenda { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--color-border); }
.dia-agenda:last-child { border-bottom: 0; }
.dia-agenda .fecha {
  flex: 0 0 46px; font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; color: var(--color-text-muted);
  letter-spacing: .04em; padding-top: 2px;
}
.dia-agenda.hoy .fecha { color: var(--color-primary); }
.dia-agenda .sin-nada { color: var(--color-text-muted); font-size: 13.5px; }
.dia-agenda .actividad { font-size: 14px; }
.dia-agenda .actividad .donde { color: var(--color-text-secondary); font-size: 13px; }

/* Una tabla suelta era lo ultimo que quedaba flotando sobre el fondo:
   el resto de la pantalla ya estaba en tarjetas blancas y ella no, que
   es justo el "queda lavado" del pedido original. Mismo tratamiento que
   .tarjeta, ni mas ni menos. */
.tabla-contenedor {
  overflow-x: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
/* Adentro de una tarjeta o un panel no se dibuja de nuevo: seria una
   caja adentro de otra caja, con doble borde y doble sombra. Va por
   CSS y no por una clase extra en cada vista porque son 39 usos en 33
   pantallas y siempre habria una que se olvida. */
.tarjeta .tabla-contenedor,
.panel .tabla-contenedor {
  background: none; border: 0; border-radius: 0; box-shadow: none;
}
/* La ultima fila no lleva linea: su borde caia justo sobre el de la
   tarjeta y quedaban dos rayas pegadas. */
.tabla-contenedor > table > tbody > tr:last-child > td { border-bottom: 0; }
.tarjeta .tabla-contenedor > table > tbody > tr:last-child > td,
.panel .tabla-contenedor > table > tbody > tr:last-child > td {
  border-bottom: 1px solid var(--color-border);
}
table { width: 100%; border-collapse: collapse; }
th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--color-border); }
th {
  font-size: 11.5px; color: var(--color-text-muted);
  font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
}
tbody tr:last-child td { border-bottom: 0; }
td.numero, th.numero { text-align: right; font-variant-numeric: tabular-nums; }
td.tenue { color: var(--color-text-secondary); }
td.acciones { text-align: right; white-space: nowrap; }
.tabla-clickeable tbody tr:hover { background: var(--color-surface-2); }
.fila-clickeable { cursor: pointer; }
.tabla-compacta { font-size: 13.5px; }
.tabla-compacta th, .tabla-compacta td { padding: 6px 9px; }

.persona { display: flex; align-items: center; gap: 9px; }
.foto-jugador {
  width: 30px; height: 30px; border-radius: 50%;
  object-fit: cover; flex: 0 0 30px;
  background: var(--color-surface-2);
}
.foto-inicial {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 600; flex: 0 0 30px;
}
.foto-grande { width: 68px; height: 68px; font-size: 22px; flex-basis: 68px; }

label { display: block; font-size: 13px; font-weight: 500; color: var(--color-text-secondary); margin-bottom: 5px; }
input[type="email"], input[type="password"], input[type="text"], input[type="number"],
input[type="date"], input[type="search"], input[type="file"], select, textarea {
  width: 100%; padding: 9px 11px; margin-bottom: 15px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radio-sm);
  background: var(--color-surface); color: var(--color-text);
  font: inherit; font-size: 14px;
}
textarea { resize: vertical; }
/* El foco es de los pocos lugares donde el color del club aparece sin
   que nadie lo pida, y ayuda: dice dónde estás parado. */
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: -1px;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}
fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radio);
  background: var(--color-surface);
  padding: 16px 18px 4px; margin: 0 0 16px;
}
legend {
  font-size: 11px; font-weight: 650; color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: .07em; padding: 0 6px;
}
.fila-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 560px) { .fila-campos { grid-template-columns: 1fr; } }
.fila-campos-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .fila-campos-3 { grid-template-columns: 1fr; } }

/* Un color se elige mirándolo. El campo de texto sigue siendo el que
   manda (y el que se valida); la muestra de al lado es para no tener
   que escribir #1a5d34 a ciegas. */
.campo-color { display: flex; align-items: center; gap: 8px; margin-bottom: 15px; }
.campo-color input[type="text"] { margin: 0; min-width: 0; flex: 1; }
.campo-color input[type="color"] {
  flex: 0 0 38px; width: 38px; height: 38px;
  padding: 2px; margin: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radio-sm);
  background: var(--color-surface);
  cursor: pointer;
}
.ayuda { font-size: 12px; color: var(--color-text-muted); margin: -11px 0 15px; }

/* Un campo con un botón al lado — copiar, por ejemplo.
   El margen de abajo no es decorativo: lo trae el propio input (15px) y
   hay que devolverlo acá, porque adentro del flex el input va con
   margin:0 para quedar alineado con el botón. Sin esto, el .ayuda de
   abajo —que sube 11px para meterse en ese hueco— se le monta encima al
   campo. Pasó con el CBU. */
.campo-con-boton { display: flex; gap: 6px; align-items: center; margin-bottom: 15px; }
.campo-con-boton input { margin: 0; }

/* La flechita de la columna por la que está ordenada una tabla. Va
   después del texto y no antes, para que los encabezados no se muevan
   de lugar al cambiar de columna. */
th[data-ordenable] { user-select: none; }
th[data-ordenable]:hover { color: var(--color-text); }
th.orden-asc::after  { content: ' ↑'; opacity: .7; }
th.orden-desc::after { content: ' ↓'; opacity: .7; }
.acciones-formulario { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.formulario-ficha { max-width: 720px; }
.filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.filtros input[type="search"] { flex: 1 1 250px; margin: 0; }
.filtros select { width: auto; margin: 0; }

/* Una casilla con su texto al lado, que se tilda tocando cualquiera
   de los dos. */
.interruptor {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0; cursor: pointer;
  font-size: 14px; color: var(--color-text);
}
.interruptor input { margin: 0; cursor: pointer; width: 16px; height: 16px; accent-color: var(--color-primary); }

.vacio { color: var(--color-text-secondary); font-size: 14px; padding: 6px 0; }
.vacio-caja { text-align: center; padding: 34px 20px; color: var(--color-text-secondary); }
.vacio-caja svg { color: var(--color-text-muted); margin-bottom: 10px; }
.vacio-caja p { margin: 0 0 14px; }

.pie-frase {
  text-align: center; color: var(--color-text-muted);
  font-size: 13px; padding: 28px 20px 8px; font-style: italic;
}

/* --- Pantallas sin sidebar (acceso, instalación) -------- */
.pantalla-centrada { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.tarjeta-acceso {
  width: 100%; max-width: 372px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px; padding: 32px 28px;
  box-shadow: var(--sombra-md); text-align: center;
}
.tarjeta-ancha { max-width: 440px; }
.logo-acceso { font-size: 38px; margin: 0; }
.tarjeta-acceso h2 { margin: 4px 0 22px; font-size: 18px; font-weight: 620; }
.tarjeta-acceso form { text-align: left; }
.subtitulo { color: var(--color-text-secondary); font-size: 14px; margin: 0 0 20px; }
.seccion {
  text-align: left; font-size: 11px; font-weight: 650;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 6px; margin: 22px 0 14px;
}
.boton-principal {
  width: 100%; padding: 11px; border: 0;
  border-radius: var(--radio-sm);
  background: var(--color-primary); color: var(--color-on-primary);
  font: inherit; font-weight: 600; cursor: pointer;
}
.boton-principal:hover { background: var(--color-primary-hover); }
.boton-angosto { width: auto; padding: 10px 20px; }
.limpiar { font-size: 14px; color: var(--color-text-secondary); }

/* --- Evolución ----------------------------------------- */
.ayuda-seccion { font-size: 13px; color: var(--color-text-secondary); margin: -4px 0 14px; }
.serie { display: flex; align-items: flex-end; gap: 3px; height: 38px; margin-top: 6px; }
.serie-barra { flex: 1; background: var(--color-primary); border-radius: 2px 2px 0 0; min-height: 2px; opacity: .55; }
.serie-barra:last-child { opacity: 1; }
.serie-barra.fuera-rango { background: var(--color-warning); }
.variacion { font-size: 12px; font-weight: 650; }
.variacion.sube  { color: var(--color-success); }
.variacion.baja  { color: var(--color-danger); }
.variacion.igual { color: var(--color-text-muted); }
.dato-evolucion { margin-bottom: 14px; }
.lista-datos { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; margin: 0; }
.lista-datos dt { color: var(--color-text-secondary); font-size: 13px; }
.lista-datos dd { margin: 0; font-size: 14px; }
.monoespacio { font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.lista-simple { list-style: none; padding: 0; margin: 0; }
.lista-simple li { padding: 6px 0; border-bottom: 1px solid var(--color-border); font-size: 14px; }
.lista-simple li:last-child { border-bottom: 0; }
.lista-simple .tenue { color: var(--color-text-secondary); margin-left: 8px; font-size: 13px; }

.tabla-carga { font-size: 14px; min-width: 780px; }
.tabla-carga th { vertical-align: bottom; line-height: 1.25; }
.tabla-carga th span { display: block; font-weight: 400; font-size: 10.5px; opacity: .8; text-transform: none; letter-spacing: 0; }
.tabla-carga td { padding: 4px 6px; }
.tabla-carga .celda-jugador { white-space: nowrap; padding-right: 14px; }
.tabla-carga input { width: 94px; margin: 0; padding: 6px 8px; text-align: right; font-variant-numeric: tabular-nums; }
.tabla-carga input::placeholder { color: var(--color-border-strong); }
.tabla-carga tr.fila-cargada .celda-jugador { font-weight: 600; }
.tabla-carga tr.fila-cargada input { background: var(--color-primary-light); }

/* --- Compatibilidad con clases anteriores --------------- */
.tarjeta-dato { background: var(--color-surface); border: 1px solid var(--color-border);
                border-radius: var(--radio); padding: 14px 16px; }
.tarjeta-dato .etiqueta { display: block; font-size: 12px; text-transform: uppercase;
                          letter-spacing: .04em; color: var(--color-text-secondary); margin-bottom: 4px; }
.tarjeta-dato strong { display: block; font-size: 20px; font-variant-numeric: tabular-nums; }
.tarjeta-dato .detalle { font-size: 12.5px; color: var(--color-text-muted); }
.tarjeta-dato.en-rojo  strong { color: var(--color-danger); }
.tarjeta-dato.en-verde strong { color: var(--color-success); }
.tarjetas-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 20px; }
.columnas-ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px; align-items: start; }

/* La solapa de Aportes reparte distinto: el estado de cuenta son tres
   datos cortos por fila y la lista de aportes son siete columnas, con
   el comprobante y el editar al final. En mitades iguales esas dos
   últimas quedaban fuera de la vista, que es justo lo que uno va a
   buscar ahí. */
@media (min-width: 1100px) {
  .columnas-aportes { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
}
.panel { background: var(--color-surface); border: 1px solid var(--color-border);
         border-radius: var(--radio); padding: 16px 18px;
         box-shadow: var(--sombra); }
/* Estos son los titulos que estaban senalados en el pedido original
   —"ESTADO DE CUENTA", "TESTS FISICOS": casi desaparecen"—. La pasada
   de contraste arreglo .tarjeta-cabecera y se salteo estos, que son
   los de la ficha del jugador, o sea la pantalla que se estaba
   mirando al escribirlo. Mismo tratamiento: el texto en el color del
   texto, y el acento del club en una linea de 3 px al costado. */
.panel h2 {
  display: flex; align-items: center; gap: 8px;
  margin: -2px 0 14px;
  padding-left: 9px;
  border-left: 3px solid var(--color-primary);
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-text);
}
.panel h3 { font-size: 13px; color: var(--color-text-secondary); margin: 18px 0 8px; }
/* flex-wrap: en el celular los botones de la derecha (Mas acciones,
   Editar, Volver) se salian de la pantalla y el ultimo quedaba
   cortado por la mitad. Al envolver bajan a un renglon propio. */
.encabezado-seccion { display: flex; align-items: center; flex-wrap: wrap;
                      gap: 14px; margin-bottom: 18px; }
.encabezado-seccion h1 { margin: 0; font-size: 20px; letter-spacing: -.02em; }
.encabezado-seccion > :last-child:not(:first-child) { margin-left: auto; }
.acciones-cabecera { display: flex; flex-wrap: wrap; gap: 8px; }

/* El ofrecimiento de instalar la app. Abajo y fija, como una barra de
   sistema: arriba taparía el encabezado, y en el medio del contenido
   sería un cartel más de los que uno aprende a saltear. Sólo en
   pantalla chica —en una computadora no hay nada que instalar— y por
   encima de todo, que para eso es una decisión que se toma una vez. */
#instalar-app {
  position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  padding: 10px 13px; border-radius: var(--radio);
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  box-shadow: 0 6px 20px rgba(16, 24, 40, .16);
  font-size: 14px;
}
#instalar-app[hidden] { display: none; }
.instalar-texto { display: flex; flex-direction: column; gap: 2px; flex: 1 1 200px; }
.instalar-texto span { color: var(--color-text-secondary); font-size: 13px; }
.instalar-botones { display: flex; gap: 8px; align-items: center; }

@media (min-width: 761px) { #instalar-app { display: none !important; } }

/* La página /app, que explica cómo instalarla. Se lee casi siempre
   desde un celular y con una mano, así que el texto va grande y los
   pasos numerados y separados. */
.instalar-pagina {
  max-width: 560px; margin: 0 auto; padding: 24px 16px 40px;
  background: var(--color-surface); border-radius: var(--radio);
  border: 1px solid var(--color-border);
}
.instalar-cabecera { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 22px; }
.instalar-cabecera h1 { font-size: 21px; letter-spacing: -.02em; }
.instalar-paso { margin: 0 0 22px; padding-top: 18px; border-top: 1px solid var(--color-border); }
.instalar-paso h2 { font-size: 16px; margin: 0 0 12px; }
.instalar-paso ol { margin: 0; padding-left: 22px; }
.instalar-paso li { margin-bottom: 14px; line-height: 1.55; }
/* La aclaración de cada paso va debajo y más chica: el paso se lee de
   un vistazo y el detalle sólo si hace falta. */
.instalar-paso li .tenue { display: block; font-size: 13px; margin-top: 3px; }
.instalar-listo {
  display: flex; gap: 10px; align-items: center;
  padding: 12px 14px; border-radius: var(--radio);
  background: var(--color-success-light); color: var(--color-success);
  margin-bottom: 20px;
}
.instalar-listo .tenue { display: block; font-size: 13px; }
/* Poner display en el CSS le gana al atributo hidden, que esconde con
   display:none del navegador. Sin esto el cartel "ya la tenés
   instalada" se veía siempre, hasta en la computadora. Lo mismo pasa
   arriba con #instalar-app, por eso también tiene su regla. */
.instalar-listo[hidden], .instalar-paso[hidden] { display: none; }
.nav-pestanas { display: flex; gap: 18px; overflow-x: auto; white-space: nowrap;
                border-bottom: 1px solid var(--color-border); margin: 4px 0 20px; }
.nav-pestanas a { padding: 8px 2px; color: var(--color-text-secondary); font-size: 14px; }
.nav-pestanas a.pestana-activa { color: var(--color-primary); border-bottom: 2px solid var(--color-primary);
                                  font-weight: 600; }
.contador { font-size: 14px; font-weight: 500; color: var(--color-text-secondary);
            background: var(--color-surface); border: 1px solid var(--color-border);
            border-radius: 20px; padding: 1px 10px; vertical-align: middle; }
.contador-chico { display: inline-block; font-size: 11px; background: var(--color-primary-light);
                  color: var(--color-primary); border-radius: 10px; padding: 0 6px; margin-left: 4px; }
.boton-secundario { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px;
                    border-radius: var(--radio-sm); font-size: 14px; font-weight: 550;
                    background: var(--color-surface); color: var(--color-text);
                    border: 1px solid var(--color-border-strong); cursor: pointer;
                    font-family: inherit; text-decoration: none; }
.boton-secundario:hover { background: var(--color-surface-2); text-decoration: none; }
.resumen-estados { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pastilla { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 12px;
            background: var(--color-surface-2); border: 1px solid var(--color-border);
            color: var(--color-text-secondary); white-space: nowrap; }
.pastilla.estado-activo    { background: var(--color-success-light); color: var(--color-success); border-color: transparent; }
.pastilla.estado-lesionado { background: var(--color-warning-light); color: var(--color-warning); border-color: transparent; }
.pastilla.estado-inactivo  { background: var(--color-danger-light);  color: var(--color-danger);  border-color: transparent; }
.subtitulo-evento { color: var(--color-text-secondary); font-size: 14px; margin: -10px 0 18px; }

/* Celda de deuda: es un boton pero tiene que verse como el resto de la grilla */
.celda-deuda {
  border: 0; background: none; padding: 0;
  color: var(--color-danger);
  font: inherit; cursor: pointer;
  border-radius: 4px;
}
.celda-deuda:hover { background: var(--color-danger-light); }

/* --- Rendición de cuentas -------------------------------- */
.fila-barra { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; margin-bottom: 4px; }
.fila-barra .porcentaje { color: var(--color-text-muted); font-size: 12.5px; margin-right: 4px; }
.barra-fondo { height: 7px; border-radius: 20px; background: var(--color-surface-2); overflow: hidden; }
.barra-relleno { height: 100%; border-radius: 20px; background: var(--color-primary); }
.barra-relleno.en-rojo { background: var(--color-danger); }

/* --- Línea de tiempo (historial del jugador) --------------- */
.linea-tiempo-mes {
  font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .07em;
  color: var(--color-text-muted);
  padding: 14px 0 6px;
}
.linea-tiempo-mes:first-child { padding-top: 0; }
.linea-tiempo-item { display: flex; gap: 11px; padding: 8px 0; border-bottom: 1px solid var(--color-border); }
.linea-tiempo-item:last-child { border-bottom: 0; }
.linea-tiempo-punto { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; flex: 0 0 9px; background: var(--color-text-muted); }
.linea-tiempo-punto.gps { background: var(--color-primary); }
.linea-tiempo-punto.medicion { background: var(--color-info); }
.linea-tiempo-punto.test { background: var(--color-warning); }
.linea-tiempo-punto.posicion { background: var(--color-secondary); }
.linea-tiempo-contenido { flex: 1; min-width: 0; }
.linea-tiempo-titulo { font-weight: 600; font-size: 14px; }
.linea-tiempo-resumen { font-size: 13.5px; color: var(--color-text-secondary); margin-top: 2px; }
.linea-tiempo-record {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 5px; font-size: 12px; font-weight: 600; color: var(--color-warning);
}

/* --- Toggle de período (ficha del jugador, rendimiento) --- */
.periodo-toggle { display: inline-flex; gap: 2px; margin-left: auto; }
.periodo-toggle a {
  padding: 4px 9px; border-radius: 20px;
  font-size: 12px; font-weight: 550;
  color: var(--color-text-secondary); text-decoration: none;
}
.periodo-toggle a:hover { background: var(--color-surface-2); text-decoration: none; }
.periodo-toggle a.activo { background: var(--color-primary-light); color: var(--color-primary); }

/* --- Buscador de jugador (formulario público de aportes) - */
.buscador-jugador { position: relative; }
.sugerencias {
  position: absolute; z-index: 10; left: 0; right: 0; top: calc(100% + 2px);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radio-sm);
  box-shadow: var(--sombra-md);
  max-height: 220px; overflow-y: auto;
}
.sugerencia-item {
  display: block; width: 100%; text-align: left;
  padding: 9px 12px; border: 0; background: none;
  font: inherit; font-size: 14px; color: var(--color-text);
  cursor: pointer;
}
.sugerencia-item:hover { background: var(--color-surface-2); }
.sugerencia-vacia { padding: 10px 12px; font-size: 13px; color: var(--color-text-muted); }

/* --- Impresión -------------------------------------------
   La "exportación a PDF" es el diálogo de impresión del navegador: no hay
   librería de PDF y no conviene sumar una sin Composer. Con esto alcanza. */
.no-imprimir { }

@media print {
  .sidebar, .header, .velo, .abrir-menu, .aviso, .no-imprimir { display: none !important; }
  .app, .contenido { display: block; }
  body { background: #fff; }
  .principal { padding: 0; }
  .contenedor-ancho { max-width: none; }
  .tarjeta { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
  details { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}

/* =========================================================
   Tomar lista: pensado para el pulgar, no para el mouse
   ========================================================= */

.lista-asistencia {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 90px;   /* deja aire para la barra de guardar */
}

.fila-asistencia {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radio-sm);
  overflow: hidden;
}

/* Toda la fila es el botón: 56px de alto, bastante más que los 44 que
   se consideran el mínimo para tocar con el dedo sin errar. */
.toque-asistencia { display: block; margin: 0; cursor: pointer; user-select: none; }
.cuerpo-asistencia {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 56px; padding: 0 14px;
}
.nombre-asistencia { font-size: 15px; font-weight: 550; color: var(--color-text); }

.marca-asistencia { flex: 0 0 auto; font-size: 13px; font-weight: 600; }
.marca-asistencia span { display: none; align-items: center; gap: 5px; }
.marca-asistencia .si-presente { display: inline-flex; color: var(--color-success); }
.marca-asistencia svg { flex: 0 0 auto; }

/* Ausente: se ve de reojo, sin tener que leer. */
.fila-asistencia.esta-ausente {
  background: var(--color-danger-light);
  border-color: var(--color-danger);
}
.esta-ausente .nombre-asistencia { color: var(--color-danger); }
.esta-ausente .marca-asistencia .si-presente { display: none; }
.esta-ausente .marca-asistencia .si-ausente { display: inline-flex; color: var(--color-danger); }

/* El motivo solo aparece cuando hay algo que explicar. Sin JavaScript
   el checkbox igual funciona y el campo queda siempre visible, que es
   peor pero no rompe nada. */
.motivo-asistencia { display: none; width: 100%; margin: 0; border: 0;
                     border-top: 1px solid var(--color-danger); border-radius: 0;
                     background: transparent; font-size: 14px; padding: 8px 14px; }
.esta-ausente .motivo-asistencia { display: block; }

.barra-guardar {
  position: fixed; left: var(--sidebar-ancho); right: 0; bottom: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 22px;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -2px 8px rgba(16,24,40,.06);
}
.barra-guardar .boton-principal { min-width: 160px; }
.cuenta-asistencia { font-size: 14px; color: var(--color-text-secondary); font-weight: 550; }

@media (max-width: 900px) {
  .barra-guardar { left: 0; padding: 10px 14px; }
  .cuenta-asistencia { font-size: 13px; }
}

/* --- Backoffice: navegacion y solicitudes de la landing --- */
.nav-backoffice { display: flex; gap: 4px; }
.nav-backoffice a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: var(--radio-sm);
  color: var(--color-text-secondary); text-decoration: none;
  font-size: 14px; font-weight: 500;
}
.nav-backoffice a:hover { background: var(--color-surface-2); text-decoration: none; }
.nav-backoffice a.activo { background: var(--color-primary-light); color: var(--color-primary); }
.nav-numero {
  min-width: 18px; padding: 0 5px; border-radius: 10px;
  background: var(--color-danger); color: #fff;
  font-size: 11px; font-weight: 650; line-height: 18px; text-align: center;
}

.solicitud { margin-bottom: 14px; }
/* Atendida: se apaga pero no se esconde. Sirve para saber a quien ya se
   llamo, que es justo lo que se pierde si desaparece de la lista. */
.solicitud-atendida { opacity: .62; }
.solicitud-atendida:hover { opacity: 1; }

.solicitud-datos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px 20px; font-size: 14px;
}
.solicitud-datos > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.solicitud-datos a { word-break: break-word; }
.etiqueta-dato {
  font-size: 10.5px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--color-text-muted);
}

.solicitud-comentario {
  margin: 14px 0 0; padding: 11px 13px;
  background: var(--color-surface-2);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radio-sm);
  font-size: 14px;
}

.solicitud-pie {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-top: 15px; padding-top: 13px;
  border-top: 1px solid var(--color-border);
}
.solicitud-pie form { margin: 0; }

/* --- La banda de "esto es local" ---
   Fea a proposito: desde el volcado las dos instalaciones tienen
   los mismos datos y se ven iguales. Tiene que verse antes de
   leerla. En produccion no se dibuja. */
.banda-entorno {
  position: sticky; top: 0; z-index: 99;
  padding: 5px 14px;
  background: #b54708; color: #fff;
  font: 600 12px/1.4 -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: .03em; text-align: center;
}

/* La banda de la demostración pública.

   Empezó en azul oscuro, para no confundirla con la naranja de "estás
   en local". Fue un error: ese azul es casi el mismo tono que el
   sidebar y el header, así que la banda se fundía con el resto y no la
   veía nadie — que es lo único que esta banda no puede permitirse.

   En rojo, y con el mismo rojo que la app usa para avisar de algo que
   importa. No es exagerado: el que entra no tiene cómo saber que los
   apellidos y los montos que está leyendo son inventados, y si no lo
   lee acá no lo lee en ningún lado. */
.banda-demo {
  position: sticky; top: 0; z-index: 99;
  padding: 9px 14px;
  background: var(--color-danger); color: #fff;
  font: 700 13.5px/1.45 -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: .02em; text-align: center;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .18);
}
.banda-demo a {
  color: #fff; text-decoration: underline; margin-left: 8px;
  text-underline-offset: 2px;
}

/* --- Beca / media cuota, arriba del estado de cuenta ---
   Va antes de la tabla porque explica todos los numeros que
   siguen: leerlo despues es leerlo tarde. */
.caja-cuota {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 11px 14px; margin-bottom: 14px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radio-sm);
}
/* Con arreglo se marca con el color del club: es la excepcion y
   tiene que distinguirse de la fila normal de un vistazo. */
.caja-cuota.con-arreglo {
  background: var(--color-primary-light);
  border-color: var(--color-primary-border);
}
/* flex-basis de 210px y no min-width:0: con min-width 0 el texto se
   podia achicar hasta partir "Paga la cuota general" en una palabra
   por renglon antes de que el boton bajara. Asi, cuando no entran
   los dos, el boton se va abajo y el texto queda entero. */
.caja-cuota-texto { flex: 1 1 210px; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.caja-cuota-texto strong { font-size: 14.5px; }
.caja-cuota-texto .tenue { font-size: 13px; }
.caja-cuota-motivo {
  margin-top: 3px; font-size: 13px; font-style: italic;
  color: var(--color-text-secondary);
}
.form-cuota-especial {
  padding: 14px; margin: -6px 0 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radio-sm);
  background: var(--color-surface);
}