/* ============================================================
   Tela de entrada (portaria.py) — o MESMO desenho do login da v1
   (app/index.html + base.css), a pedido do dono: foto com veu, selo,
   frase e o formulario ao lado. Agora autentica de verdade.

   Tudo escopado em body.entrar: o Dash carrega todo CSS da pasta assets
   nas paginas dele tambem, e nada daqui pode vazar para la.
   Os tons sobre a foto (#CFEFEA, veu, sombra da logo) sao os MEDIDOS na
   v1 (scratchpad/medir.py): apoio 6,4:1 e rodape 4,5:1. Nao "clarear a olho".
   ============================================================ */
body.entrar {
  --bg: #F3F6F7; --surface: #FFFFFF; --line: #CFE0E2; --ink: #0F1F22; --ink-2: #5E7579; --ink-3: #8AA0A3;
  --brand: #0E5A62; --brand-2: #17828C; --on-brand: #FFFFFF; --accent: #17828C;
  --crit: #B3261E; --crit-bg: #FDECEA; --warn: #A85C06; --warn-bg: #FDF1E3;
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 14.5px;
  -webkit-font-smoothing: antialiased;
}
:root[data-tema="escuro"] body.entrar {
  --bg: #071316; --surface: #0E2126; --line: #2A525C; --ink: #E6F1F2; --ink-2: #9DB8BC; --ink-3: #6E8A8F;
  --brand: #30B5AD; --brand-2: #4FD1C5; --on-brand: #04191C; --accent: #30B5AD;
  --crit: #F0817A; --crit-bg: rgba(240,129,122,.12); --warn: #E2A44A; --warn-bg: rgba(226,164,74,.12);
  color-scheme: dark;
}
body.entrar *, body.entrar *::before, body.entrar *::after { box-sizing: border-box; }
body.entrar .login { min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; }
/* ---------- lado da marca ---------- */
body.entrar .login__arte { position: relative; background: #0E5A62; overflow: hidden; display: flex; flex-direction: column;
               justify-content: space-between; gap: 24px; padding: 40px 44px; color: #fff; }
/* z-index da foto e obrigatorio: `.login__arte > *` casa com ela tambem e a
   jogaria por cima do veu (licao da v1 — o rodape ficou em 1,1:1). */
body.entrar .login__arte img.foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
body.entrar .login__arte > * { position: relative; z-index: 2; }
/* o veu vem DEPOIS de `.login__arte > *`: com position relative ele nao existe */
body.entrar .login__veu { position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(3,28,32,.72) 0%, rgba(4,40,45,.30) 18%, rgba(4,40,45,.34) 44%,
                    rgba(3,28,33,.88) 66%, rgba(2,20,24,.95) 88%, rgba(2,18,21,.96) 100%),
    linear-gradient(90deg, rgba(3,28,32,.34) 0%, rgba(3,28,32,0) 66%); }
body.entrar .login__arte img.logo { width: 156px; height: auto;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.75)) drop-shadow(0 0 26px rgba(0,0,0,.55)); }
body.entrar .login__selo { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.13);
               border: 1px solid rgba(255,255,255,.22); padding: 7px 13px; border-radius: 999px; font-size: 12px;
               font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
body.entrar .login__selo svg { width: 14px; height: 14px; }
body.entrar .login__frase { font-family: "Fraunces", Georgia, serif; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem);
                line-height: 1.16; font-weight: 600; letter-spacing: -.02em; max-width: 15ch; margin: 18px 0 0; }
body.entrar .login__apoio { margin: 14px 0 0; font-size: 14.5px; line-height: 1.6; color: #CFEFEA; max-width: 42ch; }
body.entrar .login__separado { font-size: 12px; color: #CFEFEA; margin: 0; line-height: 1.6; }
/* ---------- lado do formulario ---------- */
body.entrar .login__painel { background: var(--bg); display: flex; flex-direction: column; padding: 26px 32px 32px; }
body.entrar .login__painel-topo { display: flex; justify-content: flex-end; }
body.entrar .btn-tema { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 13px; border-radius: 10px;
            border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font: inherit;
            font-size: 13px; font-weight: 500; cursor: pointer; }
body.entrar .btn-tema:hover { color: var(--ink); }
body.entrar .btn-tema svg { width: 15px; height: 15px; }
body.entrar .login__caixa { margin: auto; width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 18px; }
body.entrar .login__titulo { font-size: 25px; font-weight: 650; letter-spacing: -.02em; margin: 0; }
body.entrar .login__legenda { font-size: 14px; color: var(--ink-2); margin: 5px 0 0; line-height: 1.55; }
body.entrar .login__form { display: flex; flex-direction: column; gap: 14px; }
body.entrar .campo { display: flex; flex-direction: column; gap: 6px; }
body.entrar .campo label { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
body.entrar .campo input { width: 100%; padding: 11px 13px; font: inherit; font-size: 14.5px; border-radius: 10px;
               border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
body.entrar .campo input:focus { outline: 2px solid var(--brand-2); outline-offset: 1px; }
body.entrar .botao { display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%;
         background: var(--brand); color: var(--on-brand); border: 1px solid var(--brand); padding: 12px 18px;
         border-radius: 10px; font: inherit; font-size: 14.5px; font-weight: 620; cursor: pointer; margin-top: 2px; }
body.entrar .botao:hover { background: var(--brand-2); border-color: var(--brand-2); }
body.entrar .botao svg { width: 17px; height: 17px; }
body.entrar .login__erro { display: flex; gap: 9px; align-items: flex-start; background: var(--crit-bg);
               border: 1px solid color-mix(in srgb, var(--crit) 40%, transparent); color: var(--ink);
               padding: 11px 13px; border-radius: 10px; font-size: 13px; line-height: 1.5; }
body.entrar .login__erro svg { width: 17px; height: 17px; flex: none; color: var(--crit); margin-top: 1px; }
body.entrar .login__nota { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.55; color: var(--ink-2);
               background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; }
body.entrar .login__nota svg { width: 16px; height: 16px; flex: none; color: var(--brand-2); margin-top: 2px; }
body.entrar .login__rodape { font-size: 11.5px; color: var(--ink-3); text-align: center; line-height: 1.65; margin: 0; }
body.entrar .login__rodape a { color: var(--brand-2); }

@media (max-width: 1000px) {
body.entrar .login { grid-template-columns: 1fr; }
body.entrar .login__arte { min-height: 230px; padding: 26px 22px; }
body.entrar .login__frase { font-size: 1.5rem; }
body.entrar .login__apoio { display: none; }
body.entrar .login__painel { padding: 20px 16px 28px; }

}