/* Reset e estilos gerais */
       * {
           margin: 0;
           padding: 0;
           box-sizing: border-box;
           font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
       }

       :root {
           --primary: #4361ee;
           --primary-dark: #3a56d4;
           --secondary: #7209b7;
           --accent: #f72585;
           --light: #f8f9fa;
           --dark: #212529;
           --gray: #6c757d;
           --gray-light: #e9ecef;
           --success: #4cc9f0;
           --border-radius: 8px;
           --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
           --transition: all 0.3s ease;
       }

       body {
           background: linear-gradient(135deg, #4361ee 0%, #7209b7 100%);
           color: var(--dark);
           line-height: 1.6;
           min-height: 100vh;
           display: flex;
           flex-direction: column;
           justify-content: center;
           align-items: center;
           padding: 20px;
       }

       .container {
           width: 100%;
           max-width: 1200px;
           margin: 0 auto;
           padding: 0 20px;
       }

       /* Header */
       header {
           width: 100%;
           position: absolute;
           top: 0;
           left: 0;
           padding: 20px 0;
       }

       .navbar {
           display: flex;
           justify-content: space-between;
           align-items: center;
           padding: 0 20px;
       }

       .logo {
           font-size: 1.8rem;
           font-weight: 700;
           color: white;
           text-decoration: none;
       }

       .logo span {
           color: var(--accent);
       }

       .back-home {
           color: white;
           text-decoration: none;
           font-weight: 600;
           display: flex;
           align-items: center;
           gap: 8px;
           transition: var(--transition);
           background: rgba(255, 255, 255, 0.1);
           padding: 10px 20px;
           border-radius: var(--border-radius);
           border: 1px solid rgba(255, 255, 255, 0.2);
       }

       .back-home:hover {
           color: var(--accent);
           background: rgba(255, 255, 255, 0.2);
           transform: translateY(-2px);
       }

       /* Card de Login */
       .login-container {
           display: flex;
           width: 100%;
           max-width: 900px;
           background: white;
           border-radius: 15px;
           overflow: hidden;
           box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
           margin: 40px 0;
       }

       .login-left {
           flex: 1;
           background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
           color: white;
           padding: 50px;
           display: flex;
           flex-direction: column;
           justify-content: center;
       }

       .login-left h2 {
           font-size: 2.2rem;
           margin-bottom: 20px;
       }

       .login-left p {
           margin-bottom: 30px;
           opacity: 0.9;
       }

       .features-list {
           list-style: none;
           margin-top: 20px;
       }

       .features-list li {
           margin-bottom: 15px;
           display: flex;
           align-items: center;
           gap: 10px;
       }

       .features-list i {
           color: var(--accent);
           font-size: 1.2rem;
       }

       .login-right {
           flex: 1;
           padding: 50px;
           display: flex;
           flex-direction: column;
           justify-content: center;
       }

       .login-header {
           text-align: center;
           margin-bottom: 30px;
       }

       .login-header h2 {
           font-size: 2rem;
           color: var(--dark);
           margin-bottom: 10px;
       }

       .login-header p {
           color: var(--gray);
       }

       .form-group {
           margin-bottom: 20px;
       }

       .form-group label {
           display: block;
           margin-bottom: 8px;
           font-weight: 600;
           color: var(--dark);
       }

       .input-with-icon {
           position: relative;
       }

       .input-with-icon i {
           position: absolute;
           left: 15px;
           top: 50%;
           transform: translateY(-50%);
           color: var(--gray);
       }

       .form-control {
           width: 100%;
           padding: 15px 15px 15px 45px;
           border: 2px solid var(--gray-light);
           border-radius: var(--border-radius);
           font-size: 1rem;
           transition: var(--transition);
       }

       .form-control:focus {
           border-color: var(--primary);
           outline: none;
           box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2);
       }

       .form-options {
           display: flex;
           justify-content: space-between;
           align-items: center;
           margin-bottom: 20px;
       }

       .remember-me {
           display: flex;
           align-items: center;
           gap: 8px;
       }

       .remember-me input {
           accent-color: var(--primary);
       }

       .forgot-password {
           color: var(--primary);
           text-decoration: none;
           font-weight: 600;
           transition: var(--transition);
       }

       .forgot-password:hover {
           color: var(--secondary);
           text-decoration: underline;
       }

       .btn {
           padding: 15px 20px;
           border-radius: var(--border-radius);
           font-weight: 600;
           cursor: pointer;
           transition: var(--transition);
           border: none;
           text-decoration: none;
           display: inline-block;
           text-align: center;
           font-size: 1rem;
           width: 100%;
       }

       .btn-primary {
           background-color: var(--primary);
           color: white;
       }

       .btn-primary:hover {
           background-color: var(--primary-dark);
           transform: translateY(-2px);
       }

       .divider {
           display: flex;
           align-items: center;
           margin: 25px 0;
           color: var(--gray);
       }

       .divider::before,
       .divider::after {
           content: "";
           flex: 1;
           border-bottom: 1px solid var(--gray-light);
       }

       .divider span {
           padding: 0 15px;
       }

       .signup-link {
           text-align: center;
           margin-top: 20px;
           color: var(--gray);
       }

       .signup-link a {
           color: var(--primary);
           text-decoration: none;
           font-weight: 600;
           transition: var(--transition);
       }

       .signup-link a:hover {
           color: var(--secondary);
       }

       /* Footer */
       footer {
           width: 100%;
           text-align: center;
           color: white;
           padding: 20px 0;
           margin-top: 20px;
       }

       .footer-links {
           display: flex;
           justify-content: center;
           gap: 20px;
           margin-bottom: 10px;
       }

       .footer-links a {
           color: white;
           text-decoration: none;
           transition: var(--transition);
       }

       .footer-links a:hover {
           color: var(--accent);
       }

       .copyright {
           font-size: 0.9rem;
           opacity: 0.8;
       }

       /* Mensagens de erro */
       .error-message {
           color: #ff4d4d;
           font-size: 0.8rem;
           margin-top: 5px;
           display: none;
       }

       /* Responsividade */
       @media screen and (max-width: 992px) {
            .login-container {
                max-width: 800px;
            }

            .login-left {
                padding: 40px;
            }

            .login-left h2 {
                font-size: 2rem;
            }

            .login-right {
                padding: 40px;
            }

            .login-header h2 {
                font-size: 1.8rem;
            }
        }

       @media (max-width: 768px) {
            body {
                padding: 10px;
                justify-content: flex-start;
            }

            header {
                position: relative;
                padding: 15px 0;
            }

           .login-container {
               flex-direction: column;
               max-width: 500px;
               margin: 20px 0;
               border-radius: 12px;
           }
           
           .login-left, .login-right {
               padding: 30px;
           }
           
           .navbar {
               flex-direction: row;
               justify-content: space-between;
               gap: 15px;
               padding: 0 10px;
           }

            .back-home {
                padding: 8px 15px;
                font-size: 0.9rem;
            }

            .back-home i {
                font-size: 0.9rem;
            }

            .features-list li {
                justify-content: center;
            }
           
           .form-options {
               flex-direction: row;
               flex-wrap: wrap;
               gap: 15px;
               align-items: flex-start;
           }

            .btn {
                padding: 14px 20px;
            }

            .footer-links {
                gap: 15px;
                flex-wrap: wrap;
            }

            .footer-links a {
                font-size: 0.9rem;
            }
       }

        /* Dispositivos móveis pequenos (até 576px) */
        @media screen and (max-width: 576px) {
            body {
                padding: 5px;
            }

            .container {
                padding: 0 10px;
            }

            /* Header mais compacto */
            header {
                padding: 10px 0;
            }

            .navbar {
                flex-direction: column;
                gap: 10px;
            }

            .logo {
                font-size: 1.4rem;
            }

            .back-home {
                width: 100%;
                justify-content: center;
                padding: 10px;
            }

            /* Card de login */
            .login-container {
                margin: 15px 0;
                border-radius: 10px;
            }

            .login-left {
                padding: 25px 20px;
            }

            .login-left h2 {
                font-size: 1.5rem;
                margin-bottom: 15px;
            }

            .login-left p {
                font-size: 0.9rem;
                margin-bottom: 20px;
            }

            .features-list li {
                margin-bottom: 12px;
                font-size: 0.9rem;
            }

            .features-list i {
                font-size: 1rem;
            }

            .login-right {
                padding: 25px 20px;
            }

            .login-header {
                margin-bottom: 20px;
            }

            .login-header h2 {
                font-size: 1.4rem;
                margin-bottom: 5px;
            }

            .login-header p {
                font-size: 0.85rem;
            }

            /* Formulário */
            .form-group {
                margin-bottom: 15px;
            }

            .form-group label {
                font-size: 0.9rem;
                margin-bottom: 5px;
            }

            .form-control {
                padding: 12px 12px 12px 40px;
                font-size: 0.95rem;
            }

            .input-with-icon i {
                font-size: 0.9rem;
                left: 12px;
            }

            .form-options {
                flex-direction: column;
                align-items: flex-start;
                gap: 12px;
                margin-bottom: 15px;
            }

            .remember-me {
                font-size: 0.9rem;
            }

            .forgot-password {
                font-size: 0.9rem;
            }

            .btn {
                padding: 12px;
                font-size: 0.95rem;
            }

            .signup-link {
                margin-top: 15px;
                font-size: 0.9rem;
            }

            /* Footer */
            footer {
                padding: 15px 0;
            }

            .footer-links {
                flex-direction: column;
                gap: 10px;
            }

            .footer-links a {
                font-size: 0.85rem;
            }

            .copyright {
                font-size: 0.8rem;
            }
        }

        /* Dispositivos muito pequenos (até 375px) */
        @media screen and (max-width: 375px) {
            .login-left {
                padding: 20px 15px;
            }

            .login-left h2 {
                font-size: 1.3rem;
            }

            .features-list li {
                font-size: 0.85rem;
            }

            .login-right {
                padding: 20px 15px;
            }

            .login-header h2 {
                font-size: 1.3rem;
            }

            .form-control {
                padding: 10px 10px 10px 35px;
                font-size: 0.9rem;
            }

            .input-with-icon i {
                left: 10px;
                font-size: 0.85rem;
            }

            .btn {
                padding: 10px;
                font-size: 0.9rem;
            }

            .signup-link {
                font-size: 0.85rem;
            }
        }

        /* Ajustes para orientação paisagem em mobile */
        @media screen and (max-height: 500px) and (orientation: landscape) {
            body {
                padding: 5px;
            }

            header {
                position: relative;
            }

            .login-container {
                margin: 10px 0;
            }

            .login-left, 
            .login-right {
                padding: 20px;
            }

            .features-list {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 10px;
            }

            .features-list li {
                margin-bottom: 0;
            }
        }

        /* Melhorias de acessibilidade para touch */
        @media (hover: none) and (pointer: coarse) {
            .btn,
            .back-home,
            .forgot-password,
            .signup-link a,
            .footer-links a {
                min-height: 44px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .form-control {
                font-size: 16px; /* Previne zoom automático em iOS */
            }

            .remember-me input {
                width: 20px;
                height: 20px;
            }

            .remember-me label {
                padding: 10px 0;
            }
        }

        /* Animações suaves em dispositivos que suportam */
        @media (prefers-reduced-motion: no-preference) {
            .login-container {
                animation: fadeInUp 0.5s ease;
            }

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