/**
 * Steps Styles - Roseo Form
 * Unified styles for all step templates (step-1, step-2, etc.)
 * Uses CSS variables from MFM plugin for configurability
 * 
 * @package Roseo_Form
 * @version 3.1.0 - Added step-specific variables from steps_styles
 */

/* ============================================
   CRITICAL OVERRIDE - Step 2 Card Text Visibility
   This MUST appear first for maximum specificity
   FIXED: Added all properties needed to override Astra/Elementor
   ============================================ */

/* Ultra-specific selectors for Step 2 card text */
.site-content .roseo-selection-card-step2 h3.card-title,
.ast-container .roseo-selection-card-step2 h3.card-title,
#main .roseo-selection-card-step2 h3.card-title,
body .roseo-selection-card-step2 h3.card-title,
html body .roseo-selection-card-step2 h3.card-title,
#roseo-form-wrapper .roseo-selection-card-step2 h3.card-title,
#roseo-form-wrapper .roseo-card-grid .roseo-selection-card-step2 h3.card-title,
.roseo-selection-card-step2 .card-title {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #015328 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    text-align: center !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    text-indent: 0 !important;
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
    -webkit-text-fill-color: #015328 !important;
    transform: none !important;
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
}

.site-content .roseo-selection-card-step2 p.card-description,
.ast-container .roseo-selection-card-step2 p.card-description,
#main .roseo-selection-card-step2 p.card-description,
body .roseo-selection-card-step2 p.card-description,
html body .roseo-selection-card-step2 p.card-description,
#roseo-form-wrapper .roseo-selection-card-step2 p.card-description,
#roseo-form-wrapper .roseo-card-grid .roseo-selection-card-step2 p.card-description,
.roseo-selection-card-step2 .card-description {
    display: block !important;
    visibility: visible !important;
    opacity: 0.85 !important;
    color: #54595F !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    text-align: center !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    text-indent: 0 !important;
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
    -webkit-text-fill-color: #54595F !important;
    transform: none !important;
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
}

/* ============================================
   CSS CUSTOM PROPERTIES
   Set by PHP injection, with fallbacks
   ============================================ */
#roseo-form-wrapper {
    /* Step Container */
    --step-max-width: var(--mfm-step-max-width, 1200px);
    --step-padding-x: var(--mfm-step-padding-x, 40px);
    --step-padding-y: var(--mfm-step-padding-y, 40px);

    /* Step Header */
    --step-header-margin: var(--mfm-step-header-margin, 48px);
    --step-title-size: var(--mfm-step-title-size, 36px);
    --step-title-weight: var(--mfm-step-title-weight, 700);
    --step-title-icon-size: var(--mfm-step-title-icon-size, 38px);
    --step-desc-size: var(--mfm-step-desc-size, 18px);
    --step-desc-max-width: var(--mfm-step-desc-max-width, 600px);

    /* Card Grid */
    --step-grid-columns: var(--mfm-step-grid-columns, 3);
    --step-grid-gap: var(--mfm-step-grid-gap, 24px);
    --step-grid-max-width: var(--mfm-step-grid-max-width, 1000px);

    /* Selection Cards */
    --step-card-bg: var(--mfm-step-card-bg, #ffffff);
    --step-card-border-width: var(--mfm-step-card-border-width, 2px);
    --step-card-border-color: var(--mfm-border, #DADADAFC);
    --step-card-radius: var(--mfm-step-card-radius, 16px);
    --step-card-padding: var(--mfm-step-card-padding, 24px);
    --step-card-min-height: var(--mfm-step-card-min-height, 180px);
    --step-card-shadow: var(--mfm-step-card-shadow, 0 2px 8px rgba(0, 0, 0, 0.06));
    --step-card-hover-shadow: var(--mfm-step-card-hover-shadow, 0 8px 24px rgba(0, 0, 0, 0.12));
    --step-card-hover-lift: var(--mfm-step-card-hover-lift, -2px);

    /* Card Selected State */
    --step-card-selected-bg: var(--mfm-step-card-selected-bg, linear-gradient(135deg, #f0f9f4 0%, #e8f5ec 100%));
    --step-card-selected-border: var(--mfm-step-card-selected-border, 3px);
    --step-card-selected-shadow: var(--mfm-step-card-selected-shadow, 0 10px 30px rgba(0, 146, 57, 0.2));
    --step-card-check-size: var(--mfm-step-card-check-size, 32px);
    --step-card-check-icon-size: var(--mfm-step-card-check-icon-size, 16px);

    /* Card Icon */
    --step-card-icon-size: var(--mfm-step-card-icon-size, 64px);
    --step-card-icon-font-size: var(--mfm-step-card-icon-font-size, 28px);

    /* Card Typography */
    --step-card-title-size: var(--mfm-step-card-title-size, 18px);
    --step-card-title-weight: var(--mfm-step-card-title-weight, 700);
    --step-card-desc-size: var(--mfm-step-card-desc-size, 14px);

    /* ============================================
       STEP-SPECIFIC VARIABLES (from steps_styles)
       ============================================ */

    /* Step 1 Specific */
    --step1-grid-columns: var(--mfm-step1-grid-columns, 3);
    --step1-icon-size: var(--mfm-step1-icon-size, 48px);
    --step1-hover-color: var(--mfm-step1-hover-color, #f0fdf4);

    /* Step 1.1 Specific */
    --step1-1-max-width: var(--mfm-step1-1-max-width, 600px);

    /* Step 2 Specific */
    --step2-card-min-height: var(--mfm-step2-card-min-height, 200px);

    /* Step 3 Specific */
    --step3-tab-active-bg: var(--mfm-step3-tab-active-bg, #f0fdf4);

    /* Step 5 Specific */
    --step5-card-bg: var(--mfm-step5-card-bg, #ffffff);

    /* Completed Screen */
    --completed-icon-size: var(--mfm-completed-icon-size, 80px);
    --completed-color: var(--mfm-completed-color, #16a34a);
}

/* ============================================
   ASTRA THEME RESET
   Reset Astra's default heading styles inside our form
   ============================================ */
#roseo-form-wrapper h1,
#roseo-form-wrapper h2,
#roseo-form-wrapper h3,
#roseo-form-wrapper h4,
#roseo-form-wrapper h5,
#roseo-form-wrapper h6 {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
    clear: none !important;
}

#roseo-form-wrapper p {
    color: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================
   STEP CONTENT CONTAINER
   ============================================ */
#roseo-form-wrapper .roseo-step-content,
#roseo-form-wrapper .roseo-step-fullheight {
    width: 100% !important;
    max-width: var(--step-max-width) !important;
    margin: 0 auto !important;
    padding: var(--step-padding-y) var(--step-padding-x) !important;
    min-height: auto !important;
}

/* ============================================
   STEP HEADER
   ============================================ */
#roseo-form-wrapper .roseo-step-header {
    text-align: center !important;
    margin-bottom: var(--step-header-margin) !important;
    padding: 30px 0 !important;
}

#roseo-form-wrapper .roseo-step-title {
    font-size: var(--step-title-size) !important;
    font-weight: var(--step-title-weight) !important;
    color: var(--mfm-primary) !important;
    margin-bottom: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 15px !important;
    font-family: var(--mfm-font, inherit) !important;
}

#roseo-form-wrapper .roseo-step-title i {
    color: var(--mfm-secondary) !important;
    font-size: var(--step-title-icon-size) !important;
}

#roseo-form-wrapper .roseo-step-description,
#roseo-form-wrapper .roseo-step-subtitle {
    font-size: var(--step-desc-size) !important;
    color: var(--mfm-text) !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
    max-width: var(--step-desc-max-width) !important;
    margin: 0 auto !important;
}

/* ============================================
   CARD GRID
   ============================================ */
#roseo-form-wrapper .roseo-card-grid {
    display: grid !important;
    grid-template-columns: repeat(var(--step-grid-columns), 1fr) !important;
    gap: var(--step-grid-gap) !important;
    width: 100% !important;
    max-width: var(--step-grid-max-width) !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    padding: 0 10px !important;
}

/* Auto-fit for better responsiveness */
#roseo-form-wrapper .roseo-card-grid-autofit {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
}

/* Step 2 specific - 2 columns */
#roseo-form-wrapper .roseo-card-grid-step2 {
    --step-grid-columns: 2 !important;
    max-width: 800px !important;
}

/* Large screens - maintain 3 columns for step 1 */
@media (min-width: 992px) {
    #roseo-form-wrapper .roseo-card-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    #roseo-form-wrapper .roseo-card-grid-step2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ============================================
   SELECTION CARDS
   ============================================ */
#roseo-form-wrapper .roseo-selection-card {
    position: relative !important;
    background: var(--step-card-bg) !important;
    border: var(--step-card-border-width) solid var(--step-card-border-color) !important;
    border-radius: var(--step-card-radius) !important;
    padding: var(--step-card-padding) 20px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    min-height: var(--step-card-min-height) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-shadow: var(--step-card-shadow) !important;
    /* Prevent content overflow */
    overflow: hidden !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    box-sizing: border-box !important;
}

/* Card Hover State */
#roseo-form-wrapper .roseo-selection-card:hover {
    transform: translateY(var(--step-card-hover-lift)) !important;
    box-shadow: var(--step-card-hover-shadow) !important;
    border-color: var(--mfm-secondary) !important;
}

/* Card Selected State */
#roseo-form-wrapper .roseo-selection-card.selected {
    background: var(--step-card-selected-bg) !important;
    border-color: var(--mfm-secondary) !important;
    border-width: var(--step-card-selected-border) !important;
    transform: scale(1.01) !important;
    box-shadow: var(--step-card-selected-shadow) !important;
}

/* Selected Checkmark */
#roseo-form-wrapper .roseo-selection-card.selected::before {
    content: '\f00c' !important;
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: var(--step-card-check-size) !important;
    height: var(--step-card-check-size) !important;
    background: var(--mfm-secondary) !important;
    color: white !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: var(--step-card-check-icon-size) !important;
    opacity: 1 !important;
    transform: scale(1) !important;
    z-index: 20 !important;
    box-shadow: 0 4px 12px rgba(0, 146, 57, 0.4) !important;
    animation: checkPop 0.4s ease-out !important;
}

@keyframes checkPop {
    0% {
        transform: scale(0) rotate(-45deg);
        opacity: 0;
    }

    50% {
        transform: scale(1.2) rotate(5deg);
    }

    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* ============================================
   CARD ICON
   ============================================ */
#roseo-form-wrapper .roseo-selection-card .card-icon,
#roseo-form-wrapper .roseo-selection-card .card-icon-large {
    width: var(--step-card-icon-size) !important;
    height: var(--step-card-icon-size) !important;
    background: var(--mfm-gradient-primary, linear-gradient(135deg, var(--mfm-primary) 0%, var(--mfm-secondary) 100%)) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 18px !important;
    transition: all 0.3s ease !important;
    pointer-events: none !important;
}

#roseo-form-wrapper .roseo-selection-card:hover .card-icon,
#roseo-form-wrapper .roseo-selection-card:hover .card-icon-large {
    transform: scale(1.05) !important;
}

#roseo-form-wrapper .roseo-selection-card.selected .card-icon,
#roseo-form-wrapper .roseo-selection-card.selected .card-icon-large {
    background: linear-gradient(135deg, var(--mfm-secondary) 0%, #00b847 100%) !important;
    box-shadow: 0 3px 8px rgba(0, 146, 57, 0.25) !important;
}

#roseo-form-wrapper .roseo-selection-card .card-icon i,
#roseo-form-wrapper .roseo-selection-card .card-icon-large i {
    font-size: var(--step-card-icon-font-size) !important;
    color: white !important;
}

/* ============================================
   CARD TYPOGRAPHY
   ============================================ */
#roseo-form-wrapper .roseo-selection-card .card-title {
    display: block !important;
    font-size: var(--step-card-title-size) !important;
    font-weight: var(--step-card-title-weight) !important;
    color: var(--mfm-primary) !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.3 !important;
    pointer-events: none !important;
    /* Prevent overflow */
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-wrap: break-word !important;
    hyphens: auto !important;
}

#roseo-form-wrapper .roseo-selection-card .card-description {
    display: block !important;
    font-size: var(--step-card-desc-size) !important;
    color: var(--mfm-text) !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
    pointer-events: none !important;
    /* Prevent overflow */
    max-width: 100% !important;
    overflow: hidden !important;
    word-wrap: break-word !important;
}

/* Card Subtitle (Step 2) */
#roseo-form-wrapper .roseo-selection-card .card-subtitle {
    font-size: 14px !important;
    color: var(--mfm-text) !important;
    margin: 0 0 12px 0 !important;
    line-height: 1.4 !important;
    opacity: 0.85 !important;
}

/* ============================================
   BENEFITS LIST (Step 2 cards)
   ============================================ */
#roseo-form-wrapper .roseo-selection-card .card-benefits {
    list-style: none !important;
    padding: 0 !important;
    margin: 12px 0 0 0 !important;
    text-align: left !important;
    width: 100% !important;
}

#roseo-form-wrapper .roseo-selection-card .card-benefits li {
    font-size: 13px !important;
    color: var(--mfm-text) !important;
    padding: 4px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

#roseo-form-wrapper .roseo-selection-card .card-benefits li::before {
    content: '\f00c' !important;
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
    font-size: 10px !important;
    color: var(--mfm-primary) !important;
    flex-shrink: 0 !important;
}

/* ============================================
   HIDDEN CARDS (Step 2 visibility)
   ============================================ */
#roseo-form-wrapper .roseo-selection-card.card-hidden,
#roseo-form-wrapper .roseo-selection-card.hidden-by-filter,
#roseo-form-wrapper .roseo-selection-card.hidden-by-php,
#roseo-form-wrapper .roseo-selection-card-step2.hidden-by-filter,
#roseo-form-wrapper .roseo-selection-card-step2.hidden-by-php {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/* Large Tablet / Small Desktop (768px - 991px) */
@media (max-width: 991px) and (min-width: 768px) {

    #roseo-form-wrapper .roseo-step-content,
    #roseo-form-wrapper .roseo-step-fullheight {
        padding: 30px 20px !important;
    }

    #roseo-form-wrapper .roseo-step-header {
        margin-bottom: 36px !important;
        padding: 20px 10px !important;
    }

    #roseo-form-wrapper .roseo-step-title {
        font-size: 28px !important;
    }

    #roseo-form-wrapper .roseo-step-title i {
        font-size: 30px !important;
    }

    #roseo-form-wrapper .roseo-step-description,
    #roseo-form-wrapper .roseo-step-subtitle {
        font-size: 16px !important;
        padding: 0 10px !important;
    }

    #roseo-form-wrapper .roseo-card-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 18px !important;
        max-width: 650px !important;
        padding: 0 15px !important;
    }

    #roseo-form-wrapper .roseo-card-grid-step2 {
        grid-template-columns: repeat(2, 1fr) !important;
        max-width: 580px !important;
    }

    #roseo-form-wrapper .roseo-selection-card {
        min-height: 150px !important;
        padding: 18px 14px !important;
    }

    #roseo-form-wrapper .roseo-selection-card .card-icon {
        width: 52px !important;
        height: 52px !important;
        margin-bottom: 12px !important;
    }

    #roseo-form-wrapper .roseo-selection-card .card-icon i {
        font-size: 22px !important;
    }

    #roseo-form-wrapper .roseo-selection-card .card-title {
        font-size: 15px !important;
    }

    #roseo-form-wrapper .roseo-selection-card .card-description {
        font-size: 12px !important;
        -webkit-line-clamp: 2 !important;
    }
}

/* Small Tablet (576px - 767px) */
@media (max-width: 767px) and (min-width: 576px) {

    #roseo-form-wrapper .roseo-step-content,
    #roseo-form-wrapper .roseo-step-fullheight {
        padding: 25px 15px !important;
    }

    #roseo-form-wrapper .roseo-step-header {
        margin-bottom: 28px !important;
        padding: 15px 10px !important;
    }

    #roseo-form-wrapper .roseo-step-title {
        font-size: 24px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    #roseo-form-wrapper .roseo-step-title i {
        font-size: 26px !important;
    }

    #roseo-form-wrapper .roseo-step-description,
    #roseo-form-wrapper .roseo-step-subtitle {
        font-size: 14px !important;
        padding: 0 10px !important;
    }

    #roseo-form-wrapper .roseo-card-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
        max-width: 500px !important;
        padding: 0 10px !important;
    }

    #roseo-form-wrapper .roseo-card-grid-step2 {
        grid-template-columns: 1fr !important;
        max-width: 340px !important;
    }

    #roseo-form-wrapper .roseo-selection-card {
        min-height: 130px !important;
        padding: 14px 12px !important;
    }

    #roseo-form-wrapper .roseo-selection-card .card-icon {
        width: 44px !important;
        height: 44px !important;
        margin-bottom: 10px !important;
    }

    #roseo-form-wrapper .roseo-selection-card .card-icon i {
        font-size: 18px !important;
    }

    #roseo-form-wrapper .roseo-selection-card .card-title {
        font-size: 14px !important;
        margin-bottom: 4px !important;
    }

    #roseo-form-wrapper .roseo-selection-card .card-description {
        font-size: 11px !important;
        -webkit-line-clamp: 2 !important;
    }

    #roseo-form-wrapper .roseo-selection-card.selected::before {
        width: 24px !important;
        height: 24px !important;
        font-size: 12px !important;
        top: 8px !important;
        right: 8px !important;
    }
}

/* Mobile (max 575px) */
@media (max-width: 575px) {

    #roseo-form-wrapper .roseo-step-content,
    #roseo-form-wrapper .roseo-step-fullheight {
        padding: 16px 12px !important;
    }

    #roseo-form-wrapper .roseo-step-header {
        margin-bottom: 20px !important;
        padding: 12px 8px !important;
    }

    #roseo-form-wrapper .roseo-step-title {
        font-size: 20px !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    #roseo-form-wrapper .roseo-step-title i {
        font-size: 22px !important;
    }

    #roseo-form-wrapper .roseo-step-description,
    #roseo-form-wrapper .roseo-step-subtitle {
        font-size: 13px !important;
        padding: 0 5px !important;
    }

    /* Mobile: 2 columnas en pantallas pequeñas para mejor agrupación */
    #roseo-form-wrapper .roseo-card-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        max-width: 100% !important;
        padding: 0 8px !important;
    }

    /* Step 2 cards: 1 columna porque son más complejas */
    #roseo-form-wrapper .roseo-card-grid-step2 {
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
    }

    /* Cards compactas verticales en móvil */
    #roseo-form-wrapper .roseo-selection-card {
        min-height: 120px !important;
        max-height: 160px !important;
        padding: 14px 12px !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: center !important;
        gap: 8px !important;
        overflow: hidden !important;
    }

    #roseo-form-wrapper .roseo-selection-card .card-icon {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        flex-shrink: 0 !important;
        margin-bottom: 6px !important;
    }

    #roseo-form-wrapper .roseo-selection-card .card-icon i {
        font-size: 18px !important;
    }

    /* Título con clamp para evitar overflow */
    #roseo-form-wrapper .roseo-selection-card .card-title {
        font-size: 13px !important;
        margin-bottom: 2px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
        line-height: 1.2 !important;
        white-space: normal !important;
    }

    /* Descripción oculta o muy corta en móvil */
    #roseo-form-wrapper .roseo-selection-card .card-description {
        font-size: 11px !important;
        -webkit-line-clamp: 1 !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        max-width: 100% !important;
        opacity: 0.8 !important;
    }

    /* Selected checkmark más pequeño en móvil */
    #roseo-form-wrapper .roseo-selection-card.selected::before {
        width: 20px !important;
        height: 20px !important;
        font-size: 9px !important;
        top: 6px !important;
        right: 6px !important;
    }

    #roseo-form-wrapper .roseo-selection-card .card-benefits {
        display: none !important;
    }

    #roseo-form-wrapper .roseo-selection-card.selected::before {
        width: 22px !important;
        height: 22px !important;
        font-size: 10px !important;
        top: 6px !important;
        right: 6px !important;
    }
}

/* Extra Small Mobile (max 375px) */
@media (max-width: 375px) {

    #roseo-form-wrapper .roseo-step-content,
    #roseo-form-wrapper .roseo-step-fullheight {
        padding: 12px 8px !important;
    }

    #roseo-form-wrapper .roseo-step-title {
        font-size: 18px !important;
    }

    /* 2 columnas pero más compactas */
    #roseo-form-wrapper .roseo-card-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        padding: 0 4px !important;
    }

    #roseo-form-wrapper .roseo-selection-card {
        padding: 10px 8px !important;
        min-height: 100px !important;
        max-height: 140px !important;
        gap: 6px !important;
    }

    #roseo-form-wrapper .roseo-selection-card .card-icon {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
    }

    #roseo-form-wrapper .roseo-selection-card .card-icon i {
        font-size: 14px !important;
    }

    #roseo-form-wrapper .roseo-selection-card .card-title {
        font-size: 11px !important;
        -webkit-line-clamp: 2 !important;
    }

    #roseo-form-wrapper .roseo-selection-card .card-description {
        display: none !important;
    }

    #roseo-form-wrapper .roseo-selection-card.selected::before {
        width: 18px !important;
        height: 18px !important;
        font-size: 8px !important;
        top: 4px !important;
        right: 4px !important;
    }
}

/* ============================================
   STEP 2 SPECIFIC STYLES
   Cards with benefits list, different layout
   ============================================ */
#roseo-form-wrapper .roseo-selection-card-step2 {
    min-height: 320px !important;
    height: auto !important;
    padding: 28px 24px !important;
    align-items: flex-start !important;
    text-align: left !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
}

#roseo-form-wrapper .roseo-selection-card-step2 .card-icon,
#roseo-form-wrapper .roseo-selection-card-step2 .card-icon-large {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    margin-bottom: 20px !important;
    flex-shrink: 0 !important;
}

#roseo-form-wrapper .roseo-selection-card-step2 .card-icon i,
#roseo-form-wrapper .roseo-selection-card-step2 .card-icon-large i {
    font-size: 32px !important;
}

/* Step 2 Card Title - ULTRA-HIGH SPECIFICITY to override Astra theme */
#roseo-form-wrapper .roseo-selection-card-step2 .card-title,
#roseo-form-wrapper .roseo-card-grid .roseo-selection-card-step2 h3.card-title,
body #roseo-form-wrapper .roseo-selection-card-step2 h3.card-title,
.site-content #roseo-form-wrapper .roseo-selection-card-step2 h3.card-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #015328 !important;
    /* Explicit primary color */
    margin: 0 0 8px 0 !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-align: center !important;
    max-width: 100% !important;
    overflow: visible !important;
    height: auto !important;
    white-space: normal !important;
    /* Reset any inherit values */
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Step 2 Card Description - ULTRA-HIGH SPECIFICITY to override Astra theme */
#roseo-form-wrapper .roseo-selection-card-step2 .card-description,
#roseo-form-wrapper .roseo-card-grid .roseo-selection-card-step2 p.card-description,
body #roseo-form-wrapper .roseo-selection-card-step2 p.card-description,
.site-content #roseo-form-wrapper .roseo-selection-card-step2 p.card-description {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #54595F !important;
    /* Explicit text color */
    margin: 0 0 16px 0 !important;
    margin-bottom: 16px !important;
    padding: 0 !important;
    line-height: 1.4 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 0.85 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-align: center !important;
    max-width: 100% !important;
    overflow: visible !important;
    height: auto !important;
    white-space: normal !important;
    /* Reset any inherit values */
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

#roseo-form-wrapper .roseo-selection-card-step2 .card-benefits {
    margin-top: 16px !important;
    border-top: 1px solid var(--mfm-border) !important;
    padding-top: 14px !important;
    width: 100% !important;
    overflow: visible !important;
    height: auto !important;
    display: block !important;
}

#roseo-form-wrapper .roseo-selection-card-step2 .card-benefits li {
    padding: 6px 0 !important;
    gap: 8px !important;
    font-size: 13px !important;
    white-space: normal !important;
    overflow: visible !important;
    height: auto !important;
    display: flex !important;
    align-items: flex-start !important;
}

#roseo-form-wrapper .roseo-selection-card-step2 .card-benefits li::before {
    color: var(--mfm-primary) !important;
    font-size: 12px !important;
    flex-shrink: 0 !important;
}

#roseo-form-wrapper .roseo-selection-card-step2.selected .card-benefits li::before {
    color: var(--mfm-secondary) !important;
}

/* Step 2 Tablet */
@media (max-width: 991px) {
    #roseo-form-wrapper .roseo-selection-card-step2 {
        min-height: 220px !important;
        max-height: 320px !important;
        padding: 22px 18px !important;
    }

    #roseo-form-wrapper .roseo-selection-card-step2 .card-icon,
    #roseo-form-wrapper .roseo-selection-card-step2 .card-icon-large {
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        margin-bottom: 14px !important;
    }

    #roseo-form-wrapper .roseo-selection-card-step2 .card-icon i,
    #roseo-form-wrapper .roseo-selection-card-step2 .card-icon-large i {
        font-size: 26px !important;
    }

    #roseo-form-wrapper .roseo-selection-card-step2 .card-title {
        font-size: 17px !important;
    }

    #roseo-form-wrapper .roseo-selection-card-step2 .card-description {
        font-size: 13px !important;
        margin-bottom: 12px !important;
    }

    #roseo-form-wrapper .roseo-selection-card-step2 .card-benefits li {
        font-size: 12px !important;
        padding: 5px 0 !important;
    }
}

/* Step 2 Mobile */
@media (max-width: 576px) {
    #roseo-form-wrapper .roseo-selection-card-step2 {
        min-height: 180px !important;
        max-height: 280px !important;
        padding: 18px 14px !important;
    }

    #roseo-form-wrapper .roseo-selection-card-step2 .card-icon,
    #roseo-form-wrapper .roseo-selection-card-step2 .card-icon-large {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        margin-bottom: 12px !important;
    }

    #roseo-form-wrapper .roseo-selection-card-step2 .card-icon i,
    #roseo-form-wrapper .roseo-selection-card-step2 .card-icon-large i {
        font-size: 22px !important;
    }

    #roseo-form-wrapper .roseo-selection-card-step2 .card-title {
        font-size: 16px !important;
    }

    #roseo-form-wrapper .roseo-selection-card-step2 .card-benefits li {
        font-size: 12px !important;
        padding: 6px 0 !important;
    }
}

/* ============================================================================
   STEP 4 - KPIs CUALIFICACIÓN
   Estilos para las tarjetas de selección de KPIs
   ============================================================================ */

#roseo-form-wrapper #step-4 .roseo-step-header,
#roseo-form-wrapper #step-4-content .roseo-step-header {
    text-align: center !important;
    margin-bottom: 30px !important;
    padding: 0 20px !important;
}

#roseo-form-wrapper #step-4 .roseo-step-title,
#roseo-form-wrapper #step-4-content .roseo-step-title {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    font-size: 24px !important;
    color: var(--mfm-primary) !important;
    margin: 0 0 15px 0 !important;
    line-height: 1.3 !important;
}

#roseo-form-wrapper #step-4 .roseo-step-title i,
#roseo-form-wrapper #step-4-content .roseo-step-title i {
    color: var(--mfm-secondary) !important;
    font-size: 28px !important;
}

#roseo-form-wrapper #step-4 .roseo-step-subtitle,
#roseo-form-wrapper #step-4-content .roseo-step-subtitle {
    color: var(--mfm-text) !important;
    font-size: 16px !important;
    margin: 0 auto !important;
    max-width: 600px !important;
    line-height: 1.5 !important;
}

/* Títulos de sección con borde lateral verde */
#roseo-form-wrapper #step-4 .kpi-section-title {
    margin: 35px 0 18px 0 !important;
    color: var(--mfm-primary) !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    border-left: 4px solid var(--mfm-secondary) !important;
    padding-left: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

#roseo-form-wrapper #step-4 .kpi-section-title:first-of-type {
    margin-top: 10px !important;
}

/* Grid responsive para las tarjetas */
#roseo-form-wrapper #step-4 .kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
    gap: 16px !important;
}

#roseo-form-wrapper #step-4 .kpi-grid.three-cols {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
}

/* Tarjetas de opción (Radio Buttons) */
#roseo-form-wrapper #step-4 .kpi-card-option {
    position: relative !important;
}

#roseo-form-wrapper #step-4 .kpi-card-option input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#roseo-form-wrapper #step-4 .kpi-card-option label {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: white !important;
    border: 2px solid var(--mfm-border) !important;
    border-radius: var(--mfm-radius) !important;
    padding: 24px 16px !important;
    cursor: pointer !important;
    transition: var(--mfm-transition) !important;
    height: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    position: relative !important;
    min-height: 120px !important;
}

#roseo-form-wrapper #step-4 .kpi-card-option label:hover {
    border-color: var(--mfm-accent) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 20px rgba(0, 146, 57, 0.12) !important;
}

/* Icono de la tarjeta */
#roseo-form-wrapper #step-4 .kpi-card-icon {
    font-size: 2.4rem !important;
    margin-bottom: 14px !important;
    filter: grayscale(80%) !important;
    opacity: 0.7 !important;
    transition: all 0.25s ease !important;
}

/* Título de la tarjeta */
#roseo-form-wrapper #step-4 .kpi-card-title {
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    color: var(--mfm-primary) !important;
    line-height: 1.4 !important;
}

/* Descripción opcional */
#roseo-form-wrapper #step-4 .kpi-card-desc {
    font-size: 0.8rem !important;
    color: #777 !important;
    margin-top: 6px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
}

/* Estado seleccionado (checked) */
#roseo-form-wrapper #step-4 .kpi-card-option input[type="radio"]:checked+label {
    border-color: var(--mfm-secondary) !important;
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%) !important;
    box-shadow: 0 0 0 1px var(--mfm-secondary), 0 8px 25px rgba(0, 146, 57, 0.18) !important;
}

#roseo-form-wrapper #step-4 .kpi-card-option input[type="radio"]:checked+label .kpi-card-icon {
    filter: grayscale(0%) !important;
    opacity: 1 !important;
    transform: scale(1.15) !important;
}

#roseo-form-wrapper #step-4 .kpi-card-option input[type="radio"]:checked+label .kpi-card-title {
    color: var(--mfm-secondary) !important;
}

/* Checkmark en esquina superior derecha */
#roseo-form-wrapper #step-4 .kpi-card-option label::after {
    content: '✓' !important;
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    font-size: 11px !important;
    color: white !important;
    background: var(--mfm-secondary) !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    transform: scale(0) !important;
    transition: all 0.2s ease !important;
}

#roseo-form-wrapper #step-4 .kpi-card-option input[type="radio"]:checked+label::after {
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* Espaciado inferior para el footer */
#roseo-form-wrapper #step-4 .roseo-step-content {
    padding-bottom: 60px !important;
}

/* Step 4 - Responsive */
@media (max-width: 768px) {
    #roseo-form-wrapper #step-4 .roseo-step-header {
        padding: 0 15px !important;
    }

    #roseo-form-wrapper #step-4 .roseo-step-title {
        font-size: 20px !important;
        flex-wrap: wrap !important;
    }

    #roseo-form-wrapper #step-4 .roseo-step-subtitle {
        font-size: 14px !important;
        padding: 0 10px !important;
    }

    #roseo-form-wrapper #step-4 .kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    #roseo-form-wrapper #step-4 .kpi-grid.three-cols {
        grid-template-columns: 1fr !important;
    }

    #roseo-form-wrapper #step-4 .kpi-card-option label {
        padding: 18px 12px !important;
        min-height: 100px !important;
    }

    #roseo-form-wrapper #step-4 .kpi-card-icon {
        font-size: 2rem !important;
    }

    #roseo-form-wrapper #step-4 .kpi-card-title {
        font-size: 0.9rem !important;
    }

    #roseo-form-wrapper #step-4 .kpi-section-title {
        font-size: 0.95rem !important;
        margin: 25px 0 14px 0 !important;
    }
}

@media (max-width: 480px) {
    #roseo-form-wrapper #step-4 .roseo-step-title {
        font-size: 18px !important;
    }

    #roseo-form-wrapper #step-4 .roseo-step-title i {
        font-size: 20px !important;
    }

    #roseo-form-wrapper #step-4 .kpi-grid {
        grid-template-columns: 1fr !important;
    }

    #roseo-form-wrapper #step-4 .kpi-card-option label {
        flex-direction: row !important;
        justify-content: flex-start !important;
        gap: 15px !important;
        padding: 16px !important;
        min-height: auto !important;
        text-align: left !important;
    }

    #roseo-form-wrapper #step-4 .kpi-card-icon {
        font-size: 1.8rem !important;
        margin-bottom: 0 !important;
    }

    #roseo-form-wrapper #step-4 .kpi-card-title {
        font-size: 0.95rem !important;
    }
}

/* ============================================================================
   STEP 3 HUB - MÚLTIPLES UBICACIONES
   Gestión de ubicaciones en el hub
   ============================================================================ */

#roseo-form-wrapper .hub-container {
    background: white !important;
    border-radius: 20px !important;
    padding: 50px !important;
    max-width: 1000px !important;
    margin: 30px auto !important;
    box-shadow: var(--mfm-shadow-lg) !important;
    border: 2px solid var(--mfm-accent) !important;
}

#roseo-form-wrapper .hub-header {
    text-align: center !important;
    margin-bottom: 30px !important;
    padding-bottom: 20px !important;
    border-bottom: 2px solid var(--mfm-accent) !important;
}

#roseo-form-wrapper .hub-header h3 {
    color: var(--mfm-primary) !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
}

#roseo-form-wrapper .hub-header p {
    color: var(--mfm-text) !important;
    font-size: 15px !important;
    margin: 0 !important;
}

#roseo-form-wrapper .ubicaciones-lista {
    margin-bottom: 30px !important;
}

#roseo-form-wrapper .ubicacion-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
    border: 2px solid var(--mfm-border) !important;
    border-radius: var(--mfm-radius-lg) !important;
    padding: 25px !important;
    margin-bottom: 20px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    transition: var(--mfm-transition) !important;
    position: relative !important;
    overflow: hidden !important;
}

#roseo-form-wrapper .ubicacion-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 5px !important;
    height: 100% !important;
    background: var(--mfm-gradient-primary) !important;
}

#roseo-form-wrapper .ubicacion-card:hover {
    border-color: var(--mfm-secondary) !important;
    box-shadow: var(--mfm-shadow) !important;
    transform: translateY(-3px) !important;
}

#roseo-form-wrapper .ubicacion-info {
    flex: 1 !important;
    padding-left: 15px !important;
}

#roseo-form-wrapper .ubicacion-tipo {
    display: inline-block !important;
    padding: 4px 12px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    margin-bottom: 8px !important;
}

#roseo-form-wrapper .tipo-solo-fv {
    background: #fff3cd !important;
    color: #856404 !important;
}

#roseo-form-wrapper .tipo-solo-mini {
    background: #d1ecf1 !important;
    color: #0c5460 !important;
}

#roseo-form-wrapper .tipo-fv-ampliar-mini,
#roseo-form-wrapper .tipo-mini-fv {
    background: #d4edda !important;
    color: #155724 !important;
}

#roseo-form-wrapper .ubicacion-detalles {
    color: var(--mfm-text) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

#roseo-form-wrapper .ubicacion-detalles strong {
    color: var(--mfm-primary) !important;
}

#roseo-form-wrapper .ubicacion-acciones {
    display: flex !important;
    gap: 10px !important;
}

#roseo-form-wrapper .btn-hub {
    padding: 10px 20px !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-size: 14px !important;
}

#roseo-form-wrapper .btn-editar {
    background: #f0ad4e !important;
    color: white !important;
}

#roseo-form-wrapper .btn-editar:hover {
    background: #ec971f !important;
    transform: translateY(-2px) !important;
}

#roseo-form-wrapper .btn-eliminar {
    background: #d9534f !important;
    color: white !important;
}

#roseo-form-wrapper .btn-eliminar:hover {
    background: #c9302c !important;
    transform: translateY(-2px) !important;
}

#roseo-form-wrapper .hub-vacio {
    text-align: center !important;
    padding: 60px 20px !important;
    color: var(--mfm-text) !important;
}

#roseo-form-wrapper .hub-vacio i {
    font-size: 64px !important;
    color: var(--mfm-border) !important;
    margin-bottom: 20px !important;
}

#roseo-form-wrapper .hub-botones {
    display: flex !important;
    gap: 15px !important;
    justify-content: center !important;
    margin-top: 30px !important;
}

#roseo-form-wrapper .btn-añadir {
    background: var(--mfm-gradient-primary) !important;
    color: white !important;
    padding: 16px 32px !important;
    border: none !important;
    border-radius: var(--mfm-radius-sm) !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    cursor: pointer !important;
    transition: var(--mfm-transition) !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

#roseo-form-wrapper .btn-añadir:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--mfm-shadow) !important;
}

#roseo-form-wrapper .btn-finalizar {
    background: var(--mfm-primary) !important;
    color: white !important;
    padding: 16px 32px !important;
    border: none !important;
    border-radius: var(--mfm-radius-sm) !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    cursor: pointer !important;
    transition: var(--mfm-transition) !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

#roseo-form-wrapper .btn-finalizar:hover {
    background: var(--mfm-secondary) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--mfm-shadow) !important;
}

#roseo-form-wrapper .btn-volver {
    background: var(--mfm-border) !important;
    color: var(--mfm-text) !important;
    padding: 12px 24px !important;
    border: none !important;
    border-radius: var(--mfm-radius-sm) !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

#roseo-form-wrapper .btn-volver:hover {
    background: var(--mfm-accent) !important;
}

/* ============================================================================
   STEP 3 SELECTOR - SELECCIÓN DE TIPO DE INSTALACIÓN
   ============================================================================ */

#roseo-form-wrapper .selector-container {
    max-width: 900px !important;
    margin: 0 auto !important;
}

#roseo-form-wrapper .selector-context {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 30px !important;
    text-align: center !important;
}

#roseo-form-wrapper .selector-context p {
    color: var(--mfm-text) !important;
    font-size: 15px !important;
    margin: 0 !important;
}

#roseo-form-wrapper .selector-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 18px !important;
    border-radius: 999px !important;
    border: 2px solid var(--mfm-accent) !important;
    background: #f0fdf4 !important;
    color: var(--mfm-primary) !important;
    font-weight: 600 !important;
    justify-content: center !important;
}

#roseo-form-wrapper .selector-badge i {
    color: var(--mfm-secondary) !important;
}

#roseo-form-wrapper .selector-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    margin-bottom: 30px !important;
}

#roseo-form-wrapper .selector-card {
    background: white !important;
    border: 3px solid var(--mfm-border) !important;
    border-radius: var(--mfm-radius) !important;
    padding: 30px 20px !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: var(--mfm-transition) !important;
}

#roseo-form-wrapper .selector-card:hover {
    border-color: var(--mfm-accent) !important;
    transform: translateY(-5px) !important;
    box-shadow: var(--mfm-shadow) !important;
}

#roseo-form-wrapper .selector-card.selected {
    border-color: var(--mfm-secondary) !important;
    background: linear-gradient(135deg, #f0f9f4 0%, #ffffff 100%) !important;
    box-shadow: var(--mfm-shadow-lg) !important;
}

#roseo-form-wrapper .selector-card .card-icon {
    font-size: 48px !important;
    color: var(--mfm-primary) !important;
    margin-bottom: 15px !important;
}

#roseo-form-wrapper .selector-card.selected .card-icon {
    color: var(--mfm-secondary) !important;
}

#roseo-form-wrapper .selector-card h3 {
    font-size: 18px !important;
    color: var(--mfm-primary) !important;
    margin: 15px 0 10px 0 !important;
    font-weight: 600 !important;
}

#roseo-form-wrapper .selector-card p {
    font-size: 14px !important;
    color: var(--mfm-text) !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

#roseo-form-wrapper .selector-card input[type="radio"] {
    display: none !important;
}

@media (max-width: 768px) {
    #roseo-form-wrapper .selector-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================================
   STEP COMPLETED - PANTALLA DE ÉXITO
   ============================================================================ */

#roseo-form-wrapper .roseo-step-completed,
#roseo-form-wrapper #completed .roseo-step-completed {
    text-align: center !important;
    padding: 60px 20px !important;
    max-width: 700px !important;
    margin: 0 auto !important;
}

#roseo-form-wrapper .success-animation,
#roseo-form-wrapper #completed .success-animation {
    margin-bottom: 32px !important;
}

#roseo-form-wrapper .success-icon,
#roseo-form-wrapper #completed .success-icon {
    display: inline-block !important;
    font-size: 80px !important;
    color: var(--mfm-secondary) !important;
    animation: successPop 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

@keyframes successPop {
    0% {
        transform: scale(0) rotate(-45deg);
        opacity: 0;
    }

    50% {
        transform: scale(1.2) rotate(10deg);
    }

    100% {
        transform: scale(1) rotate(0);
        opacity: 1;
    }
}

#roseo-form-wrapper .success-title {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: var(--mfm-primary) !important;
    margin-bottom: 8px !important;
}

#roseo-form-wrapper .success-subtitle {
    font-size: 20px !important;
    font-weight: 500 !important;
    color: var(--mfm-secondary) !important;
    margin-bottom: 16px !important;
}

#roseo-form-wrapper .success-message {
    font-size: 18px !important;
    color: var(--mfm-text) !important;
    line-height: 1.6 !important;
    max-width: 600px !important;
    margin: 0 auto 24px !important;
}

/* Sección "Qué sucede ahora" */
#roseo-form-wrapper .success-que-sigue {
    background: #f0fdf4 !important;
    border-radius: var(--mfm-radius, 12px) !important;
    padding: 24px !important;
    margin: 24px auto !important;
    max-width: 550px !important;
    text-align: left !important;
}

#roseo-form-wrapper .success-que-sigue h3 {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--mfm-primary) !important;
    margin: 0 0 16px 0 !important;
}

#roseo-form-wrapper .success-pasos {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#roseo-form-wrapper .success-pasos li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid rgba(0, 146, 57, 0.1) !important;
}

#roseo-form-wrapper .success-pasos li:last-child {
    border-bottom: none !important;
}

#roseo-form-wrapper .success-pasos .paso-numero {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 28px !important;
    height: 28px !important;
    background: var(--mfm-primary) !important;
    color: #fff !important;
    border-radius: 50% !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

#roseo-form-wrapper .success-pasos .paso-texto {
    flex: 1 !important;
    font-size: 15px !important;
    color: var(--mfm-text) !important;
    line-height: 1.5 !important;
}

#roseo-form-wrapper .success-gracias {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: var(--mfm-secondary) !important;
    margin-top: 24px !important;
}

#roseo-form-wrapper .success-details {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    max-width: 500px !important;
    margin: 0 auto 32px !important;
    text-align: left !important;
}

#roseo-form-wrapper .detail-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px !important;
    background: #f0fdf4 !important;
    border-radius: var(--mfm-radius-sm) !important;
    border-left: 4px solid var(--mfm-secondary) !important;
}

#roseo-form-wrapper .detail-item i {
    font-size: 20px !important;
    color: var(--mfm-secondary) !important;
}

#roseo-form-wrapper .detail-item span {
    font-size: 15px !important;
    color: var(--mfm-primary) !important;
}

#roseo-form-wrapper .success-actions {
    margin-top: 32px !important;
}

/* Botón de éxito en step-completed */
#roseo-form-wrapper .success-actions .btn-success-home,
#roseo-form-wrapper .success-actions .roseo-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 16px 40px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--mfm-primary, #009239) 0%, var(--mfm-secondary, #015328) 100%) !important;
    border: none !important;
    border-radius: var(--mfm-radius, 12px) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(0, 146, 57, 0.3) !important;
}

#roseo-form-wrapper .success-actions .btn-success-home:hover,
#roseo-form-wrapper .success-actions .roseo-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 146, 57, 0.4) !important;
    background: linear-gradient(135deg, var(--mfm-secondary, #015328) 0%, var(--mfm-primary, #009239) 100%) !important;
}

#roseo-form-wrapper .success-actions .btn-success-home i,
#roseo-form-wrapper .success-actions .roseo-btn i {
    font-size: 20px !important;
}

@media (max-width: 768px) {
    #roseo-form-wrapper .success-icon {
        font-size: 60px !important;
    }

    #roseo-form-wrapper .success-title {
        font-size: 24px !important;
    }

    #roseo-form-wrapper .success-message {
        font-size: 16px !important;
    }

    #roseo-form-wrapper .success-actions .btn-success-home,
    #roseo-form-wrapper .success-actions .roseo-btn {
        padding: 14px 30px !important;
        font-size: 16px !important;
        width: 100% !important;
    }
}

/* ============================================================================
   STEP 5 - RESUMEN Y CONFIRMACIÓN
   ============================================================================ */

#roseo-form-wrapper .roseo-step-5-resumen {
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 30px 20px !important;
}

#roseo-form-wrapper .roseo-step-5-resumen .roseo-step-header {
    text-align: center !important;
    margin-bottom: 30px !important;
}

#roseo-form-wrapper .roseo-step-5-resumen .roseo-step-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: var(--mfm-primary) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
}

#roseo-form-wrapper .roseo-step-5-resumen .roseo-step-title i {
    font-size: 32px !important;
}

#roseo-form-wrapper .roseo-step-5-resumen .roseo-step-description {
    font-size: 16px !important;
    color: var(--mfm-text) !important;
    margin-top: 10px !important;
    text-align: center !important;
    width: 100% !important;
}

/* Aviso de revisión - CENTRADO */
#roseo-form-wrapper .resumen-aviso {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%) !important;
    border: none !important;
    border-radius: var(--mfm-radius) !important;
    padding: 16px 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 14px !important;
    margin-bottom: 28px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 600px !important;
}

#roseo-form-wrapper .resumen-aviso i {
    color: #009239 !important;
    font-size: 24px !important;
    flex-shrink: 0 !important;
}

#roseo-form-wrapper .resumen-aviso span {
    color: #015328 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
}

/* Grid de cards */
#roseo-form-wrapper .resumen-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
    margin-bottom: 40px !important;
}

/* Card de resumen */
#roseo-form-wrapper .resumen-card {
    background: white !important;
    border: 2px solid var(--mfm-border) !important;
    border-radius: var(--mfm-radius) !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}

#roseo-form-wrapper .resumen-card:hover {
    box-shadow: var(--mfm-shadow) !important;
}

#roseo-form-wrapper .resumen-card-header {
    background: linear-gradient(135deg, var(--mfm-primary) 0%, var(--mfm-secondary) 100%) !important;
    color: white !important;
    padding: 16px 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

#roseo-form-wrapper .resumen-card-header i {
    font-size: 20px !important;
}

#roseo-form-wrapper .resumen-card-header h3 {
    flex: 1 !important;
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}

#roseo-form-wrapper .btn-editar-seccion {
    background: rgba(255, 255, 255, 0.2) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

#roseo-form-wrapper .btn-editar-seccion:hover {
    background: rgba(255, 255, 255, 0.4) !important;
    transform: scale(1.1) !important;
}

#roseo-form-wrapper .btn-editar-seccion i {
    font-size: 14px !important;
    color: white !important;
}

#roseo-form-wrapper .resumen-card-body {
    padding: 20px !important;
}

#roseo-form-wrapper .resumen-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

#roseo-form-wrapper .resumen-item:last-child {
    border-bottom: none !important;
}

#roseo-form-wrapper .resumen-label {
    font-size: 14px !important;
    color: #666 !important;
    font-weight: 500 !important;
}

#roseo-form-wrapper .resumen-value {
    font-size: 14px !important;
    color: var(--mfm-text) !important;
    font-weight: 600 !important;
    text-align: right !important;
    max-width: 60% !important;
}

/* Sección Legal */
#roseo-form-wrapper .resumen-legal-section {
    background: #f8f9fa !important;
    border: 2px solid var(--mfm-border) !important;
    border-radius: var(--mfm-radius) !important;
    padding: 24px !important;
}

#roseo-form-wrapper .resumen-legal-section h3 {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--mfm-primary) !important;
    margin: 0 0 20px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

#roseo-form-wrapper .resumen-legal-section h3 i {
    font-size: 20px !important;
}

#roseo-form-wrapper .legal-checkboxes {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

#roseo-form-wrapper .legal-checkbox {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    cursor: pointer !important;
    padding: 12px 16px !important;
    background: white !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

#roseo-form-wrapper .legal-checkbox:hover {
    border-color: var(--mfm-primary) !important;
    background: #f0fdf4 !important;
}

/* CHECKBOX NATIVO - NO OCULTAR */
#roseo-form-wrapper .legal-checkbox input[type="checkbox"] {
    display: inline-block !important;
    width: 22px !important;
    height: 22px !important;
    accent-color: var(--mfm-primary, #009239) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}

/* Checkmark custom - DESHABILITADO, usamos checkbox nativo */
#roseo-form-wrapper .legal-checkbox .checkmark {
    display: none !important;
    /* Ocultar si existe, usamos checkbox nativo */
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    border: 2px solid #ccc !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    margin-top: 2px !important;
}

#roseo-form-wrapper .legal-checkbox input:checked+.checkmark {
    background: var(--mfm-primary) !important;
    border-color: var(--mfm-primary) !important;
}

#roseo-form-wrapper .legal-checkbox input:checked+.checkmark::after {
    content: '✓' !important;
    color: white !important;
    font-size: 14px !important;
    font-weight: bold !important;
}

#roseo-form-wrapper .legal-checkbox .legal-text {
    font-size: 14px !important;
    color: var(--mfm-text) !important;
    line-height: 1.5 !important;
}

#roseo-form-wrapper .legal-checkbox .legal-text a {
    color: var(--mfm-primary) !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
}

#roseo-form-wrapper .legal-checkbox .legal-text a:hover {
    color: var(--mfm-secondary) !important;
}

#roseo-form-wrapper .legal-checkbox .required {
    color: #dc3545 !important;
    font-weight: bold !important;
}

/* Error state */
#roseo-form-wrapper .legal-checkbox.error {
    border-color: #dc3545 !important;
    background: #fff5f5 !important;
}

#roseo-form-wrapper .legal-checkbox.error .checkmark {
    border-color: #dc3545 !important;
}

/* Step 5 - Responsive */
@media (max-width: 768px) {
    #roseo-form-wrapper .resumen-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    #roseo-form-wrapper .roseo-step-5-resumen {
        padding: 20px 15px !important;
    }

    #roseo-form-wrapper .roseo-step-5-resumen .roseo-step-title {
        font-size: 24px !important;
    }

    #roseo-form-wrapper .resumen-item {
        flex-direction: column !important;
        gap: 4px !important;
    }

    #roseo-form-wrapper .resumen-value {
        text-align: left !important;
        max-width: 100% !important;
    }

    #roseo-form-wrapper .resumen-legal-section {
        padding: 16px !important;
    }

    #roseo-form-wrapper .legal-checkbox {
        padding: 10px 12px !important;
    }
}

/* ============================================
   STEP 1.1 - LAYOUT Y HEADER
   ============================================ */
#roseo-form-wrapper .roseo-step-1-1-layout {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 40px 20px !important;
    min-height: auto !important;
}

#roseo-form-wrapper .roseo-step-header {
    text-align: center !important;
    margin-bottom: 48px !important;
    padding: 30px 0 !important;
}

#roseo-form-wrapper .roseo-step-title {
    font-size: 36px !important;
    font-weight: 700 !important;
    color: var(--mfm-primary) !important;
    margin-bottom: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 15px !important;
}

#roseo-form-wrapper .roseo-step-title i {
    color: var(--mfm-secondary) !important;
    font-size: 38px !important;
}

#roseo-form-wrapper .roseo-step-description {
    font-size: 18px !important;
    color: var(--mfm-text) !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
    max-width: 600px !important;
    margin: 0 auto 16px auto !important;
    text-align: center !important;
    width: 100% !important;
}

/* ============================================
   STEP 1.1 - FORMULARIO DE DATOS
   ============================================ */
#roseo-form-wrapper .tipo-cliente-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: linear-gradient(135deg, #f0fdf4 0%, #e6f7ed 100%) !important;
    color: var(--mfm-primary) !important;
    padding: 12px 24px !important;
    border-radius: 50px !important;
    font-size: 14px !important;
    margin-top: 16px !important;
    border: 2px solid var(--mfm-accent) !important;
}

#roseo-form-wrapper .tipo-cliente-badge i {
    color: var(--mfm-secondary) !important;
    font-size: 16px !important;
}

#roseo-form-wrapper .tipo-cliente-badge strong {
    font-weight: 700 !important;
}

#roseo-form-wrapper .roseo-form-fields {
    max-width: 900px !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px 32px !important;
}

@media (max-width: 768px) {
    #roseo-form-wrapper .roseo-form-fields {
        grid-template-columns: 1fr !important;
    }
}

#roseo-form-wrapper .roseo-form-group {
    margin-bottom: 0 !important;
}

#roseo-form-wrapper .roseo-form-label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--mfm-primary) !important;
    margin-bottom: 12px !important;
}

#roseo-form-wrapper .roseo-form-label i {
    color: var(--mfm-secondary) !important;
    font-size: 18px !important;
}

#roseo-form-wrapper .roseo-form-label .required {
    color: #dc3545 !important;
    font-weight: 700 !important;
}

#roseo-form-wrapper .roseo-form-field {
    width: 100% !important;
    padding: 16px 20px !important;
    border: 2px solid var(--mfm-border) !important;
    border-radius: var(--mfm-radius) !important;
    font-size: 16px !important;
    font-family: inherit !important;
    transition: var(--mfm-transition) !important;
    background: white !important;
    color: var(--mfm-primary) !important;
}

#roseo-form-wrapper .roseo-form-field:focus {
    outline: none !important;
    border-color: var(--mfm-secondary) !important;
    box-shadow: 0 0 0 4px rgba(0, 146, 57, 0.1) !important;
}

#roseo-form-wrapper .roseo-form-field.error {
    border-color: #dc3545 !important;
    background: #fff5f5 !important;
}

#roseo-form-wrapper .roseo-form-field.valid {
    border-color: var(--mfm-secondary) !important;
    background: #f0fdf4 !important;
}

#roseo-form-wrapper .error-message {
    display: none !important;
    color: #dc3545 !important;
    font-size: 14px !important;
    margin-top: 8px !important;
    font-weight: 500 !important;
}

#roseo-form-wrapper .error-message.show {
    display: block !important;
    animation: shake 0.4s ease !important;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-8px);
    }

    75% {
        transform: translateX(8px);
    }
}

/* ============================================
   STEP 1.1 - RESPONSIVE
   ============================================ */
@media (max-width: 991px) {
    #roseo-form-wrapper .roseo-step-1-1-layout {
        padding: 30px 15px !important;
    }

    #roseo-form-wrapper .roseo-step-header {
        margin-bottom: 36px !important;
        padding: 20px 0 !important;
    }

    #roseo-form-wrapper .roseo-step-title {
        font-size: 30px !important;
    }

    #roseo-form-wrapper .roseo-step-title i {
        font-size: 32px !important;
    }

    #roseo-form-wrapper .roseo-step-description {
        font-size: 16px !important;
    }

    #roseo-form-wrapper .roseo-form-fields {
        max-width: 100% !important;
    }

    #roseo-form-wrapper .roseo-form-group {
        margin-bottom: 24px !important;
    }

    #roseo-form-wrapper .roseo-form-field {
        padding: 14px 16px !important;
        font-size: 15px !important;
    }
}

@media (max-width: 576px) {
    #roseo-form-wrapper .roseo-step-1-1-layout {
        padding: 20px 10px !important;
    }

    #roseo-form-wrapper .roseo-step-header {
        margin-bottom: 24px !important;
        padding: 15px 0 !important;
    }

    #roseo-form-wrapper .roseo-step-title {
        font-size: 24px !important;
        gap: 10px !important;
    }

    #roseo-form-wrapper .roseo-step-title i {
        font-size: 26px !important;
    }

    #roseo-form-wrapper .roseo-step-description {
        font-size: 14px !important;
    }

    #roseo-form-wrapper .roseo-form-field {
        padding: 12px 14px !important;
        font-size: 14px !important;
    }
}

/* ============================================
   STEP IDENTIFICACION - LAYOUT Y HEADER
   ============================================ */
#roseo-form-wrapper .roseo-step-identificacion-layout {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 40px 20px !important;
    min-height: auto !important;
}

#roseo-form-wrapper .required {
    color: #dc3545 !important;
}

/* Radio Cards */
#roseo-form-wrapper .roseo-radio-group {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
}

#roseo-form-wrapper .roseo-radio-card {
    position: relative !important;
    cursor: pointer !important;
}

#roseo-form-wrapper .roseo-radio-card input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#roseo-form-wrapper .radio-card-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 24px !important;
    background: white !important;
    border: 2px solid var(--mfm-border) !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
}

#roseo-form-wrapper .roseo-radio-card:hover .radio-card-content {
    border-color: var(--mfm-accent) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

#roseo-form-wrapper .roseo-radio-card input:checked+.radio-card-content {
    border-color: var(--mfm-secondary) !important;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
    box-shadow: 0 4px 16px rgba(0, 146, 57, 0.2) !important;
}

#roseo-form-wrapper .radio-card-icon {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    background: #f0fdf4 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    color: var(--mfm-secondary) !important;
    transition: all 0.3s ease !important;
}

#roseo-form-wrapper .roseo-radio-card input:checked+.radio-card-content .radio-card-icon {
    background: var(--mfm-secondary) !important;
    color: white !important;
    transform: scale(1.1) !important;
}

#roseo-form-wrapper .radio-card-text {
    text-align: center !important;
}

#roseo-form-wrapper .radio-card-text strong {
    display: block !important;
    font-size: 16px !important;
    color: var(--mfm-primary) !important;
    margin-bottom: 4px !important;
}

#roseo-form-wrapper .radio-card-text span {
    display: block !important;
    font-size: 13px !important;
    color: #6b7280 !important;
}

/* Campos condicionales */
#roseo-form-wrapper .conditional-fields {
    margin-top: 24px !important;
    padding-top: 24px !important;
    border-top: 2px solid #e5e7eb !important;
    animation: fadeIn 0.4s ease-out !important;
}

@media (max-width: 991px) {
    #roseo-form-wrapper .roseo-step-identificacion-layout {
        padding: 30px 15px !important;
    }

    #roseo-form-wrapper .roseo-radio-group {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 576px) {
    #roseo-form-wrapper .roseo-step-identificacion-layout {
        padding: 20px 10px !important;
    }
}

@media (max-width: 768px) {
    #roseo-form-wrapper .roseo-radio-group {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   STEP 3 MUNICIPAL - SEARCH
   ============================================ */
#roseo-form-wrapper #step-3-municipal {
    position: relative !important;
}

#roseo-form-wrapper #step-3-municipal .roseo-step-content {
    position: relative !important;
}

#roseo-form-wrapper #step-3-municipal .municipal-search-container {
    max-width: 600px !important;
    margin: 40px auto !important;
    position: relative !important;
}

#roseo-form-wrapper #step-3-municipal .municipal-search-wrapper {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

#roseo-form-wrapper #step-3-municipal .municipal-search-icon {
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--mfm-secondary) !important;
    font-size: 18px !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

#roseo-form-wrapper #step-3-municipal .municipal-search-input {
    width: 100% !important;
    padding: 18px 55px 18px 20px !important;
    font-size: 16px !important;
    border: 2px solid var(--mfm-border) !important;
    border-radius: 12px !important;
    outline: none !important;
    transition: all 0.3s ease !important;
    background: white !important;
}

#roseo-form-wrapper #step-3-municipal .municipal-search-input:focus {
    border-color: var(--mfm-secondary) !important;
    box-shadow: 0 0 0 4px rgba(0, 146, 57, 0.1) !important;
}

#roseo-form-wrapper #step-3-municipal .municipal-search-input::placeholder {
    color: #999 !important;
}

#roseo-form-wrapper #step-3-municipal .municipal-clear-btn {
    position: absolute !important;
    right: 50px !important;
    background: none !important;
    border: none !important;
    color: #999 !important;
    cursor: pointer !important;
    padding: 8px !important;
    font-size: 16px !important;
    transition: color 0.2s !important;
}

#roseo-form-wrapper #step-3-municipal .municipal-clear-btn:hover {
    color: #666 !important;
}

#roseo-form-wrapper #step-3-municipal .municipal-results-dropdown {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: white !important;
    border: 2px solid var(--mfm-border) !important;
    border-top: none !important;
    border-radius: 0 0 12px 12px !important;
    max-height: 300px !important;
    overflow-y: auto !important;
    z-index: 1000 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

#roseo-form-wrapper #step-3-municipal .municipal-result-item {
    padding: 14px 20px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    transition: background 0.2s !important;
}

#roseo-form-wrapper #step-3-municipal .municipal-result-item:last-child {
    border-bottom: none !important;
}

#roseo-form-wrapper #step-3-municipal .municipal-result-item:hover {
    background: #f8fff8 !important;
}

#roseo-form-wrapper #step-3-municipal .municipal-result-item i {
    color: var(--mfm-secondary) !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
}

#roseo-form-wrapper #step-3-municipal .municipal-result-item .name {
    font-weight: 500 !important;
    color: #333 !important;
}

#roseo-form-wrapper #step-3-municipal .municipal-no-results {
    padding: 20px !important;
    text-align: center !important;
    color: #999 !important;
}

#roseo-form-wrapper #step-3-municipal .municipal-no-results i {
    display: block !important;
    font-size: 24px !important;
    margin-bottom: 8px !important;
    color: #ccc !important;
}

#roseo-form-wrapper #step-3-municipal .municipal-selected-container {
    max-width: 600px !important;
    margin: 30px auto 60px !important;
    padding-bottom: 20px !important;
}

#roseo-form-wrapper #step-3-municipal .municipal-selected-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 15px !important;
    color: var(--mfm-secondary) !important;
    font-weight: 600 !important;
}

#roseo-form-wrapper #step-3-municipal .municipal-selected-header i {
    font-size: 18px !important;
}

#roseo-form-wrapper #step-3-municipal .municipal-selected-card {
    background: linear-gradient(135deg, #f8fff8 0%, #e8f5e9 100%) !important;
    border: 2px solid var(--mfm-secondary) !important;
    border-radius: 12px !important;
    padding: 20px 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

#roseo-form-wrapper #step-3-municipal .municipal-selected-info {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

#roseo-form-wrapper #step-3-municipal .municipal-selected-icon {
    width: 50px !important;
    height: 50px !important;
    background: var(--mfm-secondary) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 20px !important;
}

#roseo-form-wrapper #step-3-municipal .municipal-selected-details h4 {
    margin: 0 !important;
    font-size: 18px !important;
    color: var(--mfm-primary) !important;
}

#roseo-form-wrapper #step-3-municipal .municipal-remove-btn {
    background: none !important;
    border: none !important;
    color: #cc0000 !important;
    cursor: pointer !important;
    padding: 10px !important;
    font-size: 18px !important;
    transition: all 0.2s !important;
    border-radius: 8px !important;
}

#roseo-form-wrapper #step-3-municipal .municipal-remove-btn:hover {
    background: rgba(204, 0, 0, 0.1) !important;
}

@media (max-width: 768px) {
    #roseo-form-wrapper #step-3-municipal .municipal-search-container {
        margin: 30px 15px !important;
    }

    #roseo-form-wrapper #step-3-municipal .municipal-search-input {
        padding: 15px 50px 15px 15px !important;
        font-size: 15px !important;
    }

    #roseo-form-wrapper #step-3-municipal .municipal-selected-card {
        flex-direction: column !important;
        gap: 15px !important;
        text-align: center !important;
    }

    #roseo-form-wrapper #step-3-municipal .municipal-selected-info {
        flex-direction: column !important;
    }
}

/* ============================================
   STEP 3 RESUMEN - SUMMARY VIEW
   ============================================ */
#roseo-form-wrapper .resumen-container {
    max-width: 800px !important;
    margin: 40px auto !important;
    padding: 40px !important;
    background: white !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 40px rgba(1, 83, 40, 0.15) !important;
}

#roseo-form-wrapper .resumen-header {
    text-align: center !important;
    margin-bottom: 30px !important;
    padding-bottom: 20px !important;
    border-bottom: 3px solid var(--mfm-accent) !important;
}

#roseo-form-wrapper .resumen-header i.check-icon {
    font-size: 48px !important;
    color: var(--mfm-secondary) !important;
    margin-bottom: 16px !important;
    display: block !important;
}

#roseo-form-wrapper .resumen-header h2 {
    color: var(--mfm-primary) !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
}

#roseo-form-wrapper .resumen-header p {
    color: var(--mfm-text) !important;
    font-size: 16px !important;
}

#roseo-form-wrapper .resumen-card {
    background: linear-gradient(135deg, #f0f9f4 0%, #ffffff 100%) !important;
    border: 2px solid var(--mfm-secondary) !important;
    border-radius: 16px !important;
    padding: 30px !important;
    margin-bottom: 30px !important;
}

#roseo-form-wrapper .resumen-card-header {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    margin-bottom: 20px !important;
}

#roseo-form-wrapper .resumen-icon-circle {
    width: 60px !important;
    height: 60px !important;
    background: linear-gradient(135deg, var(--mfm-primary), var(--mfm-secondary)) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#roseo-form-wrapper .resumen-icon-circle i {
    font-size: 28px !important;
    color: white !important;
}

#roseo-form-wrapper .resumen-tipo-badge {
    display: inline-block !important;
    padding: 4px 12px !important;
    background: var(--mfm-primary) !important;
    color: white !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
}

#roseo-form-wrapper .resumen-card-title {
    color: var(--mfm-primary) !important;
    font-size: 22px !important;
    margin: 0 !important;
}

#roseo-form-wrapper .resumen-datos-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 16px !important;
    margin-top: 20px !important;
}

#roseo-form-wrapper .resumen-dato {
    padding: 16px !important;
    background: white !important;
    border-radius: 12px !important;
    border-left: 4px solid var(--mfm-secondary) !important;
}

#roseo-form-wrapper .resumen-dato-label {
    color: var(--mfm-text) !important;
    font-size: 13px !important;
    margin-bottom: 4px !important;
}

#roseo-form-wrapper .resumen-dato-valor {
    color: var(--mfm-primary) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
}

#roseo-form-wrapper .resumen-acciones {
    display: flex !important;
    gap: 15px !important;
    justify-content: center !important;
}

#roseo-form-wrapper .resumen-btn {
    padding: 14px 28px !important;
    border: none !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    transition: all 0.3s ease !important;
}

#roseo-form-wrapper .resumen-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

#roseo-form-wrapper .resumen-btn-editar {
    background: var(--mfm-secondary) !important;
    color: white !important;
}

#roseo-form-wrapper .resumen-btn-editar:hover {
    background: var(--mfm-primary) !important;
}

#roseo-form-wrapper .resumen-btn-continuar {
    background: linear-gradient(135deg, var(--mfm-primary) 0%, var(--mfm-secondary) 100%) !important;
    color: white !important;
}

/* ============================================
   STEP 3 SUPRAMUNICIPAL - MULTI-SELECT
   ============================================ */
#roseo-form-wrapper #step-3-supramunicipal {
    max-width: 800px !important;
    margin: 0 auto !important;
    padding: 20px !important;
}

#roseo-form-wrapper #step-3-supramunicipal .supramunicipal-intro {
    text-align: center !important;
    margin-bottom: 30px !important;
}

#roseo-form-wrapper #step-3-supramunicipal .supramunicipal-description {
    color: var(--mfm-text) !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    margin-bottom: 15px !important;
}

#roseo-form-wrapper #step-3-supramunicipal .supramunicipal-hint {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #e8f4fd !important;
    padding: 10px 18px !important;
    border-radius: 20px !important;
    color: #1976d2 !important;
    font-size: 14px !important;
}

#roseo-form-wrapper #step-3-supramunicipal .supramunicipal-hint i {
    font-size: 16px !important;
}

/* Buscador Supramunicipal */
#roseo-form-wrapper #step-3-supramunicipal .supramunicipal-search-container {
    position: relative !important;
    max-width: 600px !important;
    margin: 0 auto 30px !important;
}

#roseo-form-wrapper #step-3-supramunicipal .supramunicipal-search-wrapper {
    position: relative !important;
}

#roseo-form-wrapper #step-3-supramunicipal .supramunicipal-search-input {
    width: 100% !important;
    padding: 18px 50px 18px 20px !important;
    border: 2px solid var(--mfm-border) !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    transition: all 0.3s ease !important;
    background: white !important;
}

#roseo-form-wrapper #step-3-supramunicipal .supramunicipal-search-input:focus {
    outline: none !important;
    border-color: var(--mfm-primary) !important;
    box-shadow: 0 0 0 4px rgba(0, 146, 57, 0.1) !important;
}

#roseo-form-wrapper #step-3-supramunicipal .supramunicipal-search-icon {
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #999 !important;
    font-size: 18px !important;
    pointer-events: none !important;
}

#roseo-form-wrapper #step-3-supramunicipal .supramunicipal-clear-btn {
    position: absolute !important;
    right: 50px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: none !important;
    border: none !important;
    color: #999 !important;
    cursor: pointer !important;
    padding: 5px !important;
    font-size: 16px !important;
}

#roseo-form-wrapper #step-3-supramunicipal .supramunicipal-clear-btn:hover {
    color: #cc0000 !important;
}

/* Dropdown resultados Supramunicipal */
#roseo-form-wrapper #step-3-supramunicipal .supramunicipal-results-dropdown {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: white !important;
    border: 2px solid var(--mfm-border) !important;
    border-top: none !important;
    border-radius: 0 0 12px 12px !important;
    max-height: 300px !important;
    overflow-y: auto !important;
    z-index: 1000 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

#roseo-form-wrapper #step-3-supramunicipal .supramunicipal-result-item {
    padding: 12px 20px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    transition: background 0.2s !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

#roseo-form-wrapper #step-3-supramunicipal .supramunicipal-result-item:last-child {
    border-bottom: none !important;
}

#roseo-form-wrapper #step-3-supramunicipal .supramunicipal-result-item:hover {
    background: #f5f5f5 !important;
}

#roseo-form-wrapper #step-3-supramunicipal .supramunicipal-result-item.disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    background: #fafafa !important;
}

#roseo-form-wrapper #step-3-supramunicipal .supramunicipal-result-item i {
    color: var(--mfm-primary) !important;
    font-size: 16px !important;
}

#roseo-form-wrapper #step-3-supramunicipal .supramunicipal-result-item .name {
    flex: 1 !important;
    font-weight: 500 !important;
}

#roseo-form-wrapper #step-3-supramunicipal .supramunicipal-result-item .already-added {
    font-size: 12px !important;
    color: #999 !important;
    font-style: italic !important;
}

#roseo-form-wrapper #step-3-supramunicipal .supramunicipal-no-results {
    padding: 20px !important;
    text-align: center !important;
    color: #666 !important;
}

#roseo-form-wrapper #step-3-supramunicipal .supramunicipal-no-results i {
    font-size: 24px !important;
    color: #ccc !important;
    display: block !important;
    margin-bottom: 10px !important;
}

/* Municipios seleccionados - Tags */
#roseo-form-wrapper #step-3-supramunicipal .supramunicipal-selected-container {
    max-width: 600px !important;
    margin: 30px auto 60px !important;
    padding: 20px !important;
    background: #f8fff8 !important;
    border: 2px solid var(--mfm-secondary) !important;
    border-radius: 12px !important;
}

#roseo-form-wrapper #step-3-supramunicipal .supramunicipal-selected-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 15px !important;
    color: var(--mfm-secondary) !important;
    font-weight: 600 !important;
}

#roseo-form-wrapper #step-3-supramunicipal .supramunicipal-selected-header i {
    font-size: 18px !important;
}

#roseo-form-wrapper #step-3-supramunicipal .supramunicipal-count {
    background: var(--mfm-primary) !important;
    color: white !important;
    padding: 2px 10px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    margin-left: auto !important;
}

#roseo-form-wrapper #step-3-supramunicipal .supramunicipal-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

#roseo-form-wrapper #step-3-supramunicipal .supramunicipal-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%) !important;
    border: 1px solid var(--mfm-primary) !important;
    border-radius: 20px !important;
    padding: 8px 12px 8px 16px !important;
    font-size: 14px !important;
    color: var(--mfm-secondary) !important;
    transition: all 0.2s !important;
}

#roseo-form-wrapper #step-3-supramunicipal .supramunicipal-tag:hover {
    background: linear-gradient(135deg, #c8e6c9 0%, #a5d6a7 100%) !important;
}

#roseo-form-wrapper #step-3-supramunicipal .supramunicipal-tag-icon {
    color: var(--mfm-primary) !important;
}

#roseo-form-wrapper #step-3-supramunicipal .supramunicipal-tag-name {
    font-weight: 500 !important;
}

#roseo-form-wrapper #step-3-supramunicipal .supramunicipal-tag-remove {
    background: none !important;
    border: none !important;
    color: #cc0000 !important;
    cursor: pointer !important;
    padding: 4px !important;
    font-size: 14px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s !important;
}

#roseo-form-wrapper #step-3-supramunicipal .supramunicipal-tag-remove:hover {
    background: rgba(204, 0, 0, 0.1) !important;
}

/* Responsive Supramunicipal */
@media (max-width: 768px) {
    #roseo-form-wrapper #step-3-supramunicipal .supramunicipal-search-container {
        margin: 0 15px 30px !important;
    }

    #roseo-form-wrapper #step-3-supramunicipal .supramunicipal-search-input {
        padding: 15px 50px 15px 15px !important;
        font-size: 15px !important;
    }

    #roseo-form-wrapper #step-3-supramunicipal .supramunicipal-selected-container {
        margin: 20px 15px 60px !important;
    }

    #roseo-form-wrapper #step-3-supramunicipal .supramunicipal-tag {
        font-size: 13px !important;
        padding: 6px 10px 6px 14px !important;
    }
}

/* ============================================
   STEP 5 UBICACION - GRID & HELPER
   ============================================ */
#roseo-form-wrapper .roseo-grid-2 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    margin-bottom: 16px !important;
}

#roseo-form-wrapper .roseo-location-helper {
    background: #f0fdf4 !important;
    border: 2px solid var(--mfm-accent) !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-bottom: 30px !important;
}

#roseo-form-wrapper .roseo-location-helper h3 {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: var(--mfm-primary) !important;
    font-size: 18px !important;
    margin: 0 0 10px 0 !important;
}

#roseo-form-wrapper .roseo-location-helper ul {
    margin: 0 !important;
    padding-left: 20px !important;
    color: var(--mfm-text) !important;
    line-height: 1.6 !important;
}

#roseo-form-wrapper .alert {
    padding: 16px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 24px !important;
}

#roseo-form-wrapper .alert-info {
    background: #e0f2fe !important;
    border: 1px solid #0284c7 !important;
    color: #0c4a6e !important;
}

#roseo-form-wrapper .alert i {
    font-size: 20px !important;
}

@media (max-width: 768px) {
    #roseo-form-wrapper .roseo-grid-2 {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   TEMPLATE UNIFICADO - LAYOUT RESPONSIVO
   ============================================ */
#roseo-form-wrapper .roseo-unified-template {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 40px 20px !important;
    min-height: calc(100vh - 200px) !important;
    animation: slideIn 0.5s ease-out !important;
}

/* ============================================
   CONTENIDO DINÁMICO - TRANSICIONES
   ============================================ */
#roseo-form-wrapper .roseo-step-content {
    position: relative !important;
    min-height: 400px !important;
    transition: all 0.4s ease !important;
}

/* Estados de transición */
#roseo-form-wrapper .roseo-step-content.loading {
    opacity: 0.5 !important;
    pointer-events: none !important;
}

#roseo-form-wrapper .roseo-step-content.entering {
    animation: fadeInUp 0.6s ease-out !important;
}

#roseo-form-wrapper .roseo-step-content.exiting {
    animation: fadeOutDown 0.4s ease-in !important;
}

/* ============================================
   STEP PROGRESS BADGE
   ============================================ */
#roseo-form-wrapper .roseo-step-progress {
    display: inline-flex !important;
    align-items: center !important;
    background: linear-gradient(135deg, #f0fdf4 0%, #e6f7ed 100%) !important;
    color: var(--mfm-primary) !important;
    padding: 8px 20px !important;
    border-radius: 25px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border: 2px solid var(--mfm-accent) !important;
    margin-top: 16px !important;
}

/* ============================================
   TARJETAS DE SELECCIÓN (para step-1)
   ============================================ */
#roseo-form-wrapper .roseo-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 20px !important;
    max-width: 800px !important;
    margin: 0 auto !important;
}

#roseo-form-wrapper .roseo-card {
    position: relative !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

#roseo-form-wrapper .roseo-card input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#roseo-form-wrapper .roseo-card-content {
    background: white !important;
    border: 3px solid var(--mfm-border) !important;
    border-radius: 16px !important;
    padding: 24px 20px !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    height: 160px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
}

#roseo-form-wrapper .roseo-card:hover .roseo-card-content {
    border-color: var(--mfm-accent) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important;
}

#roseo-form-wrapper .roseo-card input:checked+.roseo-card-content {
    border-color: var(--mfm-secondary) !important;
    background: linear-gradient(135deg, #e6f7ed 0%, #d1f2e1 100%) !important;
    box-shadow: 0 8px 25px rgba(0, 146, 57, 0.25) !important;
    transform: translateY(-2px) !important;
}

#roseo-form-wrapper .roseo-card-icon {
    font-size: 36px !important;
    color: var(--mfm-secondary) !important;
    transition: all 0.3s ease !important;
}

#roseo-form-wrapper .roseo-card input:checked+.roseo-card-content .roseo-card-icon {
    transform: scale(1.1) !important;
    color: var(--mfm-primary) !important;
}

#roseo-form-wrapper .roseo-card-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--mfm-primary) !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

#roseo-form-wrapper .roseo-card-description {
    font-size: 12px !important;
    color: var(--mfm-text) !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

/* Placeholder */
#roseo-form-wrapper .roseo-placeholder {
    text-align: center !important;
    padding: 60px 20px !important;
    color: var(--mfm-text) !important;
}

#roseo-form-wrapper .roseo-placeholder i {
    color: var(--mfm-accent) !important;
    margin-bottom: 20px !important;
}

#roseo-form-wrapper .roseo-placeholder h3 {
    font-size: 24px !important;
    color: var(--mfm-primary) !important;
    margin-bottom: 12px !important;
    font-weight: 600 !important;
}

#roseo-form-wrapper .roseo-placeholder p {
    font-size: 16px !important;
    color: #6b7280 !important;
    margin: 0 !important;
}

/* ============================================
   ANIMACIONES GLOBALES
   ============================================ */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOutDown {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-30px);
    }
}

/* ============================================
   TEMPLATE UNIFICADO - RESPONSIVE
   ============================================ */
@media (max-width: 991px) {
    #roseo-form-wrapper .roseo-unified-template {
        padding: 30px 15px !important;
    }

    #roseo-form-wrapper .roseo-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
        gap: 16px !important;
    }

    #roseo-form-wrapper .roseo-card-content {
        height: 140px !important;
        padding: 20px 16px !important;
    }

    #roseo-form-wrapper .roseo-card-icon {
        font-size: 30px !important;
    }

    #roseo-form-wrapper .roseo-card-title {
        font-size: 14px !important;
    }

    #roseo-form-wrapper .roseo-card-description {
        font-size: 11px !important;
    }
}

@media (max-width: 576px) {
    #roseo-form-wrapper .roseo-unified-template {
        padding: 20px 10px !important;
    }

    #roseo-form-wrapper .roseo-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    #roseo-form-wrapper .roseo-card-content {
        height: 120px !important;
        padding: 16px 12px !important;
    }

    #roseo-form-wrapper .roseo-card-icon {
        font-size: 28px !important;
    }

    #roseo-form-wrapper .roseo-card-title {
        font-size: 13px !important;
    }

    #roseo-form-wrapper .roseo-card-description {
        font-size: 10px !important;
    }
}

/* ============================================
   STEP 1 - SPECIFIC STYLES
   Using steps_styles configuration
   ============================================ */
#roseo-form-wrapper #step-1-content #tipo-cliente-grid {
    grid-template-columns: repeat(var(--step1-grid-columns, 3), 1fr) !important;
}

#roseo-form-wrapper #step-1-content .roseo-selection-card .card-icon {
    width: var(--step1-icon-size, 48px) !important;
    height: var(--step1-icon-size, 48px) !important;
}

#roseo-form-wrapper #step-1-content .roseo-selection-card:hover {
    background-color: var(--step1-hover-color, #f0fdf4) !important;
}

/* Hide descriptions if show_descriptions=false */
#roseo-form-wrapper[data-step1-show-desc="0"] #step-1-content .card-description {
    display: none !important;
}

/* ============================================
   STEP 1.1 - SPECIFIC STYLES
   ============================================ */
#roseo-form-wrapper #step-1-1-content {
    max-width: var(--step1-1-max-width, 600px) !important;
    margin: 0 auto !important;
}

/* Hide icons if show_label_icons=false */
#roseo-form-wrapper[data-step1-1-show-icons="0"] #step-1-1-content .input-icon {
    display: none !important;
}

/* ============================================
   STEP 2 - SPECIFIC STYLES
   ============================================ */
#roseo-form-wrapper #step-2-content .roseo-selection-card {
    min-height: var(--step2-card-min-height, 200px) !important;
}

/* Hide benefits if show_benefits=false */
#roseo-form-wrapper[data-step2-show-benefits="0"] #step-2-content .card-benefits {
    display: none !important;
}

/* ============================================
   STEP 3 - SPECIFIC STYLES
   ============================================ */
#roseo-form-wrapper .step3-tabs .tab-item.active {
    background-color: var(--step3-tab-active-bg, #f0fdf4) !important;
}

/* Hide tab numbers if show_tab_numbers=false */
#roseo-form-wrapper[data-step3-show-numbers="0"] .step3-tabs .tab-number {
    display: none !important;
}

/* Tab styles - pills vs underline */
#roseo-form-wrapper[data-step3-tab-style="underline"] .step3-tabs .tab-item {
    border-radius: 0 !important;
    border-bottom: 3px solid transparent !important;
}

#roseo-form-wrapper[data-step3-tab-style="underline"] .step3-tabs .tab-item.active {
    border-bottom-color: var(--mfm-primary) !important;
    background: transparent !important;
}

/* ============================================
   STEP 5 - SUMMARY SPECIFIC STYLES
   ============================================ */
#roseo-form-wrapper #step-5-content .summary-card,
#roseo-form-wrapper #step-5-content .resumen-card {
    background-color: var(--step5-card-bg, #f8fafc) !important;
}

/* Summary layout variations */
#roseo-form-wrapper[data-step5-layout="list"] .resumen-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

#roseo-form-wrapper[data-step5-layout="list"] .resumen-card {
    padding: 12px 16px !important;
}

#roseo-form-wrapper[data-step5-layout="accordion"] .resumen-card {
    border-radius: 8px !important;
    overflow: hidden !important;
}

#roseo-form-wrapper[data-step5-layout="accordion"] .resumen-card-header {
    cursor: pointer !important;
}

#roseo-form-wrapper[data-step5-layout="accordion"] .resumen-card-body {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.3s ease !important;
}

#roseo-form-wrapper[data-step5-layout="accordion"] .resumen-card.expanded .resumen-card-body {
    max-height: 500px !important;
}

/* Checkbox styles - Switch */
#roseo-form-wrapper[data-step5-checkbox-style="switch"] .legal-checkbox input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 44px !important;
    height: 24px !important;
    background-color: #e5e7eb !important;
    border-radius: 12px !important;
    position: relative !important;
    cursor: pointer !important;
    transition: background-color 0.3s !important;
    flex-shrink: 0 !important;
}

#roseo-form-wrapper[data-step5-checkbox-style="switch"] .legal-checkbox input[type="checkbox"]::before {
    content: '' !important;
    position: absolute !important;
    width: 20px !important;
    height: 20px !important;
    background-color: white !important;
    border-radius: 50% !important;
    top: 2px !important;
    left: 2px !important;
    transition: transform 0.3s !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

#roseo-form-wrapper[data-step5-checkbox-style="switch"] .legal-checkbox input[type="checkbox"]:checked {
    background-color: var(--mfm-primary) !important;
}

#roseo-form-wrapper[data-step5-checkbox-style="switch"] .legal-checkbox input[type="checkbox"]:checked::before {
    transform: translateX(20px) !important;
}

/* ============================================
   STEP 4 - KPI SPECIFIC STYLES
   ============================================ */
#roseo-form-wrapper #step-4-content .kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(var(--mfm-step4-grid-columns, 4), 1fr) !important;
    gap: 12px !important;
}

#roseo-form-wrapper #step-4-content .kpi-card-option label {
    background-color: var(--mfm-step4-card-bg, #f8fafc) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 16px 12px !important;
    border-radius: 12px !important;
    border: 2px solid var(--mfm-border) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

#roseo-form-wrapper #step-4-content .kpi-card-option label:hover {
    border-color: var(--mfm-primary) !important;
    transform: translateY(-2px) !important;
}

#roseo-form-wrapper #step-4-content .kpi-card-option input:checked+label {
    background-color: var(--mfm-step4-card-selected-bg, #f0fdf4) !important;
    border-color: var(--mfm-primary) !important;
}

#roseo-form-wrapper #step-4-content .kpi-card-icon {
    font-size: var(--mfm-step4-emoji-size, 28px) !important;
    margin-bottom: 8px !important;
}

#roseo-form-wrapper #step-4-content .kpi-card-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    text-align: center !important;
}

#roseo-form-wrapper #step-4-content .kpi-card-desc {
    font-size: 12px !important;
    color: var(--mfm-text) !important;
    opacity: 0.7 !important;
    text-align: center !important;
    margin-top: 4px !important;
}

/* Hide descriptions if disabled */
#roseo-form-wrapper[data-step4-show-desc="0"] #step-4-content .kpi-card-desc {
    display: none !important;
}

/* Responsive Step 4 */
@media (max-width: 768px) {
    #roseo-form-wrapper #step-4-content .kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    #roseo-form-wrapper #step-4-content .kpi-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   COMPLETED SCREEN - SPECIFIC STYLES
   ============================================ */
#roseo-form-wrapper .step-completed .success-icon,
#roseo-form-wrapper .roseo-completed .success-icon {
    font-size: var(--completed-icon-size, 80px) !important;
    color: var(--completed-color, #16a34a) !important;
}

/* Confetti animation when enabled */
#roseo-form-wrapper[data-completed-confetti="1"] .step-completed,
#roseo-form-wrapper[data-completed-confetti="1"] .roseo-completed {
    position: relative !important;
    overflow: hidden !important;
}

@keyframes confetti {
    0% {
        transform: translateY(-100vh) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

#roseo-form-wrapper[data-completed-confetti="1"] .step-completed::before,
#roseo-form-wrapper[data-completed-confetti="1"] .step-completed::after,
#roseo-form-wrapper[data-completed-confetti="1"] .roseo-completed::before,
#roseo-form-wrapper[data-completed-confetti="1"] .roseo-completed::after {
    content: '🎉' !important;
    position: absolute !important;
    font-size: 24px !important;
    animation: confetti 3s ease-in-out infinite !important;
}

#roseo-form-wrapper[data-completed-confetti="1"] .step-completed::before,
#roseo-form-wrapper[data-completed-confetti="1"] .roseo-completed::before {
    left: 20% !important;
    animation-delay: 0s !important;
}

#roseo-form-wrapper[data-completed-confetti="1"] .step-completed::after,
#roseo-form-wrapper[data-completed-confetti="1"] .roseo-completed::after {
    right: 20% !important;
    animation-delay: 0.5s !important;
    content: '✨' !important;
}

/* ============================================
   FINAL CRITICAL OVERRIDE - Step 2 Card Text
   This MUST be at the END of the file for maximum priority
   ============================================ */
html body .roseo-selection-card-step2 h3.card-title,
html body #roseo-form-wrapper .roseo-selection-card-step2 h3.card-title,
html body .site-content .roseo-selection-card-step2 h3.card-title {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #015328 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    text-align: center !important;
    text-indent: 0 !important;
    background: transparent !important;
    -webkit-text-fill-color: #015328 !important;
    height: auto !important;
    overflow: visible !important;
}

html body .roseo-selection-card-step2 p.card-description,
html body #roseo-form-wrapper .roseo-selection-card-step2 p.card-description,
html body .site-content .roseo-selection-card-step2 p.card-description {
    display: block !important;
    visibility: visible !important;
    opacity: 0.85 !important;
    color: #54595F !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    text-align: center !important;
    text-indent: 0 !important;
    background: transparent !important;
    -webkit-text-fill-color: #54595F !important;
    height: auto !important;
    overflow: visible !important;
}


/* ============================================
   ROSEO FORM FIELDS GRID
   Unified grid system for custom fields (Step 1-1 etc)
   ============================================ */
.roseo-form-fields {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 20px;
}

.roseo-form-group {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    min-width: 0;
    /* Prevent flex overflow */
}

/* Width Classes mapped to Grid Columns */
.roseo-field-width-100 {
    grid-column: span 12;
}

.roseo-field-width-75 {
    grid-column: span 9;
}

.roseo-field-width-66 {
    grid-column: span 8;
}

.roseo-field-width-50 {
    grid-column: span 6;
}

.roseo-field-width-33 {
    grid-column: span 4;
}

.roseo-field-width-25 {
    grid-column: span 3;
}

/* Responsive Adjustments */
@media (max-width: 768px) {

    .roseo-field-width-75,
    .roseo-field-width-66,
    .roseo-field-width-50,
    .roseo-field-width-33,
    .roseo-field-width-25 {
        grid-column: span 12 !important;
    }
}