/* Zona del alumno: panel, gráfico de progreso y plan. Solo variables de nivela.css */
.salir { font-size: var(--t-16); min-height: 44px; }

.siguiente { margin: var(--e-16) 0 var(--e-32); border-color: var(--primario); }
.siguiente h2 { font-size: var(--t-22); }

/* Gráfico: una barra por destreza, un solo tono, etiqueta directa con el dato */
.grafico { list-style: none; padding: 0; margin: var(--e-16) 0; display: grid; gap: var(--e-12); }
.grafico li { display: grid; grid-template-columns: 1fr; gap: var(--e-4); }
.barra-nombre { font-weight: 600; font-size: var(--t-16); }
.barra-fondo { display: block; height: 24px; background: var(--superficie-2); border-radius: 4px; overflow: hidden; }
.barra-valor { display: block; height: 100%; background: var(--primario); border-radius: 4px; }
.barra-dato { font-size: var(--t-16); color: var(--texto); }
@media (min-width: 700px) {
  .grafico li { grid-template-columns: 13rem 1fr 11rem; align-items: center; gap: var(--e-12); }
}
.tabla-grafico summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--primario); font-weight: 600; }

/* Plan de 30 días */
.plan-semana { font-size: var(--t-22); margin-top: var(--e-32); }
.dias { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-12); }
.dia { border: 1px solid var(--borde); border-radius: var(--radio); padding: var(--e-16); background: var(--fondo); scroll-margin-top: var(--e-96); }
.dia .casilla { margin-bottom: var(--e-8); min-height: 44px; align-items: center; }
.dia .casilla input { margin-top: 0; }
.dia p:last-child { margin-bottom: 0; }
.dia.toca, .dia:target { border-color: var(--primario); box-shadow: 0 0 0 2px var(--primario); }
.enlaces a { display: inline-block; padding: var(--e-8) 0; }