/* Componente form-inscripcion (webinar). Solo tokens de style.css.
 * Campos, casilla, primera capa, trampa, envío y estado son de la base de
 * formulario de shell (common/formulario, clases pf-formulario__*), que se
 * encola antes como dependencia. Aquí, solo lo propio: el contenedor, el aviso
 * de inscripción cerrada y el mensaje de gracias con el calendario y su
 * animación de éxito (#61).
 * Sin caja propia: lo enmarca la sección de la landing que lo coloca. */

.pf-form-inscripcion {
    position: relative;
    color: var(--pf-color-text);
    /* El botón de la cabecera salta aquí: que no quede pegado al borde. */
    scroll-margin-top: var(--pf-space-xl);
}

.pf-form-inscripcion__aviso {
    margin: 0;
    padding: var(--pf-space-sm) var(--pf-space-md);
    font-size: var(--pf-text-md);
    font-weight: var(--pf-weight-bold);
    line-height: var(--pf-leading-snug);
    color: var(--pf-color-heading);
    background-color: var(--pf-color-bg-alt);
    border-left: 3px solid var(--pf-color-warning);
    border-radius: var(--pf-radius-md);
}

/* Gracias: en la misma página, en lugar del formulario, en la caja de éxito
 * de la base v2 (success-soft) y con la marca de hecho en un nodo verde. */

.pf-form-inscripcion__gracias {
    padding: var(--pf-space-md);
    background-color: var(--pf-color-success-soft);
    border: 1px solid var(--pf-color-success-border);
    border-radius: var(--pf-radius-lg);
}

.pf-form-inscripcion__gracias-icono {
    position: relative;
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: var(--pf-space-sm);
    color: var(--pf-color-on-accent);
    background-color: var(--pf-color-brand);
    border-radius: var(--pf-radius-round);
    box-shadow: var(--pf-shadow-md);
}

/* La onda que suelta al aparecer (solo con movimiento). */
.pf-form-inscripcion__gracias-icono::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid var(--pf-color-brand);
    border-radius: var(--pf-radius-round);
    opacity: 0;
}

.pf-form-inscripcion__gracias-titulo {
    margin: 0 0 var(--pf-space-xs);
    font-size: var(--pf-text-xl);
}

.pf-form-inscripcion__gracias-texto {
    max-width: var(--pf-measure);
    margin: 0 0 var(--pf-space-sm);
    color: var(--pf-color-text-soft);
}

.pf-form-inscripcion__calendario-titulo {
    margin: var(--pf-space-md) 0 var(--pf-space-xs);
}

.pf-form-inscripcion__calendario {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pf-space-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-form-inscripcion__calendario [hidden] {
    display: none;
}

/* Animación de éxito (#61): al quitar `hidden` el bloque se pinta y las
 * animaciones arrancan solas. El nodo crece, la marca se dibuja (el trazo se
 * hereda dentro del <use> del icono), la onda se abre y se apaga, y el texto
 * entra detrás. Menos de 1,5 s, una vez. Con movimiento reducido, nada. */
@media (prefers-reduced-motion: no-preference) {
    .pf-form-inscripcion__gracias:not([hidden]) .pf-form-inscripcion__gracias-icono {
        animation: pf-form-inscripcion-nodo 0.5s cubic-bezier(0.3, 1.5, 0.5, 1) both;
    }

    .pf-form-inscripcion__gracias:not([hidden]) .pf-form-inscripcion__gracias-icono::after {
        animation: pf-form-inscripcion-onda 0.9s ease-out 0.3s both;
    }

    .pf-form-inscripcion__gracias:not([hidden]) .pf-form-inscripcion__gracias-icono .pf-icono {
        stroke-dasharray: 24;
        animation: pf-form-inscripcion-marca 0.4s ease-out 0.3s both;
    }

    .pf-form-inscripcion__gracias:not([hidden]) > :not(.pf-form-inscripcion__gracias-icono) {
        animation: pf-form-inscripcion-texto 0.45s ease-out 0.35s both;
    }
}

@keyframes pf-form-inscripcion-nodo {
    from {
        opacity: 0;
        transform: scale(0.4);
    }
}

@keyframes pf-form-inscripcion-onda {
    from {
        opacity: 0.7;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(1.9);
    }
}

@keyframes pf-form-inscripcion-marca {
    from {
        stroke-dashoffset: 24;
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes pf-form-inscripcion-texto {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
}