/* Tela de entrada — Grupo Alvorada
 *
 * Vermelho #CF0C0C extraído do pixel dominante da própria logo. Branco sobre
 * ele dá 5,66:1 de contraste (mínimo WCAG para texto normal: 4,5:1).
 *
 * Fundo da marca: a casa da logo em escala de fachada, vermelho sobre vermelho,
 * mais uma granulação fina — no lugar da malha quadriculada e do brilho radial,
 * que são os recursos mais repetidos em telas geradas automaticamente.
 *
 * Sem fonte externa: a tela usa a fonte do sistema (Segoe UI no Windows, San
 * Francisco no iPhone, Roboto no Android). Carregar do Google Fonts entregaria
 * o IP de cada pessoa que abre o painel a um terceiro.
 */

:root {
  --vermelho: #CF0C0C;
  --vermelho-hover: #B80A0A;
  --vermelho-escuro: #9E0808;

  --branco: #FFFFFF;
  --cinza-campo: #F4F4F5;
  --cinza-campo-hover: #EEEEF0;
  --borda: #E6E6E9;

  --txt: #18181B;
  --txt-2: #57575F;
  --txt-3: #8B8B94;

  --erro: #BF0A2B;
  --raio: 12px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--txt);
  background: var(--branco);
  -webkit-font-smoothing: antialiased;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.tela {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 100vh;
  min-height: 100dvh;
}

.icone {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* ===================== LADO DA MARCA ===================== */

.marca {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--branco);
  background: linear-gradient(180deg, var(--vermelho) 0%, var(--vermelho-escuro) 100%);
  /* Logo no alto à esquerda, frase alinhada à esquerda pela mesma margem. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 52px 56px;
}

.marca::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.16;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

.marca-casa {
  position: absolute;
  z-index: -1;
  right: -14%;
  bottom: -16%;
  width: 82%;
  max-width: 640px;
  fill: none;
  stroke: rgba(0, 0, 0, 0.13);
  stroke-width: 15;
  stroke-linecap: square;
  stroke-linejoin: miter;
  pointer-events: none;
}

/* A logo pousa direto sobre o vermelho: só os traços brancos, sem a caixa. */
.logo {
  display: block;
  width: 112px;
  height: auto;
}

/* A frase fica na altura em que estava quando ainda tinha o parágrafo e os
   três itens embaixo dela: acima do meio do painel. As margens automáticas
   centralizam o bloco; o respiro inferior compensa o texto que saiu e sobe a
   frase de volta ao lugar original. Com clamp, em telas baixas o respiro
   encolhe em vez de espremer a frase contra a logo. */
.marca-texto {
  max-width: 30rem;
  margin-top: auto;
  margin-bottom: auto;
  padding-bottom: clamp(60px, 32vh, 340px);
}

.marca h1 {
  font-size: clamp(2rem, 3.3vw, 2.85rem);
  line-height: 1.1;
  letter-spacing: -0.032em;
  font-weight: 700;
  margin: 0;
}
.marca h1 em {
  font-style: normal;
  display: block;
  font-weight: 500;
  color: rgba(255,255,255,0.72);
}

/* ===================== LADO DO FORMULÁRIO ===================== */

.area-form {
  display: grid;
  place-items: center;
  padding: 44px 36px;
  background: var(--branco);
}

.form-caixa { width: 100%; max-width: 372px; }

.form-caixa h2 {
  font-size: 1.62rem;
  letter-spacing: -0.03em;
  margin: 0 0 6px;
  font-weight: 700;
}
.sub {
  color: var(--txt-2);
  font-size: 0.93rem;
  margin: 0 0 28px;
}

/* Botão do Google no padrão de identidade deles: fundo branco, borda neutra e
   o "G" colorido. Fugir disso faz o botão parecer imitação — e botão de login
   com cara de imitação é justamente o que ensinamos as pessoas a desconfiar. */
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 13px 18px;
  font-size: 0.97rem;
  font-weight: 600;
  color: var(--txt);
  text-decoration: none;
  background: var(--branco);
  border: 1.5px solid var(--borda);
  border-radius: var(--raio);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.btn-google:hover {
  border-color: #D4D4D8;
  background: #FCFCFD;
  box-shadow: 0 8px 22px -12px rgba(0,0,0,0.25);
}
.btn-google:focus-visible { outline: 3px solid rgba(207,12,12,0.35); outline-offset: 2px; }
.g-logo { width: 20px; height: 20px; flex: none; }

.nota-acesso {
  font-size: 0.84rem;
  color: var(--txt-2);
  line-height: 1.55;
  margin: 16px 0 0;
}

.campo { margin-bottom: 17px; }
.campo label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--txt-2);
  margin-bottom: 7px;
}

.entrada { position: relative; display: flex; align-items: center; }

.entrada .ico {
  position: absolute;
  left: 14px;
  color: var(--txt-3);
  pointer-events: none;
  transition: color 0.16s ease;
}

.entrada input {
  width: 100%;
  padding: 13px 46px 13px 43px;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--txt);
  background: var(--cinza-campo);
  border: 1.5px solid transparent;
  border-radius: var(--raio);
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}
.entrada input::placeholder { color: var(--txt-3); }
.entrada input:hover { background: var(--cinza-campo-hover); }
.entrada input:focus {
  outline: none;
  background: var(--branco);
  border-color: var(--vermelho);
  box-shadow: 0 0 0 4px rgba(207, 12, 12, 0.1);
}
.entrada:focus-within .ico { color: var(--vermelho); }

.ver-senha {
  position: absolute;
  right: 7px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: none;
  border: 0;
  border-radius: 8px;
  color: var(--txt-3);
  cursor: pointer;
}
.ver-senha:hover { color: var(--txt); background: rgba(0,0,0,0.05); }
.ver-senha:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 1px; }

.btn-entrar {
  width: 100%;
  margin-top: 10px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 0.97rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--branco);
  background: var(--vermelho);
  border: 0;
  border-radius: var(--raio);
  cursor: pointer;
  transition: background 0.16s ease, box-shadow 0.16s ease;
}
.btn-entrar .icone { transition: transform 0.18s ease; }
.btn-entrar:hover {
  background: var(--vermelho-hover);
  box-shadow: 0 10px 24px -10px rgba(207, 12, 12, 0.55);
}
.btn-entrar:hover .icone { transform: translateX(3px); }
.btn-entrar:active { transform: translateY(1px); }
.btn-entrar:focus-visible { outline: 3px solid rgba(207,12,12,0.35); outline-offset: 2px; }

.aviso {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-radius: var(--raio);
  padding: 12px 14px;
  font-size: 0.87rem;
  line-height: 1.45;
  margin-bottom: 22px;
}
.aviso .icone { margin-top: 1px; }
.aviso-erro { background: #FDF2F4; border: 1px solid #F4CDD4; color: var(--erro); }
.aviso-info { background: #F6F6F7; border: 1px solid var(--borda); color: var(--txt-2); }

.rodape-form {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--borda);
  font-size: 0.79rem;
  color: var(--txt-3);
  line-height: 1.6;
}

/* ===================== CELULAR ===================== */

@media (max-width: 900px) {
  .tela { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }

  /* A marca vira um cabeçalho compacto: quem abre pelo telefone quer entrar,
     não rolar até achar o botão. */
  .marca {
    padding: 28px 24px 30px;
    padding-top: max(28px, env(safe-area-inset-top));
    align-items: center;
    justify-content: center;
  }
  .marca-texto { display: none; }
  .logo { width: 92px; }
  .marca-casa { width: 70%; right: -18%; bottom: -46%; stroke-width: 16; }

  .area-form {
    padding: 32px 22px;
    padding-bottom: max(32px, env(safe-area-inset-bottom));
    align-items: start;
  }
  .form-caixa h2 { font-size: 1.45rem; }

  /* Abaixo de 16px o iPhone dá zoom ao focar o campo e desalinha a tela. */
  .entrada input { font-size: 16px; }
  .btn-google, .btn-entrar { padding: 15px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ===================== BOTÃO DO GOOGLE ===================== */

/* O botão é desenhado pelo próprio Google dentro deste bloco. Só reservamos a
   altura: sem isso a tela "pula" quando ele termina de carregar. */
.area-google { min-height: 44px; }
.area-google.carregando { opacity: 0.55; pointer-events: none; }

/* O iframe do botão vem com largura fixa; aqui ele acompanha a coluna. */
.area-google > div { max-width: 100%; }
.area-google iframe { margin: 0 !important; }

#aviso-dinamico { margin-top: 18px; margin-bottom: 0; }

/* ===================== FORÇA DA SENHA ===================== */

.forca { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.forca-barra {
  flex: 1; height: 5px; border-radius: 3px; background: var(--cinza-campo); overflow: hidden;
}
.forca-barra span { display: block; height: 100%; width: 0; border-radius: 3px; transition: width .2s ease, background .2s ease; }
.forca-barra .nivel-1 { background: #CF0C0C; }
.forca-barra .nivel-2 { background: #F29F05; }
.forca-barra .nivel-3 { background: #1E9E3C; }
.forca-barra .nivel-4 { background: #09A603; }
#forca-texto { font-size: 0.76rem; color: var(--txt-2); white-space: nowrap; }

/* Código do segundo fator: dígitos espaçados, para conferir ao digitar. */
.campo-codigo {
  letter-spacing: 0.42em; font-size: 1.12rem !important; text-align: center;
  font-variant-numeric: tabular-nums;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 42px; padding: 0 16px; border-radius: var(--raio); cursor: pointer;
  font: inherit; font-size: 0.9rem; font-weight: 600; border: 1px solid transparent;
  text-decoration: none;
}
.btn-primario { background: var(--vermelho); color: #fff; }
.btn-primario:hover { background: var(--vermelho-hover); }
.btn-secundario { background: var(--cinza-campo); color: var(--txt); border-color: var(--borda); }