/* Tela de entrada (views/auth/login.php): duas metades — marca à esquerda, formulário à direita.
   Mobile (< 1024 px): empilha, com a faixa da marca enxuta no topo. Regra: docs/MOBILE.md. */
:root { --lg-navy: #001033; --lg-royal: #0040A0; --lg-azul: #2575FC; --lg-ciano: #00AEEF; --lg-borda: #D9DEEA; --lg-tinta: #0B1530; }
* { box-sizing: border-box; }
.login-pagina { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, 'Segoe UI', sans-serif; color: var(--lg-tinta); background: #FAFAFD; -webkit-font-smoothing: antialiased; }

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

/* ——— Metade da marca ———
   Mesma pintura dos banners do Nexus (topo do sistema e herói do Início, ver shell.css / ui.css):
   azul-marinho em degradê com reflexo de luz no alto, grade fina que se dissolve e um brilho azul que deriva. */
.login__marca {
  position: relative; overflow: hidden; isolation: isolate; color: #fff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 45%),
    linear-gradient(104deg, #001a4a 0%, #00205e 42%, #002d78 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), inset 0 -1px 0 rgba(127, 176, 255, .22);
  display: flex; align-items: center;
  padding: calc(1.25rem + env(safe-area-inset-top)) 1.5rem 1.25rem;
}
.login__marca::before { /* grade fina, a mesma do topo (32 px), esmaecendo */
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(127, 176, 255, .1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127, 176, 255, .1) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: linear-gradient(92deg, #000 0%, rgba(0, 0, 0, .5) 55%, transparent 100%);
  mask-image: linear-gradient(92deg, #000 0%, rgba(0, 0, 0, .5) 55%, transparent 100%);
}
.login__marca::after { /* brilho azul que deriva devagar */
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  top: -60%; left: 8%; width: 18rem; height: 18rem; border-radius: 50%;
  background: rgba(37, 117, 252, .4); filter: blur(60px);
  animation: login-deriva 18s ease-in-out infinite;
}
@keyframes login-deriva {
  0%, 100% { transform: translateX(0) scale(1); }
  50% { transform: translateX(8rem) scale(1.12); }
}
.login__logo { display: block; width: 11rem; height: auto; }
.login__barra, .login__eyebrow, .login__texto { display: none; }
.login__titulo { display: none; margin: 0; }

/* ——— Metade do formulário ——— */
.login__coluna { display: flex; align-items: flex-start; justify-content: center; padding: 1.75rem 1.25rem calc(2rem + env(safe-area-inset-bottom)); }
.login__form-caixa { width: 100%; max-width: 28rem; }
.login__h1 { margin: 0 0 1.5rem; font-size: 2rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.login__form { display: flex; flex-direction: column; gap: 1.25rem; }
.login__campo { display: flex; flex-direction: column; gap: .5rem; }
.login__rotulo { font-size: .9375rem; font-weight: 500; color: #1B2340; }

.login__input {
  width: 100%; height: 3.5rem; padding: 0 1.25rem; border: 1px solid var(--lg-borda); border-radius: .875rem;
  background: #fff; color: var(--lg-tinta); font: inherit; font-size: 1rem; box-shadow: 0 1px 2px rgba(11, 21, 48, .04);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.login__input::placeholder { color: #98A0B5; }
.login__input:focus { outline: none; border-color: var(--lg-royal); box-shadow: 0 0 0 4px rgba(37, 117, 252, .18); }
.login__senha { position: relative; }
.login__senha .login__input { padding-right: 3.5rem; }
.login__olho {
  position: absolute; top: 50%; right: .5rem; transform: translateY(-50%); width: 2.75rem; height: 2.75rem;
  display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: .75rem; background: none; color: #6B7290; cursor: pointer;
}
.login__olho:hover { color: var(--lg-royal); }
.login__olho:focus-visible { outline: 3px solid var(--lg-ciano); outline-offset: 0; }

.login__entrar {
  height: 3.5rem; border: 0; border-radius: .875rem; cursor: pointer; color: #fff; font: inherit; font-size: 1.0625rem; font-weight: 600;
  background: linear-gradient(100deg, var(--lg-royal), var(--lg-azul)); box-shadow: 0 10px 22px -12px rgba(0, 64, 160, .75);
  transition: filter .15s ease, transform .15s ease, opacity .15s ease;
}
.login__entrar:hover:not(:disabled) { filter: brightness(1.08); }
.login__entrar:active:not(:disabled) { transform: translateY(1px); }
.login__entrar:focus-visible { outline: 3px solid var(--lg-ciano); outline-offset: 3px; }
.login__entrar:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

.login__erro { margin: 0 0 1.25rem; padding: .75rem 1rem; border: 1px solid #FECACA; border-radius: .75rem; background: #FEF2F2; color: #991B1B; font-size: .875rem; font-weight: 500; }

/* ——— Desktop: duas metades ——— */
@media (min-width: 1024px) {
  .login { grid-template-columns: 1fr 1fr; }
  .login__marca { padding: 3rem clamp(2.5rem, 9vw, 11rem); }
  .login__marca::after { top: -8rem; left: 18%; width: 32rem; height: 32rem; }
  .login__marca::before { -webkit-mask-image: linear-gradient(135deg, #000 0%, rgba(0, 0, 0, .55) 50%, transparent 95%); mask-image: linear-gradient(135deg, #000 0%, rgba(0, 0, 0, .55) 50%, transparent 95%); }
  .login__marca-conteudo { width: 100%; }
  .login__logo { width: min(25rem, 100%); }
  .login__barra { display: block; width: 4.25rem; height: .3rem; border-radius: 999px; margin: 3.25rem 0 1.5rem; background: linear-gradient(90deg, var(--lg-ciano), var(--lg-azul)); }
  .login__eyebrow { display: block; margin: 0; font-size: .8125rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: #9DB4DB; }
  .login__titulo { display: block; margin-top: .75rem; font-size: clamp(2rem, 2.9vw, 2.875rem); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; }
  .login__texto { display: block; margin: 1rem 0 0; max-width: 30rem; font-size: 1.125rem; line-height: 1.55; color: #C5D3EC; }
  .login__coluna { align-items: center; padding: 3rem clamp(2rem, 6vw, 7rem); }
  .login__h1 { font-size: 2.5rem; margin-bottom: 2rem; }
}
@media (prefers-reduced-motion: reduce) { .login__input, .login__entrar { transition: none; } .login__marca::after { animation: none; } }