/* Aula virtual: «Mis cursos» (/aula) y clases (/aula/<curso>).
   Fondo azul oscuro, letra grande y botones amplios (pensado también para adultos mayores). */
:root {
  --a-bg: #0a1f3d;
  --a-panel: #112c52;
  --a-panel-2: #163764;
  --a-line: #24477a;
  --a-text: #f2f6fb;
  --a-muted: #b9c8dd;
  --a-accent: #5cb8ff;
  --a-btn: #2f8cff;
  --a-ok: #3ccf7a;
  --a-warn: #ffd166;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body.aula { margin: 0; font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: var(--a-bg); color: var(--a-text); font-size: 18px; line-height: 1.55; }
.aula a { color: var(--a-accent); }
.aula h1, .aula h2, .aula h3 { color: #fff; }
.a-wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.a-angosto { max-width: 560px; }

/* Barra superior */
.a-top { background: rgba(6, 20, 41, .92); border-bottom: 1px solid var(--a-line); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(6px); }
.a-top-in { display: flex; align-items: center; gap: 14px; min-height: 64px; }
.a-logo { display: flex; align-items: center; gap: 10px; color: #fff !important; text-decoration: none; font-weight: 800; font-size: 1.05rem; margin-right: auto; }
.a-logo img { border-radius: 8px; background: #fff; }
.a-top .a-salir, .a-top .a-volver { min-height: 44px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--a-line); background: transparent; color: var(--a-text) !important; font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.a-top .a-salir:hover, .a-top .a-volver:hover { background: var(--a-panel-2); }

/* Tarjetas y formularios */
.a-card { background: var(--a-panel); border: 1px solid var(--a-line); border-radius: 18px; padding: 24px; margin: 0 0 20px; }
.a-card h2 { font-size: 1.45rem; margin: 0 0 8px; }
.a-muted { color: var(--a-muted); margin: 0 0 16px; }
.aula label { display: block; font-weight: 600; margin-bottom: 18px; }
.aula input[type=text], .aula input[type=tel], .aula input[type=password] {
  display: block; width: 100%; margin-top: 8px; padding: 14px 16px; min-height: 56px;
  border: 2px solid var(--a-line); border-radius: 12px; background: #0b2447; color: #fff; font: inherit; font-size: 1.15rem;
}
.aula input:focus { outline: 3px solid var(--a-accent); outline-offset: 1px; border-color: transparent; }
.a-pin-wrap { position: relative; display: block; }
.a-pin-wrap input { letter-spacing: .5em; font-size: 1.5rem; font-weight: 700; padding-right: 64px; }
.a-ojo { position: absolute; right: 6px; top: calc(50% + 4px); transform: translateY(-50%); width: 48px; height: 48px; border: 0; border-radius: 10px; background: none; color: var(--a-muted); font-size: 1.4rem; cursor: pointer; }
.a-ojo:hover { background: var(--a-panel-2); color: #fff; }
.a-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 12px 24px; border-radius: 12px; border: 0; background: var(--a-btn); color: #fff !important; font: inherit; font-size: 1.1rem; font-weight: 700; cursor: pointer; text-decoration: none; }
.a-btn:hover { filter: brightness(1.08); }
.a-btn:disabled { opacity: .55; cursor: default; }
.a-btn.a-full { width: 100%; }
.a-btn.a-sec { background: transparent; border: 2px solid var(--a-line); color: var(--a-text) !important; }
.a-btn.a-sec:hover { background: var(--a-panel-2); }
.a-btn.a-wa { background: #25d366; color: #06361b !important; }
.a-link { display: inline-block; margin-top: 16px; background: none; border: 0; padding: 6px 0; color: var(--a-accent); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.a-error { background: #4a1d2a; border: 1px solid #a8455c; color: #ffd9e0; border-radius: 12px; padding: 12px 14px; margin: 0 0 16px; }
.a-ok { background: #123f2d; border: 1px solid #2f8f5c; color: #d6ffe7; border-radius: 12px; padding: 12px 14px; margin: 0 0 16px; }
.a-ayuda { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--a-line); color: var(--a-muted); font-size: .95rem; }

/* Mis cursos */
.a-hola { padding: 32px 0 8px; }
.a-hola h1 { margin: 0 0 4px; font-size: clamp(1.6rem, 4.5vw, 2.2rem); }
.a-ingreso { padding: 40px 16px; }
.a-ingreso h1 { font-size: clamp(1.6rem, 4.5vw, 2.1rem); margin: 0 0 6px; }
.a-cursos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; padding: 16px 0 40px; }
.a-curso { display: flex; flex-direction: column; background: var(--a-panel); border: 1px solid var(--a-line); border-radius: 18px; padding: 22px; }
.a-curso-ico { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 16px; background: var(--a-panel-2); font-size: 1.9rem; margin-bottom: 12px; }
.a-curso h2 { font-size: 1.25rem; margin: 0 0 6px; }
.a-curso .a-muted { font-size: .95rem; }
.a-curso .a-btn { margin-top: auto; }
.a-barra { height: 12px; border-radius: 6px; background: #0b2447; overflow: hidden; margin: 6px 0 6px; }
.a-barra span { display: block; height: 100%; background: linear-gradient(90deg, var(--a-ok), #7be3a6); border-radius: 6px; }
.a-avance { font-size: .95rem; color: var(--a-muted); margin: 0 0 16px; }
.a-estado { border-radius: 12px; padding: 12px 14px; margin: 0 0 16px; font-size: .98rem; }
.a-estado.pendiente { background: #3d3415; border: 1px solid #8a7426; color: #fff3c4; }
.a-estado.rechazada { background: #4a1d2a; border: 1px solid #a8455c; color: #ffd9e0; }
.a-vacio { text-align: center; padding: 40px 24px; }

/* Clase */
.a-clase { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; padding: 24px 0 60px; align-items: start; }
@media (max-width: 960px) { .a-clase { grid-template-columns: 1fr; } }
.a-video { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 16px; overflow: hidden; border: 1px solid var(--a-line); }
.a-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.a-video-msg { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px; background: radial-gradient(circle at 50% 40%, #173a6b, #07152b); }
.a-video-msg strong { display: block; font-size: 1.3rem; margin: 8px 0 4px; color: #fff; }
.a-video-msg span { color: var(--a-muted); }
.a-video-msg .a-ico { font-size: 2.6rem; }
.a-donde { margin: 18px 0 4px; color: var(--a-accent); font-weight: 700; font-size: .95rem; text-transform: uppercase; letter-spacing: .05em; }
.a-clase h1 { margin: 0 0 14px; font-size: clamp(1.4rem, 3.6vw, 1.9rem); line-height: 1.25; }
.a-desc { margin: -4px 0 18px; color: var(--a-muted); white-space: pre-line; }
.a-nav { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; }
.a-nav .a-btn { flex: 1 1 160px; }
.a-nav .a-visto.hecho { background: #1f6b45; }
.a-tabs { display: flex; gap: 8px; margin-bottom: 0; flex-wrap: wrap; }
.a-tab { min-height: 48px; padding: 10px 18px; border-radius: 12px 12px 0 0; border: 1px solid var(--a-line); border-bottom: 0; background: transparent; color: var(--a-muted); font: inherit; font-weight: 600; cursor: pointer; }
.a-tab.activa { background: var(--a-panel); color: #fff; }
.a-panel-tab { border-top-left-radius: 0; }
@media (max-width: 520px) {
  .a-tab { flex: 1 1 0; padding: 10px 8px; font-size: .9rem; }
  .a-logo { font-size: .92rem; line-height: 1.25; }
}
.a-pronto { display: inline-block; font-size: .75rem; font-weight: 700; background: var(--a-warn); color: #3d2e00; border-radius: 20px; padding: 2px 10px; margin-left: 6px; vertical-align: middle; }

/* Temario lateral */
.a-temario { background: var(--a-panel); border: 1px solid var(--a-line); border-radius: 18px; overflow: hidden; position: sticky; top: 84px; max-height: calc(100vh - 100px); display: flex; flex-direction: column; }
@media (max-width: 960px) { .a-temario { position: static; max-height: none; } }
.a-temario-head { padding: 18px 20px 14px; border-bottom: 1px solid var(--a-line); }
.a-temario-head h2 { font-size: 1.1rem; margin: 0 0 8px; }
.a-temario-lista { overflow-y: auto; }
.a-temario details { border-bottom: 1px solid var(--a-line); }
.a-temario summary { list-style: none; cursor: pointer; padding: 14px 20px; font-weight: 700; display: flex; gap: 10px; align-items: baseline; }
.a-temario summary::-webkit-details-marker { display: none; }
.a-temario summary small { margin-left: auto; color: var(--a-muted); font-weight: 500; font-size: .85rem; white-space: nowrap; }
.a-temario ol { list-style: none; margin: 0; padding: 0 0 8px; }
.a-temario li button { width: 100%; display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 12px 20px; min-height: 52px; border: 0; background: none; color: var(--a-text); font: inherit; font-size: 1rem; cursor: pointer; }
.a-temario li button:hover { background: var(--a-panel-2); }
.a-temario li button.actual { background: #1d4a86; box-shadow: inset 4px 0 0 var(--a-accent); }
.a-check { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--a-line); display: grid; place-items: center; font-size: .8rem; margin-top: 1px; }
.a-check.si { background: var(--a-ok); border-color: var(--a-ok); color: #053d1d; font-weight: 800; }
.a-temario li small { display: block; color: var(--a-muted); font-size: .85rem; }

/* Aviso flotante (clase completada) */
.a-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 40; max-width: calc(100% - 32px); margin: 0; padding: 14px 20px; border-radius: 14px; background: #123f2d; border: 1px solid #2f8f5c; color: #d6ffe7; font-weight: 600; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }

/* Asistente de IA */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.a-ia-intro { font-size: .95rem; }
.a-ia-mensajes { display: flex; flex-direction: column; gap: 12px; margin: 0 0 14px; max-height: 520px; overflow-y: auto; }
.a-ia-mensajes:empty { display: none; }
.a-msg { max-width: 92%; padding: 12px 16px; border-radius: 16px; line-height: 1.55; overflow-wrap: anywhere; }
.a-msg p { margin: 0 0 8px; }
.a-msg p:last-child, .a-msg ul:last-child { margin-bottom: 0; }
.a-msg ul { margin: 0 0 8px; padding-left: 20px; }
.a-msg.yo { align-self: flex-end; background: var(--a-btn); color: #fff; border-bottom-right-radius: 4px; }
.a-msg.ia { align-self: flex-start; background: var(--a-panel-2); border: 1px solid var(--a-line); border-bottom-left-radius: 4px; }
.a-msg.ia.escribiendo::after { content: "▍"; animation: a-parpadeo 1s steps(2) infinite; color: var(--a-accent); }
@keyframes a-parpadeo { to { visibility: hidden; } }
.a-ia-sugerencias { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.a-ia-sugerencias button { min-height: 44px; padding: 8px 14px; border-radius: 22px; border: 1px solid var(--a-line); background: transparent; color: var(--a-text); font: inherit; font-size: .92rem; cursor: pointer; }
.a-ia-sugerencias button:hover { background: var(--a-panel-2); }
.a-ia-form { display: flex; gap: 10px; align-items: stretch; }
.a-ia-form textarea { flex: 1; min-height: 56px; padding: 12px 14px; border: 2px solid var(--a-line); border-radius: 12px; background: #0b2447; color: #fff; font: inherit; resize: vertical; }
.a-ia-form textarea:focus { outline: 3px solid var(--a-accent); outline-offset: 1px; border-color: transparent; }
@media (max-width: 520px) { .a-ia-form { flex-direction: column; } }
.a-ia-quedan { margin: 8px 0 0; font-size: .85rem; color: var(--a-muted); }

/* Comentarios */
.a-cuenta { display: inline-block; min-width: 22px; padding: 0 7px; margin-left: 6px; border-radius: 11px; background: var(--a-panel-2); font-size: .8rem; color: #fff; }
.a-coments { margin-top: 20px; display: flex; flex-direction: column; gap: 16px; }
.a-coments:empty { display: none; }
.a-k { padding: 14px 16px; border-radius: 14px; background: var(--a-panel-2); border: 1px solid var(--a-line); }
.a-k.medico { border-color: #2f8f5c; background: #123a2f; }
.a-k-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.a-k-head img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.a-k-head strong { font-size: 1rem; }
.a-k-head small { color: var(--a-muted); font-size: .85rem; }
.a-k-prof { font-size: .75rem; font-weight: 700; color: #053d1d; background: var(--a-ok); border-radius: 20px; padding: 2px 9px; }
.a-k p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.a-k-acciones { display: flex; gap: 14px; margin-top: 8px; }
.a-k-acciones button { background: none; border: 0; padding: 6px 0; color: var(--a-accent); font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer; }
.a-k-acciones .borrar { color: #ffb4c2; }
.a-k-resp { margin: 12px 0 0 18px; padding-left: 14px; border-left: 3px solid var(--a-line); display: flex; flex-direction: column; gap: 10px; }
.a-k-resp .a-k { background: var(--a-panel); }
.a-k-resp .a-k.medico { background: #123a2f; }
.a-k-form { margin-top: 10px; }
.a-k-ayuda { margin: 18px 0 0; font-size: .92rem; }