/**
 * Main Styles - Roseo Form
 * Estilos principales del contenedor y estructura general
 * 
 * @package Roseo_Form
 * @version 1.0.0
 */

/* ============================================
   FUENTE INTER - Override Global
   Forzar Inter en todo el formulario
   ============================================ */
#roseo-form-wrapper,
#roseo-form-wrapper *,
#mfm-roseo-wrapper,
#mfm-roseo-wrapper *,
.roseo-form-container,
.roseo-form-container * {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Excepciones para iconos Font Awesome - NO sobreescribir su fuente */
#roseo-form-wrapper .fa,
#roseo-form-wrapper .fas,
#roseo-form-wrapper .far,
#roseo-form-wrapper .fab,
#roseo-form-wrapper .fa-solid,
#roseo-form-wrapper .fa-regular,
#roseo-form-wrapper .fa-brands,
#roseo-form-wrapper [class*="fa-"]:not(input):not(select):not(textarea):not(button) {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "FontAwesome" !important;
}

#roseo-form-wrapper code,
#roseo-form-wrapper pre {
    font-family: 'Monaco', 'Consolas', monospace !important;
}

/* ============================================
   FOOTER VISIBILITY - POSITION FIXED
   ============================================ */
form#roseo-unified-form.roseo-form-visible #roseo-footer-container,
form#roseo-unified-form.roseo-form-visible #roseo-footer-container.roseo-form-hidden,
form#roseo-unified-form.roseo-form-visible #roseo-footer-container.roseo-form-visible {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;
    z-index: 9999 !important;
    background: linear-gradient(to top, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.8) 100%) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.1) !important;
    padding: 16px 24px !important;
    flex-shrink: 0 !important;
    pointer-events: auto !important;
}

form#roseo-unified-form.roseo-form-visible #roseo-footer-container .roseo-footer-navigation,
form#roseo-unified-form.roseo-form-visible #roseo-footer-nav {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    justify-content: space-between !important;
    align-items: center !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    gap: 20px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    pointer-events: auto !important;
    padding: var(--mfm-nav-padding-y, 16px) var(--mfm-nav-padding-x, 24px) !important;
}

/* Buttons must be clickable */
form#roseo-unified-form.roseo-form-visible .roseo-footer-navigation .roseo-btn {
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ============================================
   ROUTER STEPS - CONTROL DE VISIBILIDAD
   ============================================ */

/* TODOS los steps ocultos por defecto con máxima especificidad */
form#roseo-unified-form div#roseo-router-container div.roseo-step,
#roseo-unified-form #roseo-router-container .roseo-step,
.roseo-router-container .roseo-step {
    display: none !important;
    min-height: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 100% !important;
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
}

/* SOLO el step con clase .active es visible */
form#roseo-unified-form div#roseo-router-container div.roseo-step.active,
#roseo-unified-form #roseo-router-container .roseo-step.active,
.roseo-router-container .roseo-step.active {
    display: block !important;
    min-height: 400px !important;
    height: auto !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    animation: fadeIn 0.3s ease-in-out !important;
}

form#roseo-unified-form #roseo-router-container .roseo-step.fade-in {
    animation: fadeIn 0.3s ease-in-out !important;
}

.roseo-router-container {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
}

/* ============================================
   CONTENEDOR PRINCIPAL - LAYOUT FLEXIBLE
   ============================================ */
#roseo-form-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #f8fafc !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    position: relative !important;
}

/* Form unificado - hereda el layout completo */
#roseo-form-wrapper #roseo-unified-form {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    height: auto !important;
    max-height: none !important;
    width: 100% !important;
}

/* Containers individuales dentro del form */
#roseo-unified-form > div {
    width: 100% !important;
}

/* Header container - altura fija */
#roseo-unified-form #roseo-header-container {
    flex-shrink: 0 !important;
    height: auto !important;
}

/* Step container - ocupa el espacio restante */
#roseo-unified-form #roseo-step-container {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Footer container - altura fija */
#roseo-unified-form #roseo-footer-container {
    flex-shrink: 0 !important;
    height: auto !important;
}

/* Containers individuales para home screen */
#roseo-form-wrapper > div {
    width: 100% !important;
}

/* Clases de control de visibilidad - SIMPLIFICADO */
/* NOTA: Solo display:none es necesario, las demás propiedades causan conflictos */
#roseo-form-wrapper .roseo-form-hidden:not(#roseo-footer-container):not(#roseo-header-container):not(#roseo-step-container) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Contenedores específicos cuando tienen la clase roseo-form-hidden */
/* SOLO el home-screen usa position absolute para ocultar */
#roseo-home-screen-container.roseo-form-hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Header y Footer solo se ocultan si TAMBIÉN el form está oculto */
form#roseo-unified-form.roseo-form-hidden #roseo-header-container,
form#roseo-unified-form.roseo-form-hidden #roseo-footer-container {
    display: none !important;
    visibility: hidden !important;
}

/* CRITICAL: Cuando el home está visible Y el form está oculto, el footer DEBE estar oculto */
/* Añadimos condición: solo si el form NO tiene roseo-form-visible */
#roseo-home-screen-container.roseo-home-visible ~ form:not(.roseo-form-visible) #roseo-footer-container,
#roseo-home-screen-container.roseo-home-visible ~ form:not(.roseo-form-visible) #roseo-header-container {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Ocultar elementos con clase roseo-form-hidden (SIN asterisco para no afectar hijos) */
#roseo-form-wrapper .roseo-form-hidden,
#roseo-form-wrapper form.roseo-form-hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* EXCEPCIÓN CRÍTICA: Footer y Header siempre visibles si el form padre es visible */
#roseo-form-wrapper form.roseo-form-visible #roseo-footer-container,
#roseo-form-wrapper form.roseo-form-visible #roseo-header-container,
#roseo-form-wrapper form.roseo-form-visible #roseo-step-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Específicamente los contenedores dentro del form oculto - usar display: none es suficiente */
#roseo-form-wrapper form.roseo-form-hidden #roseo-header-container,
#roseo-form-wrapper form.roseo-form-hidden #roseo-footer-container,
#roseo-form-wrapper form.roseo-form-hidden #roseo-step-container,
form#roseo-unified-form.roseo-form-hidden #roseo-header-container,
form#roseo-unified-form.roseo-form-hidden #roseo-footer-container,
form#roseo-unified-form.roseo-form-hidden #roseo-step-container,
form#roseo-unified-form.roseo-form-hidden .roseo-footer-navigation,
form#roseo-unified-form.roseo-form-hidden .roseo-header-navigation {
    display: none !important;
    visibility: hidden !important;
}

#roseo-form-wrapper .roseo-form-visible {
    visibility: visible !important;
    opacity: 1 !important;
}

/* ===== CRITICAL: Cuando el formulario tiene roseo-form-visible, mostrar contenedores ===== */
form#roseo-unified-form.roseo-form-visible {
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    pointer-events: auto !important;
}

/* Header container visible - altura auto */
form#roseo-unified-form.roseo-form-visible #roseo-header-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
    pointer-events: auto !important;
}

/* Step container visible - flex grow con scroll interno */
form#roseo-unified-form.roseo-form-visible #roseo-step-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    flex: 1 1 auto !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    pointer-events: auto !important;
    padding-bottom: 200px !important; /* Espacio extra grande para footer flotante */
}

#roseo-form-wrapper .roseo-home-visible {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 100vh !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Home screen container específico */
#roseo-home-screen-container.roseo-home-visible {
    display: block !important;
    width: 100% !important;
    min-height: 100vh !important;
    height: auto !important;
    overflow: visible !important;
    position: relative !important;
}

/* ============================================
   CONTENEDOR DE STEPS - FLEX LAYOUT
   ============================================ */
#roseo-form-wrapper .roseo-step-container {
    flex: 1 1 auto !important;
    background: white !important;
    padding: 40px 60px !important;
    margin: 0 !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    padding-bottom: 200px !important; /* Extra space for floating footer */
}

/* Contenedor interno centrado (solo el router wrapper) */
#roseo-form-wrapper .roseo-step-container > #roseo-router-container {
    width: 100% !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ============================================
   FIELDS GENERALES
   ============================================ */
#roseo-form-wrapper .roseo-form-field {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 2px solid var(--mfm-border) !important;
    border-radius: var(--mfm-radius-sm) !important;
    font-size: 15px !important;
    transition: all 0.3s ease !important;
    background: white !important;
}

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

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

#roseo-form-wrapper .roseo-form-label {
    display: block !important;
    margin-bottom: var(--mfm-spacing-sm) !important;
    font-weight: 600 !important;
    color: var(--mfm-primary) !important;
    font-size: var(--mfm-font-size-sm) !important;
}

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

/* ============================================
   RESPONSIVE - DISEÑO PROFESIONAL
   ============================================ */
@media (max-width: 1200px) {
    #roseo-form-wrapper .roseo-step-container {
        padding: 50px 60px !important;
    }
}

@media (max-width: 768px) {
    #roseo-form-wrapper .roseo-step-container {
        padding: 40px 30px !important;
    }
}

@media (max-width: 480px) {
    #roseo-form-wrapper .roseo-step-container {
        padding: 30px 20px !important;
    }
}

/* ============================================
   ANIMACIONES DE TRANSICIÓN
   ============================================ */
@keyframes fadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(10px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

#roseo-form-wrapper .roseo-step-container > * {
    animation: fadeIn 0.4s ease-out !important;
}

/* ============================================
   SCROLLBAR PERSONALIZADO
   ============================================ */
#roseo-form-wrapper .roseo-step-container::-webkit-scrollbar {
    width: 8px !important;
}

#roseo-form-wrapper .roseo-step-container::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
    border-radius: 4px !important;
}

#roseo-form-wrapper .roseo-step-container::-webkit-scrollbar-thumb {
    background: var(--mfm-secondary) !important;
    border-radius: 4px !important;
}

#roseo-form-wrapper .roseo-step-container::-webkit-scrollbar-thumb:hover {
    background: var(--mfm-primary) !important;
}