/**
 * Header Navigation Styles - Roseo Form V2
 * Sistema de navegación horizontal con cards
 * Responsive con TailwindCSS utility classes y custom styles
 * 
 * Colores Corporativos:
 * - Primario: #015328
 * - Secundario: #009239
 * - Terciario: #54595F
 * - Contraste Gris: #DADADAFC
 * - Contraste Verde: #B3C8BB
 */

/* ============================================
   CONTAINER PRINCIPAL - ESPACIADO CÓMODO
   ============================================ */
body #roseo-form-wrapper .roseo-header-navigation {
    background: linear-gradient(135deg, #f8fafc 0%, #f0fdf4 100%) !important;
    padding: 20px 40px 16px 40px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

/* Contenedor interno centrado */
body #roseo-form-wrapper .roseo-header-navigation>* {
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ============================================
   HEADER SOLO SUBTÍTULO - TAMAÑO LEGIBLE
   ============================================ */
body #roseo-form-wrapper .roseo-cards-header {
    text-align: center !important;
    margin-bottom: 16px !important;
}

body #roseo-form-wrapper .roseo-cards-subtitle {
    font-size: 16px !important;
    color: var(--mfm-text);
    /* Terciario */
    font-weight: 600 !important;
    margin: 0 !important;
}

body #roseo-form-wrapper .roseo-cards-subtitle span {
    font-weight: 700 !important;
    color: var(--mfm-secondary);
    /* Secundario */
}

/* ============================================
   BARRA DE PROGRESO - TAMAÑO VISIBLE
   ============================================ */
body #roseo-form-wrapper .roseo-progress-bar {
    height: 6px !important;
    background: var(--mfm-border);
    /* Contraste Gris */
    border-radius: 3px !important;
    margin-bottom: 16px !important;
    overflow: hidden !important;
    position: relative !important;
}

body #roseo-form-wrapper .roseo-progress-fill {
    height: 100% !important;
    /* width: controlled by JS */
    background: var(--mfm-gradient-progress);
    /* Secundario a Primario */
    position: relative !important;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body #roseo-form-wrapper .roseo-progress-fill::after {
    content: '' !important;
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translate(50%, -50%) !important;
    width: 12px !important;
    height: 12px !important;
    background: white !important;
    border: 2px solid var(--mfm-secondary);
    /* Secundario */
    border-radius: 50% !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

/* ============================================
   CARDS CONTAINER - CENTRADO Y LEGIBLE
   ============================================ */
body #roseo-form-wrapper .roseo-cards-container {
    display: flex !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 16px !important;
    margin-bottom: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-behavior: smooth !important;
    padding: 8px 32px !important;
    width: 100% !important;
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;

    /* Ocultar scrollbar en navegadores modernos */
    scrollbar-width: thin !important;
    scrollbar-color: var(--mfm-secondary) var(--mfm-border) !important;

    /* Scroll snap solo en móvil */
    scroll-snap-type: none !important;
}

/* Primera y última card - sin márgenes extra para mantener centrado */
body #roseo-form-wrapper .roseo-cards-container .roseo-card-step:first-child {
    margin-left: 0 !important;
}

body #roseo-form-wrapper .roseo-cards-container .roseo-card-step:last-child {
    margin-right: 0 !important;
}

body #roseo-form-wrapper .roseo-cards-container::-webkit-scrollbar {
    height: 4px !important;
}

body #roseo-form-wrapper .roseo-cards-container::-webkit-scrollbar-track {
    background: var(--mfm-border) !important;
    border-radius: 2px !important;
}

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

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

/* ============================================
   CARD INDIVIDUAL - MÁS GRANDE Y LEGIBLE
   ============================================ */
body #roseo-form-wrapper .roseo-card-step {
    flex: 0 0 200px;
    /* Ancho más grande para mejor legibilidad */
    min-width: 200px !important;
    background: white !important;
    border-radius: var(--mfm-radius) !important;
    padding: 16px !important;
    border: 2px solid var(--mfm-border);
    /* Contraste Gris */
    transition: var(--mfm-transition) !important;
    position: relative !important;
    overflow: hidden !important;
    cursor: pointer !important;
}

/* Barra superior de cada card - más delgada */
body #roseo-form-wrapper .roseo-card-step::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: var(--mfm-border);
    /* Contraste Gris */
    transition: var(--mfm-transition) !important;
}

/* ============================================
   ESTADOS DE LAS CARDS
   ============================================ */

/* Card Completada */
body #roseo-form-wrapper .roseo-card-step.completed::before {
    background: var(--mfm-secondary) !important;
    /* Secundario */
}

body #roseo-form-wrapper .roseo-card-step.completed {
    border-color: var(--mfm-secondary) !important;
    /* Más fuerte que antes */
    background: linear-gradient(135deg, #f0fdf4 0%, #e6f7ed 100%) !important;
}

body #roseo-form-wrapper .roseo-card-step.completed .roseo-card-number {
    background: var(--mfm-secondary) !important;
    /* Secundario */
    color: white !important;
    border: 2px solid white !important;
}

body #roseo-form-wrapper .roseo-card-step.completed .roseo-card-number::after {
    content: '✓' !important;
    position: absolute !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}

body #roseo-form-wrapper .roseo-card-step.completed .roseo-card-title {
    color: var(--mfm-primary) !important;
    /* Primario */
    font-weight: 700 !important;
}

body #roseo-form-wrapper .roseo-card-step.completed .roseo-card-description {
    color: var(--mfm-primary) !important;
    /* Más oscuro para mejor contraste */
    font-weight: 500 !important;
}

/* Card Activa */
body #roseo-form-wrapper .roseo-card-step.active {
    background: linear-gradient(135deg, #e6f7ed 0%, #d1f2e1 100%) !important;
    border-color: var(--mfm-secondary) !important;
    /* Secundario */
    border-width: 3px !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 20px -5px rgba(0, 146, 57, 0.4) !important;
}

body #roseo-form-wrapper .roseo-card-step.active::before {
    background: var(--mfm-gradient-primary) !important;
    /* Secundario a Primario */
    height: 6px !important;
}

body #roseo-form-wrapper .roseo-card-step.active .roseo-card-number {
    background: var(--mfm-secondary) !important;
    /* Secundario */
    color: white !important;
    box-shadow: 0 4px 12px rgba(0, 146, 57, 0.4) !important;
    border: 2px solid white !important;
}

body #roseo-form-wrapper .roseo-card-step.active .roseo-card-title {
    color: var(--mfm-primary) !important;
    /* Primario */
    font-size: 16px !important;
    font-weight: 800 !important;
}

body #roseo-form-wrapper .roseo-card-step.active .roseo-card-description {
    color: var(--mfm-primary) !important;
    /* Más oscuro para mejor contraste */
    font-weight: 600 !important;
}

/* Card Hover (solo si no está activa) */
body #roseo-form-wrapper .roseo-card-step:not(.active):not(.completed):hover {
    border-color: var(--mfm-accent);
    /* Contraste Verde */
    transform: translateY(-2px) !important;
    box-shadow: var(--mfm-shadow-sm) !important;
}

/* ============================================
   ELEMENTOS INTERNOS DE LAS CARDS - TAMAÑO LEGIBLE
   ============================================ */
body #roseo-form-wrapper .roseo-card-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
}

body #roseo-form-wrapper .roseo-card-number {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: #f3f4f6 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #9ca3af !important;
    position: relative !important;
    transition: all 0.3s ease !important;
}

body #roseo-form-wrapper .roseo-card-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #374151 !important;
    /* Más oscuro para mejor legibilidad */
    transition: all 0.3s ease !important;
}

body #roseo-form-wrapper .roseo-card-description {
    font-size: 13px !important;
    color: #6b7280 !important;
    /* Más oscuro para mejor legibilidad */
    line-height: 1.4 !important;
    transition: all 0.3s ease !important;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* Tablets (768px - 1024px) */
@media (max-width: 1024px) {
    body #roseo-form-wrapper .roseo-header-navigation {
        padding: 32px 40px !important;
    }

    body #roseo-form-wrapper .roseo-cards-title {
        font-size: 20px !important;
    }

    body #roseo-form-wrapper .roseo-cards-subtitle {
        font-size: 14px !important;
    }

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

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

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

/* Mobile (hasta 767px) */
@media (max-width: 767px) {
    body #roseo-form-wrapper .roseo-header-navigation {
        padding: 24px 20px !important;
    }

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

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

    body #roseo-form-wrapper .roseo-cards-subtitle {
        font-size: 13px !important;
    }

    body #roseo-form-wrapper .roseo-progress-bar {
        margin-bottom: 24px !important;
        height: 8px !important;
    }

    body #roseo-form-wrapper .roseo-progress-fill::after {
        width: 16px !important;
        height: 16px !important;
    }

    /* Cards scroll horizontal en móvil - centradas */
    body #roseo-form-wrapper .roseo-cards-container {
        gap: 12px !important;
        padding: 8px 16px !important;
        justify-content: flex-start !important;
        scroll-snap-type: x mandatory !important;
    }

    body #roseo-form-wrapper .roseo-cards-container .roseo-card-step:first-child {
        margin-left: 8px !important;
        scroll-snap-align: start !important;
    }

    body #roseo-form-wrapper .roseo-cards-container .roseo-card-step:last-child {
        margin-right: 8px !important;
    }

    body #roseo-form-wrapper .roseo-card-step {
        flex: 0 0 160px !important;
        min-width: 160px !important;
        padding: 14px !important;
        transform: none !important;
        /* Desactivar elevación en móvil */
    }

    body #roseo-form-wrapper .roseo-card-step.active {
        transform: none !important;
        box-shadow: 0 4px 12px rgba(0, 146, 57, 0.2) !important;
    }

    body #roseo-form-wrapper .roseo-card-header {
        gap: 10px !important;
    }

    body #roseo-form-wrapper .roseo-card-number {
        width: 28px !important;
        height: 28px !important;
        font-size: 13px !important;
    }

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

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

/* Small Mobile (hasta 480px) */
@media (max-width: 480px) {
    body #roseo-form-wrapper .roseo-header-navigation {
        padding: 16px 12px !important;
    }

    body #roseo-form-wrapper .roseo-cards-title {
        font-size: 16px !important;
    }

    body #roseo-form-wrapper .roseo-cards-subtitle {
        font-size: 12px !important;
    }

    body #roseo-form-wrapper .roseo-cards-container {
        gap: 10px !important;
        padding: 6px 12px !important;
        justify-content: flex-start !important;
    }

    body #roseo-form-wrapper .roseo-cards-container .roseo-card-step:first-child {
        margin-left: 8px !important;
    }

    body #roseo-form-wrapper .roseo-cards-container .roseo-card-step:last-child {
        margin-right: 8px !important;
    }

    body #roseo-form-wrapper .roseo-card-step {
        flex: 0 0 140px !important;
        min-width: 140px !important;
        padding: 12px !important;
    }

    body #roseo-form-wrapper .roseo-card-number {
        width: 24px !important;
        height: 24px !important;
        font-size: 12px !important;
    }

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

    body #roseo-form-wrapper .roseo-card-description {
        font-size: 11px !important;
        display: none !important;
        /* Ocultar descripción en móvil pequeño */
    }
}

/* ============================================
   ANIMACIONES
   ============================================ */
@keyframes slideIn {
    from {
        opacity: 0 !important;
        transform: translateY(-10px) !important;
    }

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

body #roseo-form-wrapper .roseo-card-step {
    animation: slideIn 0.4s ease-out backwards !important;
}

body #roseo-form-wrapper .roseo-card-step:nth-child(1) {
    animation-delay: 0.1s;
}

body #roseo-form-wrapper .roseo-card-step:nth-child(2) {
    animation-delay: 0.15s;
}

body #roseo-form-wrapper .roseo-card-step:nth-child(3) {
    animation-delay: 0.2s;
}

body #roseo-form-wrapper .roseo-card-step:nth-child(4) {
    animation-delay: 0.25s;
}

body #roseo-form-wrapper .roseo-card-step:nth-child(5) {
    animation-delay: 0.3s;
}

/* ============================================
   ACCESSIBILITY
   ============================================ */
body #roseo-form-wrapper .roseo-card-step:focus {
    outline: 3px solid var(--mfm-secondary);
    /* Secundario */
    outline-offset: 2px !important;
}

body #roseo-form-wrapper .roseo-card-step[aria-disabled="true"] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}