/* ===== SIAEWEB LOGIN - CSS UNIFICADO ===== */
/* Arquivo: siaeweb-login.css */
/* Usado para: login_portal_admin_view.php e login_portal_professor_view.php */

/* ===== RESET GLOBAL PARA ELIMINAR FUNDOS CINZA ===== */
html, body {
    background: transparent !important;
    margin: 0;
    padding: 0;
}

/* Remover fundo de todos os containers do sistema antigo */
.limiter,
.container-login100,
.wrap-login100,
.login100-form,
.login100-more {
    background: transparent !important;
    background-color: transparent !important;
}

/* Estilo específico para formulários antigos */
.login100-form {
    background: rgba(255, 255, 255, 1) !important;
    border-radius: 32px !important;
    padding: 40px !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}




/* ===== RESET E BASE ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: transparent !important;
    overflow-x: hidden;
    height: 100vh;
}

/* ===== BACKGROUND FULLSCREEN ===== */
.fullscreen-background {
    position: fixed;
    top: 0;
    left: 0;
    width: calc(100vw - 450px);
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

.background-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: calc(100vw - 450px);
    height: 100vh;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 100%);
    z-index: 2;
}

/* ===== CONTAINER PRINCIPAL ===== */
.login-container {
    position: fixed;
    top: 0;
    right: 0;
    width: 450px;
    height: 100vh;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.login-form-wrapper {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    animation: slideInRight 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: transparent;
}

/* ===== FORMULÁRIO ===== */
.siaeweb-form {
    background: rgba(255, 255, 255, 1);
    backdrop-filter: blur(20px);
    border-radius: 32px 0 0 32px;
    padding: 40px;
    box-shadow:
            -10px 0 50px rgba(0, 0, 0, 0.15),
            0 0 0 1px rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-right: none;
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Efeito de brilho no formulário */
.siaeweb-form::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
    transform: rotate(-45deg);
    animation: shimmer 3s infinite;
    z-index: 1;
    pointer-events: none;
}

/* ===== ESTILIZAÇÃO ESPECÍFICA PARA SISTEMA ANTIGO ===== */
.wrap-login100 {
    background: transparent !important;
}

.login100-more {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Container para inputs do sistema antigo */
.wrap-input100 {
    position: relative !important;
    margin-bottom: 15px !important;
    width: 100% !important;
}

/* Labels flutuantes para sistema antigo */
.label-input100 {
    position: absolute !important;
    left: 20px !important;
    top: 20px !important;
    color: #9ca3af !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    pointer-events: none !important;
    transition: all 0.3s ease !important;
    background: transparent !important;
}

.input100:focus + .focus-input100 + .label-input100,
.input100.has-val + .focus-input100 + .label-input100 {
    top: 8px !important;
    font-size: 12px !important;
    color: #3277b2 !important;
    font-weight: 600 !important;
}

/* Botão de toggle senha para sistema antigo */
.password-toggle-btn {
    position: absolute !important;
    right: 20px !important;
    top: 20px !important;
    background: none !important;
    border: none !important;
    color: #9ca3af !important;
    font-size: 18px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    z-index: 5 !important;
    outline: none !important;
}

.password-toggle-btn:hover {
    color: #3277b2 !important;
}

.password-toggle-btn:focus {
    outline: none !important;
}
/* ===== GARANTIR FUNDO BRANCO APENAS PARA ELEMENTOS NECESSÁRIOS ===== */
.siaeweb-form,
.login100-form,
.form-input,
.input100,
.login-btn,
.login100-form-btn,
.profile-card,
.notification,
.area-badge,
.social-link,
.check-mark,
.notification-close {
    background-color: initial !important;
}

/* ===== FORMULÁRIO PRINCIPAL UNIFICADO ===== */
.siaeweb-form,
.login100-form {
    background: rgba(255, 255, 255, 1) !important;
    backdrop-filter: blur(20px) !important;
    border-radius: 0px !important;
    padding: 40px !important;
    box-shadow:
            0 25px 50px rgba(0, 0, 0, 0.15),
            0 0 0 1px rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    z-index: 5 !important;
}

/* Para formulários laterais (admin/professor) */
.siaeweb-form {
    border-radius: 0px !important;
    border-right: none !important;
    min-height: 100vh !important;
    box-shadow:
            -10px 0 50px rgba(0, 0, 0, 0.15),
            0 0 0 1px rgba(255, 255, 255, 0.2) !important;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
        background: rgba(255, 255, 255, 1);
    }
    to {
        transform: translateX(0);
        opacity: 1;
        background: rgba(255, 255, 255, 1);
    }
}

/* ===== LOGO ===== */
.logo-container {
    text-align: center;
    margin-bottom: 20px;
    position: relative;
    z-index: 10;
}

.logo-container img {
    max-width: 180px;
    height: auto;
    cursor: pointer;
    transition: transform 0.3s ease;
    position: relative;
    z-index: 10;
    pointer-events: auto;
}

.logo-container img:hover {
    transform: scale(1.05);
}

/* ===== SELETOR DE PERFIL MODERNO ===== */
.profile-selector-section {
    margin-bottom: 8px;
}

.profile-selector-title {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
    text-align: center;
}

.profile-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 8px;
}

.profile-option {
    position: relative;
    cursor: pointer;
}

.profile-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.profile-card {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 8px 4px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
    text-align: center;
    min-height: 55px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.profile-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transition: left 0.5s;
}

.profile-option:hover .profile-card::before {
    left: 100%;
}

.profile-option:hover .profile-card {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.profile-option input[type="radio"]:checked + .profile-card {
    border-color: #3277b2;
    background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%);
    transform: translateY(-1px);
    box-shadow:
            0 4px 12px rgba(50, 119, 178, 0.15),
            0 0 0 2px rgba(50, 119, 178, 0.1);
}

.profile-icon {
    font-size: 16px;
    margin-bottom: 3px;
    transition: all 0.3s ease;
    display: block;
}

.profile-option:hover .profile-icon {
    transform: scale(1.05);
}

.profile-option input[type="radio"]:checked + .profile-card .profile-icon {
    color: #3277b2;
    transform: scale(1.05);
}

.profile-label {
    font-size: 9px;
    font-weight: 600;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition: color 0.3s ease;
    line-height: 1.1;
}

.profile-option input[type="radio"]:checked + .profile-card .profile-label {
    color: #3277b2;
}

/* Cores específicas por perfil */
.profile-option.financeiro .profile-icon {
    color: #e2c100;
}

.profile-option.mae .profile-icon {
    color: #e91e63;
}

.profile-option.pai .profile-icon {
    color: #2196f3;
}

.profile-option.aluno .profile-icon {
    color: #4caf50;
}

.profile-option.responsavel .profile-icon {
    color: #9c27b0;
}

.profile-option.professor .profile-icon {
    color: #27ae60;
}

.profile-option.admin .profile-icon {
    color: #e2c100;
}

/* Check mark animado */
.check-mark {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 12px;
    height: 12px;
    background: #3277b2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 7px;
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s ease;
}

.profile-option input[type="radio"]:checked + .profile-card .check-mark {
    opacity: 1;
    transform: scale(1);
}

/* ===== BADGES DE ÁREA (mantidos para compatibilidade) ===== */
.area-badge-container {
    text-align: center;
    margin-bottom: 25px;
}

.area-badge {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: white;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}

.area-badge.admin {
    background: linear-gradient(135deg, #e2c100 0%, #f1c40f 100%);
}

.area-badge.professor {
    background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
}

.area-badge.aluno {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
}

/* Efeito de brilho no badge */
.area-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transition: left 0.5s;
}

.area-badge:hover::before {
    left: 100%;
}
.area-badge-container {
    text-align: center;
    margin-bottom: 25px;
}

.area-badge {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: white;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}

.area-badge.admin {
    background: linear-gradient(135deg, #e2c100 0%, #f1c40f 100%);
}

.area-badge.professor {
    background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
}

.area-badge.aluno {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
}

/* Efeito de brilho no badge */
.area-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transition: left 0.5s;
}

.area-badge:hover::before {
    left: 100%;
}

/* ===== TÍTULOS ===== */
.title-container {
    text-align: center;
    margin-bottom: 20px;
}

.title-container h2 {
    font-size: 28px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 8px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.title-container h3 {
    font-size: 16px;
    font-weight: 400;
    color: #7f8c8d;
    margin: 0;
}

/* ===== CAMPOS DO FORMULÁRIO ===== */
.form-fields {
    margin-bottom: 15px;
}

.input-group {
    position: relative;
    margin-bottom: 15px;
    width: 100%;
}

/* ===== ESTILIZAÇÃO UNIFICADA PARA TODOS OS INPUTS ===== */
.form-input,
.input100 {
    width: 100% !important;
    padding: 20px 20px 8px 20px !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 16px !important;
    font-size: 16px !important;
    background: #ffffff !important;
    transition: all 0.3s ease !important;
    outline: none !important;
    color: #374151 !important;
    box-sizing: border-box !important;
}

.form-input:focus,
.input100:focus {
    border-color: #3277b2 !important;
    box-shadow: 0 0 0 3px rgba(50, 119, 178, 0.1) !important;
    outline: none !important;
}

.form-input:active,
.input100:active {
    border-color: #3277b2 !important;
    box-shadow: 0 0 0 3px rgba(50, 119, 178, 0.1) !important;
    outline: none !important;
}

/* Remove qualquer outline em todos os estados */
.form-input:focus-visible,
.input100:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(50, 119, 178, 0.1) !important;
}

.form-label {
    position: absolute;
    left: 20px;
    top: 20px;
    color: #9ca3af;
    font-size: 16px;
    font-weight: 400;
    pointer-events: none;
    transition: all 0.3s ease;
    background: transparent;
}

.form-input:focus + .form-label,
.form-input.has-value + .form-label {
    top: 8px;
    font-size: 12px;
    color: #3277b2;
    font-weight: 600;
}

/* ===== CAMPO DE SENHA ===== */
.password-group {
    position: relative;
    width: 100%;
}

.password-group .form-input {
    padding-right: 60px; /* Espaço para o ícone */
}

.password-toggle {
    position: absolute;
    right: 20px;
    top: 20px;
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 5;
    outline: none !important;
}

.password-toggle:hover {
    color: #3277b2;
}

.password-toggle:focus {
    outline: none !important;
}

/* ===== ESQUECI MINHA SENHA ===== */
.forgot-password {
    text-align: left;
    margin-bottom: 12px;
}

.forgot-password button {
    background: none;
    border: none;
    color: #3277b2;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 0;
}

.forgot-password button:hover {
    color: #2563c7;
    text-decoration: underline;
}

/* ===== RECAPTCHA ===== */
.recaptcha-container {
    text-align: center;
    margin-bottom: 15px;
}

.g-recaptcha {
    display: inline-block;
    transform-origin: center;
}

/* ===== BOTÃO DE LOGIN ===== */
.login-btn-container {
    margin-bottom: 15px;
    width: 100%;
}

/* ===== BOTÕES UNIFICADOS ===== */
.login-btn,
.login100-form-btn {
    width: 100% !important;
    background: linear-gradient(135deg, #3277b2 0%, #2563c7 100%) !important;
    border: none !important;
    border-radius: 16px !important;
    padding: 18px 35px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: white !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 8px 25px rgba(50, 119, 178, 0.3) !important;
    position: relative !important;
    overflow: hidden !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    cursor: pointer !important;
    outline: none !important;
    box-sizing: border-box !important;
}

.login-btn:focus,
.login100-form-btn:focus {
    outline: none !important;
}

.login-btn:disabled,
.login100-form-btn:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.login-btn:not(:disabled)::before,
.login100-form-btn:not(:disabled)::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent) !important;
    transition: left 0.5s !important;
}

.login-btn:not(:disabled):hover::before,
.login100-form-btn:not(:disabled):hover::before {
    left: 100% !important;
}

.login-btn:not(:disabled):hover,
.login100-form-btn:not(:disabled):hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 15px 40px rgba(50, 119, 178, 0.4) !important;
    background: linear-gradient(135deg, #2563c7 0%, #1e40af 100%) !important;
}

/* ===== REDES SOCIAIS ===== */
.social-container {
    text-align: center;
}

.social-title {
    color: #6b7280;
    font-size: 14px;
    margin-bottom: 15px;
    font-weight: 500;
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 12px;
}

/* ===== REDES SOCIAIS ===== */
.social-container {
    text-align: center;
}

.social-title {
    color: #6b7280;
    font-size: 14px;
    margin-bottom: 15px;
    font-weight: 500;
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    color: white;
    text-decoration: none;
    font-size: 18px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.social-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    color: white;
    text-decoration: none;
}

.social-link:focus {
    color: white;
    text-decoration: none;
}

.social-link:visited {
    color: white;
    text-decoration: none;
}

.social-link.instagram {
    background: linear-gradient(135deg, #e1306c 0%, #fd1d1d 50%, #f77737 100%);
}

.social-link.facebook {
    background: linear-gradient(135deg, #1877f2 0%, #42a5f5 100%);
}

.social-link.youtube {
    background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
}

/* ===== ESTILOS ESPECÍFICOS PARA QUANDO NÃO HÁ SELETOR DE PERFIL ===== */
/* Para formulários que não usam o seletor de perfil moderno */
.siaeweb-form:not(:has(.profile-selector-section)) .title-container {
    margin-bottom: 35px;
}

.siaeweb-form:not(:has(.profile-selector-section)) .form-fields {
    margin-bottom: 25px;
}

.siaeweb-form:not(:has(.profile-selector-section)) .input-group {
    margin-bottom: 25px;
}

.siaeweb-form:not(:has(.profile-selector-section)) .forgot-password {
    margin-bottom: 20px;
}

.siaeweb-form:not(:has(.profile-selector-section)) .recaptcha-container {
    margin-bottom: 25px;
}

.siaeweb-form:not(:has(.profile-selector-section)) .login-btn-container {
    margin-bottom: 25px;
}

/* Fallback para browsers que não suportam :has() */
.no-profile-selector .title-container {
    margin-bottom: 35px;
}

.no-profile-selector .form-fields {
    margin-bottom: 25px;
}

.no-profile-selector .input-group {
    margin-bottom: 25px;
}

.no-profile-selector .forgot-password {
    margin-bottom: 20px;
}

.no-profile-selector .recaptcha-container {
    margin-bottom: 25px;
}

.no-profile-selector .login-btn-container {
    margin-bottom: 25px;
}
/* ===== NOTIFICAÇÕES ===== */
#notification-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    max-width: 400px;
    width: 100%;
}

.notification {
    background: white;
    border-radius: 16px;
    box-shadow:
            0 20px 50px rgba(0, 0, 0, 0.25),
            0 0 0 1px rgba(255, 255, 255, 0.1);
    margin-bottom: 15px;
    transform: translateX(100%);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-left: 5px solid #6b7280;
    overflow: hidden;
    position: relative;
    backdrop-filter: blur(20px);
}

.notification::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.1));
    animation: notificationProgress 5s linear;
}

.notification::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 100%);
    pointer-events: none;
}

.notification.show {
    transform: translateX(0);
    opacity: 1;
}

.notification.hiding {
    transform: translateX(100%);
    opacity: 0;
}

.notification.success {
    border-left-color: #10b981;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    color: #065f46;
}

.notification.success::before {
    background: linear-gradient(90deg, #10b981, transparent);
}

.notification.error {
    border-left-color: #ef4444;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    color: #991b1b;
}

.notification.error::before {
    background: linear-gradient(90deg, #ef4444, transparent);
}

.notification.info {
    border-left-color: #3b82f6;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    color: #1e40af;
}

.notification.info::before {
    background: linear-gradient(90deg, #3b82f6, transparent);
}

.notification-content {
    display: flex;
    align-items: center;
    padding: 20px 24px;
    gap: 15px;
    position: relative;
    z-index: 2;
}

.notification-icon {
    font-size: 24px;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.notification.success .notification-icon {
    color: #059669;
}

.notification.error .notification-icon {
    color: #dc2626;
}

.notification.info .notification-icon {
    color: #2563eb;
}

.notification-message {
    flex: 1;
    font-weight: 600;
    line-height: 1.4;
    font-size: 15px;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.notification-close {
    background: rgba(255, 255, 255, 0.8);
    border: none;
    color: currentColor;
    font-size: 14px;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.2s ease;
    flex-shrink: 0;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.notification-close:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: scale(1.1);
}

/* Efeito de pulso para erros */
.notification.error {
    animation: errorPulse 0.6s ease-in-out;
}

@keyframes errorPulse {
    0% { transform: translateX(100%) scale(1); }
    50% { transform: translateX(0) scale(1.02); }
    100% { transform: translateX(0) scale(1); }
}

/* Efeito de brilho para sucesso */
.notification.success {
    animation: successGlow 0.8s ease-in-out;
}

@keyframes successGlow {
    0% {
        transform: translateX(100%);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    }
    50% {
        transform: translateX(0);
        box-shadow: 0 20px 50px rgba(16, 185, 129, 0.3);
    }
    100% {
        transform: translateX(0);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    }
}

@keyframes notificationProgress {
    from {
        width: 100%;
    }
    to {
        width: 0%;
    }
}

/* ===== UTILITÁRIOS ===== */
.error-message-legacy {
    display: none !important;
}

/* Responsividade para o seletor de perfil */
@media (max-width: 1024px) {
    .fullscreen-background,
    .background-overlay {
        width: calc(100vw - 400px);
    }

    .login-container {
        width: 400px;
    }
}

@media (max-width: 768px) {
    html {
        overflow-y: scroll !important;
        -webkit-overflow-scrolling: touch;
    }

    body {
        overflow-y: scroll !important;
        overflow-x: hidden !important;
        height: auto !important;
        min-height: 100vh !important;
        -webkit-overflow-scrolling: touch;
        position: relative !important;
    }

    /* ESCONDER WALLPAPER NO MOBILE */
    .fullscreen-background,
    .background-overlay {
        display: none !important;
    }

    .login-container {
        position: static !important;
        width: 100vw;
        height: auto !important;
        min-height: 100vh !important;
        top: auto !important;
        margin: 0 !important;
        display: block !important;
    }

    .login-form-wrapper {
        height: auto !important;
        min-height: 100vh !important;
        animation: none !important;
        display: block !important;
    }

    .siaeweb-form,
    .login100-form {
        padding: 20px !important;
        border-radius: 0px !important;
        min-height: 100vh !important;
        height: auto !important;
        border: none !important;
        background: rgba(255, 255, 255, 1) !important;
        box-shadow: none !important;
        position: static !important;
        display: block !important;
        width: 100% !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* REMOVER ANIMAÇÕES E EFEITOS NO MOBILE */
    .siaeweb-form::before,
    .login100-form::before {
        display: none !important;
    }

    .form-fields .input-group {
        animation: none !important;
        margin-bottom: 20px !important;
    }

    .login-btn-container {
        animation: none !important;
        margin-bottom: 20px !important;
    }

    .social-container {
        animation: none !important;
        margin-bottom: 20px !important;
    }

    .profile-options {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        margin-bottom: 20px !important;
    }

    .profile-card {
        padding: 12px 8px;
        min-height: 60px;
    }

    .profile-card::before {
        display: none !important;
    }

    .profile-icon {
        font-size: 16px;
        margin-bottom: 4px;
    }

    .profile-label {
        font-size: 10px;
    }

    .profile-selector-title {
        font-size: 14px;
        margin-bottom: 15px;
    }

    .title-container {
        margin-bottom: 25px !important;
    }

    .title-container h2 {
        font-size: 24px;
    }

    .title-container h3 {
        font-size: 16px;
    }

    .area-badge {
        font-size: 14px;
        padding: 10px 25px;
    }

    .area-badge::before {
        display: none !important;
    }

    .form-input {
        padding: 16px 16px 6px 16px;
        font-size: 16px;
    }

    .login-btn {
        padding: 16px 30px;
        font-size: 16px;
    }

    .login-btn::before,
    .login100-form-btn::before {
        display: none !important;
    }

    .recaptcha-container {
        margin-bottom: 25px !important;
    }

    .forgot-password {
        margin-bottom: 20px !important;
    }

    /* Responsividade para notificações */
    #notification-container {
        top: 10px;
        right: 10px;
        left: 10px;
        max-width: none;
    }

    .notification-content {
        padding: 16px 20px;
    }

    .notification-message {
        font-size: 14px;
    }

    .notification-icon {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    html {
        overflow-y: scroll !important;
        -webkit-overflow-scrolling: touch;
    }

    body {
        overflow-y: scroll !important;
        overflow-x: hidden !important;
        height: auto !important;
        min-height: 100vh !important;
        -webkit-overflow-scrolling: touch;
        position: relative !important;
    }

    /* ESCONDER WALLPAPER NO MOBILE */
    .fullscreen-background,
    .background-overlay {
        display: none !important;
    }

    .login-container {
        position: static !important;
        width: 100vw !important;
        height: auto !important;
        min-height: 100vh !important;
        top: auto !important;
        margin: 0 !important;
        display: block !important;
    }

    .login-form-wrapper {
        height: auto !important;
        min-height: 100vh !important;
        animation: none !important;
        display: block !important;
    }

    .siaeweb-form,
    .login100-form {
        padding: 15px !important;
        border-radius: 0px !important;
        min-height: 100vh !important;
        height: auto !important;
        border: none !important;
        background: rgba(255, 255, 255, 1) !important;
        box-shadow: none !important;
        position: static !important;
        display: block !important;
        width: 100% !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* REMOVER ANIMAÇÕES E EFEITOS NO MOBILE */
    .siaeweb-form::before,
    .login100-form::before {
        display: none !important;
    }

    .form-fields .input-group {
        animation: none !important;
        margin-bottom: 15px !important;
    }

    .login-btn-container {
        animation: none !important;
        margin-bottom: 15px !important;
    }

    .social-container {
        animation: none !important;
        margin-bottom: 15px !important;
    }

    .profile-options {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
        margin-bottom: 15px !important;
    }

    .profile-card {
        padding: 8px 4px;
        min-height: 45px;
    }

    .profile-card::before {
        display: none !important;
    }

    .profile-icon {
        font-size: 14px;
        margin-bottom: 2px;
    }

    .profile-label {
        font-size: 8px;
    }

    .profile-selector-title {
        font-size: 12px;
        margin-bottom: 10px;
    }

    .title-container {
        margin-bottom: 20px !important;
    }

    .area-badge::before {
        display: none !important;
    }

    .login-btn::before,
    .login100-form-btn::before {
        display: none !important;
    }

    .logo-container {
        margin-bottom: 15px !important;
    }

    .logo-container img {
        max-width: 180px;
    }

    .g-recaptcha {
        transform: scale(0.85);
        margin: 15px 0 !important;
    }

    .social-links {
        gap: 8px;
    }

    .social-link {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .recaptcha-container {
        margin-bottom: 20px !important;
    }

    .forgot-password {
        margin-bottom: 15px !important;
    }
}

@keyframes shimmer {
    0% { transform: translateX(-100%) translateY(-100%) rotate(-45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(-45deg); }
}

/* ===== TOUCH E SCROLL PARA MOBILE ===== */
@media (max-width: 768px) {
    /* Permitir scroll suave em mobile */
    html {
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
    }

    /* Ajustar viewport para mobile */
    .login-container {
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
    }
}
@keyframes ripple {
    to {
        transform: scale(2);
        opacity: 0;
    }
}

/* ===== ANIMAÇÃO RIPPLE ===== */
/* Essas classes podem ser adicionadas ao body para personalizar cores por perfil */

.perfil-admin .area-badge {
    background: linear-gradient(135deg, #e2c100 0%, #f1c40f 100%);
}

.perfil-professor .area-badge {
    background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
}

.perfil-aluno .area-badge {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
}

/* ===== ANIMAÇÕES EXTRAS ===== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-fields .input-group {
    animation: fadeInUp 0.6s ease-out;
    animation-fill-mode: both;
}

.form-fields .input-group:nth-child(1) { animation-delay: 0.1s; }
.form-fields .input-group:nth-child(2) { animation-delay: 0.2s; }
.form-fields .input-group:nth-child(3) { animation-delay: 0.3s; }

.login-btn-container {
    animation: fadeInUp 0.6s ease-out 0.4s;
    animation-fill-mode: both;
}

.social-container {
    animation: fadeInUp 0.6s ease-out 0.5s;
    animation-fill-mode: both;
}

/* CSS para mostrar o check mark quando o perfil está selecionado */

/* Por padrão, esconder o check mark */
.profile-card .check-mark {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    background-color: #003d82; /* Azul muito mais forte/escuro */
    border: 2px solid white; /* Borda branca */
    border-radius: 50%; /* Círculo perfeito */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1; /* Totalmente opaco */
    transform: scale(0);
    transition: all 0.3s ease;
    z-index: 10;
    box-shadow: 0 3px 6px rgba(0,0,0,0.4); /* Sombra mais forte */
}

.profile-card .check-mark i {
    color: white;
    font-size: 11px;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3); /* Sombra no texto para mais contraste */
}

/* Mostrar o check mark quando o radio está selecionado */
.profile-option input[type="radio"]:checked + .profile-card .check-mark {
    opacity: 1;
    transform: scale(1);
}

/* Estilo adicional para o card selecionado */
.profile-option input[type="radio"]:checked + .profile-card {
    border: 2px solid #007bff;
    background-color: rgba(0, 123, 255, 0.1);
    transform: scale(1.02);
}

/* Garantir que o profile-card tenha position relative */
.profile-card {
    position: relative;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

/* Esconder o radio button padrão */
.profile-option input[type="radio"] {
    display: none;
}


/* Reduzir espaço acima do título "Autenticação" */
.title-container {
    margin-top: 15px !important; /* Reduzir de qualquer valor maior para 15px */
    margin-bottom: 20px !important;
}

.title-container h2 {
    margin-top: 0 !important;
    margin-bottom: 5px !important;
}

.title-container h3 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Reposicionar o link "Esqueci minha senha" logo após o campo senha */
.forgot-password {
    margin-top: 8px !important; /* Espaço pequeno após o campo senha */
    margin-bottom: 15px !important; /* Espaço antes do recaptcha */
    text-align: right !important; /* Alinhar à direita como é comum */
}

.forgot-password button {
    background: none !important;
    border: none !important;
    color: #007bff !important;
    text-decoration: underline !important;
    font-size: 13px !important;
    padding: 0 !important;
    cursor: pointer !important;
}

.forgot-password button:hover {
    color: #0056b3 !important;
    text-decoration: none !important;
}

/* Ajustar espaçamentos gerais para compactar mais */
.form-fields {
    margin-bottom: 10px !important;
}

.input-group {
    margin-bottom: 15px !important; /* Reduzir espaço entre campos */
}

/* Reduzir espaço do recaptcha */
.recaptcha-container {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
}

/* Compactar área dos perfis se necessário */
.profile-selector-section {
    margin-bottom: 20px !important;
}

/* Reduzir espaço da logo se estiver muito grande */
.logo-container {
    margin-bottom: 15px !important;
}

/* Reduzir espaço do badge da área */
.area-badge-container {
    margin-bottom: 15px !important;

}



/* ===== AJUSTES PARA LAYOUT MAIS COMPACTO ===== */

/* Reduzir padding geral do formulário */
.siaeweb-form,
.login100-form {
    padding: 25px 40px !important; /* Era 40px */
}

/* Compactar logo */
.logo-container {
    margin-bottom: 12px !important; /* Era 20px */
}

.logo-container img {
    max-width: 180px !important; /* Era 180px */
}

/* Compactar badge da área */
.area-badge-container {
    margin-bottom: 12px !important; /* Era 25px */
}

.area-badge {
    padding: 8px 20px !important; /* Era 12px 30px */
    font-size: 14px !important; /* Era 16px */
}

/* Compactar seletor de perfil */
.profile-selector-section {
    margin-bottom: 12px !important; /* Era 8px */
}

.profile-selector-title {
    font-size: 12px !important; /* Era 14px */
    margin-bottom: 6px !important; /* Era 8px */
}

.profile-options {
    gap: 4px !important; /* Era 6px */
    margin-bottom: 6px !important; /* Era 8px */
}

.profile-card {
    padding: 6px 3px !important; /* Era 8px 4px */
    min-height: 48px !important; /* Era 55px */
}

.profile-icon {
    font-size: 14px !important; /* Era 16px */
    margin-bottom: 2px !important; /* Era 3px */
}

.profile-label {
    font-size: 8px !important; /* Era 9px */
}

/* Compactar títulos */
.title-container {
    margin-top: 8px !important; /* Era 15px */
    margin-bottom: 12px !important; /* Era 20px */
}

.title-container h2 {
    font-size: 22px !important; /* Era 28px */
    margin-bottom: 4px !important; /* Era 8px */
}

.title-container h3 {
    font-size: 14px !important; /* Era 16px */
}

/* Compactar campos de formulário */
.form-fields {
    margin-bottom: 8px !important; /* Era 15px */
}

.input-group {
    margin-bottom: 12px !important; /* Era 15px */
}

.form-input,
.input100 {
    padding: 16px 20px 6px 20px !important; /* Era 20px 20px 8px 20px */
    font-size: 15px !important; /* Era 16px */
}

.form-label {
    top: 16px !important; /* Era 20px */
    font-size: 15px !important; /* Era 16px */
}

.form-input:focus + .form-label,
.form-input.has-value + .form-label {
    top: 6px !important; /* Era 8px */
    font-size: 11px !important; /* Era 12px */
}

.password-toggle {
    top: 16px !important; /* Era 20px */
    font-size: 16px !important; /* Era 18px */
}

/* Compactar esqueci senha */
.forgot-password {
    margin-top: 6px !important; /* Era 8px */
    margin-bottom: 10px !important; /* Era 15px */
}

.forgot-password button {
    font-size: 12px !important; /* Era 13px */
}

/* Compactar recaptcha */
.recaptcha-container {
    margin-top: 10px !important; /* Era 15px */
    margin-bottom: 10px !important; /* Era 15px */
}

/* Compactar botão de login */
.login-btn-container {
    margin-bottom: 10px !important; /* Era 15px */
}

.login-btn,
.login100-form-btn {
    padding: 14px 35px !important; /* Era 18px 35px */
    font-size: 15px !important; /* Era 16px */
}

/* Compactar redes sociais */
.social-container {
    margin-top: 10px !important;
}

.social-title {
    font-size: 12px !important; /* Era 14px */
    margin-bottom: 10px !important; /* Era 15px */
}

.social-links {
    gap: 8px !important; /* Era 12px */
}

.social-link {
    width: 35px !important; /* Era 45px */
    height: 35px !important; /* Era 45px */
    font-size: 16px !important; /* Era 18px */
}

/* Compactar check mark */
.profile-card .check-mark {
    width: 16px !important; /* Era 18px */
    height: 16px !important; /* Era 18px */
    top: 3px !important; /* Era 4px */
    right: 3px !important; /* Era 4px */
}

.profile-card .check-mark i {
    font-size: 10px !important; /* Era 11px */
}

/* ===== AJUSTES ESPECÍFICOS PARA TELAS MENORES ===== */

/* Para telas de altura entre 600px e 800px */
@media (max-height: 800px) {
    .siaeweb-form,
    .login100-form {
        padding: 20px 35px !important;
    }

    .logo-container img {
        max-width: 180px !important;
    }

    .area-badge {
        padding: 6px 16px !important;
        font-size: 13px !important;
    }

    .title-container h2 {
        font-size: 20px !important;
    }

    .profile-card {
        min-height: 42px !important;
        padding: 4px 2px !important;
    }

    .profile-icon {
        font-size: 13px !important;
    }

    .profile-label {
        font-size: 7px !important;
    }
}

/* Para telas muito pequenas (altura menor que 600px) */
@media (max-height: 600px) {
    .siaeweb-form,
    .login100-form {
        padding: 15px 30px !important;
        min-height: auto !important;
        justify-content: flex-start !important;
    }

    .logo-container {
        margin-bottom: 8px !important;
    }

    .logo-container img {
        max-width: 100px !important;
    }

    .area-badge-container {
        margin-bottom: 8px !important;
    }

    .area-badge {
        padding: 4px 12px !important;
        font-size: 12px !important;
    }

    .profile-selector-section {
        margin-bottom: 8px !important;
    }

    .profile-card {
        min-height: 38px !important;
        padding: 3px 2px !important;
    }

    .profile-icon {
        font-size: 12px !important;
        margin-bottom: 1px !important;
    }

    .profile-label {
        font-size: 6px !important;
    }

    .title-container {
        margin-top: 6px !important;
        margin-bottom: 8px !important;
    }

    .title-container h2 {
        font-size: 18px !important;
        margin-bottom: 2px !important;
    }

    .title-container h3 {
        font-size: 12px !important;
    }

    .input-group {
        margin-bottom: 8px !important;
    }

    .form-input,
    .input100 {
        padding: 12px 16px 4px 16px !important;
        font-size: 14px !important;
    }

    .form-label {
        top: 12px !important;
        font-size: 14px !important;
    }

    .form-input:focus + .form-label,
    .form-input.has-value + .form-label {
        top: 4px !important;
        font-size: 10px !important;
    }

    .password-toggle {
        top: 12px !important;
        font-size: 14px !important;
    }

    .forgot-password {
        margin-top: 4px !important;
        margin-bottom: 6px !important;
    }

    .recaptcha-container {
        margin: 6px 0 !important;
    }

    .g-recaptcha {
        transform: scale(0.8) !important;
    }

    .login-btn,
    .login100-form-btn {
        padding: 10px 25px !important;
        font-size: 14px !important;
    }

    .social-title {
        font-size: 11px !important;
        margin-bottom: 6px !important;
    }

    .social-link {
        width: 30px !important;
        height: 30px !important;
        font-size: 14px !important;
    }
}