/**
 * EXENIS — Asistente de cualificación DEUDAFIX (form CF7 141).
 * Cambio: filtro-cualificacion-deudafix (OpenSpec). S1 — G0 2026-08-07.
 *
 * Progresivo: sin JS (sin clase .exenis-wizard-js) el formulario se muestra
 * completo y la barrera real es la guarda de servidor del MU plugin.
 * Con JS, los pasos se muestran de uno en uno: el superado se pliega con
 * resumen y «Tus datos» solo aparece al final. Para volver a una sección se
 * pulsa su título (botón creado por exenis-deudafix.js); no hay textos
 * «volver atrás».
 */

/* Estado por defecto (sin JS): resumen oculto, todo visible. */
.exenis-paso-resumen {
    display: none;
}

/* ── Con JS activo (clase puesta por exenis-deudafix.js) ── */
.exenis-wizard-js .exenis-paso.is-hidden,
.exenis-wizard-js .exenis-datos.is-hidden {
    display: none;
}

/* Paso superado: cuerpo plegado, resumen visible. */
.exenis-wizard-js .exenis-paso.is-done .exenis-paso-body {
    display: none;
}
.exenis-wizard-js .exenis-paso.is-done .exenis-paso-resumen {
    display: block;
}

/* Paso activo: acento visual para orientar al usuario. */
.exenis-wizard-js .exenis-paso.is-active .exenis-filtro {
    border-color: #168B83;
    box-shadow: 0 0 0 1px rgba(22, 139, 131, 0.18);
}

/* Estructura del paso. */
.exenis-wizard-js .exenis-paso {
    margin-bottom: 14px;
}
.exenis-wizard-js .exenis-paso-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    margin-bottom: 4px;
}
.exenis-wizard-js .exenis-paso-titulo {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #173B57;
}
.exenis-wizard-js .exenis-paso-resumen {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #168B83;
}

/* Título como botón: pulsa el título de una sección superada para reabrirla.
   El botón se crea por JS (mejora progresiva); sin JS el título es un h3 plano. */
.exenis-wizard-js .exenis-paso-titulo-btn {
    border: 0;
    background: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}
.exenis-wizard-js .exenis-paso-titulo-btn:hover,
.exenis-wizard-js .exenis-paso-titulo-btn:focus-visible {
    color: #0f5f59;
    outline: 2px solid #168B83;
    outline-offset: 2px;
}
/* El paso activo ya está abierto: su título no ofrece acción. */
.exenis-wizard-js .exenis-paso.is-active .exenis-paso-titulo-btn {
    cursor: default;
}

/* ── Caja de filtro (fieldset) ──
   La pregunta (legend) se muestra como una "pill" centrada en la línea
   superior del borde (el fondo blanco tapa la raya, el texto NO se corta).
   Al usar position:absolute, el legend SALE del flujo y NO roba ancho a las
   opciones: estas ocupan el 100% del ancho desde el padding-top, sin saltos
   de línea forzados (defecto que el usuario reportó con float:left). */
.exenis-filtro {
    position: relative;
    border: 1px solid #d8e2ea;
    border-radius: 10px;
    padding: 2.4rem 18px 16px;
    margin: 0 0 14px;
    background: #fbfdfe;
}
.exenis-filtro > legend {
    position: absolute;
    top: -0.7em;
    left: 14px;
    display: block;
    width: auto;
    font-weight: 700;
    font-size: 1rem;
    color: #173B57;
    padding: 5px 14px;
    background: #ffffff;
    border: 1px solid #d8e2ea;
    border-radius: 999px;
    line-height: 1.4;
}

/* Opciones (radios y select) como tarjetas atractivas y accesibles.
   CF7 añade <br> entre los .wpcf7-list-item al aplicar wpautop() sobre el
   template del formulario. Dado que cada opción es display:block (tarjeta),
   los <br> son redundantes y generan separación visual extra. Se ocultan
   solo dentro del fieldset del filtro para no afectar al resto del form. */
.exenis-filtro br {
    display: none;
}
.exenis-filtro .wpcf7-radio,
.exenis-filtro .wpcf7-select {
    display: block;
}
.exenis-filtro .wpcf7-list-item {
    display: block;
    margin: 10px 0 0;
}
.exenis-filtro .wpcf7-list-item label {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    margin: 0;
    padding: 10px 14px;
    border: 1px solid #d8e2ea;
    border-radius: 8px;
    background: #ffffff;
    cursor: pointer;
    font-size: 0.98rem;
    color: #1f3346;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.exenis-filtro .wpcf7-list-item label:hover {
    border-color: #168B83;
    background: #f1faf8;
}
.exenis-filtro .wpcf7-list-item input[type="radio"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #168B83;
    flex: 0 0 auto;
}
/* Opción marcada: resalta la tarjeta. */
.exenis-filtro .wpcf7-list-item input[type="radio"]:checked + .wpcf7-list-item-label {
    font-weight: 600;
    color: #0f5f59;
}
.exenis-filtro .wpcf7-list-item label:has(input[type="radio"]:checked) {
    border-color: #168B83;
    background: #eaf7f4;
    box-shadow: 0 0 0 1px rgba(22, 139, 131, 0.35);
}
.exenis-filtro .wpcf7-list-item input[type="radio"]:focus-visible + .wpcf7-list-item-label {
    outline: 2px solid #168B83;
    outline-offset: 2px;
}

/* Select (acreedores) como tarjeta coherente con los radios. */
.exenis-filtro select.wpcf7-select,
.exenis-filtro select.wpcf7-form-control {
    width: 100%;
    min-height: 48px;
    margin-top: 10px;
    padding: 10px 14px;
    border: 1px solid #d8e2ea;
    border-radius: 8px;
    background: #ffffff;
    font-size: 0.98rem;
    color: #1f3346;
    cursor: pointer;
    box-sizing: border-box;
}
.exenis-filtro select.wpcf7-select:focus-visible,
.exenis-filtro select.wpcf7-form-control:focus-visible {
    outline: 2px solid #168B83;
    outline-offset: 2px;
    border-color: #168B83;
}

/* Mensajes de salida: solo con clase is-visible (JS) o CF7 (fallback). */
.exenis-msg {
    display: none;
    margin: 0.65rem 0 0;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-size: 0.925rem;
    line-height: 1.5;
    background: #fff7ed;
    border-left: 4px solid #f59e0b;
    color: #7c2d12;
}
.exenis-msg.is-visible {
    display: block;
}
.exenis-msg a {
    font-weight: 600;
    text-decoration: underline;
}

/* Datos personales. */
.exenis-datos {
    border-top: 2px solid #eef2f6;
    margin-top: 6px;
    padding-top: 16px;
}