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

    :root {
      --background: 0 0% 0%; /* Preto */
      --foreground: 0 0% 100%; /* Branco */
      --primary: 0 0% 100%; /* Branco */
      --primary-foreground: 0 0% 0%; /* Preto */
      --secondary: 0 0% 10%; /* Cinza escuro */
      --secondary-foreground: 0 0% 100%; /* Branco */
      --muted: 0 0% 15%; /* Cinza mais claro */
      --muted-foreground: 0 0% 70%; /* Cinza claro para texto */
      --border: 0 0% 20%; /* Cinza para bordas */
      --input: 0 0% 15%; /* Cinza para campos de entrada */
      --ring: 0 0% 100%; /* Branco para foco */
      --radius: 0.75rem; /* Bordas arredondadas */
    }

    body {
      background-color: hsl(var(--background));
      color: hsl(var(--foreground));
      font-family: 'Inter', sans-serif;
      font-feature-settings: "rlig" 1, "calt" 1;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 1rem; /* Adicionado padding para telas pequenas */
    }

    .login-container {
      display: flex;
      flex-direction: column; /* Coluna em dispositivos móveis */
      align-items: center;
      justify-content: center;
      gap: 2rem;
      max-width: 800px;
      width: 100%;
      flex: 1; /* Ocupa o espaço restante */
      margin-bottom: 2rem; /* Espaçamento entre o formulário e o footer */
    }

    .login-image {
      flex: 1;
      max-width: 100%; /* Ocupa a largura total em dispositivos móveis */
      text-align: center; /* Centraliza a imagem */
    }

    .login-image img {
      width: 100%; /* Imagem ocupa 100% da largura do contêiner */
      max-width: 400px; /* Limita o tamanho máximo */
      border-radius: var(--radius);
    }

    .login-card {
      background-color: hsl(var(--secondary));
      border: 1px solid hsl(var(--border));
      border-radius: var(--radius);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
      padding: 2rem;
      width: 100%;
      max-width: 400px;
    }

    .input-field {
      background-color: hsl(var(--input));
      border: 1px solid hsl(var(--border));
      color: hsl(var(--foreground));
      border-radius: var(--radius);
      padding: 0.75rem 1rem;
      width: 100%;
      transition: border-color 0.3s ease, background-color 0.3s ease;
    }

    .input-field::placeholder {
      color: hsl(var(--muted-foreground));
    }

    .input-field:focus {
      background-color: hsl(var(--muted));
      border-color: hsl(var(--ring));
      outline: none;
    }

    .btn-primary {
      background-color: hsl(var(--primary));
      color: hsl(var(--primary-foreground));
      border-radius: var(--radius);
      padding: 0.75rem 1rem;
      width: 100%;
      font-weight: 600;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      position: relative;
      overflow: hidden;
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
    }

    .btn-primary:focus {
      outline: none;
      animation: pulse 1.5s infinite;
    }

    @keyframes pulse {
      0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
      }
      70% {
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
      }
      100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
      }
    }

    .text-muted {
      color: hsl(var(--muted-foreground));
    }

    .text-primary {
      color: hsl(var(--primary));
    }

    .text-primary:hover {
      text-decoration: underline;
    }

    .error-message {
      color: #ff6b6b; /* Vermelho claro */
      background-color: rgba(255, 107, 107, 0.1); /* Fundo semi-transparente */
      border: 1px solid #ff6b6b;
      border-radius: var(--radius);
      padding: 0.75rem 1rem;
      margin-bottom: 1rem;
      text-align: center;
    }

    /* Estilos para o footer */
    footer {
      background-color: hsl(var(--secondary));
      border-top: 1px solid hsl(var(--border));
      padding: 1rem;
      width: 100%;
      text-align: center;
      margin-top: auto; /* Fixa o footer na parte inferior */
    }

    footer .footer-links {
      display: flex;
      justify-content: center;
      gap: 1rem;
      margin-bottom: 0.5rem;
    }

    footer .footer-links a {
      color: hsl(var(--muted-foreground));
      text-decoration: none;
      transition: color 0.3s ease;
    }

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

    footer .social-icons {
      display: flex;
      justify-content: center;
      gap: 1rem;
      margin-bottom: 0.5rem;
    }

    footer .social-icons a {
      color: hsl(var(--muted-foreground));
      font-size: 1.25rem;
      transition: color 0.3s ease;
    }

    footer .social-icons a:hover {
      color: hsl(var(--primary));
    }

    footer .copyright {
      color: hsl(var(--muted-foreground));
      font-size: 0.875rem;
    }

    /* Oculta a imagem em dispositivos móveis */
    @media (max-width: 767px) {
      .login-image {
        display: none;
      }
    }

    /* Estilos para telas maiores (desktop) */
    @media (min-width: 768px) {
      .login-container {
        flex-direction: row; /* Linha em telas maiores */
      }

      .login-image {
        display: block; /* Garante que a imagem seja exibida em telas maiores */
      }
    }
    /* Estilo para o ícone de olho */
#togglePassword {
  color: hsl(var(--muted-foreground));
  transition: color 0.3s ease;
}

#togglePassword:hover {
  color: hsl(var(--primary));
}
/* Animação de entrada e saída do banner */
    @keyframes slideIn {
      from {
        transform: translateY(100%);
      }
      to {
        transform: translateY(0);
      }
    }

    @keyframes slideOut {
      from {
        transform: translateY(0);
      }
      to {
        transform: translateY(100%);
      }
    }

    .cookie-banner {
      animation: slideIn 0.5s ease-out;
    }

    .cookie-banner.hide {
      animation: slideOut 0.5s ease-in forwards;
    }