/* =========================================================
   Plataforma LGPD — tema de login (Keycloak)
   Layout: painel azul institucional à esquerda, formulário claro à direita.
   Paleta espelhando o app (globals.css): bg #f3f5f7, ink #1b2430, azul #13497e / #0b3058.
   Fontes servidas pelo próprio Keycloak (sem Google Fonts → sem
   transferência de IP para terceiros, bom para LGPD/GDPR).
   ========================================================= */

@font-face{
  font-family:"Archivo";
  src:url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations"),
      url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2");
  font-weight:100 900; font-stretch:62% 125%; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}

:root{
  color-scheme: light;
  --ink:#0b3058;        /* painel institucional (azul 900) — herói/marca */
  --gold:#13497e;       /* acento azul 700 (links/foco/CTA no formulário claro) */
  --gold-deep:#0b3058;  /* hover do CTA (azul mais fechado) */
  --gold-light:#9cc7ec; /* acento claro sobre o painel escuro (azul 200) */
  --cream:#eef3f8;      /* texto claro sobre o painel escuro */
  --paper:#f3f5f7;      /* fundo do formulário (claro) */
  --text:#1b2430;       /* ink — texto do formulário */
  --muted:#5b6472;
  --line:#d7dee6;       /* hairline */
  --field:#ffffff;      /* fundo dos campos (branco) */
  --ok:#1f6b3a;
  --danger:#a3261a;
  --f-ui:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--paper);color:var(--text);font-family:var(--f-ui);font-size:15px;line-height:1.4;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
img{max-width:100%}

.shell{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(380px,1fr);min-height:100%;min-height:100dvh;overflow-x:hidden}

/* ---------- Painel institucional (esquerda) ---------- */
.stage{position:relative;overflow:hidden;color:var(--cream);isolation:isolate;min-height:620px;
  background:
   radial-gradient(135% 110% at 82% -8%, rgba(156,199,236,.18), transparent 52%),
   radial-gradient(120% 90% at 0% 100%, rgba(255,255,255,.06), transparent 55%),
   var(--ink)}
.stage::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
   radial-gradient(120% 80% at 0% 100%, rgba(6,17,29,.75) 0%, rgba(6,17,29,.4) 35%, rgba(6,17,29,0) 60%),
   linear-gradient(180deg, rgba(6,17,29,.4) 0%, rgba(6,17,29,0) 22%);}
.hud{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:space-between;padding:36px 40px 28px}

.brand{display:flex;align-items:center;gap:14px}
.brand img{width:44px;height:44px;flex:none}
.brand-word{font-weight:500;font-stretch:125%;letter-spacing:.28em;font-size:17px;color:var(--cream)}

.pitch{max-width:460px;display:flex;flex-direction:column;gap:14px;margin-bottom:28px}
.eyebrow{font-family:var(--f-mono);font-size:11px;letter-spacing:.3em;color:var(--gold);text-transform:uppercase}
.hud .eyebrow{color:var(--gold-light)}
.headline{margin:0;font-weight:300;font-stretch:110%;font-size:clamp(28px,3.1vw,42px);line-height:1.08;letter-spacing:-.01em;color:var(--cream);text-wrap:balance}
.headline em{font-style:normal;font-weight:600;color:var(--gold-light)}
.trust{display:flex;gap:26px;flex-wrap:wrap;margin-top:22px;padding-top:16px;border-top:1px solid rgba(156,199,236,.22);font-family:var(--f-mono);font-size:10px;letter-spacing:.26em;color:rgba(238,243,248,.5)}

/* ---------- Painel do formulário ---------- */
.side{background:var(--paper);display:flex;flex-direction:column;justify-content:center;align-items:center;padding-block:40px;padding-inline:clamp(20px,5vw,64px);position:relative}
.side::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,var(--gold) 50%,transparent);opacity:.55}
.form-wrap{width:100%;max-width:380px;display:flex;flex-direction:column;gap:26px}

.locale{display:flex;justify-content:flex-end;align-items:center;gap:0;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;line-height:1}
.locale a+a::before{content:"\00b7";margin:0 8px;color:var(--muted);opacity:.5}
.side .locale a:not(.btn){opacity:.7}
.side .locale a.is-current:not(.btn),.side .locale a:not(.btn):hover{opacity:1}
.side .locale a:not(.btn){color:var(--muted);text-decoration:none}
.side .locale a.is-current:not(.btn),.side .locale a:not(.btn):hover{color:var(--gold)}

.form-head{display:flex;flex-direction:column;gap:8px}
.form-head h1{margin:0;font-weight:600;font-stretch:105%;font-size:26px;line-height:1.2;color:var(--text);letter-spacing:-.01em}
.form-head .subtitle,.form-head .required-note{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.required{color:var(--gold)}
.form-head .otp-hint{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.attempted{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:14px;color:var(--text)}

form,.ac-form{display:flex;flex-direction:column;gap:18px;margin:0}
.field{display:flex;flex-direction:column;gap:7px}
.label,.field label{font-size:13px;font-weight:500;color:var(--text)}
.input{position:relative;display:flex}

/* Campos: cobre também as telas base (esqueci senha, OTP, atualizar senha...) */
.side input[type="text"],.side input[type="email"],.side input[type="password"],.side input[type="tel"],.side input[type="number"],.side select,.side textarea,.ac-input{
  width:100%;font:inherit;font-size:15px;color:var(--text);background:var(--field);border:1px solid var(--line);border-radius:3px;padding:12px 14px;transition:border-color .2s, box-shadow .2s;outline:none;-webkit-appearance:none;appearance:none}
.side input::placeholder,.side textarea::placeholder{color:#8a93a0}
.side input:focus,.side select:focus,.side textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(19,73,126,.22)}
.side input:-webkit-autofill{-webkit-box-shadow:0 0 0 40px var(--field) inset;-webkit-text-fill-color:var(--text);caret-color:var(--text)}
.side input[aria-invalid="true"]{border-color:var(--danger)}
.input.pw input{padding-right:46px}
.eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);border:0;background:transparent;padding:8px;cursor:pointer;color:var(--muted);border-radius:3px}
.eye:hover{color:var(--text)}
.eye:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.field-error{color:var(--danger);font-size:13px}
.field-help{color:var(--muted);font-size:12.5px}

.row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px}
.check,.checkbox label{display:flex;align-items:center;gap:8px;color:var(--text);cursor:pointer}
.side input[type="checkbox"],.side input[type="radio"]{accent-color:var(--gold);width:16px;height:16px;margin:0}
a.link,.side a:not(.btn){color:var(--gold);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a.link:hover,.side a:not(.btn):hover{color:var(--gold-deep)}
a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* Botões (inclui <input type=submit> das telas base) */
.btn,.side input[type="submit"],.side button[type="submit"]{font:inherit;font-weight:600;font-size:15px;letter-spacing:.02em;border-radius:3px;padding:14px 18px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;text-decoration:none;transition:background .2s, border-color .2s, transform .1s;-webkit-appearance:none;appearance:none}
.btn:active,.side input[type="submit"]:active{transform:translateY(1px)}
.btn:focus-visible,.side input[type="submit"]:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.btn-primary,.side input[type="submit"],.side button[type="submit"]{background:var(--gold);color:#ffffff;border:1px solid var(--gold);position:relative;overflow:hidden}
.btn-primary:hover,.side input[type="submit"]:hover,.side button[type="submit"]:hover{background:var(--gold-deep);border-color:var(--gold-deep)}
.btn-primary::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg);transition:left .7s ease}
.btn-primary:hover::after{left:120%}
.btn-primary[disabled]{opacity:.85;cursor:progress}
.btn-ghost,.side .btn-ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--gold);color:var(--text)}
.side input[type="submit"].btn-ghost{background:transparent;color:var(--text);border-color:var(--line)}
.form-buttons,#kc-form-buttons{display:flex;flex-direction:column;gap:10px;width:100%}
/* telas base: opcoes (ex. "Voltar ao login") abaixo do botao */
.field.row{flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:14px}
.field.row #kc-form-options{order:2;text-align:center}
.spin{width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:ac-spin .8s linear infinite}
@keyframes ac-spin{to{transform:rotate(360deg)}}

.or{display:flex;align-items:center;gap:12px;color:var(--muted);font-family:var(--f-mono);font-size:10.5px;letter-spacing:.2em}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.social{display:flex;flex-direction:column;gap:10px}
.social ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.social h2{display:none}
.info{font-size:13.5px;color:var(--muted);text-align:center}
.info p{margin:0}

.alert{font-size:13.5px;line-height:1.45;padding:10px 12px;border-radius:0 3px 3px 0;background:var(--field);border-left:2px solid var(--gold);color:var(--text)}
.alert-error{border-left-color:var(--danger)}
.alert-success{border-left-color:var(--ok)}

.foot{display:flex;justify-content:center;gap:18px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.foot span{display:flex;align-items:center;gap:6px}

/* ---------- Responsivo ---------- */

/* Monitor grande / ultrawide */
@media (min-width:1600px){
  .shell{grid-template-columns:minmax(0,1.7fr) minmax(460px,1fr)}
  .hud{padding:56px 64px 40px}
  .brand img{width:52px;height:52px}
  .brand-word{font-size:19px}
  .pitch{max-width:560px}
  .headline{font-size:clamp(42px,2.8vw,56px)}
  .form-wrap{max-width:420px;gap:30px}
  .form-head h1{font-size:30px}
}
/* Tablet deitado / notebook pequeno */
@media (min-width:941px) and (max-width:1180px){
  .shell{grid-template-columns:minmax(0,1fr) minmax(400px,.95fr)}
  .hud{padding:28px 32px 24px}
  .headline{font-size:clamp(28px,3.4vw,36px)}
  .photo{object-position:40% 50%}
}
/* Notebook com tela baixa (ex.: 1366x768) */
@media (min-width:941px) and (max-height:760px){
  .stage{min-height:560px}
  .hud{padding-block:24px 20px}
  .side{padding-block:24px}
  .form-wrap{gap:18px}
  form,.ac-form{gap:14px}
  .form-head h1{font-size:22px}
  .form-head .subtitle{font-size:13px}
  .side input[type="text"],.side input[type="email"],.side input[type="password"],.ac-input{padding-block:10px}
  .btn,.side input[type="submit"]{padding-block:12px}
  .trust{margin-top:14px;padding-top:12px}
}
/* Tablet em pé e menores: foto em cima, formulário embaixo */
@media (max-width:940px){
  .shell{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .stage{min-height:0;height:clamp(300px,42vh,480px)}
  .photo{object-position:42% 62%}
  .hud{padding:28px 32px 22px}
  .pitch{margin-bottom:0;gap:10px}
  .headline{font-size:clamp(26px,4.6vw,38px)}
  .trust{display:none}
  .side{justify-content:flex-start;padding-block:40px 48px;padding-inline:32px}
  .side::before{display:none}
  .stage::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:3;background:linear-gradient(90deg,transparent,var(--gold) 50%,transparent);opacity:.55}
  .form-wrap{max-width:460px}
}
/* Celular em pé */
@media (max-width:600px){
  .stage{height:clamp(210px,32svh,290px)}
  .photo{object-position:44% 64%}
  .hud{padding:16px 16px 14px}
  .brand{gap:10px}
  .brand img{width:34px;height:34px}
  .brand-word{font-size:14px;letter-spacing:.24em}
  .pitch .eyebrow{display:none}
  .headline{font-size:23px;line-height:1.12}
  .side{padding-block:26px 32px;padding-inline:16px}
  .form-wrap{gap:20px}
  form,.ac-form{gap:16px}
  .form-head h1{font-size:22px}
  .form-head .subtitle{font-size:13.5px}
  .side input[type="text"],.side input[type="email"],.side input[type="password"],.side input[type="tel"],.side input[type="number"],.ac-input{font-size:16px} /* evita zoom no iPhone */
  .row{font-size:14px}
}
/* Celular deitado */
@media (max-height:500px) and (orientation:landscape){
  .shell{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-rows:none}
  .stage{height:auto;min-height:100%}
  .photo{object-position:40% 55%}
  .hud{padding:16px 18px}
  .brand img{width:30px;height:30px}
  .brand-word{font-size:13px}
  .pitch,.trust{display:none}
  .stage::before{display:none}
  .side{justify-content:center;padding-block:18px;padding-inline:20px}
  .form-head .eyebrow,.form-head .subtitle{display:none}
  .form-head h1{font-size:20px}
  .form-wrap{gap:14px}
  form,.ac-form{gap:12px}
  .side input[type="text"],.side input[type="password"],.ac-input{padding-block:9px;font-size:16px}
  .btn,.side input[type="submit"]{padding-block:11px}
}
/* Telas de toque: alvos de toque confortáveis */
@media (pointer:coarse){
  .side input[type="text"],.side input[type="email"],.side input[type="password"],.ac-input{min-height:48px}
  .btn,.side input[type="submit"]{min-height:48px}
  .eye{width:44px;height:44px;display:flex;align-items:center;justify-content:center;right:2px}
  .side input[type="checkbox"]{width:20px;height:20px}
  a.link{padding-block:6px}
}
@media (prefers-reduced-motion:reduce){
  .photo{transition:none}
  .btn-primary::after{display:none}
  .spin{animation-duration:2s}
}