/* ---------------------------------------------------------------------------
   Telas de entrada e de criacao de conta da LUPA (login.html, cadastro.html).

   Arquivo separado de proposito: `style.css` e' compartilhado com as 15
   telas do produto; estas duas sao as unicas com layout de duas colunas.

   A vitrine da esquerda mostra o PRODUTO, nao uma frase de propaganda. Os
   dados do mock sao genericos de proposito (numero de processo mascarado,
   sem nome de parte), para nunca parecer dado real de cliente numa captura.

   Usa os tokens de style.css (--cor-primaria etc.), entao acompanha o tema.
--------------------------------------------------------------------------- */

body.auth-page {
  display: block;
  padding: 0;
  background: var(--cor-fundo);
}

main.auth-split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  min-height: 100vh;
  min-height: 100dvh;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* -------------------------------------------------------------- vitrine */

.auth-vitrine {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 48px 56px;
  background:
    radial-gradient(100% 80% at 100% 0%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 55%),
    linear-gradient(160deg, #0e6f7a 0%, #073f47 100%);
  color: #fff;
}

.auth-vitrine__conteudo {
  width: 100%;
  max-width: 430px;
}

.auth-vitrine__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1;
}

.auth-vitrine__logo::before {
  content: "";
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e6f7a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='10.5' cy='10.5' r='6'/><path d='M15 15l5 5'/></svg>") center / 66% no-repeat;
}

.auth-vitrine__tag {
  margin: 0 0 30px;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  max-width: 24ch;
}

.auth-vitrine__rodape {
  margin: 26px 0 0;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.72);
}

/* ------------------------------------------------- amostra do produto */

.mock {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  padding: 14px;
  backdrop-filter: blur(2px);
}

.mock__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 0 2px;
}

.mock__titulo {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}

.mock__selo {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #073f47;
}

.mock__item {
  background: #fff;
  border-radius: 8px;
  padding: 11px 13px;
  margin-bottom: 9px;
  box-shadow: 0 1px 3px rgba(7, 63, 71, 0.2);
  color: #16212b;
}

.mock__item:last-child { margin-bottom: 0; }

/* o terceiro item some no gradiente: sugere que a lista continua */
.mock__item--fade { opacity: 0.55; }

.mock__linha1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.mock__tribunal {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #0e6f7a;
}

.mock__prazo {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: #edf0f3;
  color: #5b6672;
}

.mock__prazo--urgente {
  background: #fdecea;
  color: #b3261e;
}

.mock__texto {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: #16212b;
}

.mock__proc {
  margin: 5px 0 0;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: #5b6672;
}

/* ------------------------------------------------------------ formulario */

.auth-form {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 48px 56px;
  background: var(--cor-cartao);
}

/* o .auth-card do style.css da borda, sombra e raio; aqui vira so coluna */
.auth-card {
  max-width: 380px;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
}

.auth-card__logo-mobile {
  display: none;
  margin: 0 0 22px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--cor-primaria);
}

.auth-card h1 {
  margin: 0 0 6px;
  font-size: 25px;
  line-height: 1.25;
}

.auth-card .subtitulo {
  margin: 0 0 26px;
  font-size: 14px;
  color: var(--cor-texto-suave);
}

.auth-card form div.campo,
.campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.auth-card label {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cor-texto-suave2);
}

.auth-card input {
  padding: 11px 14px;
  font-size: 15px;
}

/* vazia, a linha de erro ainda reservava altura e abria um vao entre a
   senha e o botao; volta sozinha quando o JS escreve a mensagem */
.auth-card .mensagem-erro:empty { display: none; }
.auth-card .mensagem-erro a { color: inherit; font-weight: 700; text-decoration: underline; }

/* "o que acontece depois" -- so no cadastro, login.html nao usa esta classe */
.depois-passos {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 24px;
  padding: 14px 16px;
  list-style: none;
  border-radius: var(--raio-sm);
  background: var(--cor-cartao-2);
  border: 1px solid var(--cor-borda-suave);
}

.depois-passos li { display: flex; gap: 12px; align-items: flex-start; }

.depois-passos__num {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  border-radius: 50%;
  background: var(--cor-primaria-tinta-2);
  color: var(--cor-primaria-forte);
}

.depois-passos__titulo { margin: 0; font-size: 13px; font-weight: 600; color: var(--cor-texto); }
.depois-passos__texto { margin: 2px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--cor-texto-suave); }

/* medidor de forca de senha */
.forca-senha { margin-top: 8px; }
.forca-senha__barra {
  height: 4px;
  border-radius: 2px;
  background: var(--cor-borda-suave);
  overflow: hidden;
}
.forca-senha__barra span {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 2px;
  transition: width .15s ease, background-color .15s ease;
}
.forca-senha__rotulo { margin: 4px 0 0; font-size: 11.5px; color: var(--cor-texto-suave); }

.btn-principal {
  margin-top: 6px;
  padding: 12px;
  width: 100%;
  font-size: 15px;
  font-weight: 600;
  border: none;
  border-radius: var(--raio-sm);
  background: var(--cor-primaria);
  color: var(--cor-primaria-texto);
  cursor: pointer;
  transition: filter 0.12s ease, transform .05s ease;
}

.btn-principal:hover { filter: brightness(1.07); }
.btn-principal:active { transform: translateY(1px); }
.btn-principal:disabled { opacity: .55; cursor: default; filter: none; }

.auth-card .link-secundario { margin-top: 20px; }
.auth-card .link-secundario strong { color: var(--cor-primaria); }

/* ------------------------------------------------------------- responsivo */

@media (max-width: 900px) {
  main.auth-split { grid-template-columns: 1fr; }

  /* no celular quem abre quer entrar, nao ver a vitrine */
  .auth-vitrine { display: none; }

  .auth-card__logo-mobile { display: block; }

  .auth-form {
    justify-content: center;
    padding: 40px 24px;
    min-height: 100vh;
    min-height: 100dvh;
  }

  .auth-card { width: 100%; max-width: 420px; }
}

/* Tema escuro (FILA 275, 05/10/2026): a ilustracao da lista de publicacoes
   mostrava cartoes brancos acesos no preto. No escuro ela imita a propria
   LUPA escura; no claro nada muda. */
[data-tema="escuro"] .mock__item { background: var(--cor-cartao); color: var(--cor-texto); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05); }
[data-tema="escuro"] .mock__selo { background: rgba(0, 0, 0, 0.45); color: #f5f5f7; }
[data-tema="escuro"] .mock__tribunal { color: var(--cor-primaria); }
[data-tema="escuro"] .mock__prazo { background: var(--cor-neutro-fundo); color: var(--cor-neutro-texto); }
[data-tema="escuro"] .mock__prazo--urgente { background: var(--cor-erro-fundo); color: var(--cor-erro-texto); }
[data-tema="escuro"] .mock__texto { color: var(--cor-texto); }
[data-tema="escuro"] .mock__proc { color: var(--cor-texto-fraco); }