/* Cuestionario de autodiagnóstico STPS. Reutiliza .legal y las variables de style.css.
   Verde/amarillo/rojo solo comunican el estado del resultado. */

.cuest { max-width: 820px; }

.cuest__progreso { display: flex; align-items: center; gap: 14px; margin: 24px 0 8px; font-size: 0.88rem; color: var(--color-muted); position: sticky; top: var(--nav-height); background: var(--color-bg); padding: 10px 0; z-index: 5; }
.cuest__barra { flex: 1; height: 8px; background: var(--color-border); border-radius: 99px; overflow: hidden; }
.cuest__barra span { display: block; height: 100%; width: 0; background: var(--color-primary); transition: width .25s; }

.cuest__pregunta { margin: 0 0 16px; padding: 18px 20px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg); }
.cuest__pregunta.is-pendiente { border-color: var(--brand-red); }
.cuest__pregunta legend { padding: 0 6px; font-weight: 700; color: var(--color-text); font-size: 1rem; }
.cuest__pregunta p { margin: 4px 0 14px; }

.cuest__opciones { display: flex; flex-wrap: wrap; gap: 10px; }
.cuest__opciones label { cursor: pointer; position: relative; }
.cuest__opciones input { position: absolute; opacity: 0; }
.cuest__opciones span { display: inline-block; min-width: 88px; text-align: center; padding: 9px 18px; border: 1px solid var(--color-border); border-radius: 99px; font-weight: 600; color: var(--color-text); }
.cuest__opciones input:checked + span { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.cuest__opciones input:focus-visible + span { outline: 3px solid var(--color-primary-dark); outline-offset: 2px; }

/* .btn--ghost es para fondos oscuros y .legal a pinta los enlaces: se corrigen aquí. */
.cuest .btn--primary, .cuest .btn--primary:hover { color: #fff; }
.cuest .btn--ghost { background: transparent; border-color: var(--color-primary); color: var(--color-primary-dark); backdrop-filter: none; }
.cuest .btn--ghost:hover { background: var(--color-bg-muted); }

.cuest__falta { color: var(--brand-red); font-weight: 600; }
.cuest__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

.cuest__resultado { margin-top: 40px; padding: 28px; border: 1px solid var(--color-border); border-top-width: 6px; border-radius: var(--radius); background: var(--color-bg-muted); }
.cuest__resultado:focus { outline: none; }
.cuest__resultado--ok { border-top-color: var(--brand-green); }
.cuest__resultado--parcial { border-top-color: var(--brand-yellow); }
.cuest__resultado--riesgo { border-top-color: var(--brand-red); }
.cuest__puntaje { margin: 0; font-family: var(--font-heading); font-size: 2.4rem; font-weight: 800; color: var(--color-text); }
.cuest__aviso { margin: 12px 0 0; padding: 12px 16px; border-left: 4px solid var(--brand-red); background: var(--color-bg); border-radius: 8px; color: var(--color-text); }
.cuest__aviso--parcial { border-left-color: var(--brand-yellow); }
.cuest__aviso--ok { border-left-color: var(--brand-green); }
.cuest__tabla { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 0.95rem; }
.cuest__tabla th, .cuest__tabla td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--color-border); }
.cuest__brechas li { color: var(--color-text); }

@media print {
    .navbar, .footer, .cuest__progreso, #cuestForm, .legal__note, .cuest__acciones { display: none !important; }
    .cuest__resultado { border: 1px solid #999; }
}
@media (max-width: 600px) {
    .cuest__pregunta { padding: 14px; }
    .cuest__opciones span { min-width: 76px; padding: 9px 14px; }
}