/* Simulacro público (preparatest.com/simulacro/…). Bootstrap 5.3 hace la
   rejilla, las tarjetas, los formularios, los botones, las insignias y los
   avisos; aquí solo va lo que Bootstrap no tiene: los colores de la marca, la
   cuenta atrás, las franjas oscuras (el gris del pie de la landing), la hoja de
   respuestas óptica, la barra del examen y la tarjeta oscura del resultado. */
:root {
  --sim-ground: #f4f7fc; --sim-surface: #FFFFFF; --sim-ink: #0f172a; --sim-muted: #64748b; --sim-line: #e7eaf2; /* los del campus (app.css) */
  --sim-cta: #0071E3; --sim-cta-hover: #0077ED; /* azul de la marca (el del campus y la landing) */
  --sim-omr: #C2410C; --sim-omr-ink: #9A3412; --sim-omr-tint: #FFF4EC; /* hoja de respuestas óptica */
  --sim-dark: #1A1A1A; --sim-dark-bg: linear-gradient(208.18deg, #1a1a1a 9.05%, #2c2c2c 76.74%); /* pie de la landing */
  --sim-dark-ink: #FFFFFF; --sim-dark-muted: rgba(255, 255, 255, .6);
  --sim-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* texto: la del campus y la app */
  --sim-mono: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* cifras: el sello común de landing, campus y simulacro */
  color-scheme: light; /* siempre en claro, también con el dispositivo en modo noche */
}

/* Bootstrap con la marca: tipografías, fondo y bordes (primary es el azul de Bootstrap, como en la landing). */
body.sim {
  --bs-body-font-family: var(--sim-sans); --bs-font-monospace: var(--sim-mono);
  --bs-body-color: var(--sim-ink); --bs-body-bg: var(--sim-ground); --bs-secondary-color: var(--sim-muted);
  --bs-border-color: var(--sim-line); --bs-body-color-rgb: 15, 23, 42;
  --bs-primary: #0071E3; --bs-primary-rgb: 0, 113, 227; --bs-primary-text-emphasis: #0066CC; --bs-link-color: #0066CC; --bs-link-color-rgb: 0, 102, 204;
  --bs-primary-bg-subtle: #ECF4FE; --bs-primary-border-subtle: #D1E3FD;
  /* azul claro común (app.css, personalizado.css) */
  background: var(--sim-ground); color: var(--sim-ink); font-family: var(--sim-sans); -webkit-font-smoothing: antialiased;
}
body.sim .card { --bs-card-bg: var(--sim-surface); --bs-card-border-color: var(--sim-line); }
body.sim .btn { border-radius: .6rem; } /* el mismo radio que los botones del campus (app.css) */
/* Campos como en el campus: blancos sobre la tarjeta, borde #d7ddea, radio .6rem y anillo azul. */
body.sim .form-control, body.sim .form-select { background-color: #fff; border-color: #d7ddea; border-radius: .6rem; }
body.sim .form-control:focus, body.sim .form-select:focus { border-color: rgba(0, 113, 227, .6); box-shadow: 0 0 0 .2rem rgba(0, 113, 227, .16); }
body.sim-lock { overflow: hidden; }
.sim :focus-visible:not(.btn, .sim-dialog) { outline: 3px solid var(--sim-cta); outline-offset: 2px; } /* los botones ya llevan el anillo de Bootstrap; el diálogo de entrega recibe el foco al abrirse (simulacro.js) */
.sim-dialog:focus { outline: none; }
@media (prefers-reduced-motion: reduce) { .sim * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
.sim-logo { height: auto; }
.sim-ticket { border-style: dashed !important; } /* ficha del inicio: Bootstrap no trae borde discontinuo */
/* Matriz de la ficha: hoja de calendario separada con la misma línea discontinua. */
.sim-ticket-col { flex: 1 1 0; min-width: 0; } /* las tres columnas de la ficha, a partes iguales */
.sim-ticket-stub { border-right: 2px dashed var(--sim-line); }
.sim-cal { width: 64px; aspect-ratio: 1; display: flex; flex-direction: column; } /* hoja cuadrada: el día ocupa el hueco entre mes y semana */
.sim-cal-mes { font-size: .7rem; letter-spacing: .08em; padding: 2px 0; }
.sim-cal-dia { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 26px; }
.sim-cal-sem { font-size: .7rem; padding-bottom: 3px; }
.sim-html p { margin: 0; display: inline; }

/* Botón principal: el azul de los botones de la landing. */
.sim-btn-cta { background: var(--sim-cta); color: #fff; border: 0; font-weight: 700; }
.sim-btn-cta:hover, .sim-btn-cta:focus, .sim-btn-cta:active { background: var(--sim-cta-hover) !important; color: #fff !important; }
/* Entregar: el gris del pie de la landing, como las franjas oscuras. */
.sim-btn-cta.sim-btn-dark { background: var(--sim-dark-bg); background-color: var(--sim-dark); } /* color de base: la transición de Bootstrap al enfocar no pasa por transparente (parpadeo) */
.sim-btn-cta.sim-btn-dark:hover, .sim-btn-cta.sim-btn-dark:focus, .sim-btn-cta.sim-btn-dark:active { background: var(--sim-dark) !important; }
.sim-btn-cta:disabled { background: var(--sim-cta); color: #fff; } /* desactivado mientras carga: Bootstrap lo dejaba sin fondo (solo el texto gris); así queda azul atenuado con el spinner */
.sim-btn-cta.sim-btn-dark:disabled { background: var(--sim-dark); }

/* Cuenta atrás */
.sim-countdown { display: flex; align-items: flex-start; gap: clamp(6px, 1.6vw, 16px); font-family: var(--sim-mono); font-variant-numeric: tabular-nums; }
.cd-unit { display: flex; flex-direction: column; align-items: center; min-width: 1.9ch; }
.cd-num { font-size: clamp(44px, 10vw, 96px); font-weight: 300; line-height: 1; letter-spacing: -0.03em; }
.cd-lbl { font-family: var(--sim-sans); font-size: 14px; color: var(--sim-muted); margin-top: 8px; }
.cd-sep { font-size: clamp(36px, 8vw, 80px); font-weight: 300; line-height: 1; color: var(--sim-line); }

/* Inicio: halo azul de la cabecera, antetítulo con la oposición y título. */
.sim-hero { background: radial-gradient(120% 420px at 50% 0, var(--bs-primary-bg-subtle) 0, transparent 100%); }
.sim-eyebrow { font-size: .925rem; letter-spacing: .08em; }
.sim-title { font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem); } /* el tamaño de display-5, con peso bold y sin su interlineado */
.sim-how-icon { width: 44px; height: 44px; } /* /simulacros: círculo del icono de cada paso */
.sim-leader { min-width: 1rem; border-bottom-style: dotted !important; } /* podio de las tarjetas: puntos guía entre nombre y nota */
.sim-mini-lbl { font-size: .75rem; } /* cifras de las tarjetas de /simulacros: «presentados» cabe en su tercio */
.sim-hero-card { max-width: 26rem; } /* /simulacros: el próximo en el hero no se estira en la tableta (columna a todo lo ancho) */
/* Recorrido del día (inscripción, aula, examen, notas): bolas unidas por una línea. */
.sim-steps li { position: relative; flex: 1 1 0; min-width: 0; padding-inline: .25rem; }
.sim-steps li:not(:last-child)::after { content: ""; position: absolute; top: 6px; left: calc(50% + 12px); right: calc(-50% + 12px); height: 2px; background: var(--sim-line); } /* de bola a bola */
.sim-steps li.is-done::after { background: var(--bs-primary); }
.sim-step-dot { display: block; position: relative; z-index: 1; width: 14px; height: 14px; margin-inline: auto; border-radius: 50%; background: var(--sim-line); }
.sim-steps .is-done .sim-step-dot, .sim-steps .is-current .sim-step-dot { background: var(--bs-primary); }
.sim-steps .is-current .sim-step-dot { box-shadow: 0 0 0 4px var(--bs-primary-bg-subtle); }
@media (max-width: 575.98px) { .sim-steps { font-size: .8125rem; } }
/* Inscritos: círculos solapados con el emoji de cada cuenta. */
.sim-face { width: 30px; height: 30px; margin-left: -8px; font-size: .9rem; }
.sim-face:first-child { margin-left: 0; }
.sim-face-more { width: auto; min-width: 30px; padding-inline: .45rem; font-size: .75rem; } /* «+30», «+120»: crece a lo ancho */

/* Franjas y tarjetas oscuras: el gris del pie de la landing. */
.sim-dark { background: var(--sim-dark-bg); color: var(--sim-dark-ink); }
.sim-dark-muted { color: var(--sim-dark-muted); }
.sim-wordmark { font-weight: 700; color: var(--sim-dark-ink); text-decoration: none; letter-spacing: -0.01em; }

/* Conectados ahora mismo: punto verde con un latido suave. */
.sim-online-dot { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; background: #198754; vertical-align: middle; animation: sim-online 2s ease-out infinite; }
@keyframes sim-online { 0% { box-shadow: 0 0 0 0 rgba(25, 135, 84, .55); } 70% { box-shadow: 0 0 0 7px rgba(25, 135, 84, 0); } 100% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0); } }

/* Aula */
.sim-aula-head { position: relative; background: var(--sim-dark-bg); color: var(--sim-dark-ink); padding: clamp(20px, 4vw, 32px) 16px clamp(20px, 4vw, 30px); }
.sim-aula-head p { color: var(--sim-dark-muted); }
.sim-aula-timer { font-family: var(--sim-mono); font-weight: 300; font-variant-numeric: tabular-nums; font-size: clamp(52px, 11vw, 84px); line-height: 1; letter-spacing: -0.03em; margin: 8px 0 6px; }
/* 96 asientos en 8 filas de 12: la sala más alta que ancha, como un aula. */
.sim-seats { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; margin: 16px 0; padding: 0 8%; }
.sim-seat { height: 14px; border-radius: 4px 4px 2px 2px; background: var(--sim-line); transition: background .3s; }
.sim-seat.on { background: var(--sim-cta); }
/* Botón flotante «N en línea», lista de conectados y aviso de quién entra. Sin z-index: los avisos de error (#sim-toast, después en la página) quedan encima. */
.sim-screen-aula #sim-main { padding-bottom: 72px; } /* que el botón no tape el final del aula */
.sim-online-float { position: fixed; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.sim-online-panel { width: min(320px, calc(100vw - 32px)); max-height: min(60vh, 460px); }
.sim-online-panel .list-group { overflow-y: auto; }
.sim-online-panel .sim-face { width: 32px; height: 32px; margin-left: 0; }
.sim-join { width: auto; max-width: min(380px, calc(100vw - 32px)); --bs-toast-bg: #fff; --bs-toast-border-color: var(--sim-line); }
.sim-join .sim-face { width: 28px; height: 28px; font-size: .85rem; }

/* Examen: barra fija, cuadernillo y hoja de respuestas óptica. */
.sim-exam-bar { position: sticky; top: 0; z-index: 30; background: var(--sim-dark-bg); color: var(--sim-dark-muted); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 10px clamp(14px, 3vw, 32px); line-height: 1.3; }
.sim-exam-bar strong { color: var(--sim-dark-ink); }
.sim-exam-timer { font-family: var(--sim-mono); font-variant-numeric: tabular-nums; font-size: clamp(22px, 4vw, 30px); color: var(--sim-dark-ink); }
.sim-exam-grid { max-width: 1240px; margin: 0 auto; }
@media (min-width: 980px) { .sim-exam-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; padding: 24px clamp(16px, 3vw, 32px); } }
/* Pantallas grandes: el cuadernillo crece con la pantalla, las preguntas ocupan todo su ancho (sin el tope de 72ch) y la
   letra sube un punto, para que el ancho se lea y no quede en blanco. El supuesto sigue arriba, como en el cuadernillo oficial. */
@media (min-width: 1400px) {
  .sim-exam-grid { max-width: 1520px; }
  .sim-booklet { font-size: 1.0625rem; }
  .sim-booklet .sim-q { max-width: none; }
}
/* Supuesto plegado (páginas 2 y siguientes): el título dice cómo verlo. */
.sim-case-hint { display: none; }
.sim-case:not([open]) .sim-case-hint { display: inline; }
.sim-case summary { cursor: pointer; }
.sim-booklet { background: var(--sim-surface); padding: 20px clamp(16px, 4vw, 40px) 28px; min-height: 60vh; scroll-margin-top: 70px; }
@media (min-width: 980px) { .sim-booklet { border: 1px solid var(--sim-line); border-radius: 16px; } }
/* Rejilla propia y no d-flex: el paginador oculta con [hidden], y d-flex (!important) lo anularía. */
.sim-q { display: grid; grid-template-columns: 2em minmax(0, 1fr); gap: .5rem; max-width: 72ch; scroll-margin-top: 80px; }
.sim-q-n { font-variant-numeric: tabular-nums; }
.sim-sheet { background: var(--sim-surface); display: flex; flex-direction: column; }
.sim-sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 2px solid var(--sim-omr); }
.sim-sheet-title { font-weight: 700; color: var(--sim-omr-ink); }
.sim-sheet-body { flex: 1; overflow-y: auto; padding: 12px 10px 16px; overscroll-behavior: contain; }
.sim-sheet-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 6px; border: 1.5px solid var(--sim-omr); border-radius: 8px; padding: 6px 2px; }
.sim-col { display: flex; flex-direction: column; min-width: 0; }
.sim-grp:nth-child(even) { background: var(--sim-omr-tint); }
.sim-row { display: flex; align-items: center; justify-content: center; }
/* Número de la pregunta: etiqueta rectangular sólida, como en la hoja óptica. */
.sim-row-n { font-family: var(--sim-mono); font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 600; color: #fff; background: var(--sim-omr); border-radius: 4px; min-width: 28px; padding: 2px 4px; margin-right: 4px; text-align: center; line-height: 1.3; }
.sim-bubble { width: 40px; height: 40px; border: 0; background: transparent; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.sim-bubble span { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--sim-omr); color: var(--sim-omr-ink); font-family: var(--sim-mono); font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; transition: background .12s, color .12s, border-color .12s; }
.sim-bubble.on span { background: var(--sim-dark-bg); border-color: var(--sim-dark); color: var(--sim-dark-ink); }
.sim-bubble:active span { transform: scale(.92); }
/* Con 4 opciones, burbujas algo más estrechas para que quepan las dos columnas. */
.sim-opts-4 .sim-bubble { width: 32px; }
.sim-opts-4 .sim-bubble span { width: 25px; height: 25px; font-size: 11px; }
.sim-opts-4 .sim-row-n { min-width: 26px; margin-right: 2px; }
.sim-sheet-foot { padding: 12px 16px 16px; border-top: 1px solid var(--sim-line); }
.sim-sheet-close { border: 0; background: transparent; min-height: 44px; padding: 0 4px; font-weight: 700; color: var(--sim-cta-hover); }
@media (max-width: 979px) {
  .sim-sheet { position: fixed; inset: 0; z-index: 60; transform: translateY(100%); transition: transform .25s ease; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .sim-sheet.open { transform: none; }
}
@media (min-width: 980px) {
  .sim-sheet { position: sticky; top: 76px; height: calc(100vh - 100px); border: 1px solid var(--sim-line); border-radius: 16px; overflow: hidden; }
  .sim-sheet-close, .sim-strip { display: none !important; }
}
.sim-strip { position: sticky; bottom: 0; z-index: 20; background: var(--sim-omr-tint); border-top: 2px solid var(--sim-omr); padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
/* La tira enseña las 10 de la página por columnas: 1–5 | 6–10 (las demás van con hidden). */
.sim-strip-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); grid-auto-flow: column; gap: 0 4px; }
.sim-strip-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sim-strip-all { margin-block: -5px; } /* «Ver todas» con su zona de toque entera sin dar más alto a la tira */
/* Botón que pliega y despliega la tira: del color de la hoja, para que no se confunda con «Entregar» (variables de botón de Bootstrap). */
.sim-btn-omr { --bs-btn-color: #fff; --bs-btn-bg: var(--sim-omr); --bs-btn-border-color: var(--sim-omr); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--sim-omr-ink); --bs-btn-hover-border-color: var(--sim-omr-ink); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--sim-omr-ink); --bs-btn-active-border-color: var(--sim-omr-ink); --bs-btn-focus-shadow-rgb: 194, 65, 12; font-weight: 700; }
.sim-dialog { max-width: 500px; width: calc(100% - 32px); background: var(--sim-surface); color: var(--sim-ink); } /* como el modal de confirmar del campus */
.sim-loading { max-width: 340px; } /* aviso de carga al cambiar de fase (simulacro.js) */
.sim-dialog::backdrop { background: rgba(10, 16, 24, .6); }

/* Examen entregado */
.sim-done-badge { margin-top: 18px; width: 52px; height: 52px; border-radius: 50%; background: #198754; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: 0 0 0 7px rgba(25, 135, 84, .15); animation: sim-done-pop .45s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes sim-done-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* Mientras una petición de htmx está en camino (acceso, inscripción, código, entregar…), el botón lleva el
   spinner de Bootstrap (sus mismos @keyframes) además de quedar desactivado; el paso nuevo entra con un fundido. */
.sim form.htmx-request [type=submit]::before, .sim .btn.htmx-request::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: .5em; vertical-align: -.125em; border: .15em solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spinner-border .75s linear infinite; }
#sim-acceso > *, #sim-activar > * { transition: opacity .2s ease-out; }
#sim-acceso > .htmx-added, #sim-activar > .htmx-added { opacity: 0; }

/* Resultado: tarjeta oscura (nota, aciertos/fallos/blancos con sus colores, nota de corte). */
.sim-big { font-weight: 300; font-variant-numeric: tabular-nums; font-size: clamp(56px, 10vw, 76px); line-height: 1; letter-spacing: -0.03em; }
.sim-big small { font-size: .3em; letter-spacing: 0; }
.sim-big-sm { font-size: clamp(48px, 8vw, 60px); }
.sim-big-sm small { font-size: .38em; }
.sim-dark-box { background: rgba(255, 255, 255, .08); color: var(--sim-dark-muted); }
.sim-good { color: #4ADE80; }
.sim-bad { color: #F87171; }
.sim-blank { color: #F5A877; }
.sim-dark-rule { border-top: 1px solid rgba(255, 255, 255, .14); }
.sim-score-bar { position: relative; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .14); }
.sim-score-fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--sim-cta); }
.sim-score-mark { position: absolute; top: -5px; width: 2px; height: 20px; margin-left: -1px; background: var(--sim-dark-ink); }
.sim-rank-pos { width: 2.2em; flex: none; font-variant-numeric: tabular-nums; }
/* Leyenda de la insignia de alumno junto al título del ranking: etiqueta pequeña en mayúscula. */
.sim-legend { font-size: .7rem; letter-spacing: .05em; line-height: 1; }
.sim-legend .bi { font-size: .8rem; line-height: 1; }
/* Insignia de alumno en cada fila: solo el icono, en azul. */
.sim-student { color: var(--sim-cta); line-height: 1; }
.sim-opt-icon { width: 16px; flex: none; text-align: center; }
.sim-dot { font-size: .55em; vertical-align: .25em; margin-right: .45em; }
.sim-dot-blank { color: #B45309; }
.sim-filter { --bs-btn-bg: var(--sim-surface); } /* filtros de la corrección: fondo blanco sobre el gris de la página (el activo sigue oscuro) */
/* Preguntas corregidas: sin recuadro propio, separadas por una línea (solo entre las visibles del filtro). */
.sim-review-list .sim-q-review { padding: 1.25rem 0; }
.sim-review-list [data-filter-empty] { padding: 1.25rem 0; }
.sim-review-list .sim-q-review:not([hidden]) ~ .sim-q-review:not([hidden]) { border-top: 1px solid var(--sim-line); }

/* Azul de la marca (#0071E3) también en los componentes de Bootstrap que traen su azul escrito
   (#0d6efd) en vez de leer --bs-primary: botones, casillas, progreso, pestañas, paginación y listas. Solo en las páginas
   del simulacro (body.sim): /simulacros usa simulacro.css con la plantilla de la web y su azul. */
body.sim .btn-primary { --bs-btn-bg: #0071E3; --bs-btn-border-color: #0071E3; --bs-btn-hover-bg: #0077ED; --bs-btn-hover-border-color: #0077ED; --bs-btn-active-bg: #0066CC; --bs-btn-active-border-color: #0066CC; --bs-btn-disabled-bg: #0071E3; --bs-btn-disabled-border-color: #0071E3; --bs-btn-focus-shadow-rgb: 0, 113, 227; }
body.sim .btn-outline-primary { --bs-btn-color: #0071E3; --bs-btn-border-color: #0071E3; --bs-btn-hover-bg: #0071E3; --bs-btn-hover-border-color: #0071E3; --bs-btn-active-bg: #0077ED; --bs-btn-active-border-color: #0077ED; --bs-btn-disabled-color: #0071E3; --bs-btn-disabled-border-color: #0071E3; --bs-btn-focus-shadow-rgb: 0, 113, 227; }
body.sim .form-check-input:checked { background-color: #0071E3; border-color: #0071E3; }
body.sim .progress, body.sim .progress-stacked { --bs-progress-bar-bg: #0071E3; }
body.sim .nav-pills { --bs-nav-pills-link-active-bg: #0071E3; }
body.sim .dropdown-menu { --bs-dropdown-link-active-bg: #0071E3; }
body.sim .pagination { --bs-pagination-active-bg: #0071E3; --bs-pagination-active-border-color: #0071E3; }
body.sim .list-group { --bs-list-group-active-bg: #0071E3; --bs-list-group-active-border-color: #0071E3; }