/* ==========================================================================
   Entrada e recuperação de acesso — Painel de Mídia ALED

   Regra deste arquivo: NENHUMA cor, medida de raio, fonte ou curva escrita à
   mão. Tudo sai dos tokens do estilo.css. O design do painel vai mudar; quando
   mudar, esta tela acompanha sozinha em vez de virar dívida.

   Duas divergências conscientes do estilo.css, ambas por acessibilidade:
     1. anel de foco próprio (--ent-anel). O global usa --ciano, que no tema
        claro mede 2,18:1 contra branco — abaixo dos 3:1 do WCAG 1.4.11. O
        próprio arquivo já registra esse número na linha 39, para o --ciano-escuro.
     2. alturas próprias de botão. O .btn tem 34px, bom para barra de filtros e
        pequeno para a ação principal de uma tela de entrada.
   ========================================================================== */

:root {
  --ent-anel: var(--petroleo-700);        /* ~12:1 sobre branco */
  --ent-elev: 0 1px 2px rgba(3, 32, 45, .06), 0 8px 24px rgba(3, 32, 45, .07);
  --ent-elev-alta: 0 1px 2px rgba(3, 32, 45, .08), 0 12px 30px rgba(3, 32, 45, .12);
  --ent-cta-bg: var(--aco-500);
  --ent-cta-ink: #fff;
}

:root[data-theme="dark"] {
  --ent-anel: var(--ciano);               /* 6,15:1 sobre petróleo */
  --ent-elev: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .30);
  --ent-elev-alta: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 30px rgba(0, 0, 0, .42);
  --ent-cta-bg: var(--gelo-100);
  --ent-cta-ink: var(--petroleo-900);
}

/* ------------------------------ estrutura ------------------------------ */

.ent-corpo {
  display: grid;
  place-items: center;
  min-height: 100dvh;                     /* dvh: barra do navegador móvel não corta */
  padding: 24px 20px;
  background: var(--bg);
  color: var(--text);
}

.ent { width: 100%; max-width: 404px; }

.ent-cartao {
  position: relative;
  overflow: hidden;
  padding: 34px 30px 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--ent-elev);
}

/* O gradiente da luz é a assinatura da marca. Fica AQUI, num filete, e não num
   botão: no botão ele competiria com o "G" colorido do Google e a tela teria
   dois elementos gritando. */
.ent-cartao::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--grad-luz);
}

/* Logotipo SYSLED. Duas variantes no HTML, uma visivel por tema: a principal
   tem o texto em #1A1A2E, que sumiria sobre o petroleo do tema escuro. Troca
   por display, e nao por filtro CSS, para a nuvem manter o gradiente proprio
   da marca em vez de virar uma silhueta. */
.ent-logo { display: block; height: 40px; width: auto; margin-bottom: 24px; }
.ent-logo--escuro { display: none; }

:root[data-theme="dark"] .ent-logo--claro  { display: none; }
:root[data-theme="dark"] .ent-logo--escuro { display: block; }

.ent-titulo {
  margin: 0 0 6px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.ent-sub {
  margin: 0 0 22px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-soft);
}

.ent-fino { margin: 14px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--text-mute); }

.ent-rodape {
  margin: 18px 0 0;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-mute);
}

/* Só para leitor de tela. */
.ent-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------- avisos -------------------------------- */

.ent-aviso {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-bottom: 18px;
  padding: 11px 13px;
  border: 1px solid color-mix(in oklab, var(--ruim) 38%, transparent);
  border-radius: var(--r-sm);
  background: color-mix(in oklab, var(--ruim) 8%, var(--surface));
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text);
}

/* Estado nunca só por cor: tem ícone e título. */
.ent-aviso-ico { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--ruim); }
.ent-aviso strong { font-weight: 600; }

.ent-aviso[data-tipo="ok"] {
  border-color: color-mix(in oklab, var(--bom) 38%, transparent);
  background: color-mix(in oklab, var(--bom) 8%, var(--surface));
}
.ent-aviso[data-tipo="ok"] .ent-aviso-ico { color: var(--bom); }

/* --------------------------- botão do Google --------------------------- */

.ent-google {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 100%;
  height: 52px;                            /* dominante por tamanho, não por cor */
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--ent-elev);
  cursor: pointer;
  transition: box-shadow var(--t) var(--ease), border-color var(--t) var(--ease),
              transform var(--t-rapido) var(--ease);
}

.ent-google:hover { box-shadow: var(--ent-elev-alta); border-color: var(--ardosia-300); transform: translateY(-1px); }
.ent-google:active { box-shadow: var(--ent-elev); transform: translateY(0) scale(.995); }
.ent-google[aria-busy="true"] { pointer-events: none; color: var(--text-soft); }

.ent-g { flex: none; width: 19px; height: 19px; }

/* Barra de carregamento: varre da esquerda para a direita enquanto redireciona. */
.ent-barra {
  position: absolute;
  left: 0; bottom: 0;
  height: 3px; width: 100%;
  background: var(--grad-luz);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
}
.ent-google[aria-busy="true"] .ent-barra { opacity: 1; animation: ent-varre 1.1s var(--ease) infinite; }

@keyframes ent-varre {
  0%   { transform: scaleX(0);   transform-origin: left; }
  50%  { transform: scaleX(1);   transform-origin: left; }
  51%  { transform: scaleX(1);   transform-origin: right; }
  100% { transform: scaleX(0);   transform-origin: right; }
}

.ent-so-google {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-soft);
}

/* -------------------------------- ou ----------------------------------- */

.ent-ou {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 22px 0 18px;
  color: var(--text-mute);
  font-size: 11.5px;
}
.ent-ou::before, .ent-ou::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ------------------------------ formulário ------------------------------ */

.ent-form { display: flex; flex-direction: column; gap: 15px; }

.ent-campo > label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft);
}

.ent-caixa {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  transition: border-color var(--t-rapido) var(--ease),
              background var(--t-rapido) var(--ease);
}
.ent-caixa:hover { border-color: var(--ardosia-300); }
.ent-caixa:focus-within { border-color: var(--ent-anel); background: var(--surface); }

.ent-ico { flex: none; width: 16px; height: 16px; color: var(--text-mute); }
.ent-caixa:focus-within .ent-ico { color: var(--text-soft); }

.ent-caixa input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
}
/* Placeholder com --text-soft, não com o cinza do navegador: sobre --surface-2
   no tema claro isso dá ~6,8:1, com folga sobre os 4,5:1 exigidos. */
.ent-caixa input::placeholder { color: var(--text-soft); opacity: 1; }

.ent-campo[data-estado="erro"] .ent-caixa {
  border-color: var(--ruim);
  background: color-mix(in oklab, var(--ruim) 7%, var(--surface));
}
.ent-campo[data-estado="erro"] .ent-ico { color: var(--ruim); }

.ent-msg { margin: 6px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--ruim); }
.ent-msg:empty { display: none; }

.ent-olho {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px; height: 32px;               /* alvo de toque acima do mínimo */
  margin-right: -6px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-mute);
  cursor: pointer;
  transition: color var(--t-rapido) var(--ease), background var(--t-rapido) var(--ease);
}
.ent-olho:hover { color: var(--text); background: var(--bg); }
.ent-olho svg { width: 17px; height: 17px; }

/* ------------------------------ lembrar -------------------------------- */

.ent-lembrar {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: var(--text-soft);
  cursor: pointer;
}
.ent-lembrar input { position: absolute; opacity: 0; width: 0; height: 0; }

.ent-lembrar .ent-marca {
  display: grid;
  place-items: center;
  width: 17px; height: 17px;
  flex: none;
  border: 1.5px solid var(--dado-fraco);
  border-radius: 5px;
  background: var(--surface);
  transition: border-color var(--t-rapido) var(--ease),
              background var(--t-rapido) var(--ease);
}
.ent-lembrar input:checked + .ent-marca {
  border-color: transparent;
  background: var(--grad-luz);
}
.ent-lembrar input:checked + .ent-marca::after {
  content: "";
  width: 8px; height: 4px;
  border-left: 1.8px solid var(--ink-on-grad);
  border-bottom: 1.8px solid var(--ink-on-grad);
  transform: rotate(-45deg) translate(1px, -1px);
}
.ent-lembrar input:focus-visible + .ent-marca {
  outline: 2px solid var(--ent-anel);
  outline-offset: 2px;
}

/* ---------------------------- botão principal --------------------------- */

.ent-enviar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 46px;
  margin-top: 3px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: var(--ent-cta-bg);
  color: var(--ent-cta-ink);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: filter var(--t-rapido) var(--ease), transform var(--t-rapido) var(--ease),
              opacity var(--t-rapido) var(--ease);
}
.ent-enviar:hover { filter: brightness(1.08); }
.ent-enviar:active { transform: scale(.99); }
.ent-enviar:disabled { opacity: .55; cursor: progress; filter: none; transform: none; }

/* O gradiente volta a ser a ação primária SÓ onde não há Google competindo. */
.ent-enviar--luz { background: var(--grad-luz); color: var(--ink-on-grad); }
.ent-enviar--luz:hover { filter: brightness(1.05); }

.ent-giro { width: 16px; height: 16px; animation: ent-gira .9s linear infinite; }
@keyframes ent-gira { to { transform: rotate(360deg); } }

.ent-pe { margin: 4px 0 0; text-align: center; font-size: 12.5px; }
.ent-pe a { color: var(--text-soft); text-decoration: none; border-bottom: 1px solid var(--line); }
.ent-pe a:hover { color: var(--text); border-bottom-color: var(--ardosia-300); }

/* --------------------------- recuperar acesso --------------------------- */

.ent-selo {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--turquesa) 16%, var(--surface));
  color: var(--aco-500);
}
:root[data-theme="dark"] .ent-selo { color: var(--turquesa); }
.ent-selo svg { width: 20px; height: 20px; }

.ent-reqs { list-style: none; margin: -4px 0 0; padding: 0; display: grid; gap: 7px; }
.ent-reqs li {
  display: grid;
  grid-template-columns: 15px 1fr;
  gap: 8px;
  align-items: center;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-mute);
}
.ent-req-ico {
  display: grid;
  place-items: center;
  width: 15px; height: 15px;
  border: 1.5px solid var(--dado-fraco);
  border-radius: 50%;
  transition: border-color var(--t-rapido) var(--ease),
              background var(--t-rapido) var(--ease);
}
.ent-reqs li[data-ok="1"] { color: var(--text-soft); }
.ent-reqs li[data-ok="1"] .ent-req-ico { border-color: var(--bom); background: var(--bom); }
.ent-reqs li[data-ok="1"] .ent-req-ico::after {
  content: "";
  width: 6px; height: 3px;
  border-left: 1.6px solid var(--surface);
  border-bottom: 1.6px solid var(--surface);
  transform: rotate(-45deg) translate(.5px, -.5px);
}

/* ------------------------------- foco ---------------------------------- */

/* Sobrepõe o :focus-visible global do estilo.css. Dois motivos: o --ciano
   reprova no contraste do tema claro, e a regra global também redefine
   border-radius, o que faz um botão redondo virar quadrado enquanto focado. */
.ent-corpo :focus-visible {
  outline: 2px solid var(--ent-anel);
  outline-offset: 2px;
  border-radius: inherit;
}

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

@media (max-width: 460px) {
  .ent-corpo { padding: 0; place-items: stretch; }
  .ent { max-width: none; }
  .ent-cartao {
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 30px 22px 26px;
  }
  .ent-rodape { padding: 0 22px 22px; }
}

/* --------------------------- movimento reduzido ------------------------- */

/* O bloco global do estilo.css zera a DURAÇÃO das animações — e animação com
   duração zero congela no primeiro quadro em vez de sumir. A barra do Google
   ficaria invisível e o giro ficaria parado, dando sinal errado. Aqui cada peça
   que dependia de movimento ganha forma estática que ainda comunica o estado,
   e o texto passa a ser o sinal primário. */
@media (prefers-reduced-motion: reduce) {
  .ent-google[aria-busy="true"] .ent-barra {
    animation: none;
    opacity: 1;
    transform: scaleX(1);
  }
  .ent-giro { display: none; }
  .ent-google:hover, .ent-google:active,
  .ent-enviar:active { transform: none; }
}

/* --------------------------- contraste forçado -------------------------- */

@media (forced-colors: active) {
  .ent-google, .ent-enviar, .ent-caixa { border: 1px solid ButtonBorder; }
  .ent-barra, .ent-cartao::before { forced-color-adjust: none; }
}