/* ─────────────────────────────────────────────────────────────────────────
   Tokens, reset e tipografia.

   Azul como acento sobre fundo claro; menu escuro. A identidade da Villa
   (vinho) fica reservada ao PDF - aqui a linguagem é de ferramenta.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Acento */
  --azul: #2563eb;
  --azul-escuro: #1d4ed8;
  --azul-claro: #eff4ff;
  --azul-borda: #c7dbfe;

  /* Menu escuro.

     Azul-ardósia em vez do quase-preto: o tom anterior (#0f172a) pesava
     demais ao lado do conteúdo claro. Este mantém a família azul e continua
     com contraste de 15,9:1 contra o texto branco. */
  --escuro: #16213d;
  --escuro-alt: #22304f;
  --escuro-borda: #2b3a5c;
  --escuro-txt: #9aa8c4;
  --escuro-txt-forte: #f1f5f9;

  /* Neutros */
  --ground: #f7f8fa;
  --surface: #ffffff;
  --surface-alt: #f8fafc;
  --ink: #0f172a;
  --ink-soft: #475569;
  --ink-faint: #94a3b8;
  --rule: #e8ebf0;
  --rule-forte: #cbd5e1;

  /* Semânticas */
  --ok: #15803d;
  --ok-bg: #ecfdf3;
  --ok-borda: #abefc6;
  --aviso: #b54708;
  --aviso-bg: #fffaeb;
  --aviso-borda: #fedf89;
  --erro: #b42318;
  --erro-bg: #fef3f2;
  --erro-borda: #fecdca;
  --info: #175cd3;
  --info-bg: #eff8ff;
  --info-borda: #b2ddff;

  /* Tons dos ícones dos cartões */
  --icone-azul-bg: #eff4ff;
  --icone-verde-bg: #ecfdf3;
  --icone-ambar-bg: #fffaeb;
  --icone-roxo-bg: #f4f3ff;
  --icone-verde: #15803d;
  --icone-ambar: #dc9a06;
  --icone-roxo: #6938ef;
  --icone-rosa-bg: #fdf2f8;
  --icone-rosa: #be185d;
  /* brilho do fundo da tela de login */
  --brilho-login: #eef3ff;

  /* Medidas */
  --raio: 14px;
  --raio-p: 9px;
  /* Duas camadas: um traço rente à borda e uma sombra larga e suave. É o que
     dá o relevo discreto dos cartões sem escurecer a página. */
  --sombra: 0 1px 2px rgba(12,27,54,.05), 0 8px 24px -14px rgba(12,27,54,.14);
  --sombra-m: 0 4px 8px -2px rgba(16,24,40,.07), 0 2px 4px -2px rgba(16,24,40,.04);
  --sombra-g: 0 12px 16px -4px rgba(16,24,40,.08), 0 4px 6px -2px rgba(16,24,40,.03);
  --menu-largura: 234px;
  --barra-altura: 62px;   /* navegação inferior no celular */
}

/* ─────────────────────────────────────────────────────────────────────────
   Tema escuro

   Só os tokens mudam: nenhum componente precisa saber qual tema está ativo.
   Vale para a interface apenas - o PDF continua branco com a identidade da
   Villa, porque é documento oficial, vai impresso e assinado.

   Três estados possíveis:
     data-theme="escuro"  -> escolha explícita do usuário
     data-theme="claro"   -> escolha explícita, vence o sistema
     sem atributo         -> segue o sistema (prefers-color-scheme)

   Os valores foram conferidos: todos passam em contraste AA sobre a
   superfície escura (o menor é 4,5:1, no texto fraco).
   ───────────────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="claro"]) {
    --azul: #5b9bff;
    --azul-escuro: #7fb2ff;
    --azul-claro: #1b2a4a;
    --azul-borda: #2f4670;

    /* O menu deixa de destoar: no escuro ele é um pouco mais claro que o
       conteúdo, o contrário do que acontece no tema claro. */
    --escuro: #16213d;
    --escuro-alt: #22304f;
    --escuro-borda: #2b3a5c;
    --escuro-txt: #9aa8c4;
    --escuro-txt-forte: #f1f5f9;

    --ground: #0f172a;
    --surface: #1a2338;
    --surface-alt: #212c45;
    --ink: #e8edf7;
    --ink-soft: #a8b5cc;
    --ink-faint: #8794ae;
    --rule: #2a364f;
    --rule-forte: #3b4a68;

    --ok: #4ade80;
    --ok-bg: #10291c;
    --ok-borda: #1d5638;
    --aviso: #fbbf24;
    --aviso-bg: #2b2110;
    --aviso-borda: #5c451a;
    --erro: #f87171;
    --erro-bg: #2d1618;
    --erro-borda: #5e2a2c;
    --info: #60a5fa;
    --info-bg: #142339;
    --info-borda: #24466f;

    --icone-azul-bg: #1b2a4a;
    --icone-verde-bg: #10291c;
    --icone-ambar-bg: #2b2110;
    --icone-roxo-bg: #221c3d;
    --icone-verde: #4ade80;
    --icone-ambar: #fbbf24;
    --icone-roxo: #a78bfa;
    --icone-rosa-bg: #2e1626;
    --icone-rosa: #f9a8d4;
    --brilho-login: #1c2a47;

    /* A sombra some no escuro: no claro ela separa o cartão do fundo, aqui
       quem faz esse papel é a diferença entre --surface e --ground. */
    --sombra: 0 1px 2px rgba(0,0,0,.28);
    --sombra-m: 0 4px 10px rgba(0,0,0,.34);
    --sombra-g: 0 12px 28px rgba(0,0,0,.42);
  }
}

/* Escolha explícita do usuário: repete os mesmos valores fora da media
   query, para vencer o que o sistema diz. */
:root[data-theme="escuro"] {
  --azul: #5b9bff;
  --azul-escuro: #7fb2ff;
  --azul-claro: #1b2a4a;
  --azul-borda: #2f4670;

  --ground: #0f172a;
  --surface: #1a2338;
  --surface-alt: #212c45;
  --ink: #e8edf7;
  --ink-soft: #a8b5cc;
  --ink-faint: #8794ae;
  --rule: #2a364f;
  --rule-forte: #3b4a68;

  --ok: #4ade80;
  --ok-bg: #10291c;
  --ok-borda: #1d5638;
  --aviso: #fbbf24;
  --aviso-bg: #2b2110;
  --aviso-borda: #5c451a;
  --erro: #f87171;
  --erro-bg: #2d1618;
  --erro-borda: #5e2a2c;
  --info: #60a5fa;
  --info-bg: #142339;
  --info-borda: #24466f;

  --icone-azul-bg: #1b2a4a;
  --icone-verde-bg: #10291c;
  --icone-ambar-bg: #2b2110;
  --icone-roxo-bg: #221c3d;
  --icone-verde: #4ade80;
  --icone-ambar: #fbbf24;
  --icone-roxo: #a78bfa;
  --icone-rosa-bg: #2e1626;
  --icone-rosa: #f9a8d4;
  --brilho-login: #1c2a47;

  --sombra: 0 1px 2px rgba(0,0,0,.28);
  --sombra-m: 0 4px 10px rgba(0,0,0,.34);
  --sombra-g: 0 12px 28px rgba(0,0,0,.42);
}

/* Avisa o navegador para pintar de escuro o que ele desenha por conta
   própria: barra de rolagem, seletor nativo, autofill. */
:root[data-theme="escuro"] { color-scheme: dark; }
:root[data-theme="claro"] { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="claro"]) { color-scheme: dark; }
}


/* ─────────────────────────────────────────────────────────────────────────
   Plus Jakarta Sans, servida pelo próprio servidor.

   Embutida em vez de depender do sistema: a Inter não existe no Windows, e
   a página caía para Segoe UI - ou seja, o tipo mudava de máquina para
   máquina. Com o arquivo local o desenho é o mesmo em todo lugar.
   ───────────────────────────────────────────────────────────────────────── */
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 400; font-style: normal;
  font-display: swap; src: url('/fonts/pjs-400.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 500; font-style: normal;
  font-display: swap; src: url('/fonts/pjs-500.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 600; font-style: normal;
  font-display: swap; src: url('/fonts/pjs-600.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 700; font-style: normal;
  font-display: swap; src: url('/fonts/pjs-700.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 800; font-style: normal;
  font-display: swap; src: url('/fonts/pjs-800.woff2') format('woff2'); }

* { box-sizing: border-box; }

/* Sem o realce azul ao tocar ou segurar um elemento clicavel.
 *
 * Sao duas coisas com a mesma aparencia: o retangulo que o navegador desenha
 * no toque (tap-highlight) e o texto do rotulo ficando selecionado quando se
 * segura o mouse. Nossos botoes ja mostram :hover e :active.
 *
 * Vale no site e no app - antes so existia dentro do @media standalone.
 * Fora dos clicaveis o texto continua selecionavel: copiar um CNPJ ou uma
 * mensagem de erro precisa funcionar. */
* { -webkit-tap-highlight-color: transparent; }

button, .btn, a.btn, [role="button"],
.menu-item, .atalho, .alerta-item, .aba, .pagina-btn, .btn-pontos {
  -webkit-user-select: none;
  user-select: none;
}

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  /* 14px como base: a Plus Jakarta Sans desenha mais largo que a Inter no
     mesmo corpo, e a 15px os rótulos das tabelas começavam a quebrar. */
  font-size: 14px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.025em; text-wrap: balance; }
h1 { font-size: 25px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }

a { color: var(--azul); text-decoration: none; font-weight: 500; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 2px;
  border-radius: 3px;
}

.num { font-variant-numeric: tabular-nums; }
.oculto { display: none !important; }

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

[x-cloak] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ── Comportamento de app instalado ───────────────────────────────────────
 *
 * So no app (display-mode: standalone); no navegador nada muda. Tira o que
 * denuncia "pagina web" dentro de um app: selecao ao segurar, menu de
 * contexto, zoom por duplo toque.
 *
 * A PINCA CONTINUA FUNCIONANDO: quem tem baixa visao depende dela para ler um
 * CNPJ, e num sistema fiscal ler numero errado tem consequencia. */
@media (display-mode: standalone) {
  body {
    /* Nada de selecionar texto ao segurar */
    -webkit-user-select: none;
    user-select: none;

    /* Sem o balaozinho de "copiar/pesquisar" no toque longo (iOS) */
    -webkit-touch-callout: none;

    /* Sem o retangulo azul que pisca ao tocar num botao (Android) */
    -webkit-tap-highlight-color: transparent;
  }

  /* manipulation: rola e amplia, mas ignora o duplo toque. */
  body, .conteudo, .menu, .barra {
    touch-action: manipulation;
  }

  /* Campo sem selecao vira campo que nao da para corrigir. */
  input, textarea, select, [contenteditable] {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
  }

  /* CNPJ, valores e mensagens precisam continuar copiaveis. */
  .selecionavel,
  .erro, .aviso, .alerta, .ok, .info, .nota,
  td, .cnpj, .valor, code {
    -webkit-user-select: text;
    user-select: text;
  }
}