/* PSA · cuestionarios de lead magnets (/test-agil/ y /que-certificacion/).
   Hoja aparte de psa.css para no chocar con otras ramas. Usa los tokens de psa.css. */

.quiz { background: var(--blanco); border: 1px solid var(--linea); border-top: 4px solid var(--marino); border-radius: var(--r-md); padding: clamp(1.2rem, 3.5vw, 2.2rem); max-width: 780px; margin: 0 auto; }
.quiz[hidden], .quiz-paso[hidden], .quiz-resultado[hidden] { display: none; }
.quiz-progreso { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.3rem; font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--grafito); }
.quiz-progreso progress { flex: 1; height: 8px; appearance: none; -webkit-appearance: none; border: 0; border-radius: 99px; background: var(--marino-suave); overflow: hidden; }
.quiz-progreso progress::-webkit-progress-bar { background: var(--marino-suave); border-radius: 99px; }
.quiz-progreso progress::-webkit-progress-value { background: var(--turquesa); border-radius: 99px; transition: width .25s ease; }
.quiz-progreso progress::-moz-progress-bar { background: var(--turquesa); border-radius: 99px; }

.quiz fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.quiz legend { font-family: var(--f-titulo); font-weight: 800; font-size: clamp(1.1rem, 2.4vw, 1.35rem); line-height: 1.3; color: var(--marino-profundo); margin: 0 0 1.1rem; padding: 0; }
.quiz legend:focus { outline: none; }
.opciones { display: grid; gap: .65rem; }
.opcion { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start; min-height: 52px; padding: .8rem 1rem; border: 1px solid #B9C1CC; border-radius: var(--r-sm); background: var(--blanco); cursor: pointer; line-height: 1.45; transition: border-color .15s ease, background-color .15s ease; }
.opcion:hover { border-color: var(--marino); background: var(--marino-suave); }
.opcion input { width: 20px; height: 20px; margin: .1rem 0 0; accent-color: var(--marino); }
.opcion:has(input:checked) { border-color: var(--marino); background: var(--marino-suave); box-shadow: inset 3px 0 0 var(--marino); }
.opcion:has(input:focus-visible) { outline: 3px solid var(--rojo); outline-offset: 2px; }
.opcion .letra { font-weight: 700; color: var(--marino); margin-right: .25rem; }

.quiz-nav { display: flex; justify-content: space-between; gap: .75rem; margin-top: 1.4rem; flex-wrap: wrap; }
.quiz-nav .btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.quiz-aviso { min-height: 1.4em; margin: .8rem 0 0; font-size: .88rem; color: var(--rojo-oscuro); }

/* Resultado */
.marcador { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; padding-bottom: 1.2rem; margin-bottom: 1.2rem; border-bottom: 1px dashed var(--linea); }
.marcador .cifra { font-family: var(--f-titulo); font-weight: 900; font-size: clamp(2.6rem, 8vw, 3.6rem); line-height: 1; color: var(--marino-profundo); font-variant-numeric: tabular-nums; }
.marcador .cifra small { font-size: .4em; color: var(--grafito); font-weight: 800; }
.marcador h3 { margin: 0 0 .2rem; font-size: clamp(1.3rem, 3vw, 1.7rem); }
.marcador p { margin: 0; color: var(--grafito); }
.nivel { display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: .25rem .6rem; border-radius: 3px; background: var(--turquesa-suave); color: var(--turquesa-oscuro); margin-bottom: .4rem; }
.quiz-resultado h4 { font-family: var(--f-titulo); font-weight: 800; font-size: 1.05rem; color: var(--marino-profundo); margin: 1.6rem 0 .8rem; }
.quiz-resultado .acciones { margin-top: 1.4rem; }

.revision { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.revision li { margin: 0; padding: 1rem 1.1rem; border: 1px solid var(--linea); border-left-width: 4px; border-radius: var(--r-sm); background: var(--papel); font-size: .95rem; }
.revision li.ok { border-left-color: var(--turquesa); }
.revision li.mal { border-left-color: var(--rojo-accion); }
.revision .q { font-weight: 600; color: var(--marino-profundo); margin-bottom: .4rem; }
.revision .r { margin-bottom: .4rem; }
.revision .estado { font-weight: 700; }
.revision li.ok .estado { color: var(--turquesa-oscuro); }
.revision li.mal .estado { color: var(--rojo-oscuro); }
.revision .exp { color: var(--grafito); margin: 0; }

/* Recomendación de certificación */
.reco { border: 1px solid var(--marino); border-top: 4px solid var(--rojo-accion); border-radius: var(--r-sm); padding: 1.2rem 1.3rem; background: var(--blanco); }
.reco h3 { margin-bottom: .3rem; }
.reco ul { margin: .6rem 0 0; }
.reco-alt { margin-top: 1rem; padding: 1rem 1.2rem; border: 1px dashed var(--linea); border-radius: var(--r-sm); font-size: .95rem; color: var(--grafito); }
.reco-alt strong { color: var(--marino-profundo); }
.dato-oficial { font-size: .82rem; color: var(--grafito); margin-top: .8rem; }

.formulario .aviso-form.visible { margin-top: 0; margin-bottom: .9rem; }
.atribucion { font-size: .82rem; color: var(--grafito); }
.atribucion a { color: var(--marino); }

@media (max-width: 520px) {
  .quiz-nav .btn { flex: 1 1 auto; }
  .opcion { padding: .75rem .85rem; }
}