/* ----------- Sección principal / Examen ----------- */
.seccion-seleccion {
  background-color: #ffffff;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.opcion.btn-primary {
  background-color: #0d6efd;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 12px 18px;
  width: 100%;
  margin-bottom: 12px;
  font-size: 1rem;
  box-shadow: 0 4px 10px rgba(13, 110, 253, 0.25);
  transition: all 0.3s ease;
  text-align: left;
}

.opcion.btn-primary:hover {
  background-color: #0a58ca;
  box-shadow: 0 6px 14px rgba(10, 88, 202, 0.3);
  transform: translateY(-1px);
}

.opcion.btn-success {
  background-color: #198754 !important;
}

.opcion.btn-danger {
  background-color: #dc3545 !important;
}

/* Respuesta marcada con la corrección instantánea apagada: se ve cuál eligió
   el estudiante, pero sin adelantar si acertó (eso se descubre al terminar).
   Por eso no lleva ni verde ni rojo, solo un tono oscuro y una marca de
   "elegida" al final del renglón.

   El texto va en blanco fijo (no en la variable --c-text del subtema): el fondo
   oscuro es el mismo en modo claro y oscuro, y en modo claro --c-text es un
   gris casi negro pensado para fondos claros — sin este color explícito, el
   texto quedaba oscuro sobre oscuro y no se leía. */
.opcion.opcion-elegida {
  background-color: #334155 !important;
  color: #f8fafc !important;
  box-shadow: inset 0 0 0 2px #94a3b8;
  opacity: 1;
}

/* En modo oscuro esa misma caja oscura (#334155) es casi el color del borde y
   de las tarjetas del subtema oscuro (--c-surface/--c-border): la opción elegida
   se perdía contra el fondo. Aquí se invierte a una caja clara con texto
   oscuro, bien distinguible del resto de opciones (que siguen oscuras). */
body.dark-mode .opcion.opcion-elegida {
  background-color: #94a3b8 !important;
  color: #0f172a !important;
  box-shadow: inset 0 0 0 2px #e2e8f0;
}

.opcion.opcion-elegida::after {
  content: "\f00c";              /* check de Font Awesome */
  font-family: "Font Awesome 6 Free", "Font Awesome 7 Free";
  font-weight: 900;
  float: right;
  margin-left: 0.5rem;
}

#contadorPreguntas,
#contadorResultados {
  font-size: 1rem;
}

/* ----------- Barra de progreso del examen ----------- */
.barra-progreso-examen .progress-bar {
  font-weight: 600;
  transition: width 0.3s ease;
}

body.dark-mode .progress {
  background-color: #2c2c2c;
}

/* ----------- Temporizador del examen (reloj digital, ver .reloj-digital en tema.css) ----------- */
#temporizadorExamen {
  font-size: 1.4rem;
}

#temporizadorExamen.temporizador-urgente {
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.6);
  text-shadow: 0 0 6px rgba(248, 113, 113, 0.8);
  animation: temporizadorParpadeo 1s ease-in-out infinite;
}

@keyframes temporizadorParpadeo {
  0%, 100% { box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.6), 0 0 0 rgba(248, 113, 113, 0); }
  50% { box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.6), 0 0 10px rgba(248, 113, 113, 0.9); }
}

/* ----------- Modal advertencia ----------- */
#modalAdvertencia .modal-header {
  background-color: #ffe58f;
  color: #212529;
}

#modalAdvertencia .modal-footer {
  border-top: none;
}

#modalAdvertencia .modal-content {
  background-color: #fefefe;
}

body.dark-mode .modal-body,
body.dark-mode .modal-footer {
  background-color: #1a1a1a;
  color: #ffffff;
}

/* ----------- Modo oscuro específico ----------- */
body.dark-mode {
  background-color: #121212;
  color: #ffffff;
}

body.dark-mode .card,
body.dark-mode .seccion-seleccion,
body.dark-mode .modal-content {
  background-color: #1e1e1e;
  border-color: #2c2c2c;
  color: #ffffff;
}

body.dark-mode .card-header,
body.dark-mode .modal-header {
  background-color: transparent;
  color: #ffffff;
}

body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
  background-color: #222;
  color: #ffffff;
  border: 1px solid #444;
}

body.dark-mode .form-select option {
  background-color: #222;
  color: #ffffff;
}

body.dark-mode .btn-primary {
  background-color: #2e6cc2;
  border-color: #2e6cc2;
  color: #ffffff;
}

body.dark-mode .btn-primary:hover {
  background-color: #2359a1;
}

body.dark-mode .btn-success {
  background-color: #2e7d32;
}

body.dark-mode .btn-danger {
  background-color: #a83636;
}

body.dark-mode .btn-close {
  filter: invert(100%);
}

body.dark-mode .text-muted,
body.dark-mode .text-info {
  color: #ffffff !important;
}

/* ----------- Botón azul colapsable ----------- */
#toggleSeccionBtn.toggle-azul {
  background-color: #0d6efd;
  border-color: #0d6efd;
  color: #ffffff;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

#toggleSeccionBtn.toggle-azul:hover {
  background-color: #0a58ca;
  border-color: #0a58ca;
  transform: scale(1.05);
}

body.dark-mode #toggleSeccionBtn.toggle-azul {
  background-color: #2359a1;
  border-color: #2359a1;
}

#toggleSeccionIcon {
  transition: transform 0.3s ease;
}

/* ----------- Animaciones visuales ----------- */
.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ----------- Pasos del formulario de examen -----------
   Cada campo aparece cuando el anterior está resuelto; la barra dice cuánto
   lleva y cuánto le falta. El color de la barra es el único del sistema
   (se define en vistas/plantilla.php desde "Colores del sistema"). */
.pasos-examen .progress { background-color: #e9ecef; }

/* Numerito redondo delante de cada etiqueta de paso. */
.paso-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  margin-right: 0.35rem;
  border-radius: 50%;
  background: var(--c-progreso, #7c3aed);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
}

body.dark-mode .pasos-examen .progress { background-color: #2c2c2c; }