/* auth.css: só o que é PRÓPRIO da casca de login (/login, /admin/login, troca de senha): o painel da marca, o cartão
   (sheet no celular), o campo de senha com olho e o estado vazio do Início. Reset, fonte, foco, .input e .btn vêm do
   base.css (templates/auth/_casca.html carrega style.css + base.css). Nenhum hex aqui. */

/* ---------------------------------------------------------------- base (o resto vem do base.css) */
.auth-pagina { min-height: 100vh; min-height: 100dvh; }

/* ---------------------------------------------------------------- estrutura: painel da marca + coluna do cartão */
.auth-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}

.auth-painel {
  display: flex;
  flex-direction: column;
  padding: var(--sp-6) calc(var(--sp-6) * 2);
  background: var(--bg-elev);
  border-right: 1px solid var(--borda);
}
.auth-painel-corpo {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: var(--sp-6) 0;
}
.auth-painel-titulo {
  font-size: var(--fs-titulo-grande);
  font-weight: 700;
  line-height: 1.2;
  color: var(--texto);
}
.auth-painel-texto {
  margin-top: var(--sp-4);
  font-size: var(--fs-lg);
  color: var(--texto-2);
}
.auth-lista {
  list-style: none;
  margin-top: var(--sp-6);
  display: grid;
  gap: var(--sp-4);
}
.auth-lista li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-base);
  color: var(--texto);
}
.auth-lista li i {
  flex: none;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--raio-sm);
  background: var(--cor-primaria-suave);
  color: var(--cor-primaria-texto);
  font-size: 20px;
}

.auth-principal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6) var(--sp-5);
  background: var(--bg);
}

/* ---------------------------------------------------------------- marca */
.auth-marca { display: flex; align-items: center; gap: var(--sp-3); }
.auth-marca-selo {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--raio-sm);
  background: var(--cor-primaria-hover);
  color: var(--superficie);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.auth-marca-nome { font-size: var(--fs-xl); font-weight: 700; color: var(--texto); }
.auth-marca-celular { display: none; }
.auth-marca-lema { display: none; }

/* ---------------------------------------------------------------- cartão */
.auth-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  width: 100%;
  max-width: 420px;
  padding: var(--sp-6);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.auth-titulo { font-size: var(--fs-2xl); font-weight: 700; line-height: 1.25; color: var(--texto); }
.auth-cab { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
.auth-sub { font-size: var(--fs-sm); color: var(--texto-2); }
.auth-selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--raio-full);
  background: var(--cor-primaria-suave);
  color: var(--cor-primaria-escura);    /* sobre o verde suave o -texto cai para 4,27:1; o -escura dá 9,6:1 (F20-4) */
  font-size: var(--fs-xs);
  font-weight: 600;
}

/* ---------------------------------------------------------------- aviso (erro e informação) */
.modal-aviso {
  padding: 10px var(--sp-3);
  border: 1px solid var(--erro);
  border-radius: var(--raio-sm);
  background: var(--erro-suave);
  color: var(--erro-texto);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.modal-aviso.modal-aviso-info {
  border-color: var(--info);
  background: var(--info-suave);
  color: var(--info-texto);
}

/* ---------------------------------------------------------------- formulário (Padrao_Formulario: campo 40px, rótulo 13px/600) */
.auth-form { display: grid; gap: var(--sp-4); }
.auth-form .campo { display: flex; flex-direction: column; gap: 5px; }
.auth-form label { font-size: var(--fs-sm); font-weight: 600; color: var(--texto-2); }

/* campo e botão usam .input e .btn .btn-primario do base.css; aqui só a medida do cartão (campo 40px, botão de largura total) */
.auth-form .input { height: 40px; }
.auth-form .input[aria-invalid="true"], .auth-form .input[aria-invalid="true"]:focus { border-color: var(--erro); }
.auth-form .input[aria-invalid="true"]:focus { box-shadow: 0 0 0 2px var(--erro); }
.auth-botao { width: 100%; height: 40px; }
.auth-botao:disabled { cursor: progress; }

.auth-senha { position: relative; }
.auth-senha .input { padding-right: 44px; }
.auth-olho {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--raio-sm);
  background: transparent;
  color: var(--texto-2);
  font-size: 20px;
  cursor: pointer;
}
.auth-olho:hover { background: var(--bg); color: var(--texto); }
.auth-dica { font-size: var(--fs-xs); color: var(--texto-suave); }

/* carregando (Padrao_Loading_Estado): spinner 44px, borda 4px, texto específico embaixo */
.auth-carregando {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--texto);
}
.auth-carregando::before {
  content: "";
  width: 44px;
  height: 44px;
  border: 4px solid var(--borda);
  border-top-color: var(--cor-primaria);
  border-radius: var(--raio-full);
  animation: auth-gira 0.8s linear infinite;
}
@keyframes auth-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .auth-carregando::before { animation-duration: 2s; }
}

.auth-ajuda { margin-top: var(--sp-5); font-size: var(--fs-sm); color: var(--texto-suave); text-align: center; }
.auth-sair { margin-top: var(--sp-5); text-align: center; }
.auth-link {
  padding: var(--sp-2);
  border: 0;
  background: none;
  color: var(--cor-primaria-texto);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

/* ---------------------------------------------------------------- tela grande: painel e cartão crescem para não sobrar vazio */
@media (min-width: 1600px) {
  .auth-painel { padding: calc(var(--sp-6) * 1.5) calc(var(--sp-6) * 3); }
  .auth-painel-corpo { max-width: 640px; }
  .auth-painel-titulo { font-size: 44px; }
  .auth-painel-texto { font-size: var(--fs-xl); }
  .auth-lista { gap: var(--sp-5); margin-top: calc(var(--sp-6) * 1.5); }
  .auth-lista li { font-size: var(--fs-lg); }
  .auth-lista li i { width: 44px; height: 44px; font-size: 24px; }
  .auth-card { max-width: 480px; padding: calc(var(--sp-6) * 1.5); }
  .auth-titulo { font-size: 30px; }
}

/* ---------------------------------------------------------------- até 880px: some o painel, a marca vai para cima do cartão */
@media (max-width: 880px) {
  .auth-layout { grid-template-columns: minmax(0, 1fr); }
  .auth-painel { display: none; }
  .auth-principal { gap: var(--sp-5); }
  .auth-marca-celular { display: flex; }
}

/* ---------------------------------------------------------------- até 720px: cartão de largura total, tipo sheet de baixo */
@media (max-width: 720px) {
  .auth-link { min-height: 44px; }      /* "Sair do sistema" no trocar senha: alvo de toque de 44px (F20) */
  .auth-principal { gap: 0; padding: 0; justify-content: flex-end; align-items: stretch; }
  .auth-marca-celular {
    flex: 1;
    flex-direction: column;
    justify-content: center;
    gap: var(--sp-3);
    padding: calc(var(--sp-6) + var(--safe-top)) var(--sp-5) var(--sp-5);
  }
  .auth-marca-celular .auth-marca-selo { width: 64px; height: 64px; border-radius: var(--raio); font-size: var(--fs-xl); }
  .auth-marca-lema {
    display: block;
    max-width: 320px;
    text-align: center;
    font-size: var(--fs-base);
    color: var(--texto-2);
  }
  .auth-card {
    max-width: none;
    padding: var(--sp-5) var(--sp-5) calc(var(--sp-5) + var(--safe-bottom));
    border-width: 1px 0 0;
    border-radius: var(--raio-lg) var(--raio-lg) 0 0;
    box-shadow: var(--sombra-lg);
  }
  .auth-titulo { font-size: var(--fs-xl); }
  .auth-form .input { height: 44px; }
  .auth-senha .input { padding-right: 52px; }
  .auth-olho { top: 0; right: 0; width: 44px; height: 44px; }
  .auth-botao { height: 44px; }
}

/* ---------------------------------------------------------------- Início provisório (estado vazio) */
.inicio-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 60vh;
  padding: var(--sp-6) var(--sp-5);
  text-align: center;
}
.inicio-vazio-icone { font-size: 48px; color: var(--cor-primaria-texto); }
.inicio-vazio-titulo { margin: 0; font-size: var(--fs-xl); font-weight: 600; color: var(--texto); }
.inicio-vazio-texto { margin: 0; max-width: 420px; font-size: var(--fs-base); color: var(--texto-2); }