/* Aqui importa a fonte Great Vibes para usar apenas no nome Santhera */
    @import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Manrope:wght@400;500;600;700;800&display=swap');
    /* Aqui declara variáveis CSS globais utilizadas em todo o layout */
    :root {
      /* Aqui define a cor base de fundo mais escura */
      --bg-900: #121212;
      /* Aqui define a cor de superfície principal da área de login */
      --surface-850: #1a1a1a;
      /* Aqui define uma variação levemente mais clara da superfície */
      --surface-800: #1e1e1e;
      /* Aqui define outra camada de superfície para campos e botões */
      --surface-750: #181818;
      /* Aqui define a cor de borda padrão no tema escuro */
      --border-700: #2a2a2a;
      /* Aqui define a cor dourada principal dos destaques */
      --accent-500: #c8a951;
      /* Aqui define uma variação mais clara do dourado de destaque */
      --accent-400: #d9c26d;
      /* Aqui define a cor de texto mais clara para títulos */
      --text-050: rgba(255, 255, 255, 0.9);
      /* Aqui define a cor de texto padrão usada no corpo */
      --text-100: rgb(245, 245, 245);
      /* Aqui define a cor de texto intermediária para rótulos */
      --text-300: #c0c0c0;
      /* Aqui define a cor de texto secundária para detalhes */
      --text-500: #8a8a8a;
      /* Aqui define o raio padrão usado nas bordas arredondadas */
      --radius-lg: 24px;
    }

    /* Aqui estiliza o elemento body que envolve toda a página */
    body {
      /* Aqui remove a margem padrão do body para alinhamento total */
      margin: 0;
      /* Aqui garante que o body ocupe ao menos toda a altura da janela */
      min-height: 100vh;
      /* Aqui aplica a família tipográfica padrão utilizada no sistema */
      font-family: 'Manrope', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 0.88rem;
      /* Aqui suaviza a renderização da fonte em navegadores WebKit */
      -webkit-font-smoothing: antialiased;
      /* Aqui define a cor de fundo principal usando a variável global */
      background: var(--bg-900);
      /* Aqui define a cor padrão do texto do body */
      color: var(--text-100);
      /* Aqui transforma o body em um contêiner flexível */
      display: flex;
      /* Aqui organiza os elementos do body em coluna */
      flex-direction: column;
    }

    /* Aqui cria o tema claro substituindo variáveis quando a classe é aplicada ao body */
    body.light-theme {
      /* Aqui redefine a cor de fundo para o tema claro */
      --bg-900: #fdeff7;
      /* Aqui ajusta a superfície principal para translucidez clara */
      --surface-850: rgba(255, 247, 252, 0.9);
      /* Aqui altera a superfície secundária para um tom pêssego */
      --surface-800: #fac7b1;
      /* Aqui ajusta a superfície terciária para tom rosado suave */
      --surface-750: #ffe7f2;
      /* Aqui define a cor de borda suave do tema claro */
      --border-700: #f3c6dd;
      /* Aqui ajusta a cor de texto principal no modo claro */
      --text-050: #3a1b2c;
      /* Aqui define a cor base de texto no modo claro */
      --text-100: #4a2438;
      /* Aqui define a cor intermediária de texto no modo claro */
      --text-300: #7d4f68;
      /* Aqui define o texto secundário no modo claro */
      --text-500: #a6788d;
    }

    /* Aqui configura o contêiner principal que centraliza o cartão de login */
    .login-layout {
      /* Aqui faz o contêiner ocupar toda a área disponível */
      flex: 1;
      /* Aqui utiliza grid para centralização precisa */
      display: grid;
      /* Aqui centraliza o conteúdo horizontal e verticalmente */
      place-items: center;
      /* Aqui adiciona espaçamento interno ao redor do cartão */
      padding: 3rem 1.5rem;
      /* Aqui cria o fundo escuro com gradientes radiais e lineares */
      background: radial-gradient(circle at 20% 20%, rgba(200, 169, 81, 0.18), transparent 45%),
                  radial-gradient(circle at 80% 10%, rgba(200, 169, 81, 0.12), transparent 50%),
                  linear-gradient(135deg, rgba(18, 18, 18, 0.92), rgba(12, 12, 12, 0.94));
    }

    /* Aqui substitui o plano de fundo quando o tema claro está ativo */
    body.light-theme .login-layout {
      /* Aqui aplica gradientes claros e dourados no tema claro */
      background: radial-gradient(circle at 25% 20%, rgba(255, 195, 224, 0.55), transparent 45%),
                  radial-gradient(circle at 75% 15%, rgba(200, 169, 81, 0.25), transparent 50%),
                  linear-gradient(135deg, rgba(255, 247, 252, 0.96), rgba(255, 230, 241, 0.94));
    }

    /* Aqui estiliza o cartão que contém o formulário de login */
    .login-card {
      /* Aqui limita a largura máxima do cartão garantindo responsividade */
      width: min(395px, 100%);
      /* Aqui define a cor de fundo baseada na superfície escura */
      background: var(--surface-800);
      /* Aqui aplica uma borda sutil usando a cor configurada */
      border: 1px solid var(--border-700);
      /* Aqui aplica bordas arredondadas utilizando a variável global */
      border-radius: var(--radius-lg);
      /* Aqui adiciona espaçamento interno amplo para o conteúdo */
      padding: 2.35rem 2.1rem;
      /* Aqui adiciona sombra profunda para destaque do cartão */
      box-shadow: 0 32px 65px rgba(0, 0, 0, 0.45);
      /* Aqui exibe os elementos internos em coluna flexível */
      display: flex;
      /* Aqui garante a disposição vertical dos filhos */
      flex-direction: column;
      /* Aqui define o espaçamento entre os elementos internos */
      gap: 1.45rem;
      /* Aqui posiciona o cartão relativamente para efeitos internos */
      position: relative;
      /* Aqui esconde qualquer conteúdo que ultrapasse as bordas */
      overflow: hidden;
    }

    /* Aqui cria um brilho decorativo por trás do cartão */
    .login-card::before {
      /* Aqui insere um pseudo-elemento vazio para o efeito */
      content: "";
      /* Aqui posiciona o pseudo-elemento ocupando parte do cartão */
      position: absolute;
      /* Aqui define a área ocupada pelo pseudo-elemento */
      inset: -40% 40% 40% -40%;
      /* Aqui aplica um gradiente radial dourado translúcido */
      background: radial-gradient(circle at center, rgba(200, 169, 81, 0.35), transparent 70%);
      /* Aqui controla a opacidade do brilho decorativo */
      opacity: 0.25;
      /* Aqui impede que o efeito interfira em interações do usuário */
      pointer-events: none;
    }

    /* Aqui garante que o conteúdo principal fique acima do pseudo-elemento */
    .login-card > * {
      /* Aqui posiciona os elementos relativamente no fluxo */
      position: relative;
      /* Aqui eleva o conteúdo para ficar visível acima do brilho */
      z-index: 1;
    }

    /* Aqui estiliza o cabeçalho com logotipo e nome da plataforma */
    .login-brand {
      /* Aqui organiza o cabeçalho em coluna para centralizar elementos */
      display: flex;
      /* Aqui assegura a disposição vertical dos itens */
      flex-direction: column;
      /* Aqui centraliza itens na horizontal */
      align-items: center;
      /* Aqui define o espaço entre logotipo e textos */
      gap: 0.6rem;
      /* Aqui centraliza o texto do cabeçalho */
      text-align: center;
    }

    /* Aqui define o tamanho e comportamento da imagem do logotipo */
    .login-logo {
      /* Aqui ajusta a largura fixa do logotipo */
      width: 60px;
      /* Aqui ajusta a altura fixa do logotipo */
      height: 60px;
      /* Aqui garante que a imagem se ajuste sem distorção */
      object-fit: contain;
    }

    /* Aqui estiliza o título principal da marca */
    .login-brand h1 {
      /* Aqui remove margens para manter o título próximo do logotipo */
      margin: 0;
      /* Aqui define o tamanho de fonte do título da marca */
      font-size: 1.62rem;
      /* Aqui aplica a fonte Great Vibes somente ao texto "Santhera" */
      font-family: 'Great Vibes', cursive;
      /* Aqui mantém um peso de fonte forte para preservar o destaque visual */
      font-weight: 700;
      /* Aqui define a cor do título usando a variável de texto mais clara */
      color: var(--text-050);
      /* Aqui adiciona espaçamento entre letras para legibilidade */
      letter-spacing: 0.04em;
    }

    /* Aqui estiliza o subtítulo da marca abaixo do nome principal */
    .login-brand span {
      /* Aqui define a cor do subtítulo usando tom secundário */
      color: var(--text-500);
      /* Aqui transforma o texto em letras maiúsculas */
      text-transform: uppercase;
      /* Aqui aumenta o espaçamento entre letras do subtítulo */
      letter-spacing: 0.3em;
      /* Aqui define o tamanho da fonte do subtítulo */
      font-size: 0.7rem;
    }

    /* Aqui estiliza o formulário de login que agrupa campos e botão */
    .login-form {
      /* Aqui usa flexbox para empilhar os campos verticalmente */
      display: flex;
      /* Aqui alinha os elementos do formulário em coluna */
      flex-direction: column;
      /* Aqui define o espaçamento vertical entre cada campo */
      gap: 1rem;
    }

    /* Aqui estiliza todos os rótulos dos campos do formulário */
    label {
      /* Aqui define o tamanho da fonte dos rótulos */
      font-size: 0.76rem;
      /* Aqui transforma o texto dos rótulos em maiúsculas */
      text-transform: uppercase;
      /* Aqui espaça as letras para criar estilo institucional */
      letter-spacing: 0.12em;
      /* Aqui usa a cor intermediária para o texto dos rótulos */
      color: var(--text-300);
    }

    /* Aqui estiliza os campos de entrada de usuário e senha */
    .login-input {
      /* Aqui faz os campos ocuparem toda a largura disponível */
      width: 100%;
      /* Aqui arredonda as bordas dos campos */
      border-radius: 0.85rem;
      /* Aqui define a cor da borda dos campos */
      border: 1px solid var(--border-700);
      /* Aqui define o espaçamento interno para o texto digitado */
      padding: 0.66rem 0.9rem;
      /* Aqui define a cor de fundo dos campos */
      background: var(--surface-750);
      /* Aqui define a cor do texto inserido nos campos */
      color: var(--text-100);
      /* Aqui define o tamanho da fonte das entradas */
      font-size: 0.9rem;
      /* Aqui adiciona transição suave para foco e borda */
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    /* Aqui estiliza o comportamento dos campos quando recebem foco */
    .login-input:focus {
      /* Aqui remove o contorno padrão do navegador */
      outline: none;
      /* Aqui muda a cor da borda destacando o campo focado */
      border-color: rgba(200, 169, 81, 0.6);
      /* Aqui adiciona um brilho em torno do campo focado */
      box-shadow: 0 0 0 0.2rem rgba(200, 169, 81, 0.18);
    }

    .password-row {
      position: relative;
    }

    .password-toggle {
      position: absolute;
      right: 0.5rem;
      top: 50%;
      transform: translateY(-50%);
      border: none;
      background: transparent;
      color: var(--text-500);
      cursor: pointer;
      padding: 0.25rem 0.5rem;
      border-radius: 999px;
      font-size: 0.85rem;
    }

    .password-toggle:hover,
    .password-toggle:focus {
      color: var(--accent-500);
      background: rgba(200, 169, 81, 0.12);
      outline: none;
    }

    .capslock-warning {
      display: none;
      margin: 0;
      margin-top: 0.4rem;
      color: #f1b6b6;
      font-size: 0.82rem;
    }

    .capslock-warning.show {
      display: block;
    }

    /* Aqui estiliza o botão de envio do formulário */
    .login-button {
      /* Aqui remove qualquer borda padrão do botão */
      border: none;
      /* Aqui arredonda completamente o botão estilo pílula */
      border-radius: 999px;
      /* Aqui define o espaçamento interno do botão */
      padding: 0.72rem 0.95rem;
      /* Aqui deixa o texto do botão mais espesso */
      font-weight: 600;
      /* Aqui espaça levemente as letras do botão */
      letter-spacing: 0.04em;
      /* Aqui aplica a cor de destaque como fundo do botão */
      background: var(--accent-500);
      /* Aqui define a cor do texto do botão para alto contraste */
      color: #121212;
      /* Aqui transforma o cursor em apontador ao passar sobre o botão */
      cursor: pointer;
      /* Aqui adiciona transições suaves ao passar o mouse */
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    /* Aqui aplica efeitos ao botão quando o usuário passa o mouse ou foca */
    .login-button:hover,
    .login-button:focus {
      /* Aqui cria um leve movimento para cima como feedback visual */
      transform: translateY(-1px);
      /* Aqui adiciona uma sombra dourada ao redor do botão */
      box-shadow: 0 18px 32px rgba(200, 169, 81, 0.25);
      /* Aqui remove o contorno padrão durante o foco */
      outline: none;
    }

    /* Aqui estiliza o bloco com a frase de apoio institucional */
    .login-helper {
      /* Aqui organiza o conteúdo auxiliar em coluna */
      display: flex;
      /* Aqui mantém a ordem vertical para texto principal e secundário */
      flex-direction: column;
      /* Aqui define espaçamento entre as linhas de texto */
      gap: 0.3rem;
      /* Aqui centraliza o texto do bloco */
      text-align: center;
      /* Aqui define a cor do texto auxiliar */
      color: var(--text-500);
      /* Aqui define o tamanho da fonte do texto auxiliar */
      font-size: 0.82rem;
    }

    /* Aqui estiliza o rodapé da página de login */
    .login-footer {
      /* Aqui aplica espaçamento vertical ao rodapé */
      padding: 1.5rem 0;
      /* Aqui centraliza o texto exibido no rodapé */
      text-align: center;
      /* Aqui define o tamanho da fonte do rodapé */
      font-size: 0.78rem;
      /* Aqui define a cor do texto usando o tom secundário */
      color: var(--text-500);
      /* Aqui adiciona uma borda superior sutil ao rodapé */
      border-top: 1px solid var(--border-700);
      /* Aqui define a cor de fundo do rodapé */
      background: var(--surface-850);
    }

    /* Aqui estiliza os trechos em negrito dentro do rodapé */
    .login-footer strong {
      /* Aqui aplica a cor de destaque dourada ao texto em negrito */
      color: var(--accent-500);
      /* Aqui mantém o peso de fonte elevado para o destaque */
      font-weight: 600;
    }

    /* Aqui estiliza as mensagens de alerta exibidas durante erros */
    .login-alert {
      /* Aqui remove margens para alinhar o alerta ao formulário */
      margin: 0;
      /* Aqui arredonda o contorno da mensagem de alerta */
      border-radius: 0.85rem;
      /* Aqui adiciona espaçamento interno confortável ao alerta */
      padding: 0.75rem 1rem;
      /* Aqui define o tamanho do texto de alerta */
      font-size: 0.9rem;
      /* Aqui aplica um fundo rosado translúcido indicando erro */
      background: rgba(230, 120, 120, 0.15);
      /* Aqui define a borda do alerta com tom avermelhado */
      border: 1px solid rgba(230, 120, 120, 0.35);
      /* Aqui define a cor do texto do alerta para melhor legibilidade */
      color: #f1b6b6;
    }

    /* Aqui adapta o cartão para o tema claro ajustando cores */
    body.light-theme .login-card {
      /* Aqui redefine o fundo do cartão para tons claros */
      background: linear-gradient(135deg, rgba(255, 247, 252, 0.96), rgba(255, 230, 241, 0.92));
      /* Aqui redefine a borda para uma cor clara translúcida */
      border: 1px solid rgba(243, 198, 221, 0.8);
      /* Aqui atualiza a sombra do cartão com tonalidade rosada */
      box-shadow: 0 28px 50px rgba(248, 205, 227, 0.4);
    }

    /* Aqui ajusta o brilho decorativo no tema claro */
    body.light-theme .login-card::before {
      /* Aqui troca o gradiente para um dourado suave no tema claro */
      background: radial-gradient(circle at center, rgba(200, 169, 81, 0.25), transparent 70%);
    }

    /* Aqui muda a cor do título da marca quando o tema é claro */
    body.light-theme .login-brand h1 {
      /* Aqui define a cor do título para o modo claro */
      color: var(--text-050);
    }

    /* Aqui personaliza os campos de entrada no tema claro */
    body.light-theme .login-input {
      /* Aqui ajusta a cor de fundo dos campos para tom claro */
      background: rgba(255, 247, 252, 0.9);
      /* Aqui muda a cor do texto para contraste adequado */
      color: var(--text-100);
      /* Aqui define a cor da borda dos campos no tema claro */
      border-color: rgba(243, 198, 221, 0.8);
    }

    /* Aqui ajusta a cor dos placeholders no tema claro */
    body.light-theme .login-input::placeholder {
      /* Aqui define a cor dos textos de dica nos campos */
      color: var(--text-500);
    }

    body.light-theme .password-toggle {
      color: var(--text-300);
    }

    body.light-theme .password-toggle:hover,
    body.light-theme .password-toggle:focus {
      color: var(--text-100);
      background: rgba(200, 169, 81, 0.2);
    }

    /* Aqui altera a cor do botão no modo claro para combinar com o tema */
    body.light-theme .login-button {
      /* Aqui define a cor do texto do botão garantindo contraste */
      color: #241400;
    }

    /* Aqui ajusta a cor do texto auxiliar no tema claro */
    body.light-theme .login-helper {
      /* Aqui define o tom do texto auxiliar claro */
      color: var(--text-300);
    }

    /* Aqui redefine o estilo das mensagens de alerta no tema claro */
    body.light-theme .login-alert {
      /* Aqui ajusta o fundo do alerta para tom rosado suave */
      background: rgba(230, 120, 120, 0.12);
      /* Aqui define a borda do alerta com menor opacidade */
      border-color: rgba(230, 120, 120, 0.3);
      /* Aqui define a cor do texto do alerta no modo claro */
      color: #c86a7b;
    }

    body.light-theme .capslock-warning {
      color: #b35f75;
    }

    /* Aqui atualiza o rodapé no tema claro com cores suaves */
    body.light-theme .login-footer {
      /* Aqui define o fundo do rodapé em tom rosado translúcido */
      background: rgba(255, 232, 242, 0.92);
      /* Aqui define a borda superior do rodapé no tema claro */
      border-top: 1px solid rgba(243, 198, 221, 0.75);
      /* Aqui define a cor do texto do rodapé claro */
      color: var(--text-300);
    }

    /* Aqui cria regras específicas para telas pequenas como celulares */
    @media (max-width: 480px) {
      /* Aqui ajusta o cartão de login dentro do breakpoint definido */
      .login-card {
        /* Aqui reduz o padding do cartão em telas menores */
        padding: 1.95rem 1.5rem;
        /* Aqui reduz o raio da borda para melhor proporção móvel */
        border-radius: 18px;
      }
    }