/* Tela de acesso do painel — mesmo padrão da tela do SGI Sentinela:
   vigília escura com a marca do PRODUTO à esquerda e formulário claro com a
   marca do CLIENTE à direita. Composição fixa: define as próprias cores e não
   muda com o tema claro/escuro do sistema. A cor do cliente entra por
   --primary (formulário) e --brand-on-dark (variante legível no escuro). */
.auth {
  --auth-bg: #0B0E14; --auth-panel: #11151E; --auth-linha: rgba(255,255,255,.08);
  --auth-txt: #E8EBF0; --auth-mudo: #7C8698;
  --primary: #0B57C2; --on-primary: #fff; --brand-on-dark: #2F86FF;
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: var(--auth-bg);
  background-image:
    radial-gradient(900px 600px at 12% 8%, color-mix(in srgb, var(--brand-on-dark) 12%, transparent), transparent 70%),
    radial-gradient(700px 500px at 88% 92%, color-mix(in srgb, var(--brand-on-dark) 7%, transparent), transparent 70%);
  color: var(--auth-txt);
}
.auth .auth-card {
  width: min(1080px, 100%); display: grid; grid-template-columns: 1.05fr 1fr;
  border: 1px solid var(--auth-linha); border-radius: 20px; overflow: hidden;
  background: var(--auth-panel); box-shadow: 0 40px 120px rgba(0,0,0,.55);
  animation: authEntra .5s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes authEntra { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }

/* ── vigília ─────────────────────────────────────────────────────────── */
.auth .auth-vigil {
  position: relative; padding: 40px; display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; gap: 30px; min-height: 560px; background: #080A10; overflow: hidden; isolation: isolate;
}
.auth .auth-vigil::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background-image: linear-gradient(var(--auth-linha) 1px, transparent 1px), linear-gradient(90deg, var(--auth-linha) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(120% 90% at 30% 20%, #000 30%, transparent 75%);
}
.auth .auth-vigil::after {
  content: ''; position: absolute; z-index: -1; width: 190%; aspect-ratio: 1; left: -45%; bottom: -60%;
  background: conic-gradient(from 0deg,
    color-mix(in srgb, var(--brand-on-dark) 30%, transparent) 0deg,
    color-mix(in srgb, var(--brand-on-dark) 14%, transparent) 14deg,
    color-mix(in srgb, var(--brand-on-dark) 4%, transparent) 34deg, transparent 58deg, transparent 360deg);
  border-radius: 50%;
  mask-image: radial-gradient(closest-side, #000 25%, rgba(0,0,0,.55) 60%, transparent 82%);
  animation: authVarre 18s linear infinite; opacity: .8;
}
@keyframes authVarre { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) { .auth .auth-vigil::after { animation: none; opacity: .35 } .auth .auth-card { animation: none } }
.auth .auth-marca { line-height: 0; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.auth .auth-marca img { display: block; max-height: 120px; max-width: 340px; width: auto; filter: drop-shadow(0 6px 20px rgba(0,0,0,.55)); }
/* ── Selo do produto: carimbo de tempo ───────────────────────────────────
   Etiqueta no dourado do logo, palavra grande no prateado do "SENTINELA" e
   uma régua de 24 h com o ponto verde aceso na hora atual (--agora, 0 a 1).
   Cores tiradas da própria marca: dourado #C4A156, verde #00A868. */
.auth .auth-lockup {
  --lk-ouro: #C4A156; --lk-verde: #00A868; --lk-verde-luz: #3BE09A; --lk-prata: #E9ECF1;
  display: grid; justify-items: center; gap: 2px; line-height: 1; margin-top: 2px;
}
.auth .lk-acima {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 600; font-size: 12px;
  letter-spacing: .62em; padding-left: .62em; /* compensa o espaçamento da última letra */
  text-transform: uppercase; color: var(--lk-ouro);
  animation: lkSurge .5s .1s cubic-bezier(.2,.7,.2,1) both;
}
.auth .lk-acima::before, .auth .lk-acima::after { content: ''; width: 26px; height: 1px; background: linear-gradient(90deg, transparent, var(--lk-ouro)); }
.auth .lk-acima::after { transform: scaleX(-1); margin-left: -.62em; }
.auth .lk-palavra {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 800;
  font-variation-settings: 'opsz' 96; font-size: clamp(50px, 5.2vw, 68px);
  letter-spacing: -.045em; line-height: .92; padding: 0 .04em .06em;
  text-transform: uppercase;
  background: linear-gradient(176deg, #FFFFFF 8%, var(--lk-prata) 46%, #A9B1BF 78%, #7D8697 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,.7)) drop-shadow(0 0 1px rgba(255,255,255,.15));
  animation: lkSobe .65s .2s cubic-bezier(.2,.7,.2,1) both;
}
.auth .lk-regua {
  position: relative; display: block; width: 260px; max-width: 80vw; height: 16px; margin-top: 10px;
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--lk-verde) 70%, transparent) 30%, color-mix(in srgb, var(--lk-ouro) 70%, transparent) 70%, transparent) bottom / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, rgba(233,236,241,.75) 0 1px, transparent 1px calc(100% / 4)) bottom left / calc(100% + 1px) 11px no-repeat,
    repeating-linear-gradient(90deg, rgba(233,236,241,.38) 0 1px, transparent 1px calc(100% / 24)) bottom left / calc(100% + 1px) 6px no-repeat;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  transform-origin: center; animation: lkRegua .8s .4s cubic-bezier(.2,.7,.2,1) both;
}
.auth .lk-ponto {
  position: absolute; left: calc(var(--agora, .5) * 100%); bottom: -3.5px; width: 8px; height: 8px; margin-left: -4px;
  border-radius: 50%; background: var(--lk-verde-luz);
  box-shadow: 0 0 0 2px #080A10, 0 0 10px var(--lk-verde-luz), 0 0 22px color-mix(in srgb, var(--lk-verde) 80%, transparent);
  animation: lkAcende .35s 1.05s cubic-bezier(.2,.7,.2,1.4) both;
}
.auth .lk-ponto::after { /* pulso, como uma batida registrada */
  content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 1px solid var(--lk-verde-luz);
  animation: lkPulso 2.4s 1.4s ease-out infinite;
}
@keyframes lkSurge { from { opacity: 0; letter-spacing: .9em } to { opacity: 1 } }
@keyframes lkSobe { from { opacity: 0; transform: translateY(10px) scale(.98) } to { opacity: 1; transform: none } }
@keyframes lkRegua { from { opacity: 0; transform: scaleX(0) } to { opacity: 1; transform: none } }
@keyframes lkAcende { from { opacity: 0; transform: scale(0) } to { opacity: 1; transform: none } }
@keyframes lkPulso { 0% { transform: scale(1); opacity: .9 } 70%, 100% { transform: scale(3.2); opacity: 0 } }
@media (prefers-reduced-motion: reduce) {
  .auth .lk-acima, .auth .lk-palavra, .auth .lk-regua, .auth .lk-ponto { animation: none; }
  .auth .lk-ponto::after { display: none; }
}
.auth .auth-frase {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 700; font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.12; letter-spacing: -.03em; margin: 0; max-width: 17ch;
}
.auth .auth-frase em { font-style: normal; color: var(--brand-on-dark); }
.auth .auth-vigia { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 440px; }
.auth .auth-vigia span {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--auth-mudo); border: 1px solid var(--auth-linha); border-radius: 999px; padding: 5px 10px;
  display: inline-flex; align-items: center; gap: 6px; background: rgba(8,10,16,.6);
}
.auth .auth-vigia span::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--brand-on-dark); box-shadow: 0 0 8px var(--brand-on-dark); }

/* ── formulário ──────────────────────────────────────────────────────── */
.auth .auth-form { padding: 44px 44px 32px; display: flex; flex-direction: column; background: #FBFBFC; color: #14171F; }
.auth .auth-selo { margin: 0 0 10px; display: flex; justify-content: center; min-height: 58px; align-items: center; }
.auth .auth-selo img { display: block; max-height: 64px; max-width: 220px; width: auto; object-fit: contain; }
.auth .auth-selo .fallback { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 800; font-size: 18px; letter-spacing: .12em; text-transform: uppercase; color: #14171F; }
.auth .auth-sub {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: #6B7385; margin: 0 0 26px; text-align: center; padding-bottom: 22px; border-bottom: 1px solid #E9ECF2;
}
.auth .auth-titulo {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 700; font-size: clamp(24px, 2.1vw, 29px);
  line-height: 1.18; letter-spacing: -.025em; margin: 0 0 26px; color: #14171F;
}
.auth .auth-campo { margin-bottom: 16px; }
.auth .auth-campo label { display: block; margin-bottom: 7px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #6B7385; }
.auth .auth-campo input {
  width: 100%; height: auto; padding: 13px 15px; background: #fff; border: 1px solid #D9DDE5; border-radius: 10px;
  color: #14171F; font-size: 15px; transition: border-color .16s ease, box-shadow .16s ease;
}
.auth .auth-campo input::placeholder { color: #A2A9B8; }
.auth .auth-campo input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent); }
.auth .auth-senha { position: relative; display: flex; align-items: center; }
.auth .auth-senha input { padding-right: 48px; }
.auth .auth-senha button {
  position: absolute; right: 6px; width: 36px; height: 36px; display: grid; place-items: center;
  background: none; border: 0; border-radius: 8px; cursor: pointer; color: #6B7385; transition: background-color .16s ease, color .16s ease;
}
.auth .auth-senha button:hover { background: #F1F3F7; color: #14171F; }
.auth .auth-senha button:focus-visible, .auth .auth-entrar:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.auth .auth-entrar {
  width: 100%; margin-top: 8px; padding: 15px 18px; background: var(--primary); color: var(--on-primary);
  border: none; border-radius: 10px; cursor: pointer; font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 700; font-size: 16px; letter-spacing: .01em; transition: filter .16s ease, transform .16s ease;
}
.auth .auth-entrar:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-1px); }
.auth .auth-entrar:disabled { opacity: .6; cursor: default; }
.auth .auth-ajuda { margin-top: 16px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .04em; line-height: 1.6; color: #6B7385; }
.auth .auth-erro { border-radius: 10px; padding: 11px 13px; margin-bottom: 16px; font-size: 13px; line-height: 1.45; background: #FEF2F2; border: 1px solid #FBC5C5; color: #B42318; }
.auth .auth-erro:empty { display: none; }
.auth .auth-rodape {
  margin-top: auto; padding-top: 24px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid #E4E7EE; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: .06em; color: #8A92A3;
}
.auth .auth-form > form { margin-bottom: 8px; }
@media (max-width: 860px) {
  .auth { padding: 0; }
  .auth .auth-card { grid-template-columns: 1fr; border: none; border-radius: 0; min-height: 100vh; }
  .auth .auth-vigil { min-height: 0; padding: 28px 24px; gap: 16px; }
  .auth .auth-vigil .auth-frase, .auth .auth-vigia { display: none; }
  .auth .auth-marca img { max-height: 64px; }
  .auth .auth-marca { gap: 12px; }
  .auth .lk-palavra { font-size: 44px; }
  .auth .lk-acima { font-size: 11px; }
  .auth .auth-form { padding: 28px 24px 24px; }
}

.auth .auth-dica { margin: -4px 0 4px; font-size: 13px; color: #4B5466; }
.auth .auth-link {
  margin-top: 14px; align-self: flex-start; background: none; border: none; padding: 0; cursor: pointer;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .06em; color: #6B7385;
  text-decoration: underline; text-underline-offset: 3px;
}
.auth .auth-link:hover { color: var(--primary); }
.auth .auth-ok { border-radius: 10px; padding: 11px 13px; margin-top: 12px; font-size: 13px; line-height: 1.45; background: #F0FDF4; border: 1px solid #A7E8BF; color: #067647; }
.auth .auth-ok:empty { display: none; }