/* Aula Saber 11 · v2 · componentes nuevos (simulacro por pregunta, clases, grabaciones). Fondos claros, sin morado. */
.cargando-inicial{min-height:100vh;display:grid;place-items:center;font-family:Inter,system-ui,sans-serif;color:#555554;background:#F5F8FA}
.instr{margin:.2rem 0 .4rem;font-style:italic}

/* Simulacro: mapa de preguntas, caja y marca de agua discreta (no tapa contenido) */
.sim-zona{display:grid;gap:12px;margin-top:12px}
.mapa-sim{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.mapa-sim .punto{min-width:36px;height:36px;border-radius:10px;border:1px solid var(--borde,#cfd8dc);background:#fff;font:inherit;font-weight:600;cursor:pointer;color:var(--tinta-2,#334)}
.mapa-sim .punto.act{outline:3px solid var(--azul,#187BA8);outline-offset:1px}
.mapa-sim .punto.ok{background:#e6f4ea;border-color:#2B7A3D;color:#1d5a2c}
.mapa-sim .punto.mal{background:#fdecea;border-color:#b42318;color:#8a1c12}
.mapa-sim .punto.marcada{box-shadow:inset 0 -4px 0 #C2410C}
.mapa-sec{font-size:.78rem;font-weight:700;color:var(--tinta-3,#556);margin:0 4px 0 8px;text-transform:uppercase;letter-spacing:.03em}
.sim-caja{position:relative;padding-bottom:2.2rem}
.marca-agua{position:absolute;right:12px;bottom:8px;font-size:.72rem;color:#7b8794;opacity:.75;letter-spacing:.04em;pointer-events:none;user-select:none}
.cronometro .poco,.cronometro.poco b{color:#b42318}

/* Contrarreloj de práctica */
.crono-practica{display:flex;gap:10px;align-items:baseline;justify-content:flex-end;margin-bottom:6px;font-size:.9rem}
.crono-practica b{font-size:1.1rem;font-variant-numeric:tabular-nums}
.crono-practica.poco b{color:#b42318}

/* Recorrido por prueba de la semana y agenda de clase */
.tabla-area td{vertical-align:top}
.tabla-area td:nth-child(2),.tabla-area td:nth-child(3){min-width:180px}
.tabla-agenda caption{text-align:left;font-weight:600;padding:4px 0}
.tabla-agenda td{vertical-align:top}
.clase-ficha{margin:.6rem 0}
.clase-ficha summary{cursor:pointer;font-weight:600;color:var(--azul,#187BA8)}

/* Grabaciones */
.grab-card h3{font-size:1rem;margin:.5rem 0}
.grab-datos{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;font-size:.86rem;margin:.4rem 0 .8rem}
.grab-datos dt{font-weight:600;color:var(--tinta-2,#334)}
.grab-datos dd{margin:0;color:var(--tinta-3,#556)}
/* Ingreso: cuatro opciones (estudiante, docente, administrador, modo demo) y «ver como» del demo (1/11/2026) */
.ing-roles.ing-roles-4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ing-vista{border:0;padding:0;margin:0 0 1rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ing-vista[hidden]{display:none}
.ing-vista legend{font-weight:600;font-size:.9rem;margin-bottom:.4rem}
.cinta-demo-rol{background:#E8F4EC;color:#1E5631;border-bottom:1px solid #BFDFC8}
.cinta-demo-rol a{color:inherit;font-weight:700}
/* Recorrido guiado de la semana 1 */
.rec-pestanas{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 16px}
.rec-pasos{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.rec-paso{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start}
.rec-num{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--naranja,#F29F05);color:var(--tinta-fuerte,#13293D);font-weight:800}
.rec-paso p{margin:.3rem 0 .7rem}
/* Ficha de la clase (panel docente): valores largos; la etiqueta va encima y el texto usa todo el ancho de la tarjeta */
.grab-datos.apilado{grid-template-columns:1fr;gap:0}
.grab-datos.apilado dt{margin-top:.55rem}
.grab-datos.apilado dt:first-child{margin-top:0}
.grab-datos.apilado dd{line-height:1.45}
/* Tarjetas de «Grabaciones» (3 por fila): también apiladas. Con «auto 1fr» la etiqueta más larga («Subtítulos y
   transcripción») se quedaba con el ancho y el valor caía en una columna de pocas letras («Pendi-ente» en vertical). */
.grab-card .grab-datos{grid-template-columns:1fr;gap:0}
.grab-card .grab-datos dt{margin-top:.55rem}
.grab-card .grab-datos dt:first-child{margin-top:0}
.grab-card .grab-datos dd{line-height:1.45}
/* Reproductor de una grabación: ventana grande (diálogo) con video 16:9; dentro de la tarjeta solo si no hay diálogo */
.grab-video{position:relative;padding-top:56.25%;margin-top:8px;background:#000;border-radius:8px;overflow:hidden}
.grab-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.grab-dialogo{width:min(960px,calc(100vw - 32px));max-width:none;max-height:calc(100vh - 32px);padding:0;border:1px solid var(--linea,#dde);border-radius:var(--r,14px);background:var(--superficie,#fff);color:inherit;box-shadow:0 24px 60px rgba(19,41,61,.25);overflow:auto}
.grab-dialogo::backdrop{background:rgba(19,41,61,.6)}
.grab-dialogo .grab-video{margin:0;border-radius:0}
.grab-dialogo-pie{display:flex;justify-content:flex-end;padding:.8rem 1.2rem}

@media (max-width:640px){
  .mapa-sim .punto{min-width:40px;height:40px}
  .grab-datos{grid-template-columns:1fr}
  .tabla-area td:nth-child(2),.tabla-area td:nth-child(3){min-width:140px}
}
@media print{.marca-agua{display:none}}