/* =============================================================================
   TUON — Sistema de design
   -----------------------------------------------------------------------------
   Fonte da verdade para cor, tipografia, espaço e ritmo. Site institucional,
   portal do cliente e painel da TUON bebem daqui.

   Origem das escolhas:
   · O marrom e o marrom escuro saem do SVG oficial do logo. O bege e o quase-preto
     vêm do painel que a TUON já usa na planilha (#F4F1EC, #2B2B2B) — o sistema não
     inventa uma identidade nova, formaliza a que já existe.
     (O marrom da planilha, #8A6D52, foi descartado: é o mesmo tom desbotado e
     rende menos contraste que o oficial.)
   · Tipografia alinhada ao PROJETEI, o sistema de marcenaria da TUON:
     Fraunces (títulos), IBM Plex Sans (corpo), IBM Plex Mono (dados).
     Um ecossistema inteiro com a mesma voz.
   · Raios de canto pequenos (2–4px). A marca é um quadrado duro; cartão
     arredondado brigaria com ela.
   ========================================================================== */

@import url('../fonts/fonts.css');

/* -----------------------------------------------------------------------------
   v1.0443 (lote 1 do conselho) — UM VALOR, UM DONO.
   Nove tokens tinham EXATAMENTE o mesmo hexadecimal de outro. Dois nomes para a
   mesma tinta significa trocar em dois lugares (e um dia esquecer um). O dono do
   valor é quem está escrito com o hex; o outro passa a apontar para ele com
   var(). A cor na tela é a mesma — o que some é a cópia.
   Regra pra frente: se a cor nova já existe, use o token que existe ou crie um
   APELIDO; nunca repita o hexadecimal.
   -------------------------------------------------------------------------- */

:root {

  /* ---------------------------------------------------------------- cor */

  /* Tinta — preto quente, nunca cinza puro */
  --tuon-ink:        #1A1917;
  --tuon-ink-2:      #3B362E;
  --tuon-muted:      #5D564A; /* 6.2:1 sobre o papel */
  --tuon-faint:      #7E7466; /* placeholder e apoio: 4.6:1 sobre branco */

  /* Superfícies */
  --tuon-paper:      #F5F2EC;
  --tuon-surface:    #FFFFFF;
  --tuon-sand:       #E9E2D6;

  /* v1.0377 - o fundo de TODO box em que se digita (input, textarea, select).
     Branco sobre cartao branco nao dizia o que era campo e o que era texto:
     um tom de papel a menos resolve sem pesar. Muda aqui, muda no sistema. */
  --campo-fundo:     var(--tuon-wood-wash); /* apelido — o campo é o wash da madeira */
  --campo-borda:     rgba(140, 98, 58, 0.34);
  --tuon-line:       #DCD4C5;
  --tuon-line-soft:  #EBE5D9;

  /* Madeira — o acento da marca.
     Os dois primeiros saem do SVG oficial do logo (#8C623A e #764E23), não da
     planilha. O tom da planilha (#8A6D52) era mais acinzentado e rendia menos
     contraste: 4.78:1 no branco contra 5.35:1 do oficial. */
  --tuon-wood:       #8C623A;
  --tuon-wood-deep:  #764E23;
  --tuon-wood-soft:  #B08A63;
  --tuon-wood-luz:   #C89B6E; /* acentos sobre fundo escuro: 6.6:1 no block */
  --tuon-wood-wash:  #F2E9DE;

  /* Bloco — o quadrado preto do logo, usado como âncora estrutural */
  --tuon-block:      var(--tuon-ink);   /* apelido — o quadrado é a mesma tinta */
  --tuon-block-ink:  var(--tuon-paper); /* apelido */

  /* ------------------------------------------------- etapas do pedido
     Uma cor por etapa da linha do tempo. Produção fica com a madeira:
     é o coração do processo e merece a cor da marca. */

  /* Texto das etapas: todos com contraste >= 4.5:1 sobre o próprio wash. */
  --et-pedido:       var(--tuon-muted); /* era #5C554A: 2 pontos em 255 do muted */
  --et-medicao:      #0E5E94;
  --et-projeto:      #5347AE;
  --et-aprovacao:    var(--ui-alerta);
  --et-producao:     #7B5430;
  --et-instalacao:   #0A6E82;
  --et-concluido:    #20714B;

  --et-pedido-w:     #ECEAE6;
  --et-medicao-w:    var(--ui-info-w);
  --et-projeto-w:    #E8E5F7;
  --et-aprovacao-w:  var(--ui-alerta-w);
  --et-producao-w:   var(--tuon-wood-wash);
  --et-instalacao-w: #DCF0F4;
  --et-concluido-w:  var(--ui-ok-w);

  /* Estados fora da linha do tempo */
  --st-cancelado:    var(--ui-erro);
  --st-cancelado-w:  var(--ui-erro-w);
  --st-pausado:      #6E675D;
  --st-pausado-w:    #EFEBE4;

  /* Semânticos de interface (separados das etapas, de propósito) */
  --ui-ok:           #2E8F60;
  --ui-ok-w:         #E2F0E8;
  --ui-ok-ink:       #1E6B48; /* texto pequeno sobre o wash: 4.9:1 (AA) */
  --ui-alerta:       #8A6208;
  --ui-alerta-w:     #F7EDD4;
  --ui-alerta-ink:   #7A5A0B;
  --ui-erro:         #A93524;
  --ui-erro-deep:    #7A2619; /* variante escura, mesmo espírito de --tuon-wood-deep */
  --ui-erro-w:       #F8E3DF;
  --ui-info:         #1476B8;
  --ui-info-w:       #DFEDF8;

  /* ---------------------------------------------------------------- tipo */

  --f-display: Fraunces, Georgia, 'Times New Roman', serif;
  --f-texto:   'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-dados:   'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;
  /* v1.0384 - a fonte da MARCA: geometrica monolinear, O circular, terminais
     retos - o mesmo desenho do monograma TUON. So no wordmark. */
  --f-marca:   'Jost', 'Futura', 'Century Gothic', var(--f-texto);

  /* v1.0445 — os dois degraus MICRO. O painel sempre usou 8,5 / 9 / 9,5 / 10 /
     10,5px em etiqueta mono maiuscula, um registro que a escala nao tinha —
     entao cada tela inventava o seu meio pixel. Agora existem e sao dois. */
  --t-3xs:   0.5625rem;  /* 9px   — carimbo mono, o menor legivel */
  --t-2xs:   0.625rem;   /* 10px  — etiqueta mono maiuscula */
  --t-xs:    0.75rem;    /* 12px  — etiquetas, legendas */
  --t-sm:    0.845rem;   /* 13.5  — apoio, metadados */
  --t-base:  1rem;       /* 16    — corpo */
  --t-md:    1.125rem;   /* 18    — corpo destacado */
  --t-lg:    1.3125rem;  /* 21    — subtítulo */
  --t-xl:    1.625rem;   /* 26    — h3 */
  --t-2xl:   2.0625rem;  /* 33    — h2 */
  --t-3xl:   2.625rem;   /* 42    — h1 interno */

  --p-leve:    300;
  --p-normal:  400;
  --p-display: 470; /* display grande (hero, índice de serviços) */
  --p-medio:   500;
  --p-titulo:  560; /* títulos de seção */
  --p-forte:   600;

  --l-titulo:   1.18;
  --l-normal:   1.62;

  --k-titulo:  -0.01em;
  --k-etiqueta: 0.14em;

  /* ---------------------------------------------------------------- espaço */

  --e-1:  0.25rem;
  --e-2:  0.5rem;
  --e-3:  0.75rem;
  --e-4:  1rem;
  --e-5:  1.5rem;
  --e-6:  2rem;
  --e-7:  2.75rem;
  --e-8:  4rem;
  --e-9:  6rem;
  --e-10: 8rem;

  --largura-conteudo: 1180px;
  --largura-texto:    68ch;

  /* ---------------------------------------------------------------- forma */

  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;
  --r-xl: 20px;    /* folha e gaveta — a unica curva grande do sistema */
  --r-cheio: 999px;

  /* v1.0445 — as DUAS superficies do painel, e nenhuma outra.
     CARTAO = contêiner de primeiro nivel (o cartao da Visao: vidro, canto 8).
     PECA   = bloco DENTRO de um cartao (item, linha, ficha): papel, canto 4,
     sombra minima. Um cartao dentro de outro cartao nao existe. */
  --cartao-fundo:  var(--vidro-fundo-alto);
  --cartao-borda:  1px solid var(--vidro-borda);
  --cartao-raio:   var(--r-lg);
  --peca-fundo:    var(--tuon-surface);
  --peca-borda:    1px solid var(--tuon-line);
  --peca-raio:     var(--r-md);

  --s-1: 0 1px 2px rgba(26, 25, 23, 0.05);
  --s-2: 0 1px 2px rgba(26, 25, 23, 0.05), 0 8px 22px -14px rgba(26, 25, 23, 0.30);
  --s-3: 0 2px 4px rgba(26, 25, 23, 0.06), 0 20px 45px -22px rgba(26, 25, 23, 0.38);
  /* sombra de cartão do painel: presença sutil, à Stripe/Notion */
  --s-card: 0 1px 2px rgba(26, 25, 23, 0.04), 0 6px 16px -10px rgba(26, 25, 23, 0.14);

  /* ---------------------------------------------------------------- vidro
     Superfície fosca translúcida (estilo Apple glass) usada no painel.
     Tom quente — deriva do papel da marca, não do vidro azul genérico.
     Cai para sólido em prefers-reduced-transparency (bloco lá embaixo). */
  --vidro-fundo:      rgba(255, 253, 249, 0.66);
  --vidro-fundo-alto: rgba(255, 253, 249, 0.82);
  --vidro-borda:      rgba(255, 255, 255, 0.55);
  --vidro-borda-b:    rgba(26, 25, 23, 0.07);
  --vidro-brilho:     inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --vidro-desfoque:   saturate(180%) blur(20px);
  --vidro-desfoque-2: saturate(160%) blur(11px);
  --vidro-sombra:     0 1px 2px rgba(26, 25, 23, 0.05), 0 14px 34px -16px rgba(74, 51, 28, 0.30);
  /* vidro escuro — topo e navegação (o bloco preto da marca, translúcido) */
  --vidro-escuro:     rgba(24, 22, 20, 0.72);
  --vidro-escuro-brd: rgba(245, 242, 236, 0.10);

  /* ---------------------------------------------------------------- toque
     A funcionária usa o painel em pé, na fábrica, às vezes com uma mão só.
     Nenhum controle do painel fica abaixo disto. */

  --toque-min: 48px;
  --toque-conforto: 56px;
  /* v1.0443 — o COMPACTO. Decisão do Saulo (08/09): a tela do Financeiro é
     usada sentado, no mouse, com muitas ações por linha; ali botão de 48px é
     exagero. Então existem DOIS tamanhos no sistema inteiro e mais nenhum:
     --toque-min (ação principal e telas de fábrica) e este, para ação inline
     dentro de linha de lista. Nada de 28, 30, 34, 38, 40 ou 42px soltos. */
  --toque-compacto: 36px;

  /* ---------------------------------------------------------------- movimento */

  --m-rapido: 120ms;
  --m-normal: 220ms;
  --m-lento:  420ms;
  --m-curva:  cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --m-rapido: 0ms;
    --m-normal: 0ms;
    --m-lento:  0ms;
  }
}

/* Quem pede menos transparência recebe superfícies sólidas — o vidro some,
   a legibilidade e a hierarquia continuam idênticas. */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --vidro-fundo:      var(--tuon-surface);
    --vidro-fundo-alto: var(--tuon-surface);
    --vidro-borda:      var(--tuon-line);
    --vidro-desfoque:   none;
    --vidro-desfoque-2: none;
    --vidro-escuro:     var(--tuon-block);
  }
}

/* =============================================================================
   Base
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent; /* o toque responde via :active, não flash cinza */
  scroll-padding-top: 88px; /* âncoras não somem sob header fixo */
}

body {
  margin: 0;
  background: var(--tuon-paper);
  color: var(--tuon-ink);
  font-family: var(--f-texto);
  font-size: var(--t-base);
  line-height: var(--l-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: var(--p-medio);
  font-optical-sizing: auto; /* Fraunces ajusta o desenho ao corpo */
  line-height: var(--l-titulo);
  letter-spacing: var(--k-titulo);
  text-wrap: balance;
}

p { margin: 0; max-width: var(--largura-texto); }

a { color: var(--tuon-wood-deep); text-underline-offset: 0.18em; }

img, svg, video { max-width: 100%; height: auto; display: block; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--tuon-wood);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Números que se alinham em coluna. Vale para toda tabela e todo valor. */
.tabular,
td, th,
.dados { font-variant-numeric: tabular-nums; }

/* =============================================================================
   Utilitários mínimos
   ========================================================================== */

.tuon-dados { font-family: var(--f-dados); font-variant-numeric: tabular-nums; }

.tuon-etiqueta {
  font-family: var(--f-dados);
  font-size: var(--t-xs);
  font-weight: var(--p-medio);
  letter-spacing: var(--k-etiqueta);
  text-transform: uppercase;
  color: var(--tuon-wood);
}

.tuon-conteudo {
  width: 100%;
  max-width: var(--largura-conteudo);
  margin-inline: auto;
  padding-inline: var(--e-5);
}

@media (max-width: 640px) {
  .tuon-conteudo { padding-inline: var(--e-4); }
}

/* Conteúdo largo (tabela, diagrama) rola dentro de si, nunca no corpo da página. */
.tuon-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.tuon-so-leitor {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Skip link aparece quando recebe foco de teclado. */
a.tuon-so-leitor:focus-visible {
  width: auto; height: auto;
  clip-path: none;
  margin: 0;
  position: fixed;
  top: 8px; left: 8px;
  z-index: 100;
  padding: var(--e-3) var(--e-4);
  background: var(--tuon-block);
  color: var(--tuon-block-ink);
  border-radius: var(--r-sm);
}

/* v1.0650 · Login Editorial — tokens próprios, sem alterar as telas do painel. */
:root {
  --login-largura: 900px;
  --login-largura-mobile: 430px;
  --login-colunas: .87fr 1fr;
  --login-respiro: 3rem;
  --login-logo: 88px;
  --login-logo-mobile: 64px;
  --login-titulo: 3rem;
  --login-titulo-mobile: 1.5rem;
  --login-mobile-tracking: .08em;
  --login-biometria-altura: 64px;
  --login-entrada-tempo: 540ms;
  --login-painel: radial-gradient(ellipse at 0% 0%, #65503a 0%, transparent 65%), linear-gradient(155deg, #30261f, #201c19 70%);
  --login-papel: #fffdf9;
  --login-champagne: #e5c597;
  --login-texto-suave: #d1c4b3;
  --login-borda-luz: rgba(255,255,255,.22);
  --login-sombra: 0 32px 90px -25px rgba(0,0,0,.6);
  --login-foto-sombra: linear-gradient(180deg, rgba(20,18,16,.58), rgba(18,16,14,.72));
}

/* v1.0652 · Acabamento Editorial: café, champanhe e marfim. */
:root {
  --login-altura-desktop: 660px;
  --login-metal: linear-gradient(110deg, #8e6842, #e5c597 42%, #987047 75%, #cfaf83);
  --login-filete: rgba(229,197,151,.3);
  --login-entalhe: rgba(229,197,151,.19);
  --login-relevo: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 24px rgba(0,0,0,.2);
  --login-campo: #faf7f2;
  --login-campo-borda: #d7ccbe;
  --login-botao: linear-gradient(115deg, #3e3025, #69492f);
  --login-botao-hover: linear-gradient(115deg, #523c29, #795331);
  --login-citacao-fundo: linear-gradient(110deg, rgba(229,197,151,.07), transparent);
  --login-trama: repeating-linear-gradient(90deg, transparent 0 7px, rgba(229,197,151,.035) 7px 8px);
  --login-arco-largura: 230px;
  --login-arco-altura: 440px;
  --login-acesso-luz: radial-gradient(ellipse at 100% 0, #f4ecdf, transparent 65%);
}

/* v1.0654 · Placa Marfim do aviso desktop. */
:root {
  --aviso-versao-x: 252px;
  --aviso-versao-y: 7px;
  --aviso-versao-largura: 320px;
  --aviso-versao-altura: 40px;
  --aviso-versao-fundo: linear-gradient(110deg, #fffdf8, #f3e9da);
  --aviso-versao-hover: linear-gradient(110deg, #fffefa, #ecdbc1);
  --aviso-versao-borda: #c9ad85;
  --aviso-versao-metal: linear-gradient(180deg, #8f6539, #ebd6b4 45%, #ad8453);
  --aviso-versao-sombra: 0 3px 12px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.9);
}

/* v1.0656 · Sinal de atualização disponível. */
:root {
  --aviso-versao-verde: #25834b;
  --aviso-versao-halo: rgba(45,168,91,.32);
  --aviso-versao-pulso: 2.4s;
}

/* v1.0657 · Ateliê da Visão e privacidade da topbar. */
:root {
  --atelie-colunas: minmax(220px,.85fr) minmax(0,1.75fr);
  --atelie-busca-max: 460px;
  --atelie-arco: 200px;
  --atelie-resultados-altura: min(55dvh,420px);
  --atelie-grafico-largura: 70px;
  --atelie-grafico-altura: 38px;
  --atelie-celula: rgba(255,255,255,.045);
  --atelie-borda: rgba(229,197,151,.25);
  --atelie-luz: rgba(229,197,151,.13);
}

/* v1.0659 · Série diária do Pulso. */
:root { --atelie-pulso-serie-altura: 64px; }

/* v1.0662 · Pulso horizontal no desktop. */
:root { --atelie-pulso-desktop-altura: 52px; }

:root { --privacidade-icone: 1.375rem; --privacidade-desfoque: clamp(6px, .42em, 10px); }

/* Cabeçalho único dos cartões do painel — referência Central de Atenção. */
:root {--cab-espaco:.22em;--cab-legenda-espaco:.14em;--cab-filete-largura:260px;--cab-filete-altura:7px;--cab-filete-traco:1px;}

/* Assinatura editorial dos relatórios — dimensões compactas para A4. */
:root {--assinatura-logo:28px;--assinatura-marca:20px;--assinatura-submarca:7px;--assinatura-contato:9px;--assinatura-linha:1.4;--assinatura-espaco:.2em;--assinatura-acento:36px;}

:root {--pdf-dialogo-largura:26rem;--pdf-foco:2px;}

/* v1.0684 — documentos financeiros: medidas para papel e tela. */
:root {
 --fin-logo: 48px; --fin-titulo: 26px; --fin-titulo-papel: 23px;
 --fin-marca: 15px; --fin-dado-papel: 11px; --fin-nome-papel: 12px;
 --fin-nota-papel: 10px; --fin-respiro: 4mm;
 --fin-row-y: 2.5mm; --fin-num-col: 29mm; --fin-pct-col: 12mm;
 --fin-mes-altura: 7px; --fin-papel-secao: 18px;
 --fin-cab-data: 24mm; --fin-cab-valor: 29mm;
 --fin-extrato-data: 19mm; --fin-extrato-valor: 25mm; --fin-extrato-fonte: 10.5px;
}