/* ABL Legal Intelligence · portal da Fase 6 · acréscimos sobre o painel.css do MVP (o da Fase 5, sem mudança).
 * Cores só dos tokens; sem sombra e sem gradiente, como a direção B. */
html, body { background: var(--cor-fundo); }
.aviso-noscript { padding: var(--espaco-5); font-size: var(--tamanho-portal-texto); }
.marca-nome { font-family: var(--fonte-texto); font-weight: var(--peso-titulo); font-size: var(--tamanho-portal-titulo-pagina); letter-spacing: var(--entreletra-titulo); line-height: 1.05; color: var(--cor-dado); }
.marca-nome-topo { font-size: var(--tamanho-portal-subtitulo); }
.login-form a, .nota a { color: var(--cor-dado); text-underline-offset: 3px; }
.login-msg { color: var(--cor-erro); font-weight: var(--peso-titulo); }
.portal-principal { display: flex; flex-direction: column; gap: var(--espaco-7); min-width: 0; }

.lista-paineis { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.painel-item { display: flex; flex-direction: column; gap: var(--espaco-2); padding: var(--espaco-4) 0; border-bottom: var(--fio-fino) solid var(--cor-borda); }
.painel-cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--espaco-4); }
.painel-item h3 { font-size: var(--tamanho-portal-subtitulo); font-weight: var(--peso-titulo); }
.painel-reservado h3 { color: var(--cor-tinta-branda); }
.painel-vazio { padding: var(--espaco-4) 0; font-size: var(--tamanho-portal-texto); color: var(--cor-tinta-branda); }

.subtitulo { font-size: var(--tamanho-portal-subtitulo); font-weight: var(--peso-titulo); margin-top: var(--espaco-5); }
.tabela-rolagem { overflow-x: auto; }
.tabela-portal td { vertical-align: top; }
.acoes { display: flex; flex-wrap: wrap; gap: var(--espaco-2); }
.botao-pequeno { min-height: 36px; padding: 6px 10px; font-size: var(--tamanho-portal-legenda); }
.botao-perigo { color: var(--cor-erro); border-color: var(--cor-erro); }
.lista-sessoes { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--espaco-1); }
.lista-sessoes li { display: flex; align-items: center; gap: var(--espaco-2); font-size: var(--tamanho-portal-legenda); }

.form-admin { display: flex; flex-direction: column; gap: var(--espaco-3); padding: var(--espaco-4); background: var(--cor-superficie); border: var(--fio-fino) solid var(--cor-borda); border-radius: var(--raio-fino); }
.form-admin h4 { font-size: var(--tamanho-portal-texto); font-weight: var(--peso-titulo); }
.form-admin .campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--espaco-3); }
.form-admin label { display: flex; flex-direction: column; gap: var(--espaco-1); font-weight: var(--peso-titulo); font-size: var(--tamanho-portal-apoio); }
.form-admin input, .form-admin select {
  min-height: 44px; padding: 8px 12px; border-radius: var(--raio-fino); font-size: var(--tamanho-portal-apoio);
  background: var(--cor-fundo); border: var(--fio-medio) solid var(--cor-tinta-branda); font-weight: var(--peso-texto-portal);
}
.form-admin .botao-primario { align-self: flex-start; }
.form-msg { font-size: var(--tamanho-portal-apoio); color: var(--cor-erro); font-weight: var(--peso-titulo); }
.form-msg:empty { display: none; }
.form-msg-ok { color: var(--cor-dado); }
.aviso-senha { padding: var(--espaco-4); border: var(--fio-forte) solid var(--cor-acento); background: var(--cor-superficie); font-size: var(--tamanho-portal-texto); }
.senha-gerada { font-family: var(--fonte-rotulo); font-size: var(--tamanho-portal-subtitulo); letter-spacing: 0.08em; color: var(--cor-tinta); }

.tv-ativar { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--espaco-5); padding: var(--espaco-7); text-align: center; }
.tv-ativar h1 { font-size: var(--tamanho-portal-titulo-pagina); font-weight: var(--peso-titulo); }
.tv-codigo { font-family: var(--fonte-rotulo); font-size: clamp(56px, 9vw, 140px); letter-spacing: 0.12em; color: var(--cor-dado); }
.tv-codigo:empty { display: none; }
.tv-instrucao { font-size: clamp(22px, 2.4vw, 36px); max-width: 40ch; }
.tv-ativar .nota { font-size: clamp(18px, 1.6vw, 26px); }

/* Versão para celular (09/11/2026): o atalho do topo só aparece em tela estreita, até 600 px; em tela larga, o link
 * "Versão para celular" fica no item do painel dos closers. Toque de pelo menos 44 px. */
.atalho-celular { display: none; }
@media (max-width: 600px) {
  .atalho-celular {
    display: flex; flex-direction: column; gap: 2px; min-height: 56px; margin: var(--espaco-3) var(--espaco-4) 0; padding: 12px 16px;
    color: var(--cor-texto-inverso); text-decoration: none; background: var(--cor-dado); border-radius: var(--raio-medio);
  }
  .atalho-celular b { font-size: var(--tamanho-portal-texto); font-weight: var(--peso-titulo); }
  .atalho-celular span { font-size: var(--tamanho-portal-legenda); }
}

/* Guia do portal (6.4): página só de leitura, com a largura confortável de leitura. */
.guia-corpo { display: block; max-width: 80ch; }
.guia h1 { font-size: var(--tamanho-portal-titulo-pagina); font-weight: var(--peso-titulo); margin-bottom: var(--espaco-4); }
.guia h2 { font-size: var(--tamanho-portal-subtitulo); font-weight: var(--peso-titulo); margin: var(--espaco-6) 0 var(--espaco-3); }
.guia p, .guia li { font-size: var(--tamanho-portal-texto); line-height: 1.5; }
.guia ol { padding-left: var(--espaco-5); display: flex; flex-direction: column; gap: var(--espaco-2); }
/* Tratamento da pré-auditoria da Fase 6: falha de carga com aparência própria (B3), separada da lista vazia. */
.falha-carga { color: var(--cor-erro); font-weight: var(--peso-titulo); }
.botao[disabled] { opacity: 0.55; cursor: not-allowed; }

/* Tela de entrada (pedido do Wesley, 13/10/2026): a foto da ABL Tech ao fundo, nítida, e um cartão sólido e sóbrio, com
 * as cantoneiras da placa da parede (clara no alto à esquerda, vermelha embaixo à direita). Exceção, só nesta tela, à
 * regra de sem sombra do topo: a sombra solta o cartão da foto. A foto (2752 x 1536) está no formato da tela: a cena a
 * cobre mantendo a proporção. Os dois logos não estão na foto (14/10/2026): ficam por cima, pequenos e em px, presos
 * aos cantos da tela, para não crescer com a foto nem sair cortados quando a tela tem outro formato. Movimento só no fundo (14/10/2026): a foto deriva devagar, as luzes
 * do teto respiram, um brilho atravessa a madeira de tempos em tempos e a cena segue o mouse de leve (login.js). Só
 * transform e opacity. O cartão fica sólido: aparece uma vez e o resto é a resposta dos campos e do botão. Sem movimento quando o sistema pede. */
.login {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: var(--espaco-6) var(--espaco-5); background: #07141C; color: #F4F0E8;
}
.login ::selection { background: rgba(232, 68, 58, 0.4); color: #fff; }

/* ---------- fundo */
.login-fundo { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; }
.login-cena { position: absolute; top: 50%; left: 50%; width: 100vw; min-width: 179.2vh; transform: translate(-50%, -50%); }
/* A deriva começa em 1.06: sobram 3% de cada lado, mais do que o passeio somado à paralaxe (12px). */
.login-paralaxe { will-change: transform; }
.login-respira { position: relative; transform-origin: 50% 50%; transform: scale(1.06); animation: login-deriva 48s ease-in-out infinite alternate; }
.login-foto { display: block; width: 100%; height: auto; animation: login-aparece 0.8s ease-out both; }
@keyframes login-deriva {
  0% { transform: scale(1.06) translate(0, 0); }
  35% { transform: scale(1.085) translate(-1.1%, -0.7%); }
  70% { transform: scale(1.07) translate(0.9%, -0.3%); }
  100% { transform: scale(1.06) translate(0.4%, 0.6%); }
}
/* As três luzes do teto, nas posições da foto, acendem e baixam fora de compasso. */
.login-luz {
  position: absolute; width: 10%; height: 17.9%; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; opacity: 0.4;
  background: radial-gradient(circle closest-side, rgba(255, 246, 228, 0.7), rgba(255, 238, 210, 0.24) 32%, rgba(255, 238, 210, 0) 100%);
  animation: login-luz 8s ease-in-out infinite;
}
.login-luz.l1 { left: 50.4%; top: 10.55%; animation-duration: 7s; animation-delay: -2s; }
.login-luz.l2 { left: 66.4%; top: 8.75%; animation-duration: 9s; animation-delay: -5s; }
.login-luz.l3 { left: 89.2%; top: 6.15%; animation-duration: 8s; animation-delay: -0.5s; }
@keyframes login-luz { 0%, 100% { opacity: 0.35; transform: scale(0.92); } 50% { opacity: 0.95; transform: scale(1.06); } }
/* Brilho que atravessa o ripado de madeira (0 a 54,5% da foto) e some por uns segundos antes de voltar. */
.login-brilho { position: absolute; top: 0; left: 0; width: 54.5%; height: 100%; overflow: hidden; pointer-events: none; }
.login-brilho::before {
  content: ''; position: absolute; top: 0; left: 0; width: 22%; height: 100%; mix-blend-mode: screen; transform: translateX(-100%);
  background: linear-gradient(100deg, rgba(255, 214, 170, 0) 0%, rgba(255, 214, 170, 0.1) 40%, rgba(255, 232, 206, 0.2) 50%, rgba(255, 214, 170, 0.1) 60%, rgba(255, 214, 170, 0) 100%);
  animation: login-brilho 18s cubic-bezier(0.45, 0, 0.55, 1) 1.5s infinite;
}
@keyframes login-brilho { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(560%); } }
@keyframes login-aparece { from { opacity: 0; } to { opacity: 1; } }
.login-fundo::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none;
  background: radial-gradient(ellipse 26% 58% at 42% 52%, rgba(4, 12, 18, 0.55), rgba(4, 12, 18, 0) 100%),
    radial-gradient(ellipse 22% 30% at 0 0, rgba(4, 12, 18, 0.5), rgba(4, 12, 18, 0) 100%),
    linear-gradient(180deg, rgba(4, 12, 18, 0.22), rgba(4, 12, 18, 0) 22%, rgba(4, 12, 18, 0) 78%, rgba(4, 12, 18, 0.28));
}

/* Logos: ABL Advogados no alto à esquerda (as duas máscaras da TV) e ABL Tech embaixo à direita. */
.login-logo-abl { position: absolute; top: 36px; left: 40px; width: 52px; height: 62px; z-index: 1; }
.login-logo-abl i { position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.login-logo-abl .c { background: #F4F0E8; -webkit-mask-image: url(../marca/abl-advogados-clara.png); mask-image: url(../marca/abl-advogados-clara.png); }
.login-logo-abl .v { background: #E8443A; -webkit-mask-image: url(../marca/abl-advogados-vermelha.png); mask-image: url(../marca/abl-advogados-vermelha.png); }
.login-logo-tech { position: absolute; right: 40px; bottom: 32px; width: 150px; height: auto; z-index: 1; }

/* ---------- cartão */
.login-palco { position: relative; z-index: 1; width: 100%; max-width: 440px; margin-left: 30.5vw; }
.login-cartao {
  position: relative; border-radius: 18px; padding: 36px 40px 26px; background: #0E2230;
  border: 1px solid rgba(214, 232, 245, 0.1);
  box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.7), 0 8px 24px rgba(0, 0, 0, 0.3);
  animation: login-entra 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}
@keyframes login-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* As cantoneiras da placa, paradas. */
.login-cartao::before, .login-cartao::after { content: ''; position: absolute; width: 56px; height: 56px; pointer-events: none; }
.login-cartao::before { top: -1px; left: -1px; border-top: 2px solid rgba(220, 236, 248, 0.7); border-left: 2px solid rgba(220, 236, 248, 0.7); border-radius: 18px 0 0 0; }
.login-cartao::after { right: -1px; bottom: -1px; border-right: 2px solid #E8443A; border-bottom: 2px solid #E8443A; border-radius: 0 0 18px 0; }

/* Marca: o símbolo do Legal Intelligence e o nome em condensada, como o ABL TECH do logo. */
.login-marca { display: block; padding: 0; border: 0; background: none; }
.login-assinatura-lc { display: flex; align-items: center; gap: 12px; }
.login-simbolo { flex: 0 0 auto; width: 40px; height: 40px; }
.login-simbolo .anel { fill: none; stroke: #DCE8F0; stroke-width: 5; }
.login-simbolo .nucleo { fill: #DCE8F0; }
.login-simbolo .ponteiro { fill: none; stroke: #E8443A; stroke-width: 7; stroke-linecap: butt; }
.login .marca-nome { font-family: 'Sofia Sans Condensed', 'Arial Narrow', sans-serif; font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; color: #F7F4EE; }
.login .marca-nome span { font-weight: 500; color: #9FB4C2; }
.login .login-frase { margin-top: 12px; max-width: 34ch; font-size: 15px; line-height: 1.45; color: #B6C5CF; }

/* Formulário */
.login .login-form-area { display: block; margin-top: 24px; padding: 24px 0 0; background: none; border-top: 1px solid rgba(214, 232, 245, 0.09); }
.login .login-form { margin: 0; max-width: none; gap: 6px; }
.login .login-form h1 { font-family: var(--fonte-texto); font-size: 26px; font-weight: 700; letter-spacing: 0; color: #F7F4EE; }
.login .apoio { margin-bottom: 6px; font-size: 15px; line-height: 1.45; color: #B6C5CF; }
.login .login-form label { margin-top: 12px; font-size: 14px; font-weight: 600; color: #CFD9E0; }
.login .login-form input {
  min-height: 50px; padding: 12px 14px; border-radius: 10px; font-family: var(--fonte-texto); font-size: 17px; color: #F7F4EE; caret-color: #E8443A;
  background: #0A1A25; border: 1px solid rgba(220, 235, 245, 0.18); transition: border-color 0.15s, background-color 0.15s;
}
.login .login-form input:hover { border-color: rgba(220, 235, 245, 0.36); }
.login .login-form input:focus { outline: none; border-color: #8CC4EC; background-color: #0C1F2C; box-shadow: 0 0 0 3px rgba(140, 196, 236, 0.22); }
.login .login-form input:-webkit-autofill { -webkit-text-fill-color: #F7F4EE; box-shadow: 0 0 0 40px #0C1F2C inset; transition: background-color 600000s; }
.login .login-msg { margin-top: 8px; font-size: 14px; color: #FF9C90; }
.login .login-form .botao-primario {
  position: relative; overflow: hidden; justify-content: center; min-height: 52px; margin-top: 18px; border: 0; border-radius: 10px;
  background: #C9362C; color: #fff; font-family: var(--fonte-texto); font-size: 17px; font-weight: 700; letter-spacing: 0.01em; cursor: pointer;
  transition: background-color 0.15s;
}
.login .login-form .botao-primario:hover { background: #B02D23; }
.login .login-form .botao-primario:active { background: #9E281F; }
.login .login-form .botao-primario:focus { outline: 2px solid #9DD0F5; outline-offset: 3px; }
.login .login-form .botao-primario[disabled] { opacity: 0.9; cursor: progress; }
.login .login-form .botao-primario.carregando::before {
  content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 40%; background: rgba(255, 255, 255, 0.8);
  animation: login-carrega 1.1s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes login-carrega { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.login .nota { margin-top: 14px; font-size: 14px; line-height: 1.5; color: #91A5B2; }
.login .nota a { color: #9DD0F5; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.login .nota a:hover { color: #fff; }
.login .nota a:focus { outline: 2px solid #9DD0F5; outline-offset: 2px; border-radius: 3px; }

/* Rodapé do cartão */
.login-rodape { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 14px; border-top: 1px solid rgba(214, 232, 245, 0.07); }
.login .login-rodape .rot-portal { font-family: 'Sofia Sans Condensed', 'Arial Narrow', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: #C9D5DC; }
.login .login-rodape .login-endosso { display: block; margin: 0; font-size: 14px; line-height: 1.35; text-align: right; color: #91A5B2; }

/* ---------- tamanhos */
@media (max-width: 1100px) {
  .login { align-items: center; padding: var(--espaco-5) var(--espaco-4); }
  .login-palco { margin-left: 0; }
  .login-fundo::after { background: linear-gradient(180deg, rgba(4, 12, 18, 0.35), rgba(4, 12, 18, 0.35)); }
}
@media (max-height: 820px) {
  .login { padding-top: var(--espaco-4); padding-bottom: var(--espaco-4); }
  .login-cartao { padding: 26px 34px 20px; }
  .login .marca-nome { font-size: 30px; }
  .login-simbolo { width: 36px; height: 36px; }
  .login .login-frase { margin-top: 10px; }
  .login .login-form-area { margin-top: 18px; padding-top: 18px; }
  .login .login-form h1 { font-size: 23px; }
  .login .login-form label { margin-top: 8px; }
  .login .login-form input { min-height: 46px; }
  .login .login-form .botao-primario { min-height: 48px; margin-top: 14px; }
  .login .nota { margin-top: 10px; }
  .login-rodape { margin-top: 16px; padding-top: 12px; }
}
@media (max-width: 480px) {
  .login-logo-abl { top: 14px; left: 16px; width: 30px; height: 36px; }
  .login-logo-tech { right: 16px; bottom: 14px; width: 96px; }
  .login-cartao { padding: 26px 22px 20px; }
  .login .marca-nome { font-size: 28px; }
  .login-rodape { flex-direction: column; align-items: flex-start; }
  .login .login-rodape .login-endosso { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .login-respira, .login-foto, .login-luz, .login-brilho::before { animation: none; }
  .login-cartao { animation: login-aparece 0.3s ease-out both; }
}