/*
  Tema das telas de autenticação (login, código de verificação, recuperar senha) —
  visual "cartório/selo" em vinho + dourado, separado do tema claro usado no resto
  do painel (estilo.css). Usado por static/index.html e static/admin/index.html.
*/

.tela-autenticacao {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  background: radial-gradient(circle at 65% 35%, #4a1410 0%, #2c0b08 75%);
  overflow-y: auto;
}

.tela-autenticacao .lado-marca-auth {
  flex: 1 1 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  min-height: 220px;
}

.tela-autenticacao .lado-marca-auth img {
  width: min(90%, 380px);
}

.tela-autenticacao .lado-formulario-auth {
  flex: 1 1 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* Tela de dupla verificação (código): só o cartão, centralizado, sem a logo do lado.
   (o !important é só pra vencer a regra de telas estreitas, que empilha o cartão no
   topo quando tem logo do lado — aqui não tem logo, então sempre centraliza.) */
.tela-autenticacao.sem-marca .lado-marca-auth {
  display: none;
}

.tela-autenticacao.sem-marca .lado-formulario-auth {
  flex: 1 1 100%;
  align-items: center !important;
  padding-top: 24px !important;
}

.cartao-auth {
  width: 100%;
  max-width: 380px;
  background: #f3ead8;
  border: 1px solid #d4b96a;
  padding: 44px 36px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
  font-family: 'Cormorant Garamond', Georgia, serif;
}

.cartao-auth h1 {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 15px;
  letter-spacing: 3px;
  color: #7a5b1e;
  margin: 0 0 8px;
  font-weight: 600;
  text-transform: uppercase;
}

.cartao-auth .subtitulo {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 16px;
  color: #6b4a30;
  margin: 0 0 26px;
}

.cartao-auth label {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 16px;
  color: #4a1410;
  margin-bottom: 6px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
}

.cartao-auth input[type="email"],
.cartao-auth input[type="password"],
.cartao-auth input[type="text"],
.cartao-auth select {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #d4b96a;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.5);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 17px;
  color: #3a1a10;
  margin-bottom: 20px;
}

.cartao-auth input:focus,
.cartao-auth select:focus {
  outline: none;
  border-color: #7a5b1e;
  box-shadow: 0 0 0 3px rgba(122, 91, 30, 0.15);
}

.cartao-auth .linha-consentimento {
  align-items: flex-start;
}

.cartao-auth .linha-consentimento input[type="checkbox"] {
  accent-color: #7a5b1e;
}

.cartao-auth .linha-consentimento span {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 14px;
  color: #6b4a30;
}

.cartao-auth .campo-senha-com-olho input {
  margin-bottom: 0;
  padding-right: 44px;
}

.cartao-auth .campo-senha-com-olho {
  margin-bottom: 20px;
}

.cartao-auth .botao-olho-senha {
  margin-top: 0;
  width: 28px;
  height: 28px;
  font-size: 18px;
  color: #7a5b1e;
  opacity: 0.75;
}

.cartao-auth .botao-olho-senha:hover {
  opacity: 1;
}

.cartao-auth .mensagem {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  border-radius: 0;
  margin-bottom: 20px;
}

.cartao-auth button.primario {
  width: 100%;
  padding: 14px;
  background: #4a1410;
  color: #e8d9a8;
  border: 1px solid #d4b96a;
  border-radius: 0;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  margin-bottom: 0;
}

.cartao-auth button.primario:hover {
  background: #2c0b08;
}

.cartao-auth button.secundario,
.cartao-auth a.secundario,
.cartao-auth a {
  color: #7a5b1e;
  text-decoration: underline;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 15px;
  background: none;
  border: none;
  cursor: pointer;
}

.cartao-auth code {
  color: #4a1410;
}

.linha-opcoes-auth {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin: -4px 0 22px;
}

.cartao-auth label.linha-lembrar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: #4a1410;
  cursor: pointer;
  font-size: 15px;
  margin-bottom: 0;
  text-transform: none;
}

.interruptor-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.interruptor-visual {
  width: 34px;
  height: 18px;
  border-radius: 9px;
  background: #cbb98a;
  position: relative;
  flex-shrink: 0;
  transition: background 0.15s;
}

.interruptor-visual::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: white;
  top: 2px;
  left: 2px;
  transition: left 0.15s;
}

.interruptor-input:checked + .interruptor-visual {
  background: #7a5b1e;
}

.interruptor-input:checked + .interruptor-visual::after {
  left: 18px;
}

.linha-opcoes-auth a {
  font-size: 14px;
}

/* Placeholder com 6 bolinhas (●●●●●●) no campo de código, versão vinho/dourado. */
.cartao-auth input.codigo::placeholder {
  color: #7a5b1e;
  opacity: 0.5;
}

/* esconde o pano de fundo do tema claro (foto/orbes) enquanto uma tela de
   autenticação estiver ativa, pra não aparecer atrás/vazando nas bordas */
body.modo-autenticacao .foto,
body.modo-autenticacao .veu-foto,
body.modo-autenticacao .orbe {
  display: none;
}

/* Caixinha discreta no canto da tela de login/código/recuperar (Fale conosco + engrenagem
   do admin) — some assim que a pessoa entra no painel (não faz sentido lá dentro). */
.caixa-discreta-canto {
  position: fixed;
  bottom: 14px;
  right: 16px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 14px;
}

.link-fale-conosco {
  color: rgba(212, 185, 106, 0.45);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 14px;
  text-decoration: underline;
  transition: color 0.2s;
}

.link-fale-conosco:hover {
  color: rgba(212, 185, 106, 0.9);
}

.link-discreto-admin {
  color: rgba(212, 185, 106, 0.35);
  font-size: 18px;
  text-decoration: none;
  transition: color 0.2s;
}

.link-discreto-admin:hover {
  color: rgba(212, 185, 106, 0.9);
}

body:not(.modo-autenticacao) .caixa-discreta-canto {
  display: none;
}

@media (max-width: 820px) {
  .tela-autenticacao .lado-marca-auth {
    align-items: flex-end;
    padding: 30px 24px 4px;
    min-height: auto;
  }
  .tela-autenticacao .lado-formulario-auth {
    align-items: flex-start;
    padding-top: 12px;
  }
  .tela-autenticacao .lado-marca-auth img {
    width: min(88%, 340px);
  }
  .cartao-auth {
    padding: 32px 24px;
  }
}