/**
 * =============================================================================
 * PRELOGIN CSS
 * =============================================================================
 * Estilos para a tela de pré-login (landing page)
 * =============================================================================
 */

/* =============================================================================
   1. VARIÁVEIS CSS
   ============================================================================= */

#prelogin-mobile {
    /* Cores */
    --pl-success: #198754;
    --pl-success-dark: #146c43;
    --pl-success-darker: #0f5132;
    --pl-success-rgb: 25, 135, 84;
    --pl-primary: #0d6efd;

    /* Gradientes */
    --pl-gradient-bg: linear-gradient(180deg, #ffffff 0%, #e8f5e8 50%, #d4edda 100%);
    --pl-gradient-btn: linear-gradient(135deg, var(--pl-success) 0%, var(--pl-success-dark) 100%);
    --pl-gradient-btn-hover: linear-gradient(135deg, var(--pl-success-dark) 0%, var(--pl-success-darker) 100%);
    --pl-gradient-text: linear-gradient(135deg, var(--pl-success), var(--pl-primary));

    /* Sombras */
    --pl-shadow-btn: 0 4px 15px rgba(var(--pl-success-rgb), 0.3);
    --pl-shadow-btn-hover: 0 6px 20px rgba(var(--pl-success-rgb), 0.4);

    /* Transições */
    --pl-transition: 0.3s ease;

    /* Tipografia */
    --pl-icon-size: 2rem;
}

/* =============================================================================
   2. MEDIA QUERIES - DESKTOP/MOBILE TOGGLE
   ============================================================================= */

@media (max-width: 991px) {
    #prelogin-desktop { display: none !important; }
    #prelogin-mobile { display: block !important; }

    body {
        background: var(--pl-gradient-bg);
        margin: 0;
        padding: 0;
    }

    html, body {
        overflow: hidden;
    }

    footer {
        border-top: none !important;
        margin-top: 0 !important;
        display: none !important;
    }
}

@media (min-width: 992px) {
    #prelogin-desktop { display: flex !important; }
    #prelogin-mobile { display: none !important; }
}

/* =============================================================================
   3. CONTAINER MOBILE
   ============================================================================= */

#prelogin-mobile {
    background: transparent;
    position: relative;
    height: calc(100vh - 100px);
    overflow: hidden;
}

#prelogin-mobile .row {
    position: relative;
    z-index: 1;
}

/* =============================================================================
   4. ÍCONES
   ============================================================================= */

#prelogin-mobile .icon-row {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

#prelogin-mobile .icon-item {
    font-size: var(--pl-icon-size);
    color: var(--pl-success);
    opacity: 0.7;
    animation: iconFadeIn 1s ease-out forwards;
}

#prelogin-mobile .icon-item:nth-child(1) { animation-delay: 0.2s; }
#prelogin-mobile .icon-item:nth-child(2) { animation-delay: 0.4s; }
#prelogin-mobile .icon-item:nth-child(3) { animation-delay: 0.6s; }
#prelogin-mobile .icon-item:nth-child(4) { animation-delay: 0.8s; }

/* =============================================================================
   5. BOTÃO E TÍTULOS
   ============================================================================= */

#prelogin-mobile .btn-success {
    background: var(--pl-gradient-btn);
    border: none;
    box-shadow: var(--pl-shadow-btn);
    transition: all var(--pl-transition);
}

#prelogin-mobile .btn-success:hover {
    transform: translateY(-2px);
    box-shadow: var(--pl-shadow-btn-hover);
    background: var(--pl-gradient-btn-hover);
}

#prelogin-mobile h2 {
    background: var(--pl-gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: fadeInDown 1s ease-out;
}

#prelogin-mobile p {
    animation: fadeInUp 1s ease-out 0.3s both;
}

/* =============================================================================
   6. ANIMAÇÕES
   ============================================================================= */

@keyframes iconFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 0.7;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}