/* =========================================
   LOGIN - SAAS IMPERIAL PREMIUM (Dark & Gold)
   ========================================= */

   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

   :root {
       --bg-dark: #F8FAFC;
       --bg-card: rgba(255, 255, 255, 0.9);
       --primary-gold: #0E7490;
       --primary-gold-hover: #155E75;
       --primary-blue: var(--primary-gold);
       --primary-blue-hover: var(--primary-gold-hover);
       --primary-glow: rgba(14, 116, 144, 0.2);
       --text-main: #1E293B;
       --text-muted: #64748B;
       --border-color: #E2E8F0;
       --input-bg: #FFFFFF;
   }

   * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; }

   body#page-login {
       background-color: var(--bg-dark);
       color: var(--text-main);
       min-height: 100vh;
       display: flex;
       flex-direction: column;
       overflow-x: hidden;
       /* Animação suave global */
       animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);
   }

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

   /* --- Layout Principal --- */
   .login-wrapper { flex: 1; display: flex; width: 100%; min-height: 100vh; }

   /* --- Lado Esquerdo (Hero Image / Branding) --- */
   .hero-section {
       flex: 1.2;
       /* Gradiente sofisticado com blend na imagem */
       background: linear-gradient(135deg, rgba(8,10,11,0.7) 0%, rgba(8,10,11,0.95) 100%);
       display: flex; flex-direction: column; justify-content: center; align-items: center;
       padding: 60px; text-align: center; position: relative;
       border-right: 1px solid var(--border-color);
   }

   .hero-logo { margin-bottom: 50px; animation: float 6s ease-in-out infinite; }
   @keyframes float {
       0% { transform: translateY(0px); }
       50% { transform: translateY(-10px); }
       100% { transform: translateY(0px); }
   }

   .hero-logo i {
       font-size: 4.5rem;
       color: var(--primary-blue);
       margin-bottom: 15px;
   }

   .hero-logo h1 {
       font-size: 2.5rem;
       letter-spacing: 4px;
       font-weight: 800;
       text-transform: uppercase;
       margin-bottom: 5px;
       background: linear-gradient(to right, #0891B2, #0E7490);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
   }
   .hero-logo span { font-size: 0.9rem; color: var(--text-muted); letter-spacing: 3px; font-weight: 500; text-transform: uppercase; }

   .hero-text h2 { font-size: 2.6rem; font-weight: 700; line-height: 1.2; margin-bottom: 20px; letter-spacing: -0.5px; color: #FFFFFF;}
   .hero-text h2 .highlight { color: var(--primary-blue); font-weight: 800; }
   .hero-text p { color: #E2E8F0; font-size: 1.1rem; max-width: 400px; margin: 0 auto; line-height: 1.6; }
   .hero-text .line { width: 60px; height: 3px; background: var(--primary-blue); margin: 30px auto; border-radius: 3px;  }

   /* --- Lado Direito (Formulário Glassmorphism) --- */
   .form-section {
       flex: 1; display: flex; align-items: center; justify-content: center;
       padding: 40px; background: radial-gradient(circle at top right, rgba(14, 116, 144,0.05), transparent 50%);
   }

   .auth-form {
       background: var(--bg-card);
       backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
       padding: 55px 45px;
       border-radius: 20px;
       width: 100%; max-width: 460px;
       border: 1px solid var(--border-color);
       
       transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   }

   .auth-form:hover {
       transform: translateY(-5px);
       border-color: rgba(14, 116, 144, 0.3);
       
   }

   .login-header { margin-bottom: 35px; }
   .login-header h2 { font-size: 1.8rem; font-weight: 700; margin-bottom: 10px; letter-spacing: -0.5px;}
   .login-header p { color: var(--text-muted); font-size: 0.95rem; }

   /* --- Inputs Premium --- */
   .input-group { margin-bottom: 22px; text-align: left; }
   .input-group label { display: block; color: var(--text-main); font-size: 0.85rem; margin-bottom: 10px; font-weight: 600; letter-spacing: 0.5px; }
   .input-wrapper { position: relative; }
   .input-wrapper i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 1.1rem; transition: 0.3s; }
   .input-wrapper .eye-icon { left: auto; right: 16px; cursor: pointer; }
   .input-wrapper .eye-icon:hover { color: var(--text-main); }

   .input-wrapper input {
       width: 100%; padding: 15px 15px 15px 48px; background: var(--input-bg);
       border: 1px solid var(--border-color); border-radius: 10px; color: white;
       font-size: 1rem; outline: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       
   }

   .input-wrapper input:focus {
       border-color: var(--primary-blue);
       background: rgba(0,0,0,0.6);
       
   }

   /* Ilumina o ícone quando o input está focado */
   .input-wrapper input:focus + i, .input-wrapper input:focus ~ i:not(.eye-icon) {
       color: var(--primary-blue);
   }

   /* --- Ações Extras --- */
   .form-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; font-size: 0.85rem; }
   .checkbox-group { display: flex; align-items: center; gap: 10px; color: var(--text-muted); cursor: pointer; font-weight: 500;}
   .checkbox-group input { accent-color: var(--primary-blue); cursor: pointer; width: 16px; height: 16px; border-radius: 4px;}
   .forgot-link { color: var(--primary-blue); text-decoration: none; font-weight: 600; transition: 0.2s; }
   .forgot-link:hover { color: var(--primary-blue-hover); text-decoration: underline; text-underline-offset: 4px;}

   /* --- Botões de Alta Conversão --- */
   .btn-full {
       width: 100%; padding: 16px;
       background-color: var(--primary-blue);
       color: #FFFFFF;
       border: none; border-radius: 10px; font-size: 1.05rem; font-weight: 700;
       cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 10px;
       
       text-transform: uppercase; letter-spacing: 0.5px;
   }
   .btn-full:hover {
       transform: translateY(-2px);
       
       filter: brightness(1.1);
   }
   .btn-full:active { transform: translateY(1px); }

   /* Botão Google Minimalista */
   .btn-google {
       background: rgba(255,255,255,0.02); color: var(--text-main);
       border: 1px solid rgba(255,255,255,0.1); margin-top: 15px;
        font-weight: 600; text-transform: none; letter-spacing: 0;
   }
   .btn-google:hover {
       background: rgba(255,255,255,0.06);
       border-color: rgba(255,255,255,0.2);
       transform: translateY(-2px);
       
   }
   .btn-google img { width: 20px; }

   /* --- Divisor e Alternador --- */
   .divider { display: flex; align-items: center; gap: 15px; margin: 30px 0; color: var(--text-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 600;}
   .divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border-color); }

   .toggle-text { text-align: center; font-size: 0.9rem; color: var(--text-muted); margin-top: 30px; }
   .toggle-link { background: none; border: none; color: var(--primary-blue); cursor: pointer; font-size: 0.9rem; font-weight: 700; text-decoration: none; padding-left: 6px; transition: 0.2s;}
   .toggle-link:hover { color: var(--primary-blue-hover); text-decoration: underline; text-underline-offset: 4px; }

   /* --- Footer de Features --- */
   .features-footer {
       background: #050607; border-top: 1px solid rgba(255,255,255,0.03); padding: 40px 5%;
       display: grid; grid-template-columns: repeat(5, 1fr); gap: 25px;
   }
   .feature-item { display: flex; align-items: flex-start; gap: 15px; transition: transform 0.3s ease;}
   .feature-item:hover { transform: translateY(-5px); }
   .feature-item i { font-size: 1.8rem; color: var(--primary-blue); margin-top: 2px; }
   .feature-item h4 { font-size: 0.9rem; color: var(--text-main); margin-bottom: 5px; font-weight: 700; letter-spacing: -0.2px;}
   .feature-item p { font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; }

   /* --- Loading Super Premium --- */
   .loading-overlay {
       position: fixed; inset: 0; background: rgba(8,10,11,0.85);
       display: flex; flex-direction: column; justify-content: center; align-items: center;
       z-index: 9999; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
   }
   .loading-overlay i {
       font-size: 3.5rem; margin-bottom: 20px; color: var(--primary-blue);
   }
   .loading-overlay span { color: white; font-weight: 600; font-size: 1.1rem; letter-spacing: 1px; }
   .hidden { display: none !important; }

   /* --- Responsividade --- */
   @media (max-width: 1100px) {
       .hero-section { flex: 1; padding: 40px;}
       .hero-text h2 { font-size: 2rem;}
       .features-footer { grid-template-columns: repeat(3, 1fr); padding: 40px; }
   }
   @media (max-width: 900px) {
       .hero-section { display: none; }
       .form-section { background: var(--bg-dark); }
   }
   @media (max-width: 600px) {
       .auth-form { padding: 25px 15px; border: none; background: transparent; backdrop-filter: none;}
       .input-group { margin-bottom: 15px; }
       .input-wrapper input { padding: 12px 12px 12px 40px; font-size: 0.95rem; }
       .btn-full { padding: 12px; font-size: 0.95rem; }
       .login-header { margin-bottom: 20px; }
       .login-header h2 { font-size: 1.5rem; margin-bottom: 5px; }
       min-height: 100vh;
       display: flex;
       flex-direction: column;
       overflow-x: hidden;
       /* Animação suave global */
       animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);
   }

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

   /* --- Layout Principal --- */
   .login-wrapper { flex: 1; display: flex; width: 100%; min-height: 100vh; }

   /* --- Lado Esquerdo (Hero Image / Branding) --- */
   .hero-section {
       flex: 1.2;
       /* Gradiente sofisticado com blend na imagem */
       background: linear-gradient(135deg, rgba(8,10,11,0.7) 0%, rgba(8,10,11,0.95) 100%);
       display: flex; flex-direction: column; justify-content: center; align-items: center;
       padding: 60px; text-align: center; position: relative;
       border-right: 1px solid var(--border-color);
   }

   .hero-logo { margin-bottom: 50px; animation: float 6s ease-in-out infinite; }
   @keyframes float {
       0% { transform: translateY(0px); }
       50% { transform: translateY(-10px); }
       100% { transform: translateY(0px); }
   }

   .hero-logo i {
       font-size: 4.5rem;
       color: var(--primary-blue);
       margin-bottom: 15px;
   }

   .hero-logo h1 {
       font-size: 2.5rem;
       letter-spacing: 4px;
       font-weight: 800;
       text-transform: uppercase;
       margin-bottom: 5px;
       background: linear-gradient(to right, #0891B2, #0E7490);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
   }
   .hero-logo span { font-size: 0.9rem; color: var(--text-muted); letter-spacing: 3px; font-weight: 500; text-transform: uppercase; }

   .hero-text h2 { font-size: 2.6rem; font-weight: 700; line-height: 1.2; margin-bottom: 20px; letter-spacing: -0.5px; color: #FFFFFF;}
   .hero-text h2 .highlight { color: var(--primary-blue); font-weight: 800; }
   .hero-text p { color: #E2E8F0; font-size: 1.1rem; max-width: 400px; margin: 0 auto; line-height: 1.6; }
   .hero-text .line { width: 60px; height: 3px; background: var(--primary-blue); margin: 30px auto; border-radius: 3px;  }

   /* --- Lado Direito (Formulário Glassmorphism) --- */
   .form-section {
       flex: 1; display: flex; align-items: center; justify-content: center;
       padding: 40px; background: radial-gradient(circle at top right, rgba(14, 116, 144,0.05), transparent 50%);
   }

   .auth-form {
       background: var(--bg-card);
       backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
       padding: 55px 45px;
       border-radius: 20px;
       width: 100%; max-width: 460px;
       border: 1px solid var(--border-color);
       
       transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   }

   .auth-form:hover {
       transform: translateY(-5px);
       border-color: rgba(14, 116, 144, 0.3);
       
   }

   .login-header { margin-bottom: 35px; }
   .login-header h2 { font-size: 1.8rem; font-weight: 700; margin-bottom: 10px; letter-spacing: -0.5px;}
   .login-header p { color: var(--text-muted); font-size: 0.95rem; }

   /* --- Inputs Premium --- */
   .input-group { margin-bottom: 22px; text-align: left; }
   .input-group label { display: block; color: var(--text-main); font-size: 0.85rem; margin-bottom: 10px; font-weight: 600; letter-spacing: 0.5px; }
   .input-wrapper { position: relative; }
   .input-wrapper i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 1.1rem; transition: 0.3s; }
   .input-wrapper .eye-icon { left: auto; right: 16px; cursor: pointer; }
   .input-wrapper .eye-icon:hover { color: var(--text-main); }

   .input-wrapper input {
       width: 100%; padding: 15px 15px 15px 48px; background: var(--input-bg);
       border: 1px solid var(--border-color); border-radius: 10px; color: #000;
       font-size: 1rem; outline: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       
   }

   .input-wrapper input:focus {
       border-color: var(--primary-blue);
       background: rgba(0,0,0,0.6);
       
   }

   /* Ilumina o ícone quando o input está focado */
   .input-wrapper input:focus + i, .input-wrapper input:focus ~ i:not(.eye-icon) {
       color: var(--primary-blue);
   }

   /* --- Ações Extras --- */
   .form-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; font-size: 0.85rem; }
   .checkbox-group { display: flex; align-items: center; gap: 10px; color: var(--text-muted); cursor: pointer; font-weight: 500;}
   .checkbox-group input { accent-color: var(--primary-blue); cursor: pointer; width: 16px; height: 16px; border-radius: 4px;}
   .forgot-link { color: var(--primary-blue); text-decoration: none; font-weight: 600; transition: 0.2s; }
   .forgot-link:hover { color: var(--primary-blue-hover); text-decoration: underline; text-underline-offset: 4px;}

   /* --- Botões de Alta Conversão --- */
   .btn-full {
       width: 100%; padding: 16px;
       background-color: var(--primary-blue);
       color: #FFFFFF;
       border: none; border-radius: 10px; font-size: 1.05rem; font-weight: 700;
       cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 10px;
       
       text-transform: uppercase; letter-spacing: 0.5px;
   }
   .btn-full:hover {
       transform: translateY(-2px);
       
       filter: brightness(1.1);
   }
   .btn-full:active { transform: translateY(1px); }

   /* Botão Google Minimalista */
   .btn-google {
       background: rgba(255,255,255,0.02); color: var(--text-main);
       border: 1px solid rgba(255,255,255,0.1); margin-top: 15px;
        font-weight: 600; text-transform: none; letter-spacing: 0;
   }
   .btn-google:hover {
       background: rgba(255,255,255,0.06);
       border-color: rgba(255,255,255,0.2);
       transform: translateY(-2px);
       
   }
   .btn-google img { width: 20px; }

   /* --- Divisor e Alternador --- */
   .divider { display: flex; align-items: center; gap: 15px; margin: 30px 0; color: var(--text-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 600;}
   .divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border-color); }

   .toggle-text { text-align: center; font-size: 0.9rem; color: var(--text-muted); margin-top: 30px; }
   .toggle-link { background: none; border: none; color: var(--primary-blue); cursor: pointer; font-size: 0.9rem; font-weight: 700; text-decoration: none; padding-left: 6px; transition: 0.2s;}
   .toggle-link:hover { color: var(--primary-blue-hover); text-decoration: underline; text-underline-offset: 4px; }

   /* --- Footer de Features --- */
   .features-footer {
       background: #050607; border-top: 1px solid rgba(255,255,255,0.03); padding: 40px 5%;
       display: grid; grid-template-columns: repeat(5, 1fr); gap: 25px;
   }
   .feature-item { display: flex; align-items: flex-start; gap: 15px; transition: transform 0.3s ease;}
   .feature-item:hover { transform: translateY(-5px); }
   .feature-item i { font-size: 1.8rem; color: var(--primary-blue); margin-top: 2px; }
   .feature-item h4 { font-size: 0.9rem; color: var(--text-main); margin-bottom: 5px; font-weight: 700; letter-spacing: -0.2px;}
   .feature-item p { font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; }

   /* --- Loading Super Premium --- */
   .loading-overlay {
       position: fixed; inset: 0; background: rgba(8,10,11,0.85);
       display: flex; flex-direction: column; justify-content: center; align-items: center;
       z-index: 9999; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
   }
   .loading-overlay i {
       font-size: 3.5rem; margin-bottom: 20px; color: var(--primary-blue);
   }
   .loading-overlay span { color: white; font-weight: 600; font-size: 1.1rem; letter-spacing: 1px; }
   .hidden { display: none !important; }

   /* --- Responsividade --- */
   @media (max-width: 1100px) {
       .hero-section { flex: 1; padding: 40px;}
       .hero-text h2 { font-size: 2rem;}
       .features-footer { grid-template-columns: repeat(3, 1fr); padding: 40px; }
   }
   @media (max-width: 900px) {
       .hero-section { display: none; }
       .form-section { background: var(--bg-dark); }
   }
   @media (max-width: 600px) {
       .auth-form { padding: 25px 15px; border: none; background: transparent; backdrop-filter: none;}
       .input-group { margin-bottom: 15px; }
       .input-wrapper input { padding: 12px 12px 12px 40px; font-size: 0.95rem; }
       .btn-full { padding: 12px; font-size: 0.95rem; }
       .login-header { margin-bottom: 20px; }
       .login-header h2 { font-size: 1.5rem; margin-bottom: 5px; }
       .login-header p { font-size: 0.85rem; }
       .features-footer { grid-template-columns: 1fr; gap: 30px;}
       .form-section { padding: 15px; align-items: flex-start; padding-top: 5vh;}
   }

/* Corrige o estilo do autofill do navegador */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #ffffff inset !important;
    -webkit-text-fill-color: #000000 !important;
    transition: background-color 5000s ease-in-out 0s;
}