/* =============================================================
   OPSFET Flujo · Paso info + pregunta sí/no + extras + celebración
   - Info: bloques "Esto es lo que vamos a necesitar" (datos a aportar).
   - Pregunta: ¿Tienes la documentación lista? (sí / me falta).
   - Extras: checkboxes marcables con precio.
   - Celebración: halo verde al entrar al resumen.
   ============================================================= */

/* ---------- Paso info (documentación + datos) ---------- */
.opsfet-flujo-info-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    max-width: 760px !important;
    margin: 0 auto 36px !important;
    text-align: left !important;
}

@media (min-width: 720px) {
    .opsfet-flujo-info-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

.opsfet-flujo-info-bloque {
    background: var(--opsfet-blanco) !important;
    border: 1px solid var(--opsfet-gris-borde) !important;
    border-radius: var(--opsfet-radius) !important;
    padding: 24px 26px !important;
    box-shadow: var(--opsfet-sombra-suave) !important;
}

.opsfet-flujo-info-cabecera {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid var(--opsfet-gris-borde) !important;
}

.opsfet-flujo-info-icono {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background: var(--opsfet-verde-claro) !important;
    color: var(--opsfet-verde-texto) !important;
    flex-shrink: 0 !important;
}

.opsfet-flujo-info-titulo {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--opsfet-texto) !important;
    letter-spacing: -0.01em !important;
}

.opsfet-flujo-info-lista {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.opsfet-flujo-info-lista li {
    position: relative !important;
    padding-left: 26px !important;
    font-size: 15px !important;
    color: var(--opsfet-texto) !important;
    line-height: 1.5 !important;
}

.opsfet-flujo-info-lista li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 9px;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50%;
    background: var(--opsfet-verde);
}

/* Sub-bloques dentro de un bloque info (ej. "Solicitante" vs "Empleador"
   dentro de "Datos del solicitante y empleador"). El primero no necesita
   separación porque va pegado a la cabecera del bloque. */
.opsfet-flujo-info-sub-bloque {
    margin-top: 22px !important;
    padding-top: 18px !important;
    border-top: 1px dashed var(--opsfet-gris-borde) !important;
}

.opsfet-flujo-info-sub-bloque:first-of-type {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
}

.opsfet-flujo-info-sub-titulo {
    margin: 0 0 12px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--opsfet-texto) !important;
    letter-spacing: -0.005em !important;
}

/* Valor "ya conocido" que se inyecta al lado de un item (ej. "Duración · Temporal"). */
.opsfet-flujo-info-valor-conocido {
    color: var(--opsfet-verde-texto) !important;
    font-weight: 600 !important;
}

/* Estado vacío del paso info: lo enseña el JS cuando para la rama elegida
   no hay nada que pedir (ni datos ni documentos). Aparece centrado, con
   tono positivo (verde claro + check) para que no parezca un fallo. */
.opsfet-flujo-info-vacio {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 32px 36px !important;
    background: var(--opsfet-verde-claro) !important;
    border: 1px dashed var(--opsfet-verde) !important;
    border-radius: var(--opsfet-radius) !important;
    max-width: 560px !important;
    margin: 16px auto 44px !important;
    text-align: center !important;
}

.opsfet-flujo-info-vacio-icono {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: var(--opsfet-verde) !important;
    color: var(--opsfet-texto) !important;
    box-shadow: 0 8px 20px rgba(163, 201, 63, .38);
    flex-shrink: 0;
}

.opsfet-flujo-info-vacio-texto {
    color: var(--opsfet-texto) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    max-width: 440px !important;
}

/* ---------- Pregunta sí / no (opciones grandes con icono) ---------- */
.opsfet-flujo-opciones--si-no {
    grid-template-columns: 1fr !important;
    max-width: 720px !important;
}

@media (min-width: 720px) {
    .opsfet-flujo-opciones--si-no {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

.opsfet-flujo-opcion--si-no {
    text-align: center !important;
    align-items: center !important;
    padding: 32px 28px !important;
    min-height: 200px !important;
}

.opsfet-flujo-opcion--si-no::before,
.opsfet-flujo-opcion--si-no::after {
    display: none !important;
}

.opsfet-flujo-opcion-icono {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: var(--opsfet-verde-claro) !important;
    color: var(--opsfet-verde-texto) !important;
    border: 2px solid rgba(163, 201, 63, .35);
    box-shadow: 0 2px 6px rgba(20, 30, 40, .04);
    margin-bottom: 12px !important;
    flex-shrink: 0 !important;
    transition: transform var(--opsfet-t-base) var(--opsfet-spring),
                background var(--opsfet-t-base) var(--opsfet-ease),
                border-color var(--opsfet-t-base) var(--opsfet-ease),
                color var(--opsfet-t-base) var(--opsfet-ease) !important;
}

.opsfet-flujo-opcion--si-no:hover .opsfet-flujo-opcion-icono,
.opsfet-flujo-opcion--si-no.is-selected .opsfet-flujo-opcion-icono {
    transform: scale(1.08);
    background: var(--opsfet-verde) !important;
    color: var(--opsfet-texto) !important;
    border-color: var(--opsfet-verde-oscuro);
    box-shadow: 0 6px 18px rgba(163, 201, 63, .4);
}

.opsfet-flujo-opcion--si-no .opsfet-flujo-opcion-titulo {
    font-size: 19px !important;
    margin-top: 4px !important;
}

.opsfet-flujo-opcion--si-no .opsfet-flujo-opcion-desc {
    text-align: center !important;
    margin-top: 4px !important;
}

/* ---------- Extras con checkbox ---------- */
.opsfet-flujo-extras {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
    max-width: 760px !important;
    margin: 0 auto 32px !important;
    text-align: left !important;
}

/* Grupo: un bloque tipo=documentos. Lleva título y agrupa visualmente
   los checkboxes que vienen de ese bloque (ej. "Documentación a aportar").
   Las condiciones de filtrado (área/público/paso) viven aquí, no en cada label. */
.opsfet-flujo-extras-grupo {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

.opsfet-flujo-extras-grupo-titulo {
    margin: 0 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: var(--opsfet-texto-suave) !important;
}

/* Sub-grupo: cuando el bloque tiene sub_bloques (ej. "Solicitante" /
   "Empleador" dentro de "Documentación a aportar"). Va dentro del grupo,
   con su propio título más sutil y un poco de aire arriba para separar. */
.opsfet-flujo-extras-sub-grupo {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding-top: 10px !important;
}

.opsfet-flujo-extras-sub-grupo:first-of-type {
    padding-top: 0 !important;
}

.opsfet-flujo-extras-sub-titulo {
    margin: 0 0 4px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--opsfet-texto) !important;
    letter-spacing: -0.005em !important;
}

.opsfet-flujo-extra {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    padding: 20px 24px !important;
    background: var(--opsfet-blanco) !important;
    border: 2px solid var(--opsfet-gris-borde) !important;
    border-radius: var(--opsfet-radius) !important;
    box-shadow: var(--opsfet-sombra-suave) !important;
    cursor: pointer !important;
    margin: 0 !important;
    transition:
        border-color var(--opsfet-t-base) var(--opsfet-ease),
        background var(--opsfet-t-base) var(--opsfet-ease),
        transform var(--opsfet-t-base) var(--opsfet-ease),
        box-shadow var(--opsfet-t-base) var(--opsfet-ease);
    -webkit-tap-highlight-color: transparent !important;
}

.opsfet-flujo-extra:hover {
    border-color: var(--opsfet-verde) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--opsfet-sombra-fuerte) !important;
}

.opsfet-flujo-extra-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
}

.opsfet-flujo-extra-check {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    border: 2px solid var(--opsfet-gris-borde) !important;
    border-radius: 7px !important;
    background: var(--opsfet-blanco) !important;
    color: var(--opsfet-blanco) !important;
    flex-shrink: 0 !important;
    transition:
        background var(--opsfet-t-base) var(--opsfet-ease),
        border-color var(--opsfet-t-base) var(--opsfet-ease),
        transform var(--opsfet-t-base) var(--opsfet-spring) !important;
}

.opsfet-flujo-extra-check svg {
    opacity: 0;
    transform: scale(.5);
    transition:
        opacity var(--opsfet-t-fast) var(--opsfet-ease),
        transform var(--opsfet-t-base) var(--opsfet-spring);
}

.opsfet-flujo-extra-info {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-width: 0 !important;
}

.opsfet-flujo-extra-titulo {
    display: block !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--opsfet-texto) !important;
    line-height: 1.3 !important;
    letter-spacing: -0.005em !important;
}

.opsfet-flujo-extra-desc {
    display: block !important;
    font-size: 14px !important;
    color: var(--opsfet-texto-suave) !important;
    line-height: 1.45 !important;
}

.opsfet-flujo-extra-precio {
    display: inline-block !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--opsfet-azul-oscuro) !important;
    flex-shrink: 0 !important;
    letter-spacing: -0.01em !important;
}

/* Estado seleccionado del extra (lo añade JS al cambiar el checkbox) */
.opsfet-flujo-extra.is-checked {
    border-color: var(--opsfet-verde) !important;
    background: var(--opsfet-verde-claro) !important;
}

.opsfet-flujo-extra.is-checked .opsfet-flujo-extra-check {
    background: var(--opsfet-verde) !important;
    border-color: var(--opsfet-verde) !important;
    transform: scale(1.05);
}

.opsfet-flujo-extra.is-checked .opsfet-flujo-extra-check svg {
    opacity: 1;
    transform: scale(1);
}

.opsfet-flujo-extras-pie {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
    margin-top: 8px !important;
}

@media (min-width: 720px) {
    .opsfet-flujo-extras-pie {
        flex-direction: row !important;
        justify-content: space-between !important;
        max-width: 760px !important;
        margin: 8px auto 0 !important;
    }
}

.opsfet-flujo-extras-totales {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    align-items: flex-start !important;
}

.opsfet-flujo-extras-total {
    font-size: 15px !important;
    color: var(--opsfet-texto-suave) !important;
}

.opsfet-flujo-extras-total strong {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--opsfet-texto) !important;
    letter-spacing: -0.005em !important;
    margin-left: 4px !important;
}

.opsfet-flujo-extras-total--final strong {
    font-size: 22px !important;
    color: var(--opsfet-azul-oscuro) !important;
}

@media (max-width: 720px) {
    .opsfet-flujo-extras-totales {
        align-items: center !important;
    }
}

/* ---------- "Saber más" integrado DENTRO de la tarjeta ----------
   Cuando un wrapper contiene un <details data-rol="saber-mas">, el wrapper
   pasa a ser visualmente LA TARJETA (border + background + sombra) y el
   <button> interno queda "transparente" — sin estilos de card propios.
   El <details> con las frases vive en la zona inferior del wrapper,
   separado por una línea fina. Al abrirlo, la tarjeta CRECE en altura
   — no se abre otra caja. Una única caja que se expande.

   Usamos `:has()` (Chrome 105+ / Firefox 121+ / Safari 15.4+) para que la
   regla solo se aplique cuando el wrapper realmente contiene saber-mas. */

.opsfet-flujo-opcion-wrapper {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;        /* para que el grid 1fr recorte bien */
    gap: 0 !important;
}

/* === Wrapper-as-card cuando hay saber-mas adentro === */

.opsfet-flujo-opcion-wrapper:has(> .opsfet-flujo-saber-mas) {
    background: var(--opsfet-blanco) !important;
    border: 2px solid var(--opsfet-gris-borde) !important;
    border-radius: var(--opsfet-radius) !important;
    box-shadow: var(--opsfet-sombra-suave) !important;
    overflow: hidden;               /* el details no rompe el border-radius */
    transition:
        border-color var(--opsfet-t-base) var(--opsfet-ease),
        background var(--opsfet-t-base) var(--opsfet-ease),
        transform var(--opsfet-t-base) var(--opsfet-ease),
        box-shadow var(--opsfet-t-base) var(--opsfet-ease);
}

/* Hover en cualquier parte del wrapper-card → reacciona como una sola card */
.opsfet-flujo-opcion-wrapper:has(> .opsfet-flujo-saber-mas):hover {
    border-color: var(--opsfet-verde) !important;
    transform: translateY(-3px) !important;
    box-shadow: var(--opsfet-sombra-fuerte) !important;
}

/* Wrapper con button interno seleccionado → look "seleccionado" en toda la card */
.opsfet-flujo-opcion-wrapper:has(> .opsfet-flujo-opcion.is-selected) {
    border-color: var(--opsfet-verde) !important;
    background: var(--opsfet-verde-claro) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--opsfet-sombra-fuerte) !important;
}

/* === Button "transparente" dentro del wrapper-card === */

.opsfet-flujo-opcion-wrapper:has(> .opsfet-flujo-saber-mas) > .opsfet-flujo-opcion,
.opsfet-flujo-opcion-wrapper:has(> .opsfet-flujo-saber-mas) > .opsfet-flujo-opcion:hover,
.opsfet-flujo-opcion-wrapper:has(> .opsfet-flujo-saber-mas) > .opsfet-flujo-opcion.is-selected {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

/* === Línea separadora entre button y saber-más === */

.opsfet-flujo-opcion-wrapper:has(> .opsfet-flujo-saber-mas) > .opsfet-flujo-saber-mas {
    border-top: 1px solid var(--opsfet-gris-borde);
    transition: border-color var(--opsfet-t-base) var(--opsfet-ease);
}

/* Cuando la card está seleccionada (verde-claro), la línea separadora toma
   un tono verde sutil para mantener consistencia visual. */
.opsfet-flujo-opcion-wrapper:has(> .opsfet-flujo-opcion.is-selected) > .opsfet-flujo-saber-mas {
    border-top-color: rgba(163, 201, 63, .35);
}

/* === Saber más en sí: integrado al fondo de la card === */

.opsfet-flujo-saber-mas {
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.opsfet-flujo-saber-mas-summary {
    cursor: pointer;
    list-style: none;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--opsfet-verde-texto) !important;
    padding: 12px 22px !important;
    line-height: 1 !important;
    transition: background var(--opsfet-t-fast) var(--opsfet-ease);
}

.opsfet-flujo-saber-mas-summary:hover {
    background: rgba(163, 201, 63, .08) !important;
}

.opsfet-flujo-saber-mas-summary::-webkit-details-marker {
    display: none;
}

.opsfet-flujo-saber-mas-summary::after {
    content: '▾';
    font-size: 10px;
    margin-left: auto;
    transition: transform var(--opsfet-t-fast) var(--opsfet-ease);
}

.opsfet-flujo-saber-mas[open] > .opsfet-flujo-saber-mas-summary::after {
    transform: rotate(180deg);
}

.opsfet-flujo-saber-mas-summary:focus { outline: none; }
.opsfet-flujo-saber-mas-summary:focus-visible {
    outline: 2px solid var(--opsfet-verde);
    outline-offset: -2px;
}

/* Lista de frases dentro de la card — sin caja propia */
.opsfet-flujo-saber-mas-lista {
    list-style: none !important;
    margin: 0 !important;
    padding: 4px 22px 16px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.opsfet-flujo-saber-mas-lista li {
    position: relative !important;
    padding-left: 18px !important;
    font-size: 13px !important;
    color: var(--opsfet-texto) !important;
    line-height: 1.5 !important;
}

.opsfet-flujo-saber-mas-lista li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--opsfet-verde);
}

/* ---------- Animación celebratoria al entrar al resumen ---------- */
.opsfet-flujo-celebracion {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--opsfet-verde);
    color: var(--opsfet-texto);
    margin: 0 auto 24px;
    box-shadow: 0 16px 36px rgba(163, 201, 63, .4);
}

/* La animación arranca cada vez que entramos al paso resumen
   (porque is-active se añade y quita en cada navegación). */
[data-paso-resumen].is-active .opsfet-flujo-celebracion {
    animation: opsfetCelebrar 0.7s var(--opsfet-spring) both;
}

[data-paso-resumen].is-active .opsfet-flujo-celebracion::before,
[data-paso-resumen].is-active .opsfet-flujo-celebracion::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid var(--opsfet-verde);
    pointer-events: none;
}

[data-paso-resumen].is-active .opsfet-flujo-celebracion::before {
    animation: opsfetHalo 1.4s var(--opsfet-ease-out) both 0.25s;
}

[data-paso-resumen].is-active .opsfet-flujo-celebracion::after {
    animation: opsfetHalo 1.4s var(--opsfet-ease-out) both 0.55s;
}

@keyframes opsfetCelebrar {
    0%   { transform: scale(0);    opacity: 0; }
    55%  { transform: scale(1.12); opacity: 1; }
    100% { transform: scale(1);    opacity: 1; }
}

@keyframes opsfetHalo {
    from { transform: scale(1);   opacity: .55; }
    to   { transform: scale(1.6); opacity: 0;   }
}