/* ==================================================== A PELE DO NEXUM NO NIX
   Ordem do Diogo (16/08/2026): "leva TODO o nosso layout do chat pra dentro do
   Nix — está feio demais lá". O chat já era o nosso (11/08); o que nunca tinha
   recebido a nossa cara era o app EM VOLTA: a home, o menu, o login, as
   Configurações, Pendências, Rotinas, Painel e Usuários.

   POR QUE UM ARQUIVO À PARTE, e não editar o `<style>` do `_base.html`:
   1. nada se apaga — o desenho de julho continua inteiro embaixo, com os
      comentários que explicam cada decisão dele;
   2. a cara nova tem UM lugar (o mesmo motivo da paleta em `base.MARCA`);
   3. voltar atrás é tirar UMA linha de `<link>` do `_base.html`.

   O QUE ESTA FOLHA TROCA — a FORMA, não a MARCA:
   fonte (Poppins, a da casa), os neutros (fundo/superfície/linha/texto), os
   raios (18px), as sombras, o cabeçalho (deixa de ser uma barra sólida e vira
   cromo translúcido), a largura no PC (a tela inteira) e a barra de navegação
   de baixo no celular.
   O AZUL DA MARCA niX CONTINUA SENDO O AZUL DELA (`--acento`, que cada pessoa
   troca nas Configurações). Levar o navy do NEXUM pra cá seria trocar a marca
   da frota, e a marca dela são três cores: preto, branco e azul.

   ⚠️ NÃO MEXE NO CHAT. O chat tem folha própria (`nix-chat.css`), que é a cópia
   vestida da nossa e carrega DEPOIS desta. Aqui só entram o `.topo`, a
   `.gaveta`, o `main.wrap` e os componentes das telas de fora — nada de `.tp`,
   `.cv`, `.vista` e companhia.
   ========================================================================== */

/* ------------------------------------------------------------- a tipografia
   Poppins, arquivo local (nada de Google Fonts: fonte que vem de fora atrasa a
   primeira tela e vaza quem abriu o app pra um terceiro). Os pesos são os
   mesmos quatro que o app do Diogo usa — 300/400/500/600. */
@font-face{font-family:'Poppins';font-weight:300;font-display:swap;
           src:url('/static/fonts/poppins-300.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-weight:400;font-display:swap;
           src:url('/static/fonts/poppins-400.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-weight:500;font-display:swap;
           src:url('/static/fonts/poppins-500.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-weight:600;font-display:swap;
           src:url('/static/fonts/poppins-600.woff2') format('woff2')}

/* ------------------------------------------------------------------ os tons
   Os NEUTROS do NEXUM, encaixados nos nomes que o Nix já usa. Nenhum nome de
   variável nova pra tela nenhuma ter de mudar: quem pede `var(--surf)` continua
   pedindo `var(--surf)` e recebe o branco de lá.
   O ACENTO (`--acento`) e a MARCA (`--marca`) NÃO se tocam: são dela. */
:root{
  --fundo:#eceef1; --surf:#ffffff; --bolha:#f7f8fa;
  --linha:#e5e8ec; --linha-2:#d4d8dd;
  --texto:#0b0d10; --texto-2:#3a4048; --fraco:#6b7280;
  --raio:18px; --raio-sm:13px; --raio-lg:24px;
  --sombra:0 12px 30px rgba(20,30,55,.10);
  --sombra-sm:0 4px 16px rgba(20,30,55,.06);
  --barra-h:64px;
  /* a luz do fundo do NEXUM: dois brilhos MUITO diluídos da própria tinta do
     texto, que só tiram o chapado. Substitui o gradiente de julho, que clareava
     só a faixa de cima e deixava a tela com "cabeçalho de papel". */
  --app-bg:
    radial-gradient(1200px 640px at 110% -14%, color-mix(in srgb, var(--texto-2) 3%, transparent), transparent 62%),
    radial-gradient(1000px 560px at -12% 4%, color-mix(in srgb, var(--texto-2) 2.5%, transparent), transparent 60%),
    var(--fundo);
}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]){
    --fundo:#0a0b0d; --surf:#15181d; --bolha:#1b1f25;
    --linha:#262b32; --linha-2:#333a43;
    --texto:#f3f5f7; --texto-2:#bdc3cc; --fraco:#8b939d;
    --sombra:0 12px 30px rgba(0,0,0,.5);
    --sombra-sm:0 4px 16px rgba(0,0,0,.35);
    --app-bg:
      radial-gradient(1200px 620px at 110% -12%, color-mix(in srgb, var(--texto-2) 6%, transparent), transparent 58%),
      radial-gradient(1000px 560px at -12% 6%, color-mix(in srgb, var(--texto-2) 5%, transparent), transparent 55%),
      radial-gradient(900px 520px at 50% 122%, color-mix(in srgb, var(--texto-2) 4%, transparent), transparent 60%),
      var(--fundo);
  }
}
:root[data-tema="escuro"]{
  --fundo:#0a0b0d; --surf:#15181d; --bolha:#1b1f25;
  --linha:#262b32; --linha-2:#333a43;
  --texto:#f3f5f7; --texto-2:#bdc3cc; --fraco:#8b939d;
  --sombra:0 12px 30px rgba(0,0,0,.5);
  --sombra-sm:0 4px 16px rgba(0,0,0,.35);
  --app-bg:
    radial-gradient(1200px 620px at 110% -12%, color-mix(in srgb, var(--texto-2) 6%, transparent), transparent 58%),
    radial-gradient(1000px 560px at -12% 6%, color-mix(in srgb, var(--texto-2) 5%, transparent), transparent 55%),
    radial-gradient(900px 520px at 50% 122%, color-mix(in srgb, var(--texto-2) 4%, transparent), transparent 60%),
    var(--fundo);
}

/* A malha de pontos de julho SAI (o `body::after`): ela é do desenho antigo e,
   com a luz nova, vira sujeira em cima do branco. A luz continua no ::before. */
body::after{display:none}

/* A FONTE NÃO SE FORÇA AQUI. O `_base.html` monta o `font-family` com a fonte
   DELA (`tema.fonte`) — se esta folha carimbasse Poppins por cima, quem escolheu
   a sua letra nas Configurações perderia a escolha e não entenderia por quê.
   Quem virou o padrão pra Poppins foi `base.TEMA_PADRAO`: vale pra quem nunca
   mexeu (todo mundo, hoje) e respeita quem mexeu. */
body{font-weight:400;font-size:15px;line-height:1.55}

/* ------------------------------------------------------------------ o topo
   NO NEXUM O CABEÇALHO NÃO É UMA FAIXA DE COR — é a própria tela, translúcida,
   com desfoque por trás. A barra preta de 56px era o que dava ao Nix a cara de
   site: um bloco pesado, sempre lá, sem função nenhuma além de segurar o ☰.

   A cor DELA não se perde: quem trocou o topo nas Configurações continua com o
   topo dela (o `.topo` de sempre). O cromo translúcido é pra quem está no
   padrão — o template marca `topo-claro` só nesse caso. */
.topo.topo-claro{
  background:color-mix(in srgb, var(--surf) 72%, transparent);
  color:var(--texto);
  height:auto;min-height:var(--topo-h);
  padding:calc(env(safe-area-inset-top) + 10px) 16px 10px;
  border-bottom:1px solid color-mix(in srgb, var(--linha) 70%, transparent);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
}
/* a metade clara do X volta a acompanhar o texto (no topo escuro ela era branca) */
.topo.topo-claro .nix{--nix-1:var(--texto)}
.topo.topo-claro .hamburguer{color:var(--texto);font-size:23px;border-radius:11px}
.topo.topo-claro .hamburguer:hover{background:var(--bolha)}
.topo .marca{font-weight:600;font-size:18px;letter-spacing:-.2px}

/* ------------------------------------------------------------------ o corpo
   LARGURA CHEIA NO PC (regra da casa desde 16/08): teto em px + `margin:auto`
   centraliza e abre um vazio que cresce com o monitor — foi exatamente o que
   ele viu aqui ("feio demais"): uma coluna de 1000px no meio de 1512px de tela.
   Margem lateral FIXA, e o conteúdo respira o resto. */
body main.wrap{max-width:none;margin:0;padding:16px 18px 40px}
@media (min-width:880px){
  body main.wrap{padding:22px 32px 56px}
}

/* o cartão da casa */
.surf{background:var(--surf);border:1px solid var(--linha);border-radius:var(--raio);
      box-shadow:var(--sombra-sm);padding:18px;margin-bottom:14px}

/* O TÍTULO DA TELA NÃO MORA DENTRO DE UM CARTÃO. É a assinatura do app do Diogo:
   "Pendências" e a linha que explica ficam soltos no fundo, e o branco começa no
   conteúdo. Dentro do cartão, o título vira mais um bloco na pilha e a tela toda
   parece um formulário. Vale só pro PRIMEIRO bloco da tela (o cabeçalho); os
   cartões seguintes seguem cartões. */
main.wrap>.surf:first-child:has(>h1){background:none;border:0;box-shadow:none;
  padding:2px 2px 4px;margin-bottom:16px}
main.wrap>.surf:first-child:has(>h1)>h1{font-size:25px}
main.wrap>.surf:first-child:has(>h1)>.fraco{margin-bottom:14px;display:block}

h1{font-weight:600;font-size:25px;letter-spacing:-.5px;margin:0 0 4px}
h2{font-weight:600;font-size:16.5px;margin:0 0 10px}
.fraco{color:var(--fraco);font-size:13.5px}

/* ------------------------------------------------------------------ botões
   O botão do NEXUM tem VOLUME: um degradê de cima pra baixo no acento, canto de
   13px e uma sombra curta. O do Nix era chapado — é a peça que mais aparece em
   tela de formulário (Configurações, Pendências, Usuários). */
button,.botao{font-family:inherit;font-size:15.5px;font-weight:600;
  padding:13px 17px;border-radius:var(--raio-sm);border:0;color:#fff;
  background:linear-gradient(180deg, var(--acento),
             color-mix(in srgb, var(--acento) 78%, black));
  box-shadow:var(--sombra-sm);
  transition:transform .1s ease, filter .2s ease}
button:hover{filter:brightness(1.06);transform:none}
button:active{transform:scale(.98)}
button:disabled{opacity:.5;box-shadow:none}
button.apoio{background:linear-gradient(180deg, var(--texto-2), var(--texto));
             box-shadow:var(--sombra-sm)}
button.perigo{background:linear-gradient(180deg, var(--alerta),
              color-mix(in srgb, var(--alerta) 78%, black))}
button.fantasma{background:color-mix(in srgb, var(--acento) 12%, var(--surf));
  border:1px solid var(--linha-2);color:var(--acento);box-shadow:none}
button.fantasma:hover{background:color-mix(in srgb, var(--acento) 18%, var(--surf));
  filter:none}
/* BOTÃO QUE NÃO É BOTÃO. O ☰ e os itens da barra de baixo são `<button>` só por
   dentro (acessibilidade, teclado) — a regra de cima os vestiu de botão azul com
   sombra, e o ☰ apareceu dentro de uma caixinha cinza no cabeçalho. Aqui eles
   voltam a ser ícone puro. Regra que vale pra TODO botão precisa dizer de quem
   ela não fala. */
button.hamburguer,.barra button,.faixa-visita .fecha,.abas button{
  background:none;box-shadow:none;color:inherit}
button.hamburguer,.barra button,.faixa-visita .fecha{padding:6px 8px}
button.hamburguer:active,.barra button:active{transform:none}

/* ------------------------------------------------------------------ campos */
input,textarea,select{padding:13px 14px;border-radius:var(--raio-sm);
  border:1px solid var(--linha);background:var(--surf);color:var(--texto);
  font:inherit;transition:border-color .16s ease, box-shadow .16s ease}
input::placeholder,textarea::placeholder{color:var(--fraco)}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--acento);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--acento) 18%, transparent)}
/* A CAIXINHA DE MARCAR ERA A DO SISTEMA — cinza, quadrada, de tamanho de mouse.
   Numa lista de pendências ela é o elemento que a pessoa mais toca no celular. */
input[type=checkbox]{width:21px;height:21px;flex:0 0 auto;accent-color:var(--acento);
  border-radius:7px;cursor:pointer}

/* ------------------------------------------------------- listas e conteúdo */
.lista li{padding:13px 0;border-bottom:1px solid var(--linha);gap:13px}
.carregando{color:var(--fraco)}

/* CAMPO + BOTÃO NA MESMA LINHA, NO CELULAR, NÃO CABEM. A `.linha` é de flex e o
   botão não encolhe (por regra da casa, pra o rótulo não quebrar em três) — daí
   quem encolhe é o campo, e "O que precisa ser resolvido?" some no meio da
   palavra. Numa tela estreita eles empilham; o botão ocupa a linha toda, que é
   como o app do Diogo faz. */
@media (max-width:600px){
  /* `:not([type=checkbox])` porque a `.linha` também é usada como RÓTULO de caixa de
     marcar (o "Ativar avisos neste aparelho"): sem isto, a caixinha subia pra cima do
     texto, centralizada, e a linha virava um bloco torto. Empilhar só faz sentido
     quando o que está apertado é um campo de digitar. */
  .linha:has(>input:not([type=checkbox]),>textarea,>select){
    flex-direction:column;align-items:stretch}
  .linha:has(>input:not([type=checkbox]),>textarea,>select) button{width:100%}
}

/* ------------------------------------------------------------------ a gaveta
   Ela já era boa (a caixinha colorida do ícone é a mesma ideia do nosso menu).
   Só ganha os cantos e o vidro da casa. */
.gaveta{border-radius:0 var(--raio-lg) var(--raio-lg) 0;
        box-shadow:0 0 60px rgba(0,0,0,.28)}
.gaveta a{border-radius:var(--raio-sm)}

/* ============================================================== A BARRA DE
   BAIXO (celular) — a peça que mais faz "app" no NEXUM.
   Ela repete os primeiros itens do menu com ícone e rótulo, e o último botão
   abre a gaveta com o resto. Só no celular: no PC a gaveta dá conta e a barra
   comeria altura útil.
   Ela NÃO entra no chat: lá a tela é inteira do chat (o `.topo` some por CSS) e
   o rodapé próprio dele ocuparia o mesmo lugar. */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;
  height:calc(var(--barra-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:color-mix(in srgb, var(--surf) 82%, transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--linha);
  box-shadow:0 -6px 20px rgba(20,49,58,.05)}
.barra a,.barra button{flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;background:none;border:0;box-shadow:none;padding:0;
  color:var(--fraco);font-size:11.5px;font-weight:500;position:relative;
  border-radius:0;transition:color .16s ease}
.barra a svg,.barra button svg{width:23px;height:23px;display:block}
.barra a.aqui{color:var(--acento);font-weight:600}
.barra a.aqui::before{content:"";position:absolute;top:0;width:26px;height:3px;
  border-radius:0 0 4px 4px;background:var(--acento)}
@media (max-width:879px){
  .barra{display:flex}
  /* o conteúdo não pode terminar embaixo da barra */
  body main.wrap{padding-bottom:calc(var(--barra-h) + env(safe-area-inset-bottom) + 20px)}
}

/* ------------------------------------------------------- o aviso e o modal */
#aviso{border-radius:var(--raio-sm)}
.nxc-cx{border-radius:var(--raio);box-shadow:var(--sombra)}
.nxc-pe button{border-radius:11px}