/* ==========================================================================
   Estilos del módulo: mis simulacros (banco de AUGE).

   Reutiliza el sistema: .qcard/.opts/.opt para la pregunta, .dx-top/.timer
   para la cabecera, .res-hero/.comp-list para el resultado y .rev para la
   revisión (simulacro.css). Aquí va lo propio de un examen largo: la rejilla
   de preguntas, el panel lateral, el texto con formato que viene del banco y
   el bloque de solución. Solo tokens, como el resto de módulos.
   ========================================================================== */

/* ------------------------------------------------------------ Cabecera -- */
.ex-cabeza {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-3); margin-bottom: var(--sp-4);
}
.ex-cabeza h1 { font-size: 1.45rem; line-height: 1.25; }
.ex-sobre {
  font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--azure-txt); margin-bottom: 2px;
}
.ex-reloj { font-size: 1.15rem; padding: var(--sp-2) 14px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--card); }

.ex-aviso { margin-bottom: var(--sp-4); }
.ex-cta { margin-bottom: var(--sp-5); display: grid; gap: 10px; justify-items: start; }
.ex-cta h3 { margin: 0; }
.ex-kpis { margin-bottom: var(--sp-5); }

/* --------------------------------------------------------- Formulario -- */
.ex-form { display: grid; gap: var(--sp-4); }
.ex-cursos { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.ex-cursos legend { font-size: .82rem; font-weight: 600; color: var(--text); margin-bottom: var(--sp-1); }
.ex-curso[hidden] { display: none; }
.ex-nota { font-size: .8rem; color: var(--muted); }

/* --------------------------------------------- Áreas del diagnóstico -- */
/* El icono es un SVG en línea: sin flex se va a su propia línea y el texto
   queda debajo. El mismo patrón que la lista de «qué incluye» del aula. */
.diag-areas { display: grid; gap: var(--sp-2); }
.diag-lista { list-style: none; display: grid; gap: var(--sp-2); font-size: .9rem; }
.diag-lista li { display: flex; align-items: center; gap: var(--sp-2); }
.diag-lista li .icono { color: var(--teal-txt); flex: none; }
.ex-resumen {
  font-family: var(--font-d); font-weight: 600;
  padding: var(--sp-3) 14px; border-radius: var(--rs); background: var(--bg2);
}
.ex-resumen:empty { display: none; }

/* ------------------------------------------------------------- Prueba -- */
.ex-layout { display: grid; gap: var(--sp-4); }
@media (min-width: 900px) {
  .ex-layout { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
  /* El panel acompaña al desplazarse por un texto largo de comprensión. */
  .ex-panel { position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
}

/* Al saltar desde la rejilla, la cabecera fija no tapa el inicio de la pregunta. */
.ex-pregunta { scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }

/* Texto con formato del banco: párrafos, listas y tablas de los casos. */
.ex-texto { font-size: .95rem; line-height: 1.6; color: var(--text); margin-bottom: 18px; overflow-wrap: anywhere; }
.ex-texto > * + * { margin-top: .7em; }
.ex-texto ul, .ex-texto ol { padding-left: 1.4em; }
.ex-texto ul { list-style: disc; }
.ex-texto ol { list-style: decimal; }
.ex-texto h4, .ex-texto h5, .ex-texto h6 { font-size: 1rem; }
.ex-texto blockquote { border-left: 3px solid var(--border); padding-left: var(--sp-3); color: var(--muted); }
.ex-texto img { max-width: 100%; height: auto; border-radius: var(--rs); }
.ex-texto iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--rs); }
/* Las tablas anchas se desplazan dentro de su caja, no la página entera. */
.ex-texto table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: .88rem; }
.ex-texto th, .ex-texto td { border: 1px solid var(--border); padding: 6px 10px; vertical-align: top; }
.ex-texto th { background: var(--bg2); }
/* El banco justifica mucho texto; en una columna angosta eso abre huecos
   enormes entre palabras. */
@media (max-width: 599px) {
  .ex-texto [style*="justify"] { text-align: left !important; }
}

.ex-imagen { display: block; max-width: 100%; height: auto; margin: 0 0 18px; border-radius: var(--rs); border: 1px solid var(--border); }

/* Tres botones en la barra: el de marcar va al centro. */
.ex-nav { align-items: center; }
.ex-nav [data-ex-marcar][aria-pressed="true"] { border-color: var(--amber); }
.ex-nav [data-ex-marcar][aria-pressed="true"] .icono { color: var(--amber); }

@media (max-width: 899px) {
  .ex-nav {
    position: sticky;
    bottom: calc(var(--bnav-h) + var(--sp-2));
    z-index: 5;
    background: var(--bg);
    padding: var(--sp-3) 0;
    margin-top: var(--sp-3);
  }
}

/* ----------------------------------------------------------- Rejilla -- */
.ex-rejilla {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
  gap: 6px; margin-bottom: var(--sp-3);
}
.ex-celda {
  height: 38px; display: grid; place-items: center;
  border-radius: 10px; border: 1.5px solid var(--border); background: var(--bg);
  font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--muted); cursor: pointer; position: relative;
}
.ex-celda:hover { border-color: var(--azure); }
.ex-celda.hecha { background: var(--blue); border-color: var(--blue); color: #fff; }
.ex-celda.actual { outline: 2px solid var(--azure); outline-offset: 2px; }
/* La marca va en una esquina para que se lea junto con "respondida". */
.ex-celda.marcada::after {
  content: ""; position: absolute; top: 3px; right: 3px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--amber);
}

.ex-leyenda { display: flex; gap: var(--sp-4); font-size: .75rem; color: var(--muted); margin-bottom: var(--sp-4); }
.ex-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.ex-leyenda i { width: 12px; height: 12px; border-radius: 4px; border: 1.5px solid var(--border); }
.ex-leyenda i.hecha { background: var(--blue); border-color: var(--blue); }
.ex-leyenda i.marcada { background: var(--amber); border-color: var(--amber); border-radius: 50%; }

.ex-guardado { font-size: .75rem; color: var(--muted); margin-top: var(--sp-2); text-align: center; }
.ex-guardado.mal { color: var(--rojo-txt); }

/* En la revisión la rejilla son enlaces con el resultado de cada pregunta. */
.ex-rejilla-rev { margin: var(--sp-3) 0 var(--sp-5); }
.ex-rejilla-rev .ex-celda { text-decoration: none; }
.ex-rejilla-rev .ex-celda.buena { background: var(--mint); border-color: var(--mint); color: var(--ink); }
.ex-rejilla-rev .ex-celda.mala { border-color: var(--red); color: var(--rojo-txt); }
.ex-rejilla-rev .ex-celda.vacia { border-style: dashed; }

.ex-filtros[hidden] { display: none; }
.ex .rev[hidden] { display: none; }

/* ------------------------------------------------------------ Revisión -- */
.rev { scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }
.ex-marca { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; color: var(--amber); }
.ex .comp-row b { white-space: nowrap; }

.ex-contexto { margin-bottom: 18px; }
.ex-contexto summary { cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--blue-txt); margin-bottom: var(--sp-2); }
.ex-contexto .ex-texto { margin-bottom: 0; }

.ex-solucion {
  margin-top: var(--sp-4); padding: var(--sp-4);
  border-radius: 14px; background: var(--bg2); border-left: 3px solid var(--teal);
}
.ex-solucion-titulo {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--teal-txt); margin-bottom: var(--sp-2);
}
.ex-solucion .ex-texto { margin-bottom: 0; }
.ex-solucion .btn { margin-top: var(--sp-3); }

.res-hero .ex-sobre-cien { font-size: 1.4rem; opacity: .75; margin-left: 4px; }

/* ------------------------------------------------------------- Diálogo -- */
.ex-dialogo {
  max-width: min(440px, calc(100vw - 32px)); width: 100%;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--card); color: var(--text);
  padding: var(--sp-6); box-shadow: var(--sh-md);
}
.ex-dialogo::backdrop { background: rgba(10, 17, 40, .55); }
.ex-dialogo h2 { font-size: 1.2rem; margin-bottom: var(--sp-2); }
.ex-dialogo p { font-size: .92rem; color: var(--muted); }
.ex-dialogo-acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: var(--sp-5); }