/* Estudiar (bloque 2): la sesión de una unidad, la revisión de cada error y «No lo entiendo». Solo usa los colores y los radios de
   estilos.css, así que sigue al tema claro y al oscuro. El celular (hasta 900 px) cambia el pie por la barra inferior, como en el resto del ensayo. */

/* ---------- Tarjeta de la unidad (columna izquierda) ---------- */
.estudio-tarjeta { display: grid; gap: 10px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.estudio-unidad { margin: 0; font-family: var(--display); font-size: 20px; line-height: 1.2; letter-spacing: -0.01em; }
.estudio-estado, .estudio-meta-avance { display: flex; align-items: baseline; gap: 8px; }
.estudio-estado b, .estudio-meta-avance b { font-size: 15px; }
.estudio-marcas { display: flex; gap: 6px; }
.estudio-marca { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--surface); display: block; }
.estudio-marca.ok { background: var(--ok); border-color: var(--ok); }
.estudio-marca.mal { background: var(--bad); border-color: var(--bad); }
.estudio-marca.actual { border-color: var(--ink); }
.estudio-nota { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.estudio-tarjeta-acciones { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Corrección en dos tiempos ---------- */
/* minmax(0, 1fr): sin esto, un cuerpo ancho (tabla, diagrama) ensancha la columna y la solución se sale de la tarjeta en el celular */
.estudio-correccion { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 18px; }
.estudio-correccion .solucion { margin-top: 0; }
.estudio-aviso { margin: 0; padding: 10px 14px; background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--line-strong); border-radius: var(--r); font-size: 14px; line-height: 1.5; }
.estudio-aviso.ok { border-left-color: var(--ok); }
.estudio-aviso.mal { border-left-color: var(--bad); }
.estudio-pista { padding: 12px 14px; background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--r); font-size: 14.5px; line-height: 1.55; }
.estudio-pista h6 { margin: 0 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.estudio-pista p { margin: 0; }
.estudio-pista ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.estudio-correccion > .btn { justify-self: start; }

/* ---------- Revisión de un error (dentro de la solución, en todos los modos) ---------- */
.estudio-error { margin: 12px 0 14px; padding: 12px 14px; background: var(--bad-soft); border: 1px solid color-mix(in srgb, var(--bad) 30%, transparent); border-left: 3px solid var(--bad); border-radius: var(--r); font-size: 14.5px; line-height: 1.55; }
.estudio-error-titulo { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--bad); margin-bottom: 4px; }
.estudio-error p { margin: 0; }
.estudio-error-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.estudio-error-acciones:first-child { margin-top: 0; }

/* ---------- Pie y barra inferior ---------- */
.estudio-pie .btn[disabled] { opacity: .5; cursor: default; }
.barra-movil.barra-movil--estudio { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.barra-movil--estudio .btn[disabled] { opacity: .5; }

/* ---------- «No lo entiendo» ---------- */
.velo--estudio { align-items: center; }
.dialogo--estudio { max-width: 720px; width: 100%; max-height: min(86vh, 860px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; text-align: left; }
.dialogo--estudio h3 { margin: 0; }
.dialogo-cuerpo { overflow-y: auto; min-height: 0; padding-right: 4px; }
.estudio-entender { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.estudio-entender .modo-mental { margin-top: 0; }
.estudio-entender .modo-mental summary { flex-wrap: wrap; row-gap: 6px; }
.estudio-bloque h4 { margin: 0 0 8px; font-size: 15px; }
.estudio-bloque .estudio-nota { margin-bottom: 10px; }
.estudio-bloque .rev-cuerpo { padding: 0; }
.estudio-leccion h4 { margin: 0 0 8px; font-size: 16px; }
.estudio-leccion h5 { margin: 14px 0 4px; font-size: 14px; }

/* ---------- Resumen de la sesión ---------- */
.estudio-fin { max-width: 760px; margin: 0 auto; display: grid; gap: 18px; }
.estudio-fin-cab h1 { margin: 4px 0 0; font-family: var(--display); font-size: 32px; letter-spacing: -0.02em; }
.estudio-fin-datos { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 16px; }
.estudio-fin-estado { display: grid; gap: 6px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.estudio-fin-estado b { font-size: 18px; }
.estudio-fin-estado p { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.estudio-fin-unidades { display: grid; gap: 10px; }
.estudio-fin-acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.estudio-fin-acciones .btn { min-height: 44px; }   /* toques de 44 px (spec 2026-10-28, §7): «Seguir practicando» e «Inicio» medían 37 */
.estudio-fin-revisar { display: grid; gap: 10px; }
.estudio-fin-revisar h2 { margin: 6px 0 0; font-size: 18px; }

@media (max-width: 900px) {
  .estudio-tarjeta { padding: 12px 14px; gap: 8px; }
  .estudio-unidad { font-size: 18px; }
  .estudio-tarjeta .estudio-pausar { display: none; }    /* Pausar va en la barra inferior; «Terminar por hoy» queda en la tarjeta */
  .estudio-fin-cab h1 { font-size: 26px; }
  .velo--estudio { align-items: end; padding: 0; }
  .dialogo--estudio { max-width: none; max-height: 92vh; border-radius: var(--r-lg) var(--r-lg) 0 0; }
}
@media print { .estudio-tarjeta, .estudio-error-acciones, .estudio-pie, .velo--estudio { display: none !important; } }