/*
  Paleta e tipografia conforme o Manual de Marca Requalli (base de conhecimento
  do projeto). Cores oficiais (RGB/hex):
    azul petróleo #0a2839  — cor dominante, âncora da identidade
    alto mar      #104f68  — reforço/hover do azul petróleo
    cool gray 01  #e4e4e4  — cinza claro, suporte
    cool gray 11  #3c3c3b  — cinza escuro, texto
    laranja elétrico #e84e1b — destaque pontual (usar com moderação, nunca como cor de base)
  Tipografia: Helvetica Neue (bold para títulos, regular para texto corrido,
  thin para detalhes). O manual pede caixa alta só no início de frases, nunca
  texto inteiro em maiúsculas — por isso não há text-transform:uppercase aqui.

  Ainda falta: o arquivo do logotipo/símbolo (o "R" em forma de cadeira) não
  veio como imagem no manual, só descrito em texto — por enquanto o cabeçalho
  usa o nome por extenso estilizado. Assim que o arquivo do logo (svg/png)
  estiver disponível, é só colocar em frontend/static/img/ e trocar o <div class="marca">.
*/
:root {
  --azul-petroleo: #0a2839;
  --alto-mar: #104f68;
  --cool-gray-01: #e4e4e4;
  --cool-gray-11: #3c3c3b;
  --laranja-eletrico: #e84e1b;

  --cor-fundo: var(--cool-gray-01);
  --cor-superficie: #ffffff;
  --cor-borda: #d3d3d2;
  --cor-texto: var(--cool-gray-11);
  --cor-texto-suave: #6f6f6d;
  --cor-primaria: var(--azul-petroleo);
  --cor-primaria-hover: var(--alto-mar);
  --cor-destaque: var(--laranja-eletrico);
  --cor-alerta: #b3452e;
  --fonte: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --raio: 8px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--fonte);
  font-weight: 400;
  background: var(--cor-fundo);
  color: var(--cor-texto);
}

#app { max-width: 1080px; margin: 0 auto; padding: 24px 20px 80px; }

header.topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
  margin-bottom: 24px;
  background: var(--azul-petroleo);
  color: #ffffff;
  border-radius: var(--raio);
  padding-left: 20px;
  padding-right: 20px;
}

header.topo .marca { font-weight: 700; font-size: 1.25rem; letter-spacing: 0.01em; }
header.topo .usuario { font-size: 0.9rem; color: #cfd8dc; display: flex; gap: 12px; align-items: center; }
header.topo .usuario span { color: #cfd8dc; }
header.topo .usuario .suave { color: #9fb1ba; }
/* O botão "Sair" reaproveita a classe .secundario (texto/borda na cor
   --cor-primaria, que é o mesmo azul-petroleo do fundo do cabeçalho) — sem
   isso, ele fica invisível no cabeçalho escuro e só aparece no hover. */
header.topo .usuario button.secundario { color: #ffffff; border-color: #ffffff; }
header.topo .usuario button.secundario:hover { background: rgba(255, 255, 255, 0.15); }

.cartao {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: 20px;
  margin-bottom: 16px;
}

h1 { font-size: 1.4rem; font-weight: 700; margin: 0 0 4px; color: var(--azul-petroleo); }
h2 { font-size: 1.1rem; font-weight: 700; margin: 0 0 12px; color: var(--azul-petroleo); }
p.suave, span.suave { color: var(--cor-texto-suave); font-size: 0.9rem; font-weight: 300; }

label { display: block; font-size: 0.85rem; margin-bottom: 4px; color: var(--cor-texto-suave); }
input, select, button {
  font-family: inherit;
  font-size: 0.95rem;
}
input, select {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--cor-borda);
  border-radius: 6px;
  margin-bottom: 14px;
  background: var(--cor-superficie);
  color: var(--cor-texto);
}
input:focus, select:focus { outline: 2px solid var(--alto-mar); outline-offset: 1px; }

button {
  cursor: pointer;
  border: none;
  border-radius: 6px;
  padding: 9px 16px;
  background: var(--cor-primaria);
  color: white;
  font-weight: 700;
  transition: background 0.15s ease;
}
button:hover { background: var(--cor-primaria-hover); }
button.secundario { background: transparent; color: var(--cor-primaria); border: 1px solid var(--cor-primaria); }
button.secundario:hover { background: #eef2f4; }
button:disabled { background: var(--cor-borda); color: var(--cor-texto-suave); cursor: not-allowed; }

.erro { color: var(--cor-alerta); font-size: 0.9rem; margin: 8px 0; }

table { width: 100%; border-collapse: collapse; margin: 8px 0 4px; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--cor-borda); font-size: 0.9rem; }
th { color: var(--cor-texto-suave); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.02em; }

.grade-clientes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.cartao-cliente {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: 14px 16px;
  background: var(--cor-superficie);
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.cartao-cliente:hover { border-color: var(--alto-mar); }
.cartao-cliente .setor { font-size: 0.75rem; color: var(--alto-mar); font-weight: 700; letter-spacing: 0.02em; }

.produto-linha { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.linha-acao { display: flex; gap: 8px; align-items: center; }
.linha-acao select, .linha-acao input[type=number] { margin-bottom: 0; width: auto; }
.linha-acao input[type=number] { width: 60px; }

.total-orcamento { font-size: 1.3rem; font-weight: 700; text-align: right; margin-top: 12px; color: var(--laranja-eletrico); }

nav.abas { display: flex; gap: 8px; margin-bottom: 16px; }
nav.abas button { background: transparent; color: var(--cor-texto-suave); border: 1px solid transparent; font-weight: 400; }
nav.abas button.ativa { background: var(--cor-superficie); color: var(--azul-petroleo); border-color: var(--cor-borda); font-weight: 700; }

/* ---------------------------------------------------------------------
   Tela de login — fixa, sem barra de rolagem, com a arte de fundo da marca.
   O retangulo do formulario e posicionado em cima do quadro claro que ja
   existe na propria imagem (medido em pixels e convertido para % abaixo, o
   que mantem o alinhamento pixel-perfect em qualquer tamanho de tela: a
   ".moldura" sempre preserva a proporcao exata da arte original, 5120x2700,
   igual a como "object-fit: contain" funciona para imagens).
   ------------------------------------------------------------------- */
html:has(.tela-login), body:has(.tela-login) { height: 100%; overflow: hidden; }

.tela-login {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cool-gray-11);
}

.tela-login .moldura {
  /* --lm (largura da moldura) espelha a mesma formula do width abaixo, como
     variavel CSS, para que fontes/gaps do cartao possam ser expressos com
     calc(var(--lm) * fracao) e cresçam junto com o cartao em qualquer tela —
     "%" sozinho não funciona para font-size (resolve contra o font-size do
     elemento pai, não contra a largura do container). */
  --lm: min(100vw, calc(100vh * 1.896296));
  position: relative;
  width: var(--lm);
  height: min(100vh, calc(100vw / 1.896296));
  background-image: url('/img/login-bg.jpg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.tela-login .cartao-login {
  /* Posicao/tamanho medidos direto na arte de fundo (Rev02, a versao com o
     cartao maior e centralizado que o Rodrigo desenhou como referencia) via
     varredura de transicao de borda (pixel a pixel): quadro claro em
     x 2798-4044, y 420-1101 numa imagem de 5120x2700. A propria arte tem um
     contorno fino (~2px) desenhado em volta do retangulo — se o cartao real
     parar exatamente nessa borda, sobra uma linha fina visivel (a "moldura"
     que o Rodrigo pediu pra tirar), porque so a metade interna do contorno
     fica coberta. Por isso os valores abaixo expandem a caixa ~2px pra fora
     em cada lado (x 2796-4046, y 418-1103) — o suficiente pra cobrir o
     contorno inteiro sem sobrar linha, sem dar pra perceber a diferenca de
     tamanho. Isso so fica pixel-perfect porque ".moldura" preserva a
     proporcao exata da imagem em qualquer tela. */
  position: absolute;
  left: 54.609%;
  top: 15.481%;
  width: 24.414%;
  height: 25.370%;
  /* Opaco de propósito: o quadro claro já existe (desenhado) na própria
     imagem de fundo, com texto de exemplo em cima. Com qualquer transparência
     esse texto de exemplo "vaza" por baixo dos campos reais (efeito fantasma
     de texto duplicado) — por isso o fundo aqui precisa cobrir 100%. */
  background: rgb(228, 228, 228);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* Atencao: padding em % SEMPRE se baseia na largura do bloco de referencia
     (".moldura"), inclusive para topo/base — nunca na altura do proprio
     elemento (regra do CSS, nao é bug). Os valores abaixo foram medidos
     direto no cartao do modelo (Rev02, crop de referencia 1246x681): gap do
     topo do cartao ate o topo do rotulo "Usuário" = 101px, gap da borda
     esquerda/direita ate o sublinhado dos campos = 118/119px — convertidos
     para % da largura da moldura (topo/base dividido pelo aspect ratio,
     esquerda/direita direto, igual ao resto dos calc(var(--lm)*fracao)
     abaixo). Padding-bottom usa a mesma medida das margens laterais (pedido
     do Rodrigo), pra fechar o espaco de baixo do cartao com a mesma "moldura"
     visual dos lados — ver tambem o comentario no ".cartao-login form"
     abaixo sobre o porque isso so funciona corretamente com o scroll junto
     com o ajuste no min-height do form. */
  padding: 1.9842% 2.3317% 2.3219% 2.3121%;
  overflow-y: auto;
}

/* Titulo/descricao (telas de recuperar senha, cadastro, troca obrigatoria):
   escalados com --lm em vez de rem fixo, igual ao resto do cartao — um
   tamanho fixo nao encolhe/cresce junto com o cartao em telas diferentes, e
   nas telas com titulo (que tem menos espaco sobrando pros campos, por ja
   gastar espaco com titulo+descricao) isso empurrava o conteudo pra fora do
   cartao mesmo em casos que deveriam caber sem rolar (ex: "Recuperar
   senha", so 1 campo). */
.tela-login .cartao-login h2 {
  font-size: calc(var(--lm) * 0.010925);
  margin: 0 0 calc(var(--lm) * 0.0014);
}
.tela-login .cartao-login p.suave {
  font-size: calc(var(--lm) * 0.00782);
  margin: 0 0 calc(var(--lm) * 0.0012);
  line-height: 1.25;
}

/* O formulario preenche a altura do cartao naturalmente (sem truque de
   justify-content:space-between) — os tamanhos/gaps abaixo, calibrados
   pixel a pixel contra o layout modelo (Rev02), ja ocupam a proporcao certa
   da altura, deixando o respiro antes do botao do jeito que o Rodrigo pediu
   sem precisar "empurrar" nada pra baixo artificialmente.
   NAO usar min-height:0 aqui: isso deixaria o form encolher (via flex-shrink)
   pra CABER a forca dentro do cartao mesmo quando o conteudo (ex: cadastro,
   com 5 campos) precisa de mais espaco do que o cartao tem — e ai o
   conteudo que estoura fica sobreposto/cortado por cima do padding-bottom
   e de qualquer coisa depois dele, ao inves de simplesmente "vazar" pra
   baixo do cartao (que e pra isso que serve o overflow-y:auto ali). Sem
   min-height:0, o form nao encolhe abaixo do proprio conteudo — quando nao
   cabe, ele estoura o cartao (que ja tem scroll pra esse caso) do jeito
   certo, e o padding-bottom continua valendo ate o fim do scroll. */
.tela-login .cartao-login form {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Campos no estilo "sublinhado" (sem caixa) do layout modelo: so uma linha
   embaixo, sem fundo nem borda nos outros lados. Fontes e espacamentos aqui
   usam calc(var(--lm) * fracao) em vez de rem/px fixos — medidos pixel a
   pixel no cartao do Rev02 (label, valor do campo, vao entre campos, vao
   antes do botao) e convertidos pra fracao da largura da moldura, do mesmo
   jeito que o padding do cartao logo acima. Isso faz o texto crescer junto
   com o cartao (em vez de ficar em tamanho fixo tipo rem/px), e reproduz a
   mesma hierarquia visual do modelo (rótulo pequeno, valor do campo bem
   maior). */
.tela-login .cartao-login label {
  font-size: calc(var(--lm) * 0.005647);
  color: var(--azul-petroleo);
  margin-bottom: calc(var(--lm) * 0.002998);
  display: block;
}
.tela-login .cartao-login input,
.tela-login .cartao-login select {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid var(--azul-petroleo);
  border-radius: 0;
  padding: 0 1px calc(var(--lm) * 0.001129);
  margin-bottom: calc(var(--lm) * 0.007445);
  font-size: calc(var(--lm) * 0.009715);
  font-weight: 600;
  color: var(--cor-texto);
}
/* Ultimo campo de cada grupo: vao maior antes do botao/link (88px vs 72px
   no modelo, medido no mesmo cartao) — e o que da aquele respiro final em
   vez de precisar de flex/space-between pra empurrar o botao pra baixo.
   (Nota: os 6 valores acima do bloco de campos foram reescalados ~13% pra
   baixo em relacao a medida bruta do pixel do modelo — o font-size sozinho
   nao inclui o "line-height" que o navegador adiciona por cima dele, entao
   reproduzir o pixel bruto como font-size fazia o conteudo real ficar maior
   do que o espaco medido entre o topo e o fim do cartao no modelo. Esse
   ajuste faz o total bater com o espaco disponivel de verdade.) */
.tela-login .cartao-login .campos > input:last-of-type,
.tela-login .cartao-login .campos > select:last-of-type {
  margin-bottom: calc(var(--lm) * 0.009099);
}
.tela-login .cartao-login input:focus,
.tela-login .cartao-login select:focus {
  outline: none;
  border-bottom-color: var(--laranja-eletrico);
}
.tela-login .cartao-login .erro { font-size: calc(var(--lm) * 0.004911); margin: 0 0 6px; }

/* Linha final: botao principal a esquerda, links empilhados a direita —
   mesma "linha de acao" em todas as telas (login, cadastro, recuperacao).
   Botao com padding+font-size (nao largura/altura fixas): o texto muda de
   tamanho de tela pra tela ("Entrar", "Enviar codigo", "Cadastrar"...), entao
   uma largura fixa cortava o texto de botoes com legenda mais longa. Os
   valores abaixo foram medidos no botao "Entrar" do modelo (271x96px, texto
   ~144x36px) e convertidos em padding (63.5px horizontal / 30px vertical de
   cada lado) — reproduz o mesmo tamanho pro "Entrar" e cresce
   proporcionalmente pros botoes com texto maior. */
.tela-login .linha-acoes {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 10px;
  margin-top: 0;
}
.tela-login .linha-acoes button[type="submit"] {
  width: auto;
  padding: calc(var(--lm) * 0.005894) calc(var(--lm) * 0.012442);
  font-size: calc(var(--lm) * 0.009626);
  white-space: nowrap;
}
.tela-login .links-empilhados {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--lm) * 0.005894);
}
.tela-login .links-empilhados button.link,
.tela-login .cartao-login button.link {
  background: none;
  border: none;
  padding: 0;
  color: var(--azul-petroleo);
  font-weight: 400;
  font-size: calc(var(--lm) * 0.005874);
  text-decoration: underline;
  cursor: pointer;
  text-align: right;
  white-space: nowrap;
}
.tela-login .links-empilhados button.link:hover,
.tela-login .cartao-login button.link:hover { color: var(--laranja-eletrico); background: none; }

/* Em telas bem estreitas (celular na vertical), a moldura acaba ficando
   pequena demais para o formulario caber sem rolar dentro do cartao — o que
   ja e coberto pelo overflow-y:auto acima, mas aumentamos um pouco a area
   util do cartao para não ficar apertado demais. */
@media (max-width: 640px) {
  .tela-login .cartao-login { padding: 4% 5%; }
}