/* Lo que hace el alumno además de ver lecciones (28/10/2026): el hito de cada fase, su enhorabuena, el repaso de cada
   módulo, su primera ronda de challenges y sus notas. Mismos colores y medidas que el resto del campus (base.css). */

/* ---------- El hito de la fase (al final de cada fase) ---------- */
.hito { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding: 16px; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--panel); }
.hito p { color: var(--text-2); margin: 0 0 4px; max-width: 60ch; }
.hito .fila-botones { margin-top: 10px; }
.hito__marca { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--text-3); border: 1px solid #45402B; }
.hito--hecho { border-color: rgba(247, 197, 54, .45); background: var(--gold-wash); }
.hito--hecho p { color: var(--text); }
.hito--hecho .hito__marca { color: var(--gold-ink); background: var(--gold); border-color: var(--gold); }

/* ---------- Enhorabuena ---------- */
.fiesta { gap: 22px; }
.fiesta__sello { position: relative; width: 112px; height: 112px; margin: 6px auto 0; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(247, 197, 54, .22), rgba(247, 197, 54, 0) 70%);
  box-shadow: inset 0 0 0 1px rgba(247, 197, 54, .5); animation: sello-entra .9s var(--ease) both; }
.fiesta__sello img { width: 46px; transform: translateY(-14px); animation: chevron-sube 1.1s var(--ease) .25s both; }
.fiesta__sello span { position: absolute; bottom: 20px; font-weight: 800; font-size: 26px; letter-spacing: -.02em; color: var(--gold); }
.fiesta__cab { text-align: center; display: grid; gap: 6px; justify-items: center; }
.fiesta__cab h1 { margin: 0; }
.fiesta__cab .lead { margin: 0; }
.fiesta__antes { margin: 0; font-weight: 800; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.fiesta__datos { text-align: center; }
.fiesta__hito { border-color: rgba(247, 197, 54, .45); background: var(--gold-wash); }
.fiesta__hito p, .fiesta .tarjeta > p { margin: 0; color: var(--text-2); }
.fiesta .tarjeta h2 { margin: 0; font-size: 17px; }
@keyframes sello-entra { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
@keyframes chevron-sube { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(-14px); } }

/* ---------- Repaso del módulo ---------- */
.repaso { gap: 20px; }
.repaso__cuenta { display: grid; gap: 8px; }
.repaso__pregunta { border: 0; padding: 0; margin: 0; display: grid; gap: 16px; min-width: 0; }
.repaso__pregunta legend { padding: 0; margin-bottom: 16px; }
.repaso__pregunta h2 { margin: 0; font-size: 22px; line-height: 1.3; letter-spacing: -.01em; }
.repaso__opciones { display: grid; gap: 10px; }
.repaso__opcion { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: center; width: 100%; padding: 13px 14px; text-align: left; border-radius: 11px;
  border: 1px solid #45402B; color: var(--text-2); font-size: 16px; transition: border-color .18s var(--ease), background-color .18s var(--ease); }
.repaso__opcion:hover:not([disabled]) { border-color: #8A7E55; color: var(--text); }
.repaso__opcion:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.repaso__marca { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; color: var(--text-3); border: 1px solid #45402B; }
.repaso__opcion--bien { border-color: var(--gold); background: var(--gold-wash); color: var(--text); }
.repaso__opcion--bien .repaso__marca { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.repaso__opcion--mal { border-color: #6E3B34; color: var(--text-3); text-decoration: line-through; text-decoration-color: rgba(255, 156, 143, .6); }
.repaso__opcion--mal .repaso__marca { color: #FF9C8F; border-color: #6E3B34; }
.repaso__opcion[disabled] { cursor: default; }
.repaso__respuesta { padding: 14px 16px; border-radius: var(--r-m); background: var(--panel-2); color: var(--text-2); font-size: 15px; display: grid; gap: 4px; }
.repaso__respuesta b { color: var(--text); }
.repaso__respuesta--bien { background: var(--gold-wash); box-shadow: inset 0 0 0 1px rgba(247, 197, 54, .45); animation: aparece .35s var(--ease) both; }
.repaso__fin { display: grid; gap: 12px; justify-items: center; text-align: center; padding: 18px 0; }
.repaso__fin h2 { margin: 0; font-size: 26px; }
.repaso__fin .fila-botones { justify-content: center; margin-top: 6px; }
.repaso__sello { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--gold-ink); animation: sello-entra .7s var(--ease) both; }
.repaso__sello .ico { width: 30px; height: 30px; }
.repaso__nota { margin: 0; color: var(--text-2); font-size: 17px; }
.repaso__nota b { color: var(--gold); font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin-right: 4px; }
@keyframes aparece { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- Tu primera ronda de challenges ---------- */
.ronda { gap: 26px; }
.ronda__bloque { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; min-width: 0; }
.ronda__bloque[hidden], .ronda [hidden] { display: none; }
.ronda__bloque legend { padding: 0; margin-bottom: 12px; font-weight: 800; font-size: 17px; color: var(--text); }
.ronda__challenges { display: grid; gap: 12px; }
.ronda__challenge { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 84px 40px; gap: 10px; align-items: end; padding: 12px; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--panel); }
.ronda__challenge:has(.ronda__tipo:not([hidden])) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr) 84px 40px; }
.ronda__quitar { align-self: end; margin-bottom: 4px; }
.ronda__riesgos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ronda__resumen .acc-ficha { margin: 0; padding: 0; border: 0; background: none; }
@media (max-width: 640px) {
  .ronda__challenge, .ronda__challenge:has(.ronda__tipo:not([hidden])) { grid-template-columns: minmax(0, 1fr) 84px 40px; }
  .ronda__challenge > .campo:has([name="propfirm"]), .ronda__tipo { grid-column: 1 / -1; }
  .ronda__riesgos { grid-template-columns: 1fr; }
}

/* ---------- Notas y dudas ---------- */
.pestana__cuenta { color: var(--text-3); font-weight: 600; }
.nota-form { display: grid; gap: 10px; padding: 14px 0 6px; }
.nota-form textarea.texto { min-height: 88px; padding: 12px 14px; resize: vertical; line-height: 1.45; }
.nota-form__min { color: var(--gold); font-weight: 600; }
.nota-form .btn { justify-self: start; }
.notas { display: grid; }
.nota { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: baseline; padding: 12px 2px; }
.nota + .nota { border-top: 1px solid var(--line-soft); }
.nota__t { font-variant-numeric: tabular-nums; color: var(--gold); font-weight: 600; text-align: left; }
.nota__t:hover { text-decoration: underline; text-underline-offset: 4px; }
.nota__cuerpo { display: grid; gap: 6px; min-width: 0; }
.nota__cuerpo p { margin: 0; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.nota__etq { margin: 0 8px 0 0; }
.nota__acciones { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; }
.nota__borrar { color: var(--text-3); }
.notas__vacio { padding: 14px 2px; }

/* ---------- En la portada: lo nuevo y los repasos, justo debajo de la lección por la que sigue ---------- */
.ini .ini-extra { order: 1; }
.fiesta .ruta { width: 100%; max-width: 460px; margin: 0 auto; }
.ronda__bloque > .btn { justify-self: start; }