/* Zona del alumnado (vistas/alumno.js y vistas/plan.js) y editor de la hoja de ruta. Prefijo al-: no choca con app.css.
   Las animaciones están para mantener el foco en el plan; con «reducir movimiento» se apagan. */

html[data-letra="grande"] { font-size: 112.5%; }
html[data-letra="enorme"] { font-size: 125%; }

/* ---------- Marco ---------- */
.al-marco { min-height: 100vh; }
.al-cabecera { position: fixed; top: 0; left: 0; right: 0; height: 64px; z-index: 30; display: flex; align-items: center; gap: var(--abz-e-4); padding: 0 var(--abz-e-5); background: var(--abz-superficie); border-bottom: 1px solid var(--abz-borde); }
.al-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--abz-texto); font-family: var(--abz-fuente-titulos); font-weight: var(--abz-peso-negrita); font-size: var(--abz-t-lg); }
.al-logo-marca { width: 38px; height: 38px; border-radius: 10px; background: var(--abz-marca-tinta); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; letter-spacing: 0; white-space: nowrap; }
.al-logo-marca b { color: var(--abz-marca-naranja-claro); }
.al-pestanas { position: relative; display: flex; gap: 4px; margin-left: var(--abz-e-5); background: var(--abz-superficie-2); padding: 4px; border-radius: var(--abz-radio-pastilla); }
.al-pestana { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: var(--abz-radio-pastilla); font-weight: var(--abz-peso-seminegrita); color: var(--abz-texto-2); text-decoration: none; transition: color var(--abz-mov-normal); }
.al-pestana.activa { color: var(--abz-accion-texto); }
.al-pestanas-fondo { position: absolute; top: 4px; bottom: 4px; border-radius: var(--abz-radio-pastilla); background: var(--abz-accion); box-shadow: 0 3px 0 var(--abz-accion-hover); transition: left var(--abz-mov-lento) var(--abz-mov-curva), width var(--abz-mov-lento) var(--abz-mov-curva); }
.al-cabecera-der { margin-left: auto; display: flex; align-items: center; gap: var(--abz-e-2); }
.al-racha { display: flex; align-items: center; gap: 6px; font-weight: var(--abz-peso-negrita); color: var(--abz-acento); padding: 6px 10px; border-radius: var(--abz-radio-pastilla); background: var(--abz-acento-suave); }
.al-racha .ico { animation: al-llama 2.4s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes al-llama { 0%, 100% { transform: rotate(-4deg) scale(1); } 50% { transform: rotate(4deg) scale(1.1); } }
.al-btn-ico { position: relative; width: var(--abz-tactil); height: var(--abz-tactil); border-radius: 50%; border: 0; background: none; display: grid; place-items: center; color: var(--abz-texto-2); cursor: pointer; transition: background var(--abz-mov-rapido); }
.al-btn-ico:hover { background: var(--abz-superficie-2); }
.al-punto { position: absolute; top: 9px; right: 9px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--abz-superficie); }
.al-punto.bien { background: var(--abz-exito); } .al-punto.justo { background: var(--abz-aviso); } .al-punto.pillado { background: var(--abz-error); } .al-punto.sin-leer { background: var(--abz-acento); }
.al-avatar { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--abz-marca-verde); color: #fff; font-weight: var(--abz-peso-negrita); cursor: pointer; }
.al-avisos { position: absolute; top: 60px; right: 64px; width: 360px; max-height: 70vh; overflow: auto; background: var(--abz-superficie); border: 1px solid var(--abz-borde); border-radius: var(--abz-radio-lg); box-shadow: var(--abz-sombra-3); padding: 6px; z-index: 40; }
.al-aviso { display: flex; gap: 10px; padding: 10px; border-radius: var(--abz-radio-md); color: var(--abz-texto); text-decoration: none; font-size: var(--abz-t-sm); }
.al-aviso:hover { background: var(--abz-superficie-2); }
.al-aviso .ico-a { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--abz-acento-suave); color: var(--abz-accion); flex: none; }
.al-aviso small { display: block; color: var(--abz-texto-2); }
.al-principal { padding-top: 64px; margin-right: 380px; min-height: 100vh; }
.al-vista-enter-active, .al-vista-leave-active { transition: opacity var(--abz-mov-normal), transform var(--abz-mov-normal) var(--abz-mov-curva); }
.al-vista-enter-from { opacity: 0; transform: translateY(12px); }
.al-vista-leave-to { opacity: 0; transform: translateY(-6px); }
.al-envoltorio { max-width: 980px; margin: 0 auto; padding: var(--abz-e-5) var(--abz-e-5) 120px; }
.al-volver { display: inline-flex; align-items: center; gap: 4px; font-weight: var(--abz-peso-seminegrita); text-decoration: none; margin-bottom: var(--abz-e-3); }
.al-cargando { display: grid; place-items: center; min-height: 40vh; }
.al-latido { width: 18px; height: 18px; border-radius: 50%; background: var(--abz-acento); animation: al-latir 1s ease-in-out infinite; }
@keyframes al-latir { 0%, 100% { transform: scale(.6); opacity: .5; } 50% { transform: scale(1); opacity: 1; } }
.suave { color: var(--abz-texto-suave); }

/* ---------- Botones propios (con volumen, como piezas de juego) ---------- */
.al-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--abz-tactil); padding: 0 18px; border-radius: 12px; border: 0; font: inherit; font-weight: var(--abz-peso-negrita); letter-spacing: .2px; cursor: pointer; text-decoration: none; transition: transform var(--abz-mov-rapido), box-shadow var(--abz-mov-rapido); }
.al-btn:disabled { opacity: .55; cursor: default; }
.al-btn-p { background: var(--abz-accion); color: var(--abz-accion-texto); box-shadow: 0 4px 0 var(--abz-marca-naranja-profundo); }
.al-btn-ok { background: var(--abz-exito); color: #fff; box-shadow: 0 4px 0 color-mix(in srgb, var(--abz-exito) 70%, #000); }
.al-btn-s { background: var(--abz-superficie); color: var(--abz-texto-2); border: 2px solid var(--abz-borde); box-shadow: 0 3px 0 var(--abz-borde); }
.al-btn:not(:disabled):active { transform: translateY(3px); box-shadow: 0 1px 0 transparent; }
.al-btn-ancho { width: 100%; }
.al-btn-mini { min-height: 36px; padding: 0 14px; }
.al-btn-texto { background: none; border: 0; color: var(--abz-accion); font: inherit; font-weight: var(--abz-peso-seminegrita); font-size: var(--abz-t-sm); cursor: pointer; padding: 4px 0; }

/* ---------- Mi plan: la senda ---------- */
.al-plan { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--abz-e-6); max-width: 1040px; margin: 0 auto; padding: var(--abz-e-5) var(--abz-e-5) 140px; }
.al-senda { display: flex; flex-direction: column; align-items: center; overflow-x: clip; }
.al-capitulo { width: 100%; max-width: 540px; text-align: center; margin: 34px 0 4px; }
.al-capitulo small { color: var(--abz-texto-suave); font-weight: var(--abz-peso-seminegrita); text-transform: uppercase; letter-spacing: 1.2px; font-size: var(--abz-t-xs); }
.al-capitulo h1 { font-size: var(--abz-t-2xl); margin-top: 4px; }
.al-enunciado { color: var(--abz-texto-2); font-size: var(--abz-t-sm); margin: 6px auto 0; max-width: 480px; }
.al-sello-ruta { display: inline-flex; gap: 6px; align-items: center; margin-top: 10px; font-size: var(--abz-t-sm); color: var(--abz-exito); background: var(--abz-exito-suave); padding: 4px 12px; border-radius: var(--abz-radio-pastilla); }
.al-sello-ruta.prop { color: var(--abz-texto-2); background: var(--abz-superficie-2); }
.al-sello-ruta.prep { color: var(--abz-texto-suave); background: var(--abz-superficie-2); }
.al-sello-ruta .ico { width: 16px; height: 16px; }
.al-mas-capitulos { opacity: .8; }
.al-capitulo-prep { margin: 20px 0 0; }
.al-unidad { position: relative; overflow: hidden; width: 100%; max-width: 540px; border-radius: var(--abz-radio-lg); padding: 16px 22px; color: #fff; margin: 26px 0 20px; display: flex; align-items: center; gap: 16px; box-shadow: 0 5px 0 rgba(0, 0, 0, .18); }
.al-unidad::after { content: ''; position: absolute; right: -30px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.al-unidad.hecha { background: var(--abz-marca-verde); }
.al-unidad.actual { background: var(--abz-marca-naranja-profundo); }
.al-unidad.futura { background: var(--abz-marca-tinta-3); }
.al-unidad small { display: block; opacity: .85; font-size: var(--abz-t-xs); text-transform: uppercase; letter-spacing: 1px; font-weight: var(--abz-peso-seminegrita); }
.al-unidad h2 { font-size: var(--abz-t-lg); color: #fff; }
.al-unidad-cuenta { margin-left: auto; font-weight: var(--abz-peso-negrita); font-size: var(--abz-t-sm); background: rgba(255, 255, 255, .18); padding: 4px 10px; border-radius: var(--abz-radio-pastilla); white-space: nowrap; }
.al-fila-nodo { position: relative; height: 106px; display: flex; align-items: center; justify-content: center; width: 100%; }
.al-fila-nodo.abierta { z-index: 10; }
.al-nodo { position: relative; width: 72px; height: 66px; border-radius: 50%; border: 0; display: grid; place-items: center; color: #fff; cursor: pointer; transition: transform var(--abz-mov-rapido); }
.al-nodo:active { transform: translateY(4px); }
.al-nodo .ico { width: 28px; height: 28px; stroke-width: 2.4; }
.al-nodo.hecho { background: var(--abz-marca-verde); box-shadow: 0 6px 0 #1d5d59; }
.al-nodo.hecho.t-repaso { background: var(--abz-aviso); box-shadow: 0 6px 0 #7f5214; }
.al-nodo.actual { background: var(--abz-accion); box-shadow: 0 6px 0 var(--abz-marca-naranja-profundo); }
.al-nodo.opcional.al-nodo-memoria { color: var(--abz-aviso); border-color: var(--abz-aviso); animation: al-flota-nodo 2.4s ease-in-out infinite; }
@keyframes al-flota-nodo { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.al-nodo.opcional { background: var(--abz-superficie); color: var(--abz-accion); border: 3px dashed var(--abz-marca-naranja-claro); box-shadow: 0 6px 0 var(--abz-borde); }
.al-nodo.bloqueado { background: var(--abz-superficie-2); color: var(--abz-texto-suave); box-shadow: 0 6px 0 var(--abz-borde); }
.al-nodo.jefe { width: 92px; height: 84px; }
.al-nodo.jefe .ico { width: 36px; height: 36px; }
.al-nodo.actual::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 4px solid var(--abz-acento); opacity: .6; animation: al-latido-anillo 1.8s ease-out infinite; }
@keyframes al-latido-anillo { 0% { transform: scale(.9); opacity: .7; } 100% { transform: scale(1.35); opacity: 0; } }
.al-sello { position: absolute; right: -4px; bottom: -2px; width: 24px; height: 24px; border-radius: 50%; background: var(--abz-superficie); color: var(--abz-exito); display: grid; place-items: center; box-shadow: var(--abz-sombra-1); }
.al-sello .ico { width: 14px; height: 14px; stroke-width: 3.4; }
.al-bocadillo { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); background: var(--abz-superficie); color: var(--abz-accion); border: 2px solid var(--abz-borde); font-weight: 800; letter-spacing: 1px; padding: 6px 12px; border-radius: 12px; white-space: nowrap; font-size: var(--abz-t-sm); animation: al-flota 1.6s ease-in-out infinite; }
.al-bocadillo::after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -7px; border: 7px solid transparent; border-top-color: var(--abz-borde); }
@keyframes al-flota { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -6px); } }
.al-nodo.estalla { animation: al-estalla .7s var(--abz-mov-curva); }
@keyframes al-estalla { 0% { transform: scale(1); } 35% { transform: scale(1.3) rotate(-8deg); } 70% { transform: scale(.95) rotate(4deg); } 100% { transform: scale(1); } }
.al-chispa { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-radius: 3px; pointer-events: none; animation: al-chispa .9s ease-out forwards; }
@keyframes al-chispa { from { transform: translate(-50%, -50%) rotate(0); opacity: 1; } to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(220deg); opacity: 0; } }
.al-etiqueta-nodo { position: absolute; top: 50%; transform: translateY(-50%); font-size: var(--abz-t-sm); color: var(--abz-texto-suave); width: 160px; line-height: 1.3; pointer-events: none; }
.al-etiqueta-nodo strong { display: block; color: var(--abz-texto); font-weight: var(--abz-peso-seminegrita); }
.al-tarjeta-paso { position: absolute; z-index: 5; top: calc(100% - 6px); left: 50%; transform: translateX(-50%); width: 310px; background: var(--abz-superficie); border-radius: var(--abz-radio-lg); box-shadow: var(--abz-sombra-3); padding: 18px; border: 1px solid var(--abz-borde); text-align: left; }
.al-tarjeta-paso h3 { font-size: var(--abz-t-md); margin: 6px 0 4px; }
.al-tarjeta-paso p { margin: 0 0 12px; color: var(--abz-texto-2); font-size: var(--abz-t-sm); }
.al-tipo-paso { display: inline-flex; align-items: center; gap: 6px; font-size: var(--abz-t-xs); font-weight: var(--abz-peso-negrita); color: var(--abz-accion); text-transform: uppercase; letter-spacing: .6px; }
.al-tipo-paso .ico { width: 14px; height: 14px; }
.al-condicion { font-weight: var(--abz-peso-seminegrita); color: var(--abz-texto) !important; }
.al-bloqueado { display: flex; gap: 8px; align-items: center; margin: 0 !important; }
.al-pop-enter-active, .al-pop-leave-active { transition: opacity var(--abz-mov-normal), transform var(--abz-mov-normal) var(--abz-mov-curva); }
.al-pop-enter-from, .al-pop-leave-to { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(.96); }

.al-columna { display: flex; flex-direction: column; gap: var(--abz-e-4); position: sticky; top: calc(64px + var(--abz-e-5)); align-self: start; }
.al-tarjeta { display: block; background: var(--abz-superficie); border: 1px solid var(--abz-borde); border-radius: var(--abz-radio-lg); padding: 18px; color: var(--abz-texto); text-decoration: none; }
.al-tarjeta h3 { font-size: var(--abz-t-md); margin-bottom: 10px; }
.al-meta-hoy { display: flex; align-items: center; gap: 16px; }
.al-anillo { width: 84px; height: 84px; transform: rotate(-90deg); flex: none; }
.al-anillo circle { fill: none; stroke-width: 10; }
.al-anillo .pista { stroke: var(--abz-superficie-2); }
.al-anillo .valor { stroke: var(--abz-exito); stroke-linecap: round; transition: stroke-dashoffset 1s var(--abz-mov-curva); }
.al-cifra { font-family: var(--abz-fuente-titulos); font-size: var(--abz-t-xl); font-weight: var(--abz-peso-negrita); }
.al-xp { display: flex; align-items: center; gap: 6px; font-weight: var(--abz-peso-negrita); color: var(--abz-aviso); margin-top: 4px; }
.al-xp .ico { width: 16px; height: 16px; }
.al-ritmo-mini { cursor: pointer; transition: transform var(--abz-mov-rapido), box-shadow var(--abz-mov-rapido); }
.al-ritmo-mini:hover { transform: translateY(-2px); box-shadow: var(--abz-sombra-2); }
.al-estado-ritmo { display: flex; align-items: center; gap: 10px; font-weight: var(--abz-peso-negrita); }
.al-bola { width: 14px; height: 14px; border-radius: 50%; background: var(--abz-borde); }
.bien .al-bola { background: var(--abz-exito); } .justo .al-bola { background: var(--abz-aviso); } .pillado .al-bola { background: var(--abz-error); }
.al-linea-tiempo { position: relative; height: 10px; border-radius: 99px; background: var(--abz-superficie-2); margin: 14px 0 6px; }
.al-linea-tiempo .hecho { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--abz-exito); transition: width 1s var(--abz-mov-curva); }
.al-linea-tiempo .esperado { position: absolute; top: -5px; bottom: -5px; width: 3px; border-radius: 2px; background: var(--abz-marca-tinta-2); }
.al-linea-pie { display: flex; justify-content: space-between; font-size: var(--abz-t-xs); color: var(--abz-texto-suave); }
.al-repasos { display: flex; gap: 12px; align-items: center; background: var(--abz-aviso-suave); border-color: transparent; }
.al-repasos small { display: block; color: var(--abz-texto-2); }
.al-repasos > .ico { color: var(--abz-aviso); width: 28px; height: 28px; }
.al-insignias { display: flex; gap: 10px; flex-wrap: wrap; }
.al-insignia { width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; background: var(--abz-acento-suave); color: var(--abz-acento); transform: rotate(-6deg); animation: al-insignia .5s var(--abz-mov-curva) backwards; }
.al-insignia:nth-child(2n) { transform: rotate(5deg); background: var(--abz-exito-suave); color: var(--abz-exito); }
.al-insignia.vacia { background: var(--abz-superficie-2); color: var(--abz-texto-suave); opacity: .6; }
@keyframes al-insignia { from { transform: scale(0) rotate(-40deg); } }

/* ---------- Temario: mapa ---------- */
.al-temario, .al-examen { max-width: 1100px; margin: 0 auto; padding: var(--abz-e-5) var(--abz-e-5) 140px; }
.al-temario-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: var(--abz-e-4); }
.al-temario-cab p { margin-top: 6px; }
.al-leyenda { display: flex; align-items: center; gap: 8px; font-size: var(--abz-t-sm); color: var(--abz-texto-suave); }
.al-escala { width: 120px; height: 10px; border-radius: 99px; background: linear-gradient(90deg, var(--abz-superficie-2), var(--abz-exito)); }
.al-bloque-titulo { font-size: var(--abz-t-lg); margin: var(--abz-e-5) 0 var(--abz-e-3); }
.al-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.al-losa { position: relative; text-align: left; border: 1px solid var(--abz-borde); background: var(--abz-superficie); border-radius: var(--abz-radio-lg); padding: 14px; min-height: 132px; display: flex; flex-direction: column; gap: 8px; font: inherit; color: var(--abz-texto); cursor: pointer; transition: transform var(--abz-mov-normal) var(--abz-mov-curva), box-shadow var(--abz-mov-normal); }
.al-losa:hover { transform: translateY(-3px); box-shadow: var(--abz-sombra-2); }
.al-losa.elegida { outline: 3px solid var(--abz-acento); outline-offset: 2px; }
.al-losa .num { font-family: var(--abz-fuente-titulos); font-size: var(--abz-t-xl); font-weight: var(--abz-peso-negrita); color: var(--abz-marca-tinta-3); line-height: 1; }
.al-losa .tit { font-weight: var(--abz-peso-seminegrita); font-size: var(--abz-t-sm); line-height: 1.3; }
.al-losa .barras { margin-top: auto; display: flex; gap: 3px; height: 14px; }
.al-losa .barras span { flex: 1; border-radius: 4px; transition: background var(--abz-mov-lento); }
.al-losa.prep { cursor: default; background: repeating-linear-gradient(135deg, var(--abz-superficie), var(--abz-superficie) 8px, var(--abz-superficie-2) 8px, var(--abz-superficie-2) 16px); }
.al-losa.prep .tit { color: var(--abz-texto-suave); }
.al-prep { margin-top: auto; font-size: 12px; color: var(--abz-texto-suave); }
.al-marca-plan { position: absolute; top: 12px; right: 12px; font-size: 11px; font-weight: var(--abz-peso-negrita); color: var(--abz-accion); background: var(--abz-acento-suave); padding: 2px 8px; border-radius: 99px; }
.al-detalle-tema { grid-column: 1 / -1; background: var(--abz-superficie); border: 1px solid var(--abz-borde); border-radius: var(--abz-radio-lg); padding: 20px; animation: al-aparece .35s var(--abz-mov-curva); }
@keyframes al-aparece { from { opacity: 0; transform: translateY(-6px); } }
.al-detalle-tema h3 { font-size: var(--abz-t-lg); }
.al-detalle-tema > p { margin: 4px 0 12px; }
.al-fila-sesion { display: grid; grid-template-columns: 36px minmax(0, 1fr) 150px auto auto; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--abz-borde); }
.al-fila-sesion .n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: var(--abz-peso-negrita); background: var(--abz-superficie-2); }
.al-fila-sesion .n.hecha { background: var(--abz-exito); color: #fff; }
.al-fila-sesion .n.empezada { background: var(--abz-exito-suave); color: var(--abz-exito); }
.al-fila-sesion .tit { font-weight: var(--abz-peso-seminegrita); color: var(--abz-texto); text-decoration: none; }
.al-fila-sesion .tit small { display: block; color: var(--abz-texto-suave); font-weight: var(--abz-peso-normal); }
.al-fila-sesion .col-dominio { display: block; }
.al-dominio { display: block; height: 8px; border-radius: 99px; background: var(--abz-superficie-2); overflow: hidden; }
.al-dominio span { display: block; height: 100%; background: var(--abz-exito); border-radius: 99px; transition: width 1s var(--abz-mov-curva); }
.al-dominio-texto { font-size: var(--abz-t-xs); color: var(--abz-texto-suave); margin-top: 4px; display: flex; align-items: center; gap: 4px; }
.al-dominio-texto .ico { width: 12px; height: 12px; color: var(--abz-marca-tinta-3); }
.al-iconos-d { display: flex; gap: 4px; flex-wrap: wrap; }
.al-icono-d { position: relative; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--abz-borde); background: var(--abz-superficie); display: grid; place-items: center; color: var(--abz-texto-2); cursor: pointer; transition: transform var(--abz-mov-rapido), background var(--abz-mov-rapido); }
.al-icono-d:hover { transform: translateY(-2px); background: var(--abz-acento-suave); color: var(--abz-accion); }
.al-icono-d .ico { width: 18px; height: 18px; }
.al-icono-d .nuevo { position: absolute; top: -4px; right: -4px; width: 11px; height: 11px; border-radius: 50%; background: var(--abz-acento); border: 2px solid var(--abz-superficie); animation: al-brillo 2s ease-in-out infinite; }
@keyframes al-brillo { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--abz-acento) 50%, transparent); } 50% { box-shadow: 0 0 0 5px transparent; } }

/* ---------- Temario: lectura con profundidad ---------- */
.al-lectura { max-width: 820px; margin: 0 auto; padding: 0 var(--abz-e-5) 160px; }
.al-barra-lectura { position: sticky; top: 64px; z-index: 4; background: color-mix(in srgb, var(--abz-fondo) 94%, transparent); backdrop-filter: blur(6px); padding: 14px 0 12px; border-bottom: 1px solid var(--abz-borde); }
.al-miga { display: flex; align-items: center; gap: 6px; font-size: var(--abz-t-sm); color: var(--abz-texto-suave); flex-wrap: wrap; }
.al-miga a { font-weight: var(--abz-peso-seminegrita); text-decoration: none; }
.al-miga .ico { width: 14px; height: 14px; }
.al-barra-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.al-dial { position: relative; display: inline-grid; grid-template-columns: repeat(3, 1fr); background: var(--abz-superficie-2); border-radius: var(--abz-radio-pastilla); padding: 4px; }
.al-dial button { position: relative; z-index: 1; border: 0; background: none; padding: 8px 16px; font: inherit; font-weight: var(--abz-peso-negrita); font-size: var(--abz-t-sm); border-radius: var(--abz-radio-pastilla); color: var(--abz-texto-2); cursor: pointer; transition: color var(--abz-mov-normal); }
.al-dial button.activa { color: #fff; }
.al-mando { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: var(--abz-radio-pastilla); background: var(--abz-marca-tinta); transition: transform var(--abz-mov-lento) var(--abz-mov-curva); }
.al-dial-ayuda { font-size: var(--abz-t-xs); color: var(--abz-texto-suave); }
.al-progreso-lectura { height: 4px; background: var(--abz-superficie-2); border-radius: 99px; margin-top: 12px; overflow: hidden; }
.al-progreso-lectura span { display: block; height: 100%; background: var(--abz-exito); transition: width .25s; }
.al-banda-plan { margin-top: 18px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--abz-radio-md); background: var(--abz-acento-suave); }
.al-banda-plan .al-btn { margin-left: auto; min-height: 36px; padding: 0 14px; }
.al-lectura h1 { font-size: var(--abz-t-2xl); margin: 26px 0 6px; }
.al-objetivo { color: var(--abz-texto-2); margin: 0 0 18px; }
.al-material { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 16px; border: 1px dashed var(--abz-borde); border-radius: var(--abz-radio-md); margin-bottom: 18px; }
.al-material > span { font-size: var(--abz-t-sm); font-weight: var(--abz-peso-seminegrita); color: var(--abz-texto-2); margin-right: 4px; }
.al-apartado { border-top: 1px solid var(--abz-borde); }
.al-apartado-cab { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 0; border: 0; background: none; text-align: left; font: inherit; color: var(--abz-texto); cursor: pointer; }
.al-apartado-cab h2 { font-size: var(--abz-t-lg); }
.al-apartado-cab small { display: block; color: var(--abz-texto-suave); font-size: var(--abz-t-xs); text-transform: uppercase; letter-spacing: .6px; }
.al-apartado-cab > .ico { transition: transform var(--abz-mov-normal); transform: rotate(-90deg); }
.al-apartado-cab.abierto > .ico { transform: none; }
.al-bloque { position: relative; padding: 14px 18px; margin: 14px 0 12px; border-radius: var(--abz-radio-md); line-height: var(--abz-lh-amplio); cursor: pointer; border: 1px solid transparent; transition: background var(--abz-mov-rapido), border-color var(--abz-mov-rapido); animation: al-aparece .3s var(--abz-mov-curva); }
.al-bloque:hover { background: var(--abz-superficie); border-color: var(--abz-borde); }
.al-bloque.sel { background: var(--abz-superficie); border-color: var(--abz-acento); box-shadow: 0 0 0 3px var(--abz-acento-suave); }
.al-bloque p { margin: 0 0 8px; } .al-bloque p:last-child { margin: 0; }
.al-bloque ul, .al-bloque ol { margin: 0 0 8px; padding-left: 20px; }
.al-capa-chip { position: absolute; top: -9px; left: 14px; font-size: 10px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; padding: 1px 8px; border-radius: 99px; background: var(--abz-superficie-2); color: var(--abz-texto-suave); }
.al-bloque.c2 > .al-capa-chip { background: var(--abz-acento-suave); color: var(--abz-accion); }
.al-bloque.c1 > .al-capa-chip { background: var(--abz-exito-suave); color: var(--abz-exito); }
.al-bloque.c0 { font-family: var(--abz-fuente-titulos); font-size: 1.04rem; background: var(--abz-superficie-2); }
.al-imp { font-family: var(--abz-fuente-texto); font-size: 10px; font-weight: var(--abz-peso-negrita); padding: 0 6px; border-radius: 99px; margin-left: 6px; text-transform: none; letter-spacing: 0; }
.al-imp.ampliacion { background: var(--abz-aviso-suave); color: var(--abz-aviso); }
.al-imp.casi_nunca { background: var(--abz-superficie); color: var(--abz-texto-suave); }
.al-mas { display: inline-flex; align-items: center; gap: 4px; font-family: var(--abz-fuente-texto); font-size: var(--abz-t-xs); font-weight: var(--abz-peso-negrita); color: var(--abz-accion); margin-top: 6px; }
.al-mas .ico { width: 14px; height: 14px; transition: transform var(--abz-mov-normal); }
.al-bloque.abierto > .al-mas .ico { transform: rotate(90deg); }
.al-hijos { margin-top: 12px; padding-left: 16px; border-left: 3px solid var(--abz-borde); }
.al-bloque-nota { position: absolute; right: 8px; top: 8px; opacity: 0; transition: opacity var(--abz-mov-rapido); }
.al-bloque:hover > .al-bloque-nota, .al-bloque.sel > .al-bloque-nota { opacity: 1; }
.al-bloque-nota .btn { background: var(--abz-superficie); box-shadow: var(--abz-sombra-1); }
.al-omision { margin: 12px 0; border: 1px dashed var(--abz-borde); border-radius: var(--abz-radio-md); }
.al-omision-cab { width: 100%; display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: none; border: 0; font: inherit; font-size: var(--abz-t-sm); color: var(--abz-texto-2); cursor: pointer; text-align: left; }
.al-omision-cab span { margin-left: auto; color: var(--abz-accion); font-weight: var(--abz-peso-seminegrita); white-space: nowrap; }
.al-omision .al-bloque { margin: 0 10px 10px; }
.al-leido-fin { display: flex; align-items: center; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 40px 0; color: var(--abz-exito); font-weight: var(--abz-peso-negrita); }
.al-check-dibujo { width: 46px; height: 46px; }
.al-check-dibujo circle { fill: var(--abz-exito-suave); }
.al-check-dibujo path { fill: none; stroke: var(--abz-exito); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: al-trazo .6s .2s forwards; }
@keyframes al-trazo { to { stroke-dashoffset: 0; } }

/* ---------- Examen ---------- */
.al-rejilla-examen { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.al-modo { position: relative; text-align: left; border: 1px solid var(--abz-borde); background: var(--abz-superficie); border-radius: var(--abz-radio-lg); padding: 20px; display: flex; flex-direction: column; gap: 10px; min-height: 200px; cursor: pointer; transition: transform var(--abz-mov-normal) var(--abz-mov-curva), box-shadow var(--abz-mov-normal); }
.al-modo:not(.cerrado):hover { transform: translateY(-4px); box-shadow: var(--abz-sombra-3); }
.al-ico-modo { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--abz-acento-suave); color: var(--abz-accion); }
.al-ico-modo .ico { width: 26px; height: 26px; }
.al-modo h3 { font-size: var(--abz-t-md); }
.al-modo p { color: var(--abz-texto-2); font-size: var(--abz-t-sm); }
.al-pie-modo { margin-top: auto; display: flex; align-items: center; gap: 8px; font-size: var(--abz-t-sm); font-weight: var(--abz-peso-seminegrita); color: var(--abz-exito); }
.al-pie-modo .ico { width: 16px; height: 16px; }
.al-modo.cerrado { background: var(--abz-superficie-2); cursor: default; }
.al-modo.cerrado .al-ico-modo { background: var(--abz-superficie); color: var(--abz-texto-suave); }
.al-modo.cerrado h3, .al-modo.cerrado p, .al-modo.cerrado .al-pie-modo { color: var(--abz-texto-suave); }
.al-candado { position: absolute; top: 16px; right: 16px; color: var(--abz-texto-suave); }
.al-barra-desbloqueo { height: 6px; border-radius: 99px; background: var(--abz-superficie); overflow: hidden; flex: 1; max-width: 120px; }
.al-barra-desbloqueo span { display: block; height: 100%; background: var(--abz-aviso); }
.al-paso-ok { border-left: 4px solid var(--abz-exito); }
.al-paso-ko { border-left: 4px solid var(--abz-aviso); }

/* ---------- Panel lateral ---------- */
.al-lateral { position: fixed; top: 64px; right: 0; bottom: 0; width: 380px; z-index: 20; display: flex; flex-direction: column; background: var(--abz-superficie); border-left: 1px solid var(--abz-borde); }
.al-lateral-cab { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--abz-borde); }
.al-seg { display: flex; background: var(--abz-superficie-2); border-radius: 99px; padding: 3px; }
.al-seg button { border: 0; background: none; padding: 6px 14px; border-radius: 99px; font: inherit; font-weight: var(--abz-peso-seminegrita); font-size: var(--abz-t-sm); display: flex; align-items: center; gap: 6px; color: var(--abz-texto-2); cursor: pointer; }
.al-seg button.activa { background: var(--abz-superficie); box-shadow: var(--abz-sombra-1); color: var(--abz-texto); }
.al-seg .ico { width: 16px; height: 16px; }
.al-lateral-cab .al-btn-texto { margin-left: auto; font-size: 12px; }
.al-cerrar-movil { display: none; }
.al-contexto { display: flex; align-items: center; gap: 8px; margin: 12px 14px 0; padding: 8px 12px; border-radius: var(--abz-radio-md); background: var(--abz-superficie-2); font-size: var(--abz-t-xs); color: var(--abz-texto-2); }
.al-contexto .ico { width: 14px; height: 14px; color: var(--abz-acento); flex: none; }
.al-contexto.destello { animation: al-destello .8s; }
@keyframes al-destello { 0% { background: var(--abz-acento-suave); } 100% { background: var(--abz-superficie-2); } }
.al-dudas { padding: 4px 14px 10px; max-height: 40%; overflow: auto; border-bottom: 1px solid var(--abz-borde); }
.al-duda { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--abz-borde); border-radius: var(--abz-radio-md); margin-top: 8px; font-size: var(--abz-t-sm); }
.al-estado-duda { align-self: flex-start; font-size: 11px; font-weight: var(--abz-peso-negrita); padding: 1px 8px; border-radius: 99px; }
.al-estado-duda.profe, .al-estado-duda.validada { background: var(--abz-exito-suave); color: var(--abz-exito); }
.al-estado-duda.ia { background: var(--abz-aviso-suave); color: var(--abz-aviso); }
.al-estado-duda.pendiente { background: var(--abz-error-suave); color: var(--abz-error); }
.al-mensajes { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.al-msg { max-width: 92%; padding: 10px 14px; border-radius: 16px; font-size: var(--abz-t-sm); line-height: 1.55; animation: al-entra .3s var(--abz-mov-curva); overflow-wrap: anywhere; }
@keyframes al-entra { from { opacity: 0; transform: translateY(8px); } }
.al-msg p { margin: 0 0 6px; } .al-msg p:last-child { margin: 0; }
.al-msg.yo { align-self: flex-end; background: var(--abz-marca-tinta); color: #fff; border-bottom-right-radius: 4px; }
.al-msg.ia { align-self: flex-start; background: var(--abz-superficie-2); border-bottom-left-radius: 4px; }
.al-msg.profe { align-self: flex-start; background: var(--abz-exito-suave); border-bottom-left-radius: 4px; }
.al-msg.profe small { display: block; font-weight: var(--abz-peso-negrita); color: var(--abz-exito); }
.al-msg.sis { align-self: center; background: var(--abz-aviso-suave); color: var(--abz-texto-2); font-size: var(--abz-t-xs); text-align: center; }
.al-citas { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px !important; }
.al-cita { border: 0; background: var(--abz-acento-suave); color: var(--abz-accion); font: inherit; font-weight: var(--abz-peso-negrita); font-size: 11px; padding: 1px 8px; border-radius: 99px; cursor: pointer; }
.al-acciones-msg { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.al-acciones-msg button { border: 1px solid var(--abz-borde); background: var(--abz-superficie); border-radius: 99px; padding: 3px 10px; font: inherit; font-size: 11px; font-weight: var(--abz-peso-seminegrita); cursor: pointer; color: var(--abz-texto-2); }
.al-escribiendo { display: flex; gap: 4px; padding: 12px 14px; }
.al-escribiendo span { width: 7px; height: 7px; border-radius: 50%; background: var(--abz-texto-suave); animation: al-rebota 1s infinite; }
.al-escribiendo span:nth-child(2) { animation-delay: .15s; } .al-escribiendo span:nth-child(3) { animation-delay: .3s; }
@keyframes al-rebota { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }
.al-sugerencias { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.al-sugerencias button { border: 1px solid var(--abz-borde); background: var(--abz-superficie); padding: 6px 12px; border-radius: 99px; font: inherit; font-size: var(--abz-t-xs); font-weight: var(--abz-peso-seminegrita); color: var(--abz-texto-2); cursor: pointer; transition: border-color var(--abz-mov-rapido); }
.al-sugerencias button:hover { border-color: var(--abz-acento); color: var(--abz-accion); }
.al-entrada-chat { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--abz-borde); }
.al-entrada-chat .entrada { flex: 1; }
.al-entrada-chat .al-btn { padding: 0 14px; }
.al-filtro-notas { display: flex; gap: 6px; align-items: center; padding: 10px 14px 0; }
.al-notas { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.al-nota { background: #fff7d6; color: #3b3214; border-radius: 4px 14px 14px 14px; padding: 12px 14px; font-size: var(--abz-t-sm); box-shadow: var(--abz-sombra-1); animation: al-entra .3s var(--abz-mov-curva); }
:root[data-tema="oscuro"] .al-nota { background: #3a3420; color: #f3e9c4; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .al-nota { background: #3a3420; color: #f3e9c4; } }
.al-nota p { margin: 0 0 6px; }
.al-nota-pie { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; font-size: 11px; opacity: .75; }
.al-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; align-items: center; }
.al-chip { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 11px; font-weight: var(--abz-peso-seminegrita); padding: 2px 8px; border-radius: 99px; background: rgba(20, 33, 61, .08); border: 0; color: inherit; cursor: pointer; }
.al-chip .ico { width: 12px; height: 12px; }
.al-chip.activo { background: var(--abz-acento-suave); color: var(--abz-accion); }
.al-chip button { border: 0; background: none; color: inherit; cursor: pointer; font-weight: var(--abz-peso-negrita); }
.al-nota-nueva { padding: 12px 14px; border-top: 1px solid var(--abz-borde); display: flex; flex-direction: column; gap: 8px; }
.al-nota-nueva textarea { min-height: 70px; padding: 10px 12px; resize: vertical; }
.al-fab { display: none; }

/* ---------- Modales propios, brindis y confeti ---------- */
.al-aviso-material { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 12px; background: var(--abz-aviso-suave); font-size: var(--abz-t-sm); margin-bottom: 16px; }
.al-video { background: var(--abz-marca-tinta); color: #fff; border-radius: 16px; padding: 26px; min-height: 280px; display: flex; flex-direction: column; overflow: hidden; }
.al-escena { display: flex; flex-direction: column; flex: 1; }
.al-tipo-escena { align-self: flex-start; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; padding: 3px 10px; border-radius: 99px; background: rgba(255, 255, 255, .14); }
.al-tipo-escena.trampa { background: var(--abz-marca-rosa); }
.al-tipo-escena.literal { background: var(--abz-marca-verde); }
.al-tipo-escena.recuerdo { background: var(--abz-marca-naranja-profundo); }
.al-pantalla { font-family: var(--abz-fuente-titulos); font-size: var(--abz-t-lg); margin: 20px 0; line-height: 1.3; }
.al-subtitulo { margin-top: auto; font-size: var(--abz-t-sm); opacity: .85; }
.al-subtitulo p { margin: 0 0 6px; }
.al-barra-video { display: flex; gap: 4px; margin-top: 18px; }
.al-barra-video button { flex: 1; height: 6px; border: 0; padding: 0; border-radius: 99px; background: rgba(255, 255, 255, .22); overflow: hidden; cursor: pointer; }
.al-barra-video i { display: block; height: 100%; width: 0; background: var(--abz-marca-naranja-claro); }
.al-barra-video .hecha i { width: 100%; }
.al-barra-video .ahora i { animation: al-llena 9s linear forwards; }
.al-barra-video .ahora.pausa i { animation-play-state: paused; }
@keyframes al-llena { to { width: 100%; } }
.al-video-mandos { display: flex; gap: 8px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.al-video .al-btn-s { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .25); box-shadow: none; }
.al-escena-enter-active { transition: opacity .45s, transform .45s var(--abz-mov-curva); }
.al-escena-enter-from { opacity: 0; transform: translateY(14px); }
.al-ritmo-estado { display: flex; align-items: center; gap: 16px; padding: 18px; border-radius: 16px; margin-bottom: 16px; transition: background var(--abz-mov-lento); }
.al-ritmo-estado.bien { background: var(--abz-exito-suave); } .al-ritmo-estado.justo { background: var(--abz-aviso-suave); } .al-ritmo-estado.pillado { background: var(--abz-error-suave); }
.al-gran-bola { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex: none; transition: background var(--abz-mov-lento); }
.bien .al-gran-bola { background: var(--abz-exito); } .justo .al-gran-bola { background: var(--abz-aviso); } .pillado .al-gran-bola { background: var(--abz-error); }
.al-ritmo-estado h3 { font-size: var(--abz-t-lg); }
.al-ritmo-estado p { margin-top: 2px; color: var(--abz-texto-2); font-size: var(--abz-t-sm); }
.al-grafico { width: 100%; height: 170px; }
.al-grafico .ejes { stroke: var(--abz-borde); }
.al-grafico .hoy { stroke: var(--abz-acento); stroke-dasharray: 4 4; }
.al-grafico text { fill: var(--abz-texto-suave); font-size: 11px; font-family: var(--abz-fuente-texto); }
.al-grafico .ideal { fill: none; stroke: var(--abz-marca-tinta-3); stroke-width: 2; stroke-dasharray: 6 6; }
.al-grafico .real { fill: none; stroke: var(--abz-exito); stroke-width: 4; stroke-linecap: round; }
.al-grafico .proy { fill: none; stroke-width: 3; stroke-dasharray: 2 7; stroke-linecap: round; stroke: var(--abz-exito); }
.al-grafico .proy.justo { stroke: var(--abz-aviso); } .al-grafico .proy.pillado { stroke: var(--abz-error); }
.al-ajustes-ritmo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 14px; }
.al-ajustes-ritmo input[type=range], .modal input[type=range] { width: 100%; accent-color: var(--abz-accion); }
.al-valor { font-family: var(--abz-fuente-titulos); font-size: var(--abz-t-lg); }
.al-dias { display: flex; gap: 6px; flex-wrap: wrap; }
.al-dias button { width: 40px; height: 40px; border-radius: 12px; border: 2px solid var(--abz-borde); background: var(--abz-superficie); font: inherit; font-weight: var(--abz-peso-negrita); color: var(--abz-texto); cursor: pointer; transition: all var(--abz-mov-rapido); }
.al-dias button.on { background: var(--abz-marca-tinta); border-color: var(--abz-marca-tinta); color: #fff; }
.al-pasos-asistente { display: flex; gap: 6px; margin-bottom: 20px; }
.al-pasos-asistente span { flex: 1; height: 6px; border-radius: 99px; background: var(--abz-superficie-2); transition: background var(--abz-mov-lento); }
.al-pasos-asistente span.on { background: var(--abz-accion); }
.al-opciones { display: grid; gap: 10px; margin-top: 12px; }
.al-opcion { display: flex; gap: 10px; align-items: center; text-align: left; border: 2px solid var(--abz-borde); border-radius: 14px; padding: 14px 16px; background: var(--abz-superficie); box-shadow: 0 3px 0 var(--abz-borde); font: inherit; color: var(--abz-texto); cursor: pointer; margin-top: 10px; transition: all var(--abz-mov-rapido); }
.al-opciones .al-opcion { margin-top: 0; flex-direction: column; align-items: flex-start; gap: 2px; }
.al-opcion small { display: block; color: var(--abz-texto-suave); }
.al-opcion.on { border-color: var(--abz-accion); background: var(--abz-acento-suave); box-shadow: 0 3px 0 var(--abz-accion); }
.al-paso-a-enter-active, .al-paso-a-leave-active { transition: opacity var(--abz-mov-normal), transform var(--abz-mov-normal) var(--abz-mov-curva); }
.al-paso-a-enter-from { opacity: 0; transform: translateX(30px); } .al-paso-a-leave-to { opacity: 0; transform: translateX(-30px); }
.al-creando { text-align: center; padding: 10px 0; }
.al-creando svg { width: 220px; height: 120px; }
.al-creando path { fill: none; stroke: var(--abz-accion); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 6 12; animation: al-marcha 1s linear infinite; }
@keyframes al-marcha { to { stroke-dashoffset: -36; } }
.al-creando circle { fill: var(--abz-exito); transform-box: fill-box; transform-origin: center; animation: al-latir 1.8s ease-in-out infinite; }
.al-creando circle:nth-of-type(2) { animation-delay: .3s; } .al-creando circle:nth-of-type(3) { animation-delay: .6s; } .al-creando circle:nth-of-type(4) { animation-delay: .9s; }
.al-frase { margin: 16px auto; max-width: 460px; font-family: var(--abz-fuente-titulos); font-style: italic; font-size: var(--abz-t-md); color: var(--abz-texto-2); text-align: center; }
.al-frase small { display: block; font-family: var(--abz-fuente-texto); font-style: normal; font-size: var(--abz-t-xs); color: var(--abz-texto-suave); margin-top: 6px; }
.al-conquista { text-align: center; padding: 6px 0 4px; }
.al-medalla { width: 120px; height: 120px; margin: 0 auto 18px; border-radius: 36px; display: grid; place-items: center; background: linear-gradient(145deg, var(--abz-marca-naranja-claro), var(--abz-marca-naranja)); color: #fff; box-shadow: 0 8px 0 var(--abz-marca-naranja-profundo); animation: al-medalla 1s var(--abz-mov-curva); }
.al-medalla .ico { width: 60px; height: 60px; stroke-width: 1.8; }
@keyframes al-medalla { 0% { transform: scale(0) rotate(-180deg); } 70% { transform: scale(1.12) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }
.al-conquista h2 { font-size: var(--abz-t-2xl); }
.al-cifras { display: flex; gap: 12px; justify-content: center; margin: 20px 0; flex-wrap: wrap; }
.al-cifras div { border: 2px solid var(--abz-borde); border-radius: 14px; padding: 10px 16px; min-width: 104px; animation: al-entra .5s var(--abz-mov-curva) backwards; }
.al-cifras div:nth-child(2) { animation-delay: .15s; } .al-cifras div:nth-child(3) { animation-delay: .3s; }
.al-cifras b { display: block; font-family: var(--abz-fuente-titulos); font-size: var(--abz-t-xl); }
.al-cifras small { color: var(--abz-texto-suave); font-weight: var(--abz-peso-seminegrita); font-size: var(--abz-t-xs); text-transform: uppercase; }
.al-config { display: grid; gap: 8px; }
.al-config-item { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--abz-borde); border-radius: 14px; text-align: left; background: var(--abz-superficie); width: 100%; font: inherit; color: var(--abz-texto); text-decoration: none; cursor: pointer; }
.al-config-item > span:nth-child(2) { flex: 1; min-width: 0; }
.al-config-item small { display: block; color: var(--abz-texto-suave); }
.al-config-item .ico-c { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--abz-superficie-2); flex: none; }
.al-interruptor { width: 48px; height: 28px; border-radius: 99px; background: var(--abz-borde); position: relative; border: 0; cursor: pointer; flex: none; transition: background var(--abz-mov-normal); }
.al-interruptor::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform var(--abz-mov-normal) var(--abz-mov-curva); }
.al-interruptor.on { background: var(--abz-exito); } .al-interruptor.on::after { transform: translateX(20px); }
.al-brindis { position: fixed; left: 50%; bottom: 28px; z-index: 70; transform: translateX(-50%); background: var(--abz-marca-tinta); color: #fff; border-radius: 18px; padding: 14px 20px; box-shadow: var(--abz-sombra-3); display: flex; gap: 14px; align-items: center; max-width: min(560px, calc(100vw - 32px)); }
.al-xp-gana { font-family: var(--abz-fuente-titulos); font-weight: var(--abz-peso-negrita); font-size: var(--abz-t-lg); color: var(--abz-marca-naranja-claro); white-space: nowrap; }
.al-brindis q { display: block; font-family: var(--abz-fuente-titulos); font-style: italic; quotes: '«' '»'; }
.al-brindis small { display: block; opacity: .75; font-size: var(--abz-t-xs); }
.al-nueva-insignia { color: var(--abz-marca-naranja-claro); opacity: 1 !important; font-weight: var(--abz-peso-negrita); }
.al-brindis-enter-active, .al-brindis-leave-active { transition: opacity var(--abz-mov-lento), transform var(--abz-mov-lento) var(--abz-mov-curva); }
.al-brindis-enter-from, .al-brindis-leave-to { opacity: 0; transform: translateX(-50%) translateY(30px); }
.al-confeti { position: fixed; inset: 0; pointer-events: none; z-index: 80; width: 100vw; height: 100vh; }

/* ---------- Profesorado: dudas y hoja de ruta ---------- */
.al-duda-pregunta { font-weight: var(--abz-peso-seminegrita); margin: 6px 0 10px; }
.al-duda-ia, .al-duda-profe-r { padding: 10px 12px; border-radius: var(--abz-radio-md); background: var(--abz-superficie-2); font-size: var(--abz-t-sm); margin-top: 8px; }
.al-duda-profe-r { background: var(--abz-exito-suave); }
.ruta-lista { border: 1px solid var(--abz-borde); border-radius: var(--abz-radio-lg); overflow: hidden; background: var(--abz-superficie); }
.ruta-unidad { font-size: var(--abz-t-md); padding: 12px 14px 6px; background: var(--abz-superficie-2); border-top: 1px solid var(--abz-borde); }
.ruta-unidad:first-child { border-top: 0; }
.ruta-fila { display: grid; grid-template-columns: 24px 26px 40px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 10px; border-top: 1px solid var(--abz-borde); background: var(--abz-superficie); transition: background var(--abz-mov-rapido), opacity var(--abz-mov-rapido); }
.ruta-fila[draggable="true"] { cursor: grab; }
.ruta-fila:hover, .ruta-fila.abierta { background: var(--abz-superficie-2); }
.ruta-fila.arrastrando { opacity: .4; }
.ruta-asa { color: var(--abz-texto-suave); display: grid; place-items: center; }
.ruta-n { font-weight: var(--abz-peso-negrita); color: var(--abz-texto-suave); text-align: center; }
.ruta-ico { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--abz-acento-suave); color: var(--abz-accion); }
.ruta-ico.t-test, .ruta-ico.t-simulacro, .ruta-ico.t-exposicion { background: var(--abz-exito-suave); color: var(--abz-exito); }
.ruta-ico.t-repaso { background: var(--abz-aviso-suave); color: var(--abz-aviso); }
.ruta-ico .ico { width: 18px; height: 18px; }
.ruta-txt { min-width: 0; text-align: left; background: none; border: 0; font: inherit; color: var(--abz-texto); cursor: pointer; padding: 0; }
.ruta-txt small { display: flex; gap: 4px; align-items: center; color: var(--abz-texto-suave); font-size: var(--abz-t-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ruta-txt small .ico { width: 12px; height: 12px; flex: none; }
.ruta-meta { display: flex; gap: 6px; align-items: center; font-size: var(--abz-t-xs); color: var(--abz-texto-2); white-space: nowrap; }
.ruta-acciones { display: flex; gap: 2px; }
.ruta-edicion { padding: 12px 14px 16px 60px; background: var(--abz-superficie-2); border-top: 1px dashed var(--abz-borde); }
.ruta-anadir { margin-top: var(--abz-e-4); flex-wrap: wrap; }

/* ---------- Vista previa del profesorado dentro de su marco ---------- */
.al-marco.incrustado .al-cabecera { position: sticky; top: 0; margin: calc(-1 * var(--abz-e-4)) calc(-1 * var(--abz-e-4)) 0; border-radius: 0; }
.al-marco.incrustado .al-principal { padding-top: 0; margin-right: 0; min-height: 0; }
.al-marco.incrustado .al-barra-lectura, .al-marco.incrustado .al-columna { top: 64px; }

/* ---------- Tableta y móvil ---------- */
@media (max-width: 1023px) {
  .al-principal { margin-right: 0; }
  .al-lateral { top: auto; left: 0; height: 80vh; width: auto; z-index: 45; border-radius: 22px 22px 0 0; border: 0; box-shadow: 0 -10px 40px rgba(0, 0, 0, .25); transform: translateY(105%); transition: transform var(--abz-mov-lento) var(--abz-mov-curva); }
  .al-lateral.abierto { transform: translateY(0); }
  .al-cerrar-movil { display: inline-flex; }
  .al-fab { display: grid; place-items: center; position: fixed; right: 16px; bottom: 24px; z-index: 44; width: 58px; height: 58px; border-radius: 50%; border: 0; background: var(--abz-marca-tinta); color: #fff; box-shadow: var(--abz-sombra-3); cursor: pointer; animation: al-fab 3s ease-in-out infinite; }
  .al-fab .ico { width: 26px; height: 26px; }
  @keyframes al-fab { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
  .al-plan { grid-template-columns: 1fr; }
  .al-columna { position: static; order: -1; display: grid; grid-template-columns: 1fr 1fr; }
}
.al-marco.incrustado .al-lateral { top: auto; left: auto; right: 16px; bottom: 16px; height: 70vh; width: min(380px, calc(100% - 32px)); border-radius: 18px; border: 1px solid var(--abz-borde); box-shadow: var(--abz-sombra-3); transform: translateY(110%); transition: transform var(--abz-mov-lento) var(--abz-mov-curva); }
.al-marco.incrustado .al-lateral.abierto { transform: translateY(0); }
.al-marco.incrustado .al-cerrar-movil { display: inline-flex; }
.al-marco.incrustado .al-fab { display: grid; place-items: center; position: fixed; right: 24px; bottom: 24px; z-index: 44; width: 58px; height: 58px; border-radius: 50%; border: 0; background: var(--abz-marca-tinta); color: #fff; box-shadow: var(--abz-sombra-3); cursor: pointer; }
@media (max-width: 760px) {
  .al-cabecera { height: 56px; padding: 0 var(--abz-e-4); }
  .al-principal { padding-top: 56px; padding-bottom: 72px; }
  .al-logo-nombre { display: none; }
  .al-pestanas { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; height: 64px; border-radius: 0; background: var(--abz-superficie); border-top: 1px solid var(--abz-borde); justify-content: space-around; z-index: 30; padding: 6px calc(6px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) 6px; }
  .al-pestanas-fondo { display: none; }
  .al-pestana { flex-direction: column; gap: 2px; font-size: 11px; padding: 6px 14px; }
  .al-pestana.activa { color: var(--abz-accion); }
  .al-fab { bottom: 84px; }
  .al-brindis { bottom: 84px; }
  .al-columna { grid-template-columns: 1fr 1fr; gap: 10px; }
  .al-columna .al-repasos { grid-column: 1 / -1; }
  .al-columna .al-conquistas { display: none; }
  .al-columna .al-tarjeta { padding: 14px; }
  .al-meta-hoy { flex-direction: column; align-items: flex-start; gap: 8px; }
  .al-anillo { width: 60px; height: 60px; }
  .al-etiqueta-nodo { display: none; }
  .al-barra-lectura { top: 56px; }
  .al-fila-sesion { grid-template-columns: 32px minmax(0, 1fr); }
  .al-fila-sesion .col-dominio, .al-fila-sesion .col-abrir { display: none; }
  .al-fila-sesion .al-iconos-d { grid-column: 2; }
  .al-ajustes-ritmo { grid-template-columns: 1fr; }
  .al-avisos { right: 8px; left: 8px; width: auto; top: 52px; }
  .al-tarjeta-paso { width: min(310px, calc(100vw - 32px)); }
  .ruta-fila { grid-template-columns: 26px 36px minmax(0, 1fr) auto; }
  .ruta-fila .ruta-asa, .ruta-fila .ruta-meta { display: none; }
  .ruta-edicion { padding-left: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .al-marco *, .al-marco *::before, .al-marco *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Lectura en una sola vista: lo que queda fuera de lo esencial ---------- */
.al-bloque.ampliacion { border-left: 3px dashed var(--abz-borde); border-radius: 0 var(--abz-radio-md) var(--abz-radio-md) 0; color: var(--abz-texto-2); }
.al-bloque.ampliacion > .al-capa-chip { background: var(--abz-superficie-2); color: var(--abz-texto-suave); }
.al-barra-lectura .al-dial-ayuda { margin-top: 6px; }

/* ---------- Pomodoro ---------- */
.al-pomo { position: relative; }
.al-pomo-chip { position: relative; display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 10px 0 8px; border-radius: var(--abz-radio-pastilla); border: 0; background: var(--abz-superficie-2); color: var(--abz-texto-2); font: inherit; font-weight: var(--abz-peso-negrita); font-variant-numeric: tabular-nums; cursor: pointer; }
.al-pomo-chip.corriendo.estudio { background: var(--abz-error-suave); color: var(--abz-error); }
.al-pomo-chip.corriendo:not(.estudio) { background: var(--abz-exito-suave); color: var(--abz-exito); }
.al-pomo-chip .ico { width: 18px; height: 18px; margin-left: 4px; }
.al-pomo-anillo { position: absolute; left: 3px; top: 3px; width: 32px; height: 32px; transform: rotate(-90deg); pointer-events: none; }
.al-pomo-anillo circle { fill: none; stroke-width: 3; }
.al-pomo-anillo .pista { stroke: transparent; }
.al-pomo-anillo .valor { stroke: currentColor; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.al-pomo-tiempo { font-size: var(--abz-t-sm); }
.al-pomo-panel { position: absolute; top: 48px; right: 0; width: 300px; z-index: 41; background: var(--abz-superficie); border: 1px solid var(--abz-borde); border-radius: var(--abz-radio-lg); box-shadow: var(--abz-sombra-3); padding: 16px; }
.al-pomo-cab { display: flex; justify-content: space-between; align-items: center; }
.al-pomo-fase { font-size: 11px; font-weight: var(--abz-peso-negrita); padding: 2px 10px; border-radius: 99px; background: var(--abz-error-suave); color: var(--abz-error); }
.al-pomo-fase:not(.estudio) { background: var(--abz-exito-suave); color: var(--abz-exito); }
.al-pomo-reloj { position: relative; width: 150px; height: 150px; margin: 12px auto 6px; }
.al-pomo-reloj svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.al-pomo-reloj circle { fill: none; stroke-width: 9; }
.al-pomo-reloj .pista { stroke: var(--abz-superficie-2); }
.al-pomo-reloj .valor { stroke: var(--abz-error); stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.al-pomo-reloj .valor:not(.estudio) { stroke: var(--abz-exito); }
.al-pomo-reloj span { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--abz-fuente-titulos); font-size: var(--abz-t-2xl); font-weight: var(--abz-peso-negrita); font-variant-numeric: tabular-nums; }
.al-pomo-ciclo { display: flex; justify-content: center; gap: 6px; margin-bottom: 12px; }
.al-pomo-ciclo span { width: 12px; height: 12px; border-radius: 50%; background: var(--abz-superficie-2); transition: background var(--abz-mov-lento); }
.al-pomo-ciclo span.on { background: var(--abz-error); }
.al-pomo-mandos { display: flex; justify-content: center; gap: 8px; }
.al-pomo-consejo { margin: 12px 0 10px; font-size: var(--abz-t-sm); color: var(--abz-texto-2); text-align: center; }
.al-pomo-pie { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: var(--abz-t-xs); color: var(--abz-texto-2); border-top: 1px solid var(--abz-borde); padding-top: 10px; }
.al-pomo-pie .segmentos button { font-size: 11px; padding: 4px 8px; }
.al-pop-arriba-enter-active, .al-pop-arriba-leave-active { transition: opacity var(--abz-mov-normal), transform var(--abz-mov-normal) var(--abz-mov-curva); }
.al-pop-arriba-enter-from, .al-pop-arriba-leave-to { opacity: 0; transform: translateY(-6px) scale(.97); }
.al-pomos-hoy { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.al-pomos-hoy span { width: 10px; height: 10px; border-radius: 50%; background: var(--abz-error); animation: al-insignia .4s var(--abz-mov-curva) backwards; }
.al-pomos-hoy small { margin-left: 4px; color: var(--abz-texto-suave); }
@media (max-width: 760px) {
  .al-pomo-panel { position: fixed; top: 60px; left: 8px; right: 8px; width: auto; }
  .al-pomo-chip { padding: 0 8px; }
}