/* ==========================================================================
   ESTILOS DA TELA DE LOGIN
   --------------------------------------------------------------------------
   COMO USAR ESTE ARQUIVO
   1. Para mudar CORES, FONTE, TAMANHOS e TEMPOS, mexa só na seção 1
      (VARIÁVEIS). O resto do arquivo usa essas variáveis.
   2. Para mudar o formato de um elemento específico, procure a seção dele:
      2 Base · 3 Layout · 4 Painel da marca (esquerda) ·
      5 Painel do formulário (direita) · 6 Responsivo · 7 Acessibilidade
   Os valores são os mesmos do arquivo original: só organizei e comentei.
   ========================================================================== */

/* Fonte do site: Inter (Google Fonts), carregada no <head> do login.html.
   Para trocar a fonte, mude o link lá e também a variável --fonte abaixo. */


/* ==========================================================================
   1. VARIÁVEIS (o painel de controle do visual)
   ========================================================================== */
:root {

  /* ---------- CORES: azul ---------- */

  /* Cor principal da marca: azul-marinho escuro.
     Usada no fundo do painel esquerdo e no ícone da versão mobile. */
  --navy: #061A3D;

  /* Cor de destaque (ações): botão "Entrar", borda do campo ao clicar,
     link "mostrar senha" e o texto pequeno acima do título. */
  --blue: #061A3D;

  /* Cor do botão ao passar o mouse: um azul um pouco mais claro que --blue. */
  --blue-hover: #12346e;

  /* ---------- CORES: textos, bordas e fundos ---------- */

  /* Cor dos textos principais (títulos, rótulos, texto digitado). */
  --text: #061A3D;

  /* Cor dos textos secundários (descrições e avisos de segurança): cinza azulado. */
  --muted: #68798a;

  /* Cor das bordas dos campos: cinza claro. */
  --line: #d9e1e8;

  /* Fundo do painel do formulário (lado direito): branco. */
  --surface: #ffffff;

  /* Fundo geral da página, atrás de tudo: cinza muito claro. */
  --page: #f3f6f9;

  /* ---------- CORES: mensagens ---------- */

  /* Mensagens de erro (vermelho). */
  --danger: #b42318;

  /* Ícone de sucesso/segurança (verde). */
  --success: #067647;

  /* ---------- CORES: painel da marca (extras que antes estavam soltas no código) ---------- */

  /* Cor dos textos claros sobre o fundo azul (descrição e rodapé do painel esquerdo). */
  --texto-painel-claro: #c3d1de;

  /* Cor do ponto de status piscando, em RGB (verde-água).
     Está em RGB para ser usada também na sombra animada do ponto. */
  --status-dot-rgb: 91, 210, 160;

  /* ---------- TIPOGRAFIA ---------- */

  /* Fonte usada em todo o site. Inter primeiro; se não carregar, usa a do sistema. */
  --fonte: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ---------- TAMANHOS E FORMAS ---------- */

  /* Tamanho do ponto de status (bolinha verde piscando). */
  --status-dot-size: 8px;

  /* Arredondamento dos cantos dos campos e do botão. */
  --raio-campo: 8px;

  /* ---------- LOGO DE FUNDO (marca d'água) ---------- */

  /* Transparência da logo de fundo no painel esquerdo (0 = invisível, 1 = totalmente visível). */
  --opacidade-marca-dagua: .14;

  /* Tempo do ciclo da animação que "desenha" a logo de fundo. */
  --duracao-logo: 20s;
}


/* ==========================================================================
   2. BASE (regras gerais da página)
   ========================================================================== */

/* Faz largura e altura incluírem o preenchimento e a borda. Evita elementos estourando. */
* { box-sizing: border-box; }

/* Página inteira: remove margem, ocupa a altura toda e define fonte, cor do texto e fundo. */
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--fonte);
  color: var(--text);
  background: var(--page);
}


/* ==========================================================================
   3. LAYOUT GERAL (divisão em duas colunas)
   ========================================================================== */

/* Estrutura principal: duas colunas.
   Esquerda (marca) = 0.92 · Direita (formulário) = 1.08.
   Para dar mais espaço a um lado, mude esses números.
   A coluna esquerda tem mínimo de 300px e a direita de 420px. */
.page-shell {
  display: grid;
  grid-template-columns: minmax(300px, 0.92fr) minmax(420px, 1.08fr);
  min-height: 100vh;
}


/* ==========================================================================
   4. PAINEL DA MARCA (coluna da esquerda, fundo azul)
   ========================================================================== */

/* ---- Caixa do painel ---- */
/* Fundo azul-marinho, texto branco e espaçamento interno que se adapta à tela (34px a 72px).
   Os itens ficam um no topo e outro embaixo (space-between). */
.brand-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: clamp(34px, 5vw, 72px);
  color: #fff;
  background: var(--navy);
}

/* ---- Logo de fundo (marca d'água) ---- */
/* Imagem grande, inclinada em -36 graus, no centro do painel, atrás dos textos.
   - opacity: transparência (ajuste em --opacidade-marca-dagua)
   - rotate(-36deg): inclinação (mude o número para girar mais ou menos)
   - width: acompanha a altura da tela, com limites para equilibrar telas pequenas e grandes
   - animation: efeito de "desenhar" a logo (tempo em --duracao-logo) */
.brand-watermark {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: clamp(808px, 166vh, 1710px);
  aspect-ratio: 2 / 1;
  object-fit: contain;
  opacity: var(--opacidade-marca-dagua);
  pointer-events: none;
  user-select: none;
  transform: translate(-50%, -50%) rotate(-36deg);
  clip-path: inset(0 100% 0 0);
  animation: desenhar-logo var(--duracao-logo) linear infinite;
}

/* Garante que a logo + nome e o rodapé fiquem POR CIMA da marca d'água. */
.brand-lockup, .panel-b { position: relative; z-index: 1; }

/* Desenha a logo no início, mantém estática e a recolhe nos 3s finais do ciclo. */
@keyframes desenhar-logo {
  0%, 2% { clip-path: inset(0 100% 0 0); opacity: 0; }
  3% {
    opacity: var(--opacidade-marca-dagua);
    animation-timing-function: cubic-bezier(.4, 0, .2, 1);
  }
  12%, 85% {
    clip-path: inset(0 0 0 0);
    opacity: var(--opacidade-marca-dagua);
    animation-timing-function: cubic-bezier(.4, 0, .2, 1);
  }
  93% {
    clip-path: inset(0 35% 0 0);
    opacity: var(--opacidade-marca-dagua);
    animation-timing-function: cubic-bezier(.4, 0, .2, 1);
  }
  98% {
    clip-path: inset(0 78% 0 0);
    opacity: var(--opacidade-marca-dagua);
    animation-timing-function: cubic-bezier(.4, 0, .2, 1);
  }
  100% { clip-path: inset(0 100% 0 0); opacity: 0; }
}

/* ---- Logo + nome (topo do painel; também usado na versão mobile) ---- */
/* Coloca o símbolo e o nome lado a lado, com 13px de espaço entre eles. */
.brand-lockup, .mobile-brand {
  display: flex;
  align-items: center;
  gap: 13px;
}

.brand-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  object-fit: contain;
  border-radius: 12px;
}

/* Nome da empresa ao lado da logo: pequeno, com letras bem espaçadas. */
.brand-name {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 2.6px;
}

/* Parte do nome em negrito (dentro de <strong>). */
.brand-name strong { font-weight: 800; }

/* ---- Bloco de mensagem (título grande no meio do painel) ---- */
/* Largura máxima de 520px e 60px de espaço acima e abaixo. */
.brand-message {
  position: relative;
  z-index: 1;
  max-width: 520px;
  margin: 60px 0;
}

/* Texto pequeno em maiúsculas (.overline no painel azul e .eyebrow no formulário).
   Tamanho 11px, negrito forte e letras espaçadas. */
.overline, .eyebrow {
  margin: 0 0 18px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
}

/* Cor do .overline: branco (fica sobre o fundo azul). */
.overline { color: #fff; }

/* Título grande do painel: de 32px a 50px conforme a tela, com linhas juntas
   e letras levemente apertadas. */
.brand-message h1 {
  margin: 0;
  font-size: clamp(32px, 4vw, 50px);
  line-height: 1.14;
  letter-spacing: -1.8px;
}

/* Trecho do título dentro de <span>. Hoje branco, igual ao resto.
   Para destacar uma palavra, troque a cor aqui. */
.brand-message h1 span { color: #fff; }

/* Texto de descrição abaixo do título: largura máxima de 390px,
   cor clara (--texto-painel-claro) e linhas bem espaçadas. */
.brand-description {
  max-width: 390px;
  margin: 24px 0 0;
  color: var(--texto-painel-claro);
  font-size: 14px;
  line-height: 1.8;
}

/* ---- Rodapé do painel (texto de status embaixo) ---- */
/* Ponto de status + texto lado a lado, em tamanho pequeno e cor clara. */
.panel-footer, .panel-b {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--texto-painel-claro);
  font-size: 12px;
}

/* Bolinha de status que pisca. Tamanho em --status-dot-size, cor em --status-dot-rgb. */
.status-dot {
  width: var(--status-dot-size);
  height: var(--status-dot-size);
  flex: 0 0 var(--status-dot-size);
  border-radius: 50%;
  background: rgb(var(--status-dot-rgb));
  animation: sinal-piscar 1.5s ease-in-out infinite;
}

/* Animação do ponto de status: a cada 1,5 segundo diminui a opacidade e
   solta um "anel" de brilho que se espalha. Para piscar mais devagar, aumente o 1.5s acima. */
@keyframes sinal-piscar {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(var(--status-dot-rgb), .4); }
  50% { opacity: .45; box-shadow: 0 0 0 5px rgba(var(--status-dot-rgb), 0); }
}


/* ==========================================================================
   5. PAINEL DO FORMULÁRIO (coluna da direita, fundo branco)
   ========================================================================== */

/* ---- Caixa do painel ---- */
/* Fundo branco (--surface) com espaçamento interno que se adapta à tela.
   Entra com um efeito suave de subir e aparecer (0,7s, com 0,12s de atraso). */
.form-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: 44px clamp(28px, 6vw, 88px) 26px;
  background: var(--surface);
  animation: entrar-suave .7s cubic-bezier(.22, 1, .36, 1) .12s both;
}

/* Animação de entrada do painel: sobe 14px enquanto aparece. */
@keyframes entrar-suave {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Área do formulário (centralizada) ---- */
/* Largura máxima de 410px (o formulário não passa disso), centralizado, com texto ao centro. */
.form-content {
  width: 100%;
  max-width: 410px;
  margin: auto;
  padding: 40px 0;
  text-align: center;
}

.auth-switch { margin-top: 12px; color: var(--muted); font-size: 13px; }

/* Logo da versão mobile: escondida no computador (aparece só na seção 6, Responsivo). */
.mobile-brand { display: none; }

/* ---- Textos de apresentação ---- */
/* Texto pequeno em maiúsculas acima do título, na cor de destaque (--blue). */
.eyebrow {
  margin-bottom: 12px;
  color: var(--blue);
}

/* Título do formulário: de 27px a 34px conforme a tela. */
.form-content h2 {
  margin: 0;
  font-size: clamp(27px, 3vw, 34px);
  letter-spacing: -1px;
}

/* Frase de apoio abaixo do título, em cinza (--muted). */
.intro {
  margin: 12px 0 34px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

/* ---- Campos ---- */
/* Espaço entre um campo e o próximo (rótulo + caixa de digitação). */
.field-group { margin-bottom: 22px; }

/* Rótulo acima de cada campo (ex.: "E-mail", "Senha"). */
label {
  display: block;
  text-align: left;
  margin-bottom: 9px;
  font-size: 13px;
  font-weight: 700;
}

/* Caixa de digitação: 50px de altura, texto à esquerda, borda cinza (--line)
   e cantos arredondados (--raio-campo). */
input {
  width: 100%;
  height: 50px;
  padding: 0 14px;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--raio-campo);
  outline: none;
  background: #fff;
  transition: border-color .16s ease, box-shadow .16s ease;
}

/* Cor do texto de exemplo (placeholder) dentro do campo: cinza claro. */
input::placeholder { color: #9aa8b5; }

/* Campo selecionado (clicado): borda na cor de destaque e um brilho suave em volta.
   O brilho usa a mesma cor do --navy, em RGB (6, 26, 61), com 12% de opacidade.
   Se mudar a cor principal, ajuste esses números também. */
input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(6, 26, 61, .12);
}

/* ---- Campo de senha com botão "mostrar" ---- */
/* Dá espaço à direita do campo (82px) para o botão não ficar por cima do texto. */
.password-field { position: relative; }
.password-field input { padding: 0 44px 0 14px; }

/* Botão de texto "mostrar/ocultar senha" dentro do campo, alinhado à direita
   e na cor de destaque (--blue). */
.toggle-password {
  position: absolute;
  top: 50%;
  right: 13px;
  padding: 5px 0;
  color: var(--blue);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform: translateY(-50%);
}
.toggle-password:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

/* ---- Mensagem de erro ---- */
/* Espaço reservado para a mensagem (18px) para a tela não "pular" quando ela aparecer.
   Cor vermelha (--danger). */
.feedback {
  min-height: 18px;
  margin: -5px 0 12px;
  color: var(--danger);
  font-size: 12px;
  line-height: 1.5;
}

/* ---- Botão principal (Entrar) ---- */
/* Botão de largura total, na cor de destaque (--blue), texto branco,
   cantos arredondados (--raio-campo). */
.submit-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 51px;
  padding: 0 17px;
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  border: 0;
  border-radius: var(--raio-campo);
  background: var(--blue);
  cursor: pointer;
  transition: background .16s ease, transform .16s ease;
}

/* Ao passar o mouse: muda para --blue-hover. */
.submit-button:hover { background: var(--blue-hover); }
.submit-button:focus-visible { outline: 3px solid rgba(6, 26, 61, .35); outline-offset: 2px; }

/* Indicador girando enquanto valida o login. */
.submit-button.carregando span[aria-hidden] {
  width: 14px;
  height: 14px;
  overflow: hidden;
  color: transparent;
  border: 2px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* Ao clicar: o botão "afunda" 1px. */
.submit-button:active { transform: translateY(1px); }

/* Botão desativado (enquanto envia): fica mais fraco e o cursor vira "carregando". */
.submit-button:disabled { opacity: .65; cursor: wait; }

/* ---- Aviso de segurança ---- */
/* Texto pequeno em cinza (--muted) com o ícone de escudo ao lado, centralizado. */
.security-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
  text-align: center;
}

/* Ícone redondo do escudo: 19px, símbolo verde (--success) sobre fundo verde bem claro. */
.shield {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  color: var(--success);
  font-size: 12px;
  font-weight: 800;
  border-radius: 50%;
  background: #e8f7ef;
}

/* ---- Rodapé do formulário (links/créditos embaixo) ---- */
/* Itens centralizados, que quebram de linha se faltar espaço. Texto bem pequeno em cinza. */
.form-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 16px;
  color: #81909e;
  font-size: 10px;
  text-align: center;
}


/* ==========================================================================
   6. RESPONSIVO (celular e tablet)
   ========================================================================== */

/* TABLET E CELULAR (telas até 850px de largura):
   - vira 1 coluna só
   - o painel azul da marca some
   - a logo pequena (.mobile-brand) aparece no topo do formulário, centralizada */
@media (max-width: 850px) {
  .page-shell { grid-template-columns: 1fr; }
  .brand-panel { display: none; }
  .form-panel { min-height: 100vh; padding: 26px 24px 20px; }
  .form-content { max-width: 440px; }
  .mobile-brand { display: flex; justify-content: center; margin-bottom: 48px; }

  .mobile-brand .brand-icon { background: var(--navy); }
}

/* CELULAR PEQUENO (telas até 480px): reduz margens e empilha os itens do rodapé. */
@media (max-width: 480px) {
  .form-panel { padding-right: 22px; padding-left: 22px; }
  .mobile-brand { margin-bottom: 40px; }
  .form-content { padding: 24px 0; }
  .form-footer { flex-direction: column; }
}


/* ==========================================================================
   7. ACESSIBILIDADE
   ========================================================================== */

/* Para quem ativa "reduzir movimento" no sistema: desliga todas as animações
   e deixa a logo de fundo já visível, sem efeito de desenho. */
@media (prefers-reduced-motion: reduce) {
  .brand-panel, .form-panel, .status-dot, .brand-watermark, .submit-button.carregando span[aria-hidden] { animation: none; }
  .brand-watermark { clip-path: none; opacity: var(--opacidade-marca-dagua); }
}