/* Panel sin marco amarillo */
.panel {
  border: 0 !important;
  background: #ffffff !important;
  padding: 16px !important;
}
/* Inicio: botón compacto, claro y moderno */
.backHomeBtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  min-height: 42px;
  margin: 0 0 16px;
  padding: 10px 16px;
  background: #000000;
  color: #ffffff;
  border: 0;
  border-radius: 12px;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.backHomeBtn:hover {
  background: #fdc708;
  color: #000000;
  transform: none;
}
.backHomeBtn:active {
  transform: scale(0.98);
}
/* Selección de respuesta inequívoca */
.opt {
  position: relative;
  padding-left: 52px;
  min-height: 58px;
  transition:
    background 0.12s ease,
    border-color 0.12s ease;
}
.opt:before {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  border: 2px solid #b7b7b7;
  border-radius: 50%;
  background: #ffffff;
}
.opt.selected {
  background: #fff3b0 !important;
  border-color: #fdc708 !important;
  color: #000000 !important;
}
.opt.selected:before {
  border: 5px solid #000000;
  background: #fdc708;
}
.opt:hover:not(:disabled) {
  border-color: #fdc708;
  background: #fffbe8;
  transform: none;
}
.opt.correct {
  background: #e7f5ec !important;
  border-color: #118847 !important;
}
.opt.correct:before {
  border: 5px solid #118847;
  background: #ffffff;
}
.opt.wrong {
  background: #fdecec !important;
  border-color: #c62828 !important;
}
.opt.wrong:before {
  border: 5px solid #c62828;
  background: #ffffff;
}
#check:disabled {
  background: #e0e0e0;
  color: #8b8b8b;
  border-color: #e0e0e0;
}
.qimg {
  max-width: min(320px, 70%);
  height: auto;
  object-fit: contain;
  background: transparent;
}