/* auth.css — tela de login.
 *
 * Recorte das linhas 16-34 do monolito.
 *
 * Nota: a arvore da secao 5 do plano nao previa este arquivo -- listava
 * sidebar, topbar, cards, forms, modal, fees e ai-panel. A tela de login e
 * uma tela inteira e nao cabia em nenhum dos sete.
 */

/* O fundo da tela era quase preto com um halo azul forte no topo. Sobre
 * branco, o mesmo gradiente a 18% viraria uma mancha esverdeada. Baixado
 * para 6%, o que mantem o gesto -- um leve realce atras da caixa -- sem
 * sujar a base branca que o manual pede em 70% da tela. */
#auth-screen {
  position: fixed; inset: 0; background: var(--bg2);
  display: flex; align-items: center; justify-content: center; z-index: 1000;
  background-image: radial-gradient(ellipse 80% 60% at 50% -20%, rgba(0, 72, 78, .06) 0%, transparent 70%);
}

/* A caixa passa a ser BRANCA sobre o fundo #F5F8F8 -- e assim que ela se
 * destaca num tema claro. No escuro era o contrario.
 *
 * A sombra era `0 32px 80px rgba(0,0,0,.6)`: preto a 60%, desenhada para
 * sumir num fundo quase preto. Sobre branco viraria um borrao cinza. Agora e
 * petroleo a 10%, que e como sombra se comporta em interface clara -- e usa a
 * cor da marca em vez de preto puro, para nao introduzir um cinza neutro,
 * que o manual proibe. */
.auth-box {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 20px; width: min(420px, 94vw); padding: 40px;
  box-shadow: 0 12px 32px rgba(0, 72, 78, .10);
}

/* margin-bottom era 32px na classe, mas o style= inline da linha 216 o
 * sobrescrevia para 28px -- e inline vence classe. 28px e o que a tela
 * realmente mostrava, entao 28px e o que fica. */
.auth-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; justify-content: center }

/* Estava em style= inline na linha 216. O logo novo ja e branco com
 * transparencia, entao nao leva filtro nenhum. */
.auth-logo-img { height: 40px; width: auto; object-fit: contain; margin-bottom: 4px }

.auth-logo-icon {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, var(--petroleo), var(--petroleo2));
  border-radius: 12px; display: grid; place-items: center; font-size: 20px;
}
.auth-logo-name { font-family: var(--fonte-titulo); font-size: 24px; font-weight: 700; color: var(--text) }
.auth-logo-sub { font-size: 11px; color: var(--text3); letter-spacing: .5px; text-transform: uppercase }

/* .auth-title agora e <h1> (tarefa 1.6). O `margin: 0 0 6px` zera a margem
 * que o navegador da a um <h1> por padrao e repoe os 6px do original.
 * Nao definimos line-height: nem <div> nem <h1> recebem line-height do
 * navegador, entao os dois ja renderizam igual -- fixar um valor aqui e que
 * mudaria a aparencia. */
.auth-title {
  font-family: var(--fonte-titulo);
  font-size: 26px; font-weight: 700; color: var(--text);
  margin: 0 0 6px;
}
.auth-sub { font-size: 13px; color: var(--text3); margin-bottom: 28px }

.auth-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px }
.auth-field label { font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: .9px; font-weight: 600 }
.auth-field input {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--rsm);
  padding: 12px 14px; color: var(--text); font-size: 14px;
  font-family: var(--fonte-corpo); outline: none; transition: .2s;
}
.auth-field input:focus { border-color: var(--petroleo); box-shadow: 0 0 0 3px var(--petroleo-glow) }

.auth-btn {
  width: 100%;
  background: linear-gradient(135deg, var(--petroleo), var(--petroleo2));
  border: none; border-radius: var(--rsm); padding: 13px;
  color: #fff; font-size: 14px; font-weight: 600;
  font-family: var(--fonte-corpo); cursor: pointer; margin-top: 8px; transition: .2s;
}
.auth-btn:hover { opacity: .88; transform: translateY(-1px) }
.auth-btn:disabled { opacity: .5; cursor: default; transform: none }

/* .auth-switch e .auth-switch a serviam ao bloco "Registre-se", removido na
 * tarefa 1.10. Ficam aqui porque nada mais os usa e apagar regra de CSS orfa
 * e trabalho da Fase 4, com a arvore inteira a vista. */
.auth-switch { text-align: center; margin-top: 20px; font-size: 13px; color: var(--text3) }
.auth-switch a { color: var(--petroleo-text); cursor: pointer }

.auth-error {
  background: rgba(194, 34, 51, .1); border: 1px solid rgba(194, 34, 51, .3);
  border-radius: var(--rsm); padding: 10px 14px;
  color: var(--red); font-size: 13px; margin-bottom: 14px; display: none;
}
.auth-error.show { display: block }

/* ------------------------------------------------------------------- mobile */

/* 16px para o iOS nao ampliar a pagina ao focar o campo. Motivo completo em
 * base.css, na secao mobile. So abaixo de 768px: no desktop nada muda. */
@media (max-width: 768px) {
  .auth-field input { font-size: 16px }
}