/* ============================================================
   Sistema de diseño — paleta y medidas en un solo lugar.
   Para cambiar el look de toda la app, se tocan estas variables.
   ============================================================ */

:root {
  /* marca: verde petróleo para la barra, coral para la acción principal */
  --petroleo: #12403c;
  --petroleo-claro: #1b544e;
  --coral: #e2705a;
  --coral-oscuro: #cc5c46;

  /* superficies y texto */
  --fondo: #f4f6f6;
  --tarjeta: #ffffff;
  --borde: #e3e8e8;
  --texto: #1f2a2e;
  --texto-suave: #6b7a80;

  /* estados */
  --ok: #12805c;
  --alerta: #b45309;
  --peligro: #c0392b;

  /* medidas */
  --radio: 10px;
  --radio-chico: 6px;
  --sombra: 0 1px 2px rgba(18, 64, 60, 0.06), 0 1px 8px rgba(18, 64, 60, 0.04);
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  max-width: 780px;
  margin: 2rem auto;
  padding: 0 1rem 3rem;
  color: var(--texto);
  background: var(--fondo);
  line-height: 1.5;
  font-size: 15px;
}

h1 {
  font-size: 1.6rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin: 0 0 1.2rem;
}

h2 {
  font-size: 1.1rem;
  font-weight: 650;
  margin: 0 0 0.8rem;
}

h3 {
  font-size: 0.95rem;
  font-weight: 650;
  margin: 1.2rem 0 0.5rem;
}

/* cada section es una tarjeta blanca sobre el fondo gris */
section {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 1.2rem 1.4rem;
  margin-bottom: 1.2rem;
  overflow-x: auto;  /* las tablas anchas se deslizan adentro en vez de cortarse */
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

th {
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-bottom: 2px solid var(--borde);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-suave);
  font-weight: 650;
  white-space: nowrap;
}

td {
  text-align: left;
  padding: 0.6rem;
  border-bottom: 1px solid var(--borde);
}

tbody tr:hover td {
  background: #fafbfb;
}

tbody tr:last-child td {
  border-bottom: none;
}

.al-dia {
  color: var(--ok);
  font-weight: 600;
}

.en-deuda {
  color: var(--peligro);
  font-weight: 600;
}

.por-vencer {
  color: var(--alerta);
  font-weight: 600;
}

.fila-extra td {
  background: #f7f7f7;
  padding: 0.6rem;
}

.fila-extra label {
  display: inline-flex;
  flex-direction: column;
  margin-right: 0.8rem;
  margin-bottom: 0.4rem;
  font-size: 0.85rem;
}

.link-recuperacion {
  word-break: break-all;
  background: #f2f6fa;
  border: 1px solid #d7e2ec;
  border-radius: 4px;
  padding: 0.4rem;
  font-family: monospace;
  font-size: 0.8rem;
}

.fila-extra ul {
  margin: 0.3rem 0 0;
  padding-left: 1.2rem;
}

.inactivo {
  color: #888;
}

/* --- Formularios --- */

form label {
  display: block;
  margin-bottom: 0.7rem;
  font-size: 0.85rem;
  color: var(--texto-suave);
}

input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
input[type="date"],
input[type="time"],
select,
textarea {
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--texto);
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  background: #fff;
  margin-top: 0.2rem;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--petroleo-claro);
  box-shadow: 0 0 0 3px rgba(27, 84, 78, 0.12);
}

/* --- Botones ---
   Por defecto son secundarios (blancos). El que confirma cada formulario
   y los ".boton-nuevo" son los principales (coral). */

button {
  font-family: inherit;
  font-size: 0.875rem;
  margin-top: 0.5rem;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  background: #fff;
  color: var(--texto);
  font-weight: 550;
  transition: background 0.15s, border-color 0.15s;
}

button:hover {
  background: #f4f6f6;
  border-color: #cfd8d8;
}

button[type="submit"] {
  background: var(--coral);
  border-color: var(--coral);
  color: #fff;
}

button[type="submit"]:hover {
  background: var(--coral-oscuro);
  border-color: var(--coral-oscuro);
}

.boton-peligro,
.boton-peligro:hover {
  background: var(--peligro);
  border-color: var(--peligro);
  color: #fff;
}

td button,
.acciones button {
  margin: 0 0.25rem 0.25rem 0;
  padding: 0.25rem 0.6rem;
  font-size: 0.8rem;
}

/* --- Pestañas (píldoras) --- */

.tabs {
  display: flex;
  gap: 0.3rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.tab {
  background: none;
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  margin-top: 0;
  color: var(--texto-suave);
}

.tab.activa {
  background: var(--petroleo);
  border-color: var(--petroleo);
  color: #fff;
  font-weight: 600;
}

.tab.activa:hover {
  background: var(--petroleo-claro);
  border-color: var(--petroleo-claro);
}

/* Pestañas de nivel página (Lista / Nuevo alumno / Registrar pago): más grandes que
   las de adentro de una tarjeta, para que se lea cuáles mandan. */
.tabs-pagina {
  gap: 0.5rem;
  margin-bottom: 1.4rem;
}

.tabs-pagina .tab {
  padding: 0.55rem 1.3rem;
  font-size: 1rem;
  box-shadow: var(--sombra);
}

/* :not(.activa) para no pisar el fondo petróleo de la pestaña activa
   (misma especificidad que .tab.activa, y esta regla va después) */
.tabs-pagina .tab:not(.activa) {
  background: var(--tarjeta);
}

/* --- Ficha del alumno: encabezado con foto + menú de secciones --- */

.encabezado-alumno {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}

/* el bloque de texto ocupa lo que sobra; min-width:0 le permite achicarse en vez de
   empujar la foto al renglón de abajo */
.encabezado-alumno > div:first-child {
  flex: 1;
  min-width: 0;
}

.encabezado-alumno h1 {
  margin-bottom: 0.3rem;
}

.caja-foto {
  text-align: center;
  flex-shrink: 0;
}

.caja-foto .foto-perfil,
.caja-foto .foto-vacia {
  width: 120px;
  height: 120px;
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  object-fit: cover;  /* la imagen llena el cuadro sin deformarse */
  display: block;
}

.caja-foto .foto-vacia {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tarjeta);
  color: var(--texto-suave);
  font-size: 0.85rem;
}

/* OJO: `display: flex` le gana al atributo `hidden` (que solo vale display:none del
   navegador), así que el cartel "Sin foto" quedaba visible con la foto puesta.
   Hay que apagarlo a mano. */
.caja-foto .foto-vacia[hidden] {
  display: none;
}

.acciones-foto {
  display: flex;
  gap: 0.3rem;
  justify-content: center;
  margin-top: 0.4rem;
}

.acciones-foto button {
  margin: 0;
  padding: 0.3rem 0.7rem;
  font-size: 0.85rem;
}

.caja-foto .mensaje-foto {
  margin: 0.35rem 0 0;
  max-width: 160px;
}

/* Menú de la ficha: los botones se acomodan solos según el ancho */
.menu-ficha {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.2rem 0;
}

.menu-ficha .tab {
  background: var(--tarjeta);
  box-shadow: var(--sombra);
}

/* :not(.activa) para no pisar el fondo petróleo de la sección abierta
   (mismo cuidado que en .tabs-pagina) */
.menu-ficha .tab.activa {
  background: var(--petroleo);
}

/* Descuento sobre el cargo, en Registrar pago: los dos campos van uno al lado del otro
   porque son dos formas de decir lo mismo (importe o porcentaje) */
.campos-descuento {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.8rem;
  border-left: 3px solid var(--borde);
  padding-left: 0.9rem;
  margin-bottom: 0.8rem;
}

.campos-descuento label {
  margin: 0;
}

.campos-descuento input {
  width: 11rem;
  margin: 0;
}

.campos-descuento .detalle-descuento {
  flex-basis: 100%;
  margin: 0;
}

/* --- Cuenta del gimnasio con la app (Información de pago) --- */

/* Banda de aviso arriba de todo, en todas las páginas del panel */
.banda-cuenta {
  border-radius: var(--radio);
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.2rem;
  color: #fff;
}

.banda-cuenta p {
  margin: 0.3rem 0 0.6rem;
}

.banda-cuenta a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
}

.banda-cuenta.estado-alerta { background: var(--alerta); }
.banda-cuenta.estado-peligro { background: var(--peligro); }

/* Recuadro del estado dentro de la propia página de Información de pago */
.aviso-cuenta {
  border-left: 4px solid;
  border-radius: var(--radio);
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
  background: var(--fondo);
}

.aviso-cuenta p { margin: 0.35rem 0 0; }
.aviso-cuenta.estado-ok { border-color: var(--ok); }
.aviso-cuenta.estado-alerta { border-color: var(--alerta); }
.aviso-cuenta.estado-peligro { border-color: var(--peligro); }

/* Tabla de dos columnas (etiqueta / valor) para datos de cuenta y de cobro */
.tabla-datos th {
  text-align: left;
  color: var(--texto-suave);
  font-weight: 500;
  white-space: nowrap;
  padding-right: 1.2rem;
  text-transform: none;
  font-size: 1rem;
  letter-spacing: normal;
}

/* Puntos de color de las listas de Seguimiento (amarilla / roja) */
.punto-alerta,
.punto-peligro {
  display: inline-block;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  margin-right: 0.4rem;
  vertical-align: middle;
}

.punto-alerta { background: var(--alerta); }
.punto-peligro { background: var(--peligro); }

/* Ícono de info con las notas del movimiento (Marcas / RM). El globo aparece al pasar
   el cursor o al enfocarlo con el teclado; sin notas cargadas no se dibuja el ícono. */
.icono-notas {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border: 1px solid var(--borde);
  border-radius: 50%;
  color: var(--texto-suave);
  font-size: 0.8rem;
  font-style: italic;
  font-weight: 700;
  cursor: help;
}

.icono-notas:hover,
.icono-notas:focus {
  border-color: var(--petroleo);
  color: var(--petroleo);
  outline: none;
}

.globo-notas {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: max-content;
  max-width: 280px;
  background: var(--petroleo);
  color: #fff;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  font-size: 0.85rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
  white-space: pre-wrap;  /* respeta los saltos de línea que escribió el coach */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.12s;
}

.icono-notas:hover .globo-notas,
.icono-notas:focus .globo-notas {
  visibility: visible;
  opacity: 1;
}

/* Aviso de clases adeudadas al cargar un abono: el alumno vino sin abono vigente */
.aviso-adeudadas {
  border: 1px solid var(--alerta);
  border-left: 4px solid var(--alerta);
  border-radius: var(--radio);
  background: #fff8ee;
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
}

.aviso-adeudadas .subtexto {
  margin: 0.4rem 0 0;
}

/* Buscador + cuántos mostrar, arriba del listado de alumnos */
.barra-busqueda {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 0.8rem;
}

.barra-busqueda input[type="search"] {
  flex: 1 1 260px;
  max-width: 340px;
  margin: 0;
}

.barra-busqueda label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  color: var(--texto-suave);
}

.barra-busqueda select {
  width: auto;
  margin: 0;
}

.paginado {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.8rem;
}

.paginado button {
  margin: 0;
}

a.nombre-alumno {
  color: #222;
  text-decoration: underline;
  cursor: pointer;
}

tr.contactado {
  opacity: 0.5;
}

.mensaje-vacio {
  color: #888;
  font-style: italic;
}

nav.principal {
  margin-bottom: 1rem;
}

nav.principal a {
  margin-right: 1rem;
}

.grafico-svg {
  width: 100%;
  height: auto;
  margin-top: 0.5rem;
}

.barra-esperado {
  fill: #aaa;
  background-color: #aaa;
}

.barra-cobrado {
  fill: #1a7a1a;
  background-color: #1a7a1a;
}

.etiqueta-mes {
  fill: #666;
  font-size: 10px;
}

.leyenda {
  display: flex;
  gap: 1rem;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.muestra-color {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  margin-right: 0.3rem;
  vertical-align: middle;
}

.tasa-destacada {
  font-size: 2rem;
  font-weight: bold;
  margin: 0.5rem 0 0.2rem;
}

.panel-tab {
  border: 1px solid #ccc;
  border-top: none;
  padding: 1rem;
  margin-bottom: 0.5rem;
}

.label-checkbox {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.label-checkbox input {
  width: auto;
}

textarea {
  width: 100%;
  font-family: inherit;
  box-sizing: border-box;
}

.perfil-seccion h3 {
  margin-bottom: 0.3rem;
}

.perfil-seccion p {
  margin: 0.2rem 0;
}

.nav-semana {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.8rem;
}

.linea-clase {
  margin-bottom: 0.3rem;
}

.linea-clase button {
  margin: 0 0.2rem 0 0;
  padding: 0.1rem 0.5rem;
  font-size: 0.8rem;
}

.bloque-extras {
  margin-bottom: 0.5rem;
}

.dias-inline {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin: 0.3rem 0 0 1rem;
}

.dias-inline .label-checkbox {
  margin: 0;
}

.clase-cancelada {
  opacity: 0.5;
  text-decoration: line-through;
}

.lista-anotados {
  margin: 0.2rem 0 0.2rem 1rem;
  font-size: 0.85rem;
  color: #555;
}

.fila-dashboard {
  border-bottom: 1px solid #eee;
  padding: 0.5rem 0;
}

.fila-principal {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  cursor: pointer;
  flex-wrap: wrap;
}

.badge {
  background: #eee;
  border-radius: 4px;
  padding: 0.15rem 0.5rem;
  font-size: 0.85rem;
  white-space: nowrap;
}

.bloque-disp {
  flex: 1;
  min-width: 140px;
  font-size: 0.9rem;
  color: #555;
}

.barra {
  height: 5px;
  background: #eee;
  border-radius: 3px;
  margin-top: 0.2rem;
  overflow: hidden;
}

.barra-relleno {
  height: 100%;
  border-radius: 3px;
}

.barra-relleno.verde { background: #1abc9c; }
.barra-relleno.naranja { background: #f39c12; }
.barra-relleno.rojo { background: #e74c3c; }

.fila-dashboard .acciones button {
  margin: 0 0.2rem 0 0;
  padding: 0.1rem 0.5rem;
  font-size: 0.8rem;
}

.panel-anotados {
  margin: 0.3rem 0 0.3rem 1rem;
  font-size: 0.9rem;
  color: #333;
  background: #f7f7f7;
  border-radius: 4px;
  padding: 0.4rem 0.6rem;
}

.linea-anotado {
  margin-bottom: 0.2rem;
}

.linea-anotado button {
  margin: 0 0 0 0.3rem;
  padding: 0.05rem 0.4rem;
  font-size: 0.75rem;
}

.asistencia-activa-presente {
  background: #1abc9c;
  color: #fff;
  border-color: #1abc9c;
}

.asistencia-activa-ausente {
  background: #e74c3c;
  color: #fff;
  border-color: #e74c3c;
}

/* Portal del alumno: una vista por vez, elegida desde la barra lateral.
   Antes eran <details> apilados con TODO desplegado. */
.vista-portal {
  max-width: 900px;  /* el portal se lee mejor angosto: no tiene tablas anchas como el panel */
}

/* pestañas Contacto / Salud del form "Mis datos" */
.panel-perfil[hidden] {
  display: none;
}

/* --- Caja --- */

.grilla-cajas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.8rem;
  margin-top: 0.8rem;
}

.tarjeta-caja {
  text-align: left;
  padding: 0;
  margin: 0;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--tarjeta);
}

.tarjeta-caja:hover {
  border-color: var(--petroleo-claro);
}

.nombre-caja {
  background: var(--petroleo);
  color: #fff;
  font-weight: 650;
  text-align: center;
  padding: 0.7rem 0.8rem;
}

.saldo-caja {
  font-size: 1.6rem;
  font-weight: 650;
  color: var(--ok);
  text-align: center;
  padding: 1rem 0.8rem;
}

.acciones-caja {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.8rem;
}

.filtro-fechas {
  display: flex;
  gap: 0.8rem;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 0.8rem;
}

.filtro-fechas label {
  margin-bottom: 0;
}

.filtro-fechas button {
  margin-top: 0;
}

#tabla-movimientos tfoot td {
  border-top: 1px solid var(--borde);
  border-bottom: none;
  background: #fafbfb;
}

#tabla-movimientos tfoot .saldo-total,
#tabla-resumen tfoot .saldo-total {
  font-size: 1.15rem;
}

#tabla-resumen tfoot td {
  border-top: 1px solid var(--borde);
  border-bottom: none;
  background: #fafbfb;
}

/* el resumen es largo (un renglón por día): se desliza dentro de su panel */
#panel-resumen {
  max-height: 420px;
  overflow-y: auto;
}

/* Bloque del plan: agrupa Plan actual / Registrar pago / Abonos y cargos / Historial
   de pagos en una sola caja, separada del resto de los datos (boceto del usuario). */
.bloque-plan {
  padding-bottom: 0.6rem;
}

.bloque-plan .menu-ficha {
  margin-bottom: 0.8rem;
}

.bloque-plan .seccion-ficha {
  border-top: 1px solid var(--borde);
  padding-top: 0.9rem;
}

/* --- Referidos (sección de la ficha del alumno) --- */

.acciones-referidos {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}

.panel-referidos {
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  background: #fbfcfc;
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
}

.panel-referidos h3:first-child {
  margin-top: 0;
}

/* la fila del alumno cuya ficha se está viendo, dentro del ranking del gimnasio */
#tabla-ranking-referidos .fila-mia td {
  background: #fdf0ec;
  font-weight: 600;
}

/* --- Calculadora RM (portal del alumno) --- */

.fila-rm {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.fila-rm label {
  flex: 1;
  min-width: 160px;
}

.grilla-rm {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin: 1rem 0;
}

.celda-rm {
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  padding: 0.5rem 0.4rem;
  text-align: center;
}

/* la fila que corresponde a las repeticiones cargadas */
.celda-rm.activa {
  background: var(--coral);
  border-color: var(--coral);
  color: #fff;
}

.celda-rm-titulo {
  font-size: 1.05rem;
  font-weight: 650;
  border-bottom: 1px solid var(--coral);
  padding-bottom: 0.25rem;
  margin-bottom: 0.3rem;
}

.celda-rm.activa .celda-rm-titulo {
  border-bottom-color: rgba(255, 255, 255, 0.6);
}

.celda-rm-valor {
  color: var(--texto-suave);
}

.celda-rm-detalle {
  color: var(--texto-suave);
  font-size: 0.85rem;
}

.celda-rm.activa .celda-rm-valor,
.celda-rm.activa .celda-rm-detalle {
  color: #fff;
}

.fila-record {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--borde);
}

.fila-record:last-child {
  border-bottom: none;
}

@media (max-width: 520px) {
  .grilla-rm {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Logo del gimnasio (lo carga el super admin) --- */

/* Encabezado del panel: logo a la izquierda, rol y nombre a su derecha (pedido del
   usuario). El nombre del gimnasio va debajo, ya fuera de esta fila. */
.sidebar-cabecera {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1rem 0.2rem;
}

.sidebar-logo {
  flex-shrink: 0;
}

/* redondo solo acá (pedido del usuario): en la tabla del super admin y en el buscador
   del alumno sigue cuadrado, que es donde conviven con texto en una línea.
   El fondo claro hace que un logo oscuro igual se lea sobre el petróleo. */
.sidebar-logo img {
  display: block;
  width: 58px;
  height: 58px;
  object-fit: contain;
  background: #fff;
  border-radius: 50%;
  padding: 0.35rem;  /* el círculo recorta las esquinas: sin esto un logo al ras se come */
}

/* junto al nombre del gimnasio: en el buscador del alumno y en la tabla del super admin */
.logo-mini {
  width: 26px;
  height: 26px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 0.45rem;
  border-radius: 4px;
}

.celda-con-logo {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.celda-con-logo .logo-mini {
  width: 34px;
  height: 34px;
  margin-right: 0;
  flex-shrink: 0;
}

/* el logo entra COMPLETO (contain) y sobre blanco, a diferencia de la foto de perfil,
   que se recorta para llenar el cuadro (cover) */
.caja-logo .foto-perfil {
  object-fit: contain;
  background: #fff;
}

/* --- Barra lateral (inyectada por layout.js en el panel y por portal.js en el portal) --- */

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 236px;
  background: var(--petroleo);
  color: #c3d3d0;
  overflow-y: auto;
  padding-bottom: 1rem;
  z-index: 100;
  display: flex;
  flex-direction: column;  /* para que el pie (gimnasio + salir) quede abajo */
}

/* Bloque de arriba: rol y nombre pegados al logo, y el gimnasio debajo; todo junto
   para que el menú (CLASES...) arranque lo más arriba posible. */
.sidebar-usuario {
  min-width: 0;  /* deja que el texto se recorte en vez de empujar al logo */
}

.sidebar-rol {
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--coral);
  line-height: 1.3;
}

.sidebar-nombre {
  color: #fff;
  font-size: 1rem;
  font-weight: 550;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* en el portal, debajo del nombre del alumno */
.sidebar-apellido {
  color: #c3d3d0;
  font-size: 0.9rem;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-marca {
  display: block;
  font-size: 1.1rem;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  line-height: 1.3;
  padding: 1rem 1rem 0.8rem;
}

/* en el panel viene pegada debajo del encabezado (logo + usuario), así que va apretada;
   en el portal del alumno no hay encabezado y conserva el aire de arriba */
.sidebar-cabecera + .sidebar-marca {
  padding: 0.15rem 1rem 0;
}

/* el primer encabezado de grupo no necesita el aire de los que separan secciones */
.sidebar-marca + .sidebar-seccion {
  padding-top: 0.7rem;
}

.sidebar-seccion {
  text-transform: uppercase;
  font-size: 0.68rem;
  color: #7d9b96;
  padding: 1rem 1rem 0.3rem;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.sidebar-pie {
  margin-top: auto;
  padding: 0.8rem 1rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.sidebar-gimnasio {
  color: #cfd8e3;
  font-size: 0.85rem;
  margin-bottom: 0.4rem;
}

.sidebar-salir {
  background: transparent;
  color: #cfd8e3;
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 0.85rem;
  padding: 0.25rem 0.6rem;
}

.sidebar-item {
  display: block;
  color: #c3d3d0;
  text-decoration: none;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  border-left: 3px solid transparent;  /* el activo lo pinta de coral */
}

.sidebar-item:hover {
  background: var(--petroleo-claro);
  color: #fff;
}

.sidebar-item.activo {
  background: var(--petroleo-claro);
  border-left-color: var(--coral);
  color: #fff;
  font-weight: 600;
}

.sidebar-icono {
  display: inline-block;
  width: 1.4rem;
}

.panel-programar {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0.6rem 1rem 1rem;
  margin: 1rem 0;
}

.panel-programar legend {
  font-weight: bold;
  padding: 0 0.4rem;
}

.panel-programar p {
  color: #666;
  font-size: 0.85rem;
  margin: 0.2rem 0 0.6rem;
}

.boton-nuevo {
  display: inline-block;
  background: var(--coral);
  color: #fff;
  text-decoration: none;
  padding: 0.45rem 1rem;
  border-radius: var(--radio-chico);
  margin-bottom: 0.8rem;
  margin-right: 1rem;
  font-size: 0.875rem;
  font-weight: 550;
}

.boton-nuevo:hover {
  background: var(--coral-oscuro);
}

.boton-cancelar {
  display: inline-block;
  color: var(--texto-suave);
  text-decoration: none;
  padding: 0.45rem 1rem;
  margin-left: 0.5rem;
  font-size: 0.875rem;
}

.sidebar-toggle {
  display: none;
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 101;
  font-size: 1.2rem;
  padding: 0.15rem 0.6rem;
  margin: 0;
}

body.con-sidebar {
  margin: 0;
  max-width: 1500px;  /* las tablas de alumnos/clases tienen muchas columnas */
  padding: 1.8rem 2rem 3rem 268px;
}

@media (max-width: 800px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.2s;
  }
  .sidebar.abierta {
    transform: translateX(0);
  }
  .sidebar-toggle {
    display: block;
  }
  body.con-sidebar {
    padding: 3rem 1rem 2rem;
    max-width: none;
  }
}

.wod-item {
  border-bottom: 1px solid #eee;
  padding: 0.5rem 0;
}

/* Lista de anteriores y próximos: solo la fecha, y al tocarla se abre el detalle */
.wod-fecha-item {
  border-bottom: 1px solid var(--borde);
}

.wod-fecha-item:last-child {
  border-bottom: none;
}

.boton-fecha-wod {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  margin: 0;
  padding: 0.6rem 0.2rem;
  font-size: 0.95rem;
  font-weight: 550;
}

.boton-fecha-wod:hover {
  background: #fafbfb;
  border: none;
}

.boton-fecha-wod::before {
  content: "▸ ";
  color: var(--texto-suave);
}

.boton-fecha-wod.abierto::before {
  content: "▾ ";
}

.wod-fecha-detalle .wod-item {
  border-bottom: none;
  padding-top: 0;
}

.wod-contenido {
  white-space: pre-wrap;
  margin-top: 0.3rem;
}

.wod-resultado {
  margin-top: 0.6rem;
  padding: 0.6rem;
  background: #f5f7fa;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.wod-resultado label {
  display: flex;
  flex-direction: column;
  font-size: 0.9rem;
  gap: 0.2rem;
}

.wod-resultado button {
  align-self: flex-start;
}

.wod-resultado-msg {
  color: #2a7d2a;
  font-size: 0.9rem;
}

.wod-leaderboard {
  margin-top: 0.5rem;
}

.boton-leaderboard {
  background: #eef2f7;
  color: #333;
  border: 1px solid #ccd4de;
}

.leaderboard-contenido {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.5rem;
}

.leaderboard-nivel {
  flex: 1 1 260px;
}

.leaderboard-tabla {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.3rem;
  font-size: 0.9rem;
}

.leaderboard-tabla th,
.leaderboard-tabla td {
  border: 1px solid #e2e6ea;
  padding: 0.3rem 0.5rem;
  text-align: left;
}

.leaderboard-tabla th {
  background: #f5f7fa;
}

.leaderboard-tabla .fila-mia {
  background: #fff6d6;
  font-weight: bold;
}

.leaderboard-vacio {
  color: #888;
  font-size: 0.9rem;
  margin-top: 0.3rem;
}

.leaderboard-wod {
  border: 1px solid #e2e6ea;
  border-radius: 8px;
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
}

.leaderboard-wod h3 {
  margin: 0 0 0.3rem;
}

.noticia-item,
.beneficio-item {
  border-bottom: 1px solid #eee;
  padding: 0.5rem 0;
}

.noticia-item summary,
.beneficio-item summary {
  cursor: pointer;
}

.noticia-contenido {
  white-space: pre-wrap;
  margin-top: 0.4rem;
  color: #444;
}

.boton-peligro {
  background: #c0392b;
  color: #fff;
}

.beneficio-tipo {
  display: inline-block;
  background: #2a6fb0;
  color: #fff;
  font-size: 0.75rem;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  margin-right: 0.3rem;
}

.marca-categoria {
  margin: 0.8rem 0 0.2rem;
  padding-bottom: 0.2rem;
  border-bottom: 2px solid #333;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.marca-item {
  border-bottom: 1px solid #eee;
  padding: 0.4rem 0;
}

.marca-item summary {
  cursor: pointer;
  color: #555;
  font-size: 0.9rem;
  margin-top: 0.2rem;
}

.marca-historial {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.3rem;
  font-size: 0.9rem;
}

.marca-historial th,
.marca-historial td {
  border: 1px solid #e2e6ea;
  padding: 0.25rem 0.5rem;
  text-align: left;
}

.marca-grafico {
  width: 100%;
  max-width: 340px;
  height: auto;
  margin-top: 0.4rem;
}

.marca-grafico .eje {
  stroke: #ccc;
  stroke-width: 1;
}

.marca-grafico .eje-texto {
  fill: #888;
  font-size: 9px;
}

.marca-grafico .linea {
  fill: none;
  stroke: #2a6fb0;
  stroke-width: 2;
}

.marca-grafico .punto {
  fill: #2a6fb0;
}

.marca-grafico-nota {
  color: #888;
  font-size: 0.8rem;
  margin: 0.3rem 0 0;
}

.buscador-alumno {
  margin-top: 0.4rem;
}

.buscador-alumno input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.3rem;
}

.resultados-busqueda .opcion-alumno {
  display: block;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1px solid #ddd;
  margin: 0.15rem 0 0;
  padding: 0.25rem 0.5rem;
  font-size: 0.85rem;
}

.resultados-busqueda .opcion-alumno:hover {
  background: #eef7f4;
}

/* la opcion quedo esperando confirmacion: su plan no incluye esta actividad */
.resultados-busqueda .opcion-alumno.opcion-avisada {
  background: #fdf3e7;
  border-color: var(--alerta);
  color: var(--alerta);
  font-weight: 600;
}

/* Anotados de una clase como tarjetas (estilo TurnosWeb): entran varios por fila y cada
   uno muestra plan y estado de cuenta sin salir del dashboard. */
.tarjetas-anotados {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.6rem;
  margin-bottom: 0.8rem;
}

.tarjeta-anotado {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 0.6rem 0.7rem;
  text-align: center;
}

.tarjeta-anotado .nombre-anotado {
  display: block;
  font-weight: 600;
  color: #222;
  text-decoration: none;
  margin-bottom: 0.35rem;
}

.tarjeta-anotado .nombre-anotado:hover {
  text-decoration: underline;
}

.datos-anotado {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--texto-suave);
}

.datos-anotado .plan-anotado {
  color: var(--petroleo);
  font-weight: 600;
}

.datos-anotado .asistencia-presente { color: var(--ok); font-weight: 600; }
.datos-anotado .asistencia-ausente { color: var(--peligro); font-weight: 600; }

.pie-anotado {
  font-size: 0.78rem;
  color: var(--texto-suave);
  margin-top: 0.2rem;
}

.acciones-anotado {
  margin-top: 0.4rem;
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.acciones-anotado button {
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
  margin: 0;
}

.cancelar-turnos {
  border-top: 1px solid var(--borde);
  padding-top: 0.6rem;
}

.casillas-cancelar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  margin: 0.3rem 0 0.6rem;
}

.clase-cancelada button {
  text-decoration: none;
}

.bloque-extras .label-checkbox {
  margin: 0.2rem 0 0.2rem 1rem;
}

.aviso-extras {
  color: #888;
  font-style: italic;
  margin-left: 1rem;
}

/* Profesor a cargo, en cada fila del dashboard de clases */
.profesor-clase {
  font-size: 0.85rem;
  color: var(--texto-suave, #667);
  white-space: nowrap;
}
.profesor-clase.sin-profesor {
  font-style: italic;
  opacity: 0.6;
}

/* Página de Profesores: navegación por mes y tarjetas de números */
.nav-periodo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}

.tarjetas-profesor {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 0.8rem 0;
}

.tarjeta-numero {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 150px;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo);
}

.tarjeta-numero .numero-grande {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--petroleo);
}

/* Clase que todavía no se dictó: se muestra, pero no cuenta en los totales */
.fila-atenuada {
  opacity: 0.55;
}

/* Calendario: fila de un feriado tildado (ese día no hay clases) */
.fila-feriado-activo {
  background: #fff6f2;
}
.celda-check {
  text-align: center;
}
.celda-fecha {
  white-space: nowrap;
}

/* Dashboard: aviso de que el día es feriado */
.aviso-feriado {
  background: #fff2ec;
  border-left: 3px solid var(--coral);
  border-radius: var(--radio);
  padding: 0.6rem 0.8rem;
  margin: 0.4rem 0 0.8rem;
  font-size: 0.9rem;
}

/* Clase habilitada a mano en un día feriado */
.badge-habilitada {
  background: #e6f4ea;
  color: #1e6b3a;
}