/* =====================================================================
   Rasti Story Form V3 — Estilos específicos del piloto (rama pataletas)
   =====================================================================
   Consolidado de los Style() inline que vivían dentro de los Step*:
   - step_dolor_selector.py  → .dolor-selector (sub-selector horizontal)
   - step_pataletas.py       → .pataletas-insight + .pataletas-section
   - step_reflejo.py         → .wizard-step-reflejo + .reflejo-*
   - step_intencion_pataletas.py → .step-intencion-pataletas
   ===================================================================== */


/* ── Sub-selector de dolor en P1 (Change #1) ────────────────────────── */

#dolor-selector-section .motivo-grid {
    max-width: 380px;
    gap: 0.4rem;
}
#dolor-selector-section .motivo-card {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    min-height: 0;
    padding: 0.6rem 0.85rem;
    gap: 0.75rem;
    border-radius: 10px;
}
#dolor-selector-section .motivo-icon {
    font-size: 1rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    color: var(--gray-500);
}
#dolor-selector-section .motivo-icon svg {
    width: 20px;
    height: 20px;
}
#dolor-selector-section .motivo-content {
    flex: 1;
    width: auto;
}
#dolor-selector-section .motivo-label {
    font-size: 0.9rem;
    font-weight: 500;
    width: auto;
}


/* ── Bloque de insight en P4 pataletas (Change #2) ──────────────────── */

.pataletas-insight {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    padding: 1.1rem 1.25rem;
    border-radius: 10px;
    margin: 0 auto 2rem auto;
    max-width: 640px;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.08);
}
.pataletas-insight-text {
    margin: 0;
    color: #78350f;
    line-height: 1.55;
    font-size: 0.95rem;
}


/* ── Secciones de campos en P4 / P7 pataletas ───────────────────────── */

.pataletas-section {
    margin-bottom: 1.75rem;
}
.pataletas-section:last-child {
    margin-bottom: 0.5rem;
}
.pataletas-section .form-label {
    font-weight: 600;
    color: var(--gray-800);
    display: block;
    margin-bottom: 0.4rem;
}
.pataletas-section .form-hint {
    color: var(--gray-600);
    font-size: 0.85rem;
    margin-top: 0;
    margin-bottom: 0.75rem;
}
.step-pataletas .chip-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: stretch;
}
.step-pataletas .chip {
    width: 100% !important;
    min-height: 4.5rem;
    height: 100%;
    padding: 0.9rem 1rem;
    border-radius: 16px;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    line-height: 1.4;
}
.step-pataletas .chip-label {
    display: block;
    width: 100%;
    white-space: normal;
}
.step-pataletas [data-field-name="p4_manifestacion"] .chip,
.step-pataletas [data-field-name="p4_duracion"] .chip,
.step-pataletas [data-field-name="p4_padre_emocion"] .chip {
    min-height: 3.35rem;
    padding: 0.72rem 0.95rem;
    align-items: center;
}
.pataletas-question {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(12px);
    margin-bottom: 0;
    pointer-events: none;
    transition:
        max-height 0.45s ease,
        opacity 0.3s ease,
        transform 0.35s ease,
        margin-bottom 0.35s ease;
}
.pataletas-question.is-visible {
    max-height: 960px;
    opacity: 1;
    transform: translateY(0);
    margin-bottom: 1.75rem;
    pointer-events: auto;
}
.pataletas-question:last-child.is-visible {
    margin-bottom: 0.5rem;
}


/* ── Pantallas de reflejo (Change #3) ───────────────────────────────── */

.wizard-step-reflejo .step-content {
    max-width: 640px;
    margin: 0 auto;
    padding: 2rem 1.25rem 1rem 1.25rem;
    animation: reflejoFadeIn 0.5s ease-out both;
}
.reflejo-body {
    background: linear-gradient(135deg, #fff7ed 0%, #ffe8d6 100%);
    border-left: 4px solid #f59e0b;
    padding: 1.75rem 1.9rem;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.1);
}
.reflejo-parrafo {
    color: #78350f;
    line-height: 1.65;
    font-size: 1rem;
    margin: 0 0 1.1rem 0;
}
.reflejo-parrafo:last-child {
    margin-bottom: 0;
}
.reflejo-titular {
    font-weight: 600;
    font-size: 1.05rem;
}
.reflejo-empatia {
    font-style: italic;
    border-top: 1px dashed rgba(120, 53, 15, 0.25);
    padding-top: 0.9rem;
    margin-top: 1.2rem;
}
.reflejo-var {
    font-weight: 600;
    color: #7c2d12;
}
.reflejo-word {
    display: inline-block;
    vertical-align: baseline;
    line-height: inherit;
    font-kerning: normal;
    text-rendering: optimizeLegibility;
    opacity: 0;
    transform: translateY(0.22em);
    transform-origin: left bottom;
    filter: blur(2px);
    animation: reflejoWordIn 0.42s cubic-bezier(0.2, 0.75, 0.25, 1) forwards;
    animation-delay: calc(var(--word-index, 0) * 0.06s);
    will-change: opacity, transform, filter;
}
@keyframes reflejoFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes reflejoWordIn {
    from {
        opacity: 0;
        transform: translateY(0.22em);
        filter: blur(2px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}
@media (prefers-reduced-motion: reduce) {
    .pataletas-question,
    .pataletas-question.is-visible,
    .wizard-step-reflejo .step-content {
        animation: none;
    }
    .pataletas-question {
        transition: none;
    }
    .reflejo-word {
        animation: none;
        opacity: 1;
        transform: none;
        filter: none;
    }
}

@media (max-width: 680px) {
    .step-pataletas .chip-group {
        grid-template-columns: 1fr;
    }
    .step-pataletas .chip {
        min-height: 0;
    }
}


/* ── Loading rotativo post-P7 (Change #7) ───────────────────────────── */
/* Overlay que aparece al hacer submit del wizard en rama pataletas.
   Muestra las 4 líneas del spec rotando con fade mientras la request a
   /story-form/finalize está en vuelo (antes del redirect a pagos).    */

.v3-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fff7ed 0%, #fde68a 100%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}
.v3-loading-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
}
.v3-loading-card {
    max-width: 560px;
    padding: 2.5rem 2rem;
    text-align: center;
}
.v3-loading-spinner {
    width: 52px;
    height: 52px;
    border: 4px solid rgba(245, 158, 11, 0.25);
    border-top-color: #f59e0b;
    border-radius: 50%;
    margin: 0 auto 1.75rem auto;
    animation: v3Spin 0.9s linear infinite;
}
.v3-loading-line {
    min-height: 3.25rem;
    color: #78350f;
    font-size: 1.05rem;
    line-height: 1.55;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.v3-loading-line.is-visible {
    opacity: 1;
}
@keyframes v3Spin {
    to { transform: rotate(360deg); }
}
@media (max-width: 600px) {
    .v3-loading-card { padding: 2rem 1.25rem; }
    .v3-loading-line { font-size: 0.95rem; }
}

/* ── Steps creativos (tema/trama/estilo/formato) ────────────────────── */
/* El wizard intake envuelve en .story-form-page (que aporta padding-top
   para compensar el navbar). Los steps creativos de V3 usan un wrapper
   propio sin esa clase, así que replicamos el padding aquí para que la
   barra de progreso no quede oculta detrás del navbar. */
.story-form-v3-creative-page {
    padding-top: calc(var(--page-header-offset, var(--navbar-height)) + 2rem);
    padding-bottom: 3rem;
}