#hmxtest-app, #hmxtest-app *{box-sizing:border-box}
.hmxtest-app{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#0f172a}
.hmxtest-loading{padding:30px;background:#fff;border-radius:18px;text-align:center;font-weight:800}
.hmxtest-box{border-radius:18px;padding:18px;margin:18px 0;border:1px solid #e5e7eb;background:#fff}
.hmxtest-box strong{display:block;font-size:20px;margin-bottom:6px}
.hmxtest-box p{margin:0;color:#475569}
.hmxtest-box-warning{background:#fffbeb;border-color:#fde68a}
.hmxtest-box-danger{background:#fef2f2;border-color:#fecaca}

/* CONTENEDOR PRINCIPAL */
.hmxtest-deck{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:18px;
  border-radius:28px;
  background:linear-gradient(135deg,#0f172a,#1e293b 55%,#334155);
  box-shadow:0 20px 60px rgba(2,6,23,.28);
}

/* ENCABEZADO */
.hmxtest-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  color:#fff;
  margin-bottom:14px;
  flex-wrap:wrap;
}
.hmxtest-logo{
  width:48px;
  height:48px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#2563eb,#1d4ed8);
  float:left;
  margin-right:12px;
  box-shadow:0 12px 28px rgba(37,99,235,.35);
}
.hmxtest-header h2{margin:0;font-size:28px;line-height:1.1;color:#fff}
.hmxtest-header p{margin:3px 0 0;color:rgba(255,255,255,.78)}
.hmxtest-topstats{display:flex;gap:8px;flex-wrap:wrap}
.hmxtest-topstats span{
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  padding:9px 12px;
  border-radius:999px;
  font-weight:900;
  color:#fff;
}
.hmxtest-expire{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  border-radius:16px;
  padding:10px 14px;
  color:#fff;
  margin-bottom:14px;
}

/* PORTADA */
.hmxtest-cover{
  background:#fff;
  border-radius:24px;
  padding:56px 28px;
  text-align:center;
  min-height:430px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 20% 20%,rgba(37,99,235,.12),transparent 30%),
    radial-gradient(circle at 80% 80%,rgba(14,165,233,.10),transparent 30%),
    #fff;
}
.hmxtest-cover h1{
  font-size:clamp(40px,6vw,76px);
  line-height:.95;
  margin:0 0 12px;
  letter-spacing:-2px;
  color:#0f172a;
}
.hmxtest-cover p{font-size:18px;color:#475569;max-width:760px;line-height:1.55}
.hmxtest-pills{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin:14px 0 24px}
.hmxtest-pills span{
  background:#eff6ff;
  border:1px solid #bfdbfe;
  border-radius:999px;
  padding:9px 12px;
  font-weight:900;
  color:#1e40af;
}

/* SLIDE */
.hmxtest-slide{
  background:#fff;
  border-radius:24px;
  overflow:hidden;
  display:grid;
  grid-template-columns:340px 1fr;
  min-height:610px;
  animation:hmxtestSlide .32s ease;
}
@keyframes hmxtestSlide{from{opacity:0;transform:translateX(25px) scale(.98)}to{opacity:1;transform:translateX(0) scale(1)}}

/* PANEL IZQUIERDO */
.hmxtest-side{
  padding:28px;
  color:#fff;
  background:linear-gradient(145deg,#1e40af,#0f172a 70%);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  position:relative;
  overflow:hidden;
}
.hmxtest-side:before{
  content:"";
  position:absolute;
  width:240px;
  height:240px;
  right:-80px;
  top:-80px;
  border-radius:50%;
  background:rgba(255,255,255,.12);
}
.hmxtest-badge{
  display:inline-flex;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
  padding:8px 12px;
  font-weight:950;
  position:relative;
  z-index:1;
  color:#fff;
}
.hmxtest-qid{
  font-size:76px;
  line-height:.9;
  font-weight:1000;
  letter-spacing:-5px;
  margin:24px 0 10px;
  position:relative;
  z-index:1;
  color:#fff;
}
.hmxtest-topic{font-size:22px;font-weight:1000;position:relative;z-index:1;color:#fff}
.hmxtest-type{font-weight:800;color:rgba(255,255,255,.82);position:relative;z-index:1}
.hmxtest-sidegrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:relative;z-index:1}
.hmxtest-sidegrid div{
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.22);
  border-radius:16px;
  padding:13px;
}
.hmxtest-sidegrid b{display:block;font-size:26px;color:#fff}
.hmxtest-sidegrid small{font-weight:800;color:rgba(255,255,255,.80)}

/* PANEL DERECHO */
.hmxtest-main{padding:30px;display:flex;flex-direction:column;min-width:0;background:#ffffff}
.hmxtest-progress{height:12px;background:#e2e8f0;border-radius:999px;overflow:hidden;margin-bottom:24px}
.hmxtest-progress span{display:block;height:100%;background:linear-gradient(90deg,#2563eb,#06b6d4,#22c55e)}
.hmxtest-main h3{
  font-size:clamp(25px,3vw,42px);
  line-height:1.1;
  letter-spacing:-1px;
  margin:0 0 16px;
  color:#020617;
}
.hmxtest-help{color:#475569;font-weight:750;margin:-6px 0 16px}
.hmxtest-answer-area{margin-top:auto}

/* OPCIONES */
.hmxtest-options{display:grid;gap:12px}
.hmxtest-option{
  width:100%;
  text-align:left;
  border:2px solid #cbd5e1;
  background:#f8fafc;
  border-radius:18px;
  padding:16px 18px;
  font-weight:900;
  cursor:pointer;
  display:flex;
  gap:12px;
  align-items:flex-start;
  transition:.18s ease;
  color:#0f172a;
  box-shadow:0 1px 0 rgba(15,23,42,.04);
}
.hmxtest-option:hover{
  border-color:#2563eb;
  background:#eff6ff;
  transform:translateX(4px);
  box-shadow:0 12px 24px rgba(37,99,235,.12);
}
.hmxtest-option span{
  width:34px;
  height:34px;
  border-radius:12px;
  background:#e0e7ff;
  color:#1e3a8a;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  font-weight:1000;
}
.hmxtest-option.selected{
  background:#dbeafe!important;
  border-color:#2563eb!important;
  color:#1e3a8a!important;
  box-shadow:0 0 0 4px rgba(37,99,235,.13),0 12px 24px rgba(37,99,235,.16);
}
.hmxtest-option.selected span{
  background:#2563eb;
  color:#fff;
}
.hmxtest-option.correct{
  background:#dcfce7!important;
  border-color:#16a34a!important;
  color:#14532d!important;
  box-shadow:0 0 0 4px rgba(22,163,74,.12);
}
.hmxtest-option.correct span{
  background:#16a34a;
  color:#fff;
}
.hmxtest-option.wrong{
  background:#fee2e2!important;
  border-color:#dc2626!important;
  color:#7f1d1d!important;
  box-shadow:0 0 0 4px rgba(220,38,38,.12);
}
.hmxtest-option.wrong span{
  background:#dc2626;
  color:#fff;
}
.hmxtest-option.locked{pointer-events:none}

/* COMPLETAR */
.hmxtest-fill{display:grid;gap:10px}
.hmxtest-fill input{
  width:100%;
  border:2px solid #cbd5e1;
  border-radius:20px;
  padding:17px;
  font-size:20px;
  font-weight:900;
  outline:none;
  color:#0f172a;
  background:#fff;
}
.hmxtest-fill input:focus{
  border-color:#2563eb;
  box-shadow:0 0 0 5px rgba(37,99,235,.14);
}
.hmxtest-fill small{color:#475569;font-weight:800}

/* RELACIONAR */
.hmxtest-match{display:grid;gap:10px;max-height:370px;overflow:auto;padding-right:4px}
.hmxtest-match-row{
  display:grid;
  grid-template-columns:155px 1fr;
  gap:10px;
  align-items:center;
  background:#f8fafc;
  border:1px solid #cbd5e1;
  border-radius:16px;
  padding:11px;
}
.hmxtest-match-row strong{color:#0f172a}
.hmxtest-match-row select{
  width:100%;
  border:1px solid #94a3b8;
  border-radius:13px;
  padding:11px;
  font-weight:800;
  background:#fff;
  color:#0f172a;
}

/* FEEDBACK */
.hmxtest-feedback{border-radius:16px;padding:14px;margin-top:16px;font-weight:900}
.hmxtest-feedback.ok{
  background:#dcfce7;
  border:1px solid #86efac;
  color:#14532d;
}
.hmxtest-feedback.bad{
  background:#fee2e2;
  border:1px solid #fecaca;
  color:#7f1d1d;
}

/* BOTONES */
.hmxtest-nav{display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-top:20px}
.hmxtest-btn{
  border:0;
  border-radius:15px;
  padding:12px 16px;
  font-weight:950;
  cursor:pointer;
  transition:.18s ease;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.hmxtest-btn:hover{transform:translateY(-2px)}
.hmxtest-btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.hmxtest-btn-primary{
  background:linear-gradient(135deg,#2563eb,#1d4ed8);
  color:#fff;
  box-shadow:0 12px 22px rgba(37,99,235,.24);
}
.hmxtest-btn-soft{background:#e2e8f0;color:#0f172a}
.hmxtest-btn-dark{background:#0f172a;color:#fff}

/* PUNTOS DE NAVEGACION */
.hmxtest-dots{display:flex;gap:5px;margin-top:18px;overflow:auto;padding-bottom:4px}
.hmxtest-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:0;
  background:#cbd5e1;
  padding:0;
  flex:0 0 auto;
  cursor:pointer;
}
.hmxtest-dot.active{width:28px;background:#2563eb}
.hmxtest-dot.ok{background:#16a34a}
.hmxtest-dot.bad{background:#dc2626}

/* MODAL RESULTADO */
.hmxtest-modal{
  position:fixed;
  inset:0;
  background:rgba(2,6,23,.72);
  backdrop-filter:blur(8px);
  z-index:99999;
  display:grid;
  place-items:center;
  padding:20px;
}
.hmxtest-modal-card{
  background:#fff;
  border-radius:28px;
  padding:30px;
  text-align:center;
  box-shadow:0 24px 70px rgba(0,0,0,.35);
  max-width:620px;
  width:100%;
}
.hmxtest-modal-card h2{margin:0;color:#0f172a}
.hmxtest-score{font-size:80px;line-height:1;font-weight:1000;color:#2563eb;margin:10px 0}
.hmxtest-toast{
  position:fixed;
  left:50%;
  bottom:22px;
  transform:translateX(-50%) translateY(20px);
  background:#0f172a;
  color:#fff;
  padding:12px 16px;
  border-radius:999px;
  font-weight:950;
  opacity:0;
  transition:.25s ease;
  z-index:100000;
  text-align:center;
  box-shadow:0 12px 30px rgba(0,0,0,.25);
}
.hmxtest-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media(max-width:900px){
  .hmxtest-slide{grid-template-columns:1fr}
  .hmxtest-side{min-height:230px}
  .hmxtest-sidegrid{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:560px){
  .hmxtest-deck{padding:10px;border-radius:18px}
  .hmxtest-header h2{font-size:22px}
  .hmxtest-slide{border-radius:18px}
  .hmxtest-main{padding:18px}
  .hmxtest-side{padding:20px}
  .hmxtest-sidegrid{grid-template-columns:1fr 1fr}
  .hmxtest-qid{font-size:56px}
  .hmxtest-match-row{grid-template-columns:1fr}
  .hmxtest-nav .hmxtest-btn{flex:1}
  .hmxtest-main h3{font-size:27px}
  .hmxtest-option{padding:14px}
}


/* ==========================================================
   CST FIX 1.0.2 - CONTRASTE FORZADO PARA OPCIONES
   Estas reglas usan alta especificidad para evitar estilos del tema.
   ========================================================== */

#hmxtest-app .hmxtest-answer-area .hmxtest-options .hmxtest-option,
#hmxtest-app button.hmxtest-option,
#hmxtest-app .hmxtest-option {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 2px solid #cbd5e1 !important;
  box-shadow: 0 2px 8px rgba(15,23,42,.06) !important;
  text-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
}

#hmxtest-app .hmxtest-answer-area .hmxtest-options .hmxtest-option span,
#hmxtest-app button.hmxtest-option span,
#hmxtest-app .hmxtest-option span {
  background: #e0e7ff !important;
  color: #1e3a8a !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

#hmxtest-app .hmxtest-answer-area .hmxtest-options .hmxtest-option:hover,
#hmxtest-app button.hmxtest-option:hover,
#hmxtest-app .hmxtest-option:hover {
  background: #eff6ff !important;
  color: #0f172a !important;
  border-color: #2563eb !important;
}

/* Opción seleccionada por el alumno */
#hmxtest-app .hmxtest-answer-area .hmxtest-options .hmxtest-option.selected,
#hmxtest-app button.hmxtest-option.selected,
#hmxtest-app .hmxtest-option.selected {
  background: #1d4ed8 !important;
  color: #ffffff !important;
  border-color: #1e40af !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,.20), 0 14px 30px rgba(37,99,235,.25) !important;
}

#hmxtest-app .hmxtest-answer-area .hmxtest-options .hmxtest-option.selected span,
#hmxtest-app button.hmxtest-option.selected span,
#hmxtest-app .hmxtest-option.selected span {
  background: #ffffff !important;
  color: #1d4ed8 !important;
}

/* Correcta */
#hmxtest-app .hmxtest-answer-area .hmxtest-options .hmxtest-option.correct,
#hmxtest-app button.hmxtest-option.correct,
#hmxtest-app .hmxtest-option.correct {
  background: #16a34a !important;
  color: #ffffff !important;
  border-color: #15803d !important;
  box-shadow: 0 0 0 4px rgba(22,163,74,.20), 0 14px 30px rgba(22,163,74,.22) !important;
}

#hmxtest-app .hmxtest-answer-area .hmxtest-options .hmxtest-option.correct span,
#hmxtest-app button.hmxtest-option.correct span,
#hmxtest-app .hmxtest-option.correct span {
  background: #ffffff !important;
  color: #166534 !important;
}

/* Incorrecta seleccionada */
#hmxtest-app .hmxtest-answer-area .hmxtest-options .hmxtest-option.wrong,
#hmxtest-app button.hmxtest-option.wrong,
#hmxtest-app .hmxtest-option.wrong {
  background: #dc2626 !important;
  color: #ffffff !important;
  border-color: #991b1b !important;
  box-shadow: 0 0 0 4px rgba(220,38,38,.20), 0 14px 30px rgba(220,38,38,.22) !important;
}

#hmxtest-app .hmxtest-answer-area .hmxtest-options .hmxtest-option.wrong span,
#hmxtest-app button.hmxtest-option.wrong span,
#hmxtest-app .hmxtest-option.wrong span {
  background: #ffffff !important;
  color: #991b1b !important;
}

/* Caso especial: si una respuesta es correcta y fue seleccionada, gana el verde */
#hmxtest-app .hmxtest-answer-area .hmxtest-options .hmxtest-option.selected.correct,
#hmxtest-app button.hmxtest-option.selected.correct,
#hmxtest-app .hmxtest-option.selected.correct {
  background: #16a34a !important;
  color: #ffffff !important;
  border-color: #15803d !important;
}

/* Caso especial: si fue seleccionada y equivocada, gana el rojo */
#hmxtest-app .hmxtest-answer-area .hmxtest-options .hmxtest-option.selected.wrong,
#hmxtest-app button.hmxtest-option.selected.wrong,
#hmxtest-app .hmxtest-option.selected.wrong {
  background: #dc2626 !important;
  color: #ffffff !important;
  border-color: #991b1b !important;
}

/* Mejor contraste del texto de feedback */
#hmxtest-app .hmxtest-feedback.bad {
  background: #fee2e2 !important;
  color: #7f1d1d !important;
  border: 1px solid #fca5a5 !important;
}

#hmxtest-app .hmxtest-feedback.ok {
  background: #dcfce7 !important;
  color: #14532d !important;
  border: 1px solid #86efac !important;
}

/* Quitar totalmente color rosa en botones internos del plugin */
#hmxtest-app .hmxtest-btn-primary {
  background: linear-gradient(135deg,#2563eb,#1e40af) !important;
  color: #ffffff !important;
}

#hmxtest-app .hmxtest-dot {
  background: #cbd5e1 !important;
}

#hmxtest-app .hmxtest-dot.active {
  background: #2563eb !important;
}

#hmxtest-app .hmxtest-dot.ok {
  background: #16a34a !important;
}

#hmxtest-app .hmxtest-dot.bad {
  background: #dc2626 !important;
}

/* ACCESO / LOGIN */
.test-login-box{max-width:680px;margin:28px auto;padding:42px 26px;text-align:center;background:#fff;border:1px solid #dbeafe;border-radius:24px;box-shadow:0 18px 45px rgba(15,23,42,.12);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.test-login-icon{width:68px;height:68px;margin:0 auto 14px;border-radius:22px;display:grid;place-items:center;font-size:30px;background:#eff6ff}
.test-login-box h2{margin:0 0 8px;color:#0f172a;font-size:30px}
.test-login-box p{margin:0 0 22px;color:#475569;font-size:16px}
.test-login-btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 20px;border-radius:14px;background:linear-gradient(135deg,#2563eb,#1e40af);color:#fff!important;text-decoration:none!important;font-weight:900;box-shadow:0 12px 26px rgba(37,99,235,.22)}
.test-login-btn:hover{transform:translateY(-1px);color:#fff!important}