/* ==========================================================================
   Lette - sistema de design
   --------------------------------------------------------------------------
   Interface quase monocromatica. A cor nao decora: ela informa. Verde,
   ambar, vermelho e azul aparecem so em selo de situacao e em mensagem;
   todo o resto e' tinta sobre papel, separado por fios de 1px em vez de
   caixas dentro de caixas.

   A acao principal e' um botao quase preto. A unica cor de marca na tela e'
   o proprio logotipo, que fica sendo o unico ponto quente da pagina.

   Um arquivo so, sem processo de build: o servidor e' um MAMP, entao o CSS
   tem de funcionar tal como esta.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. tokens */

:root {
  /* Faz o navegador desenhar barras de rolagem, campos e menus nativos no
     tom certo. Sem isto, no tema escuro eles continuam claros. */
  color-scheme: light;

  /* papel e tinta */
  --ground:      #FAFAFA;
  --surface:     #FFFFFF;
  --surface-2:   #F4F4F5;
  --surface-3:   #ECECEE;
  --line:        #E8E8EB;
  --line-forte:  #D6D6DB;

  --ink:         #131316;
  --ink-2:       #55555E;
  /* Texto secundario e cabecalho de tabela usam este tom. Escurecido ate
     passar 4.5:1 sobre o branco, que e' o minimo da WCAG AA para texto
     pequeno -- e aqui ele aparece em 12px maiusculo. */
  --ink-3:       #71717A;

  /* acao */
  --acao:        #18181C;
  --acao-hover:  #313138;
  --acao-texto:  #FFFFFF;
  --foco:        #131316;
  --foco-halo:   rgba(19, 19, 22, .10);

  /* estado */
  --ok:          #17683F;
  --ok-suave:    #E6F2EA;
  --erro:        #A32A22;
  --erro-suave:  #FAE9E7;
  --aviso:       #8A5712;
  --aviso-suave: #F8EEDD;
  --info:        #2B5091;
  --info-suave:  #E7EDF7;

  /* tipografia */
  --f-ui:    "Schibsted Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-dado:  "DM Mono", "Consolas", ui-monospace, monospace;

  --t-xs:   0.75rem;
  --t-sm:   0.8125rem;
  --t-base: 0.9375rem;
  --t-md:   1.0625rem;
  --t-lg:   1.3125rem;
  --t-xl:   1.75rem;

  /* medidas */
  --r:      6px;
  --r-sm:   4px;
  --e1:     0.25rem;
  --e2:     0.5rem;
  --e3:     0.75rem;
  --e4:     1rem;
  --e5:     1.5rem;
  --e6:     2rem;
  --e7:     3.5rem;

  --sombra:      0 1px 2px rgba(19, 19, 22, .04);
  --sombra-alta: 0 8px 28px rgba(19, 19, 22, .10), 0 2px 6px rgba(19, 19, 22, .05);

  --largura-nav: 236px;
  --altura-topo: 60px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;

    --ground:      #0E0E10;
    --surface:     #17171A;
    --surface-2:   #1E1E22;
    --surface-3:   #26262B;
    --line:        #26262B;
    --line-forte:  #36363D;

    --ink:         #F2F2F4;
    --ink-2:       #A9A9B3;
    --ink-3:       #85858F;

    --acao:        #F2F2F4;
    --acao-hover:  #FFFFFF;
    --acao-texto:  #131316;
    --foco:        #F2F2F4;
    --foco-halo:   rgba(242, 242, 244, .14);

    --ok:          #62C795;
    --ok-suave:    #12291E;
    --erro:        #F58F84;
    --erro-suave:  #2E1815;
    --aviso:       #DFAA5E;
    --aviso-suave: #2C2213;
    --info:        #8DB0E6;
    --info-suave:  #16202F;

    --sombra:      0 1px 2px rgba(0, 0, 0, .5);
    --sombra-alta: 0 10px 32px rgba(0, 0, 0, .6);
  }

  /* Placa clara atras do logotipo, para o "ette" preto nao sumir no escuro. */
  :root:not([data-tema="claro"]) .marca-placa {
    background: #FFFFFF;
    padding: 5px 9px;
  }
}

:root[data-tema="claro"] { color-scheme: light; }

:root[data-tema="escuro"] {
  color-scheme: dark;

  --ground:      #0E0E10;
  --surface:     #17171A;
  --surface-2:   #1E1E22;
  --surface-3:   #26262B;
  --line:        #26262B;
  --line-forte:  #36363D;

  --ink:         #F2F2F4;
  --ink-2:       #A9A9B3;
  --ink-3:       #85858F;

  --acao:        #F2F2F4;
  --acao-hover:  #FFFFFF;
  --acao-texto:  #131316;
  --foco:        #F2F2F4;
  --foco-halo:   rgba(242, 242, 244, .14);

  --ok:          #62C795;
  --ok-suave:    #12291E;
  --erro:        #F58F84;
  --erro-suave:  #2E1815;
  --aviso:       #DFAA5E;
  --aviso-suave: #2C2213;
  --info:        #8DB0E6;
  --info-suave:  #16202F;

  --sombra:      0 1px 2px rgba(0, 0, 0, .5);
  --sombra-alta: 0 10px 32px rgba(0, 0, 0, .6);
}

/* Placa clara atras do logotipo, para o "ette" preto nao sumir no escuro. */
:root[data-tema="escuro"] .marca-placa {
  background: #FFFFFF;
  padding: 5px 9px;
}

/* ------------------------------------------------------------------ 2. base */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-ui);
  font-size: var(--t-base);
  line-height: 1.55;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
h1 { font-size: var(--t-xl); letter-spacing: -0.028em; line-height: 1.15; }
h2 { font-size: var(--t-lg); }
h3 { font-size: var(--t-md); }

p { margin: 0 0 var(--e3); max-width: 68ch; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line-forte);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color .12s;
}
a:hover { text-decoration-color: currentColor; }

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

img { max-width: 100%; height: auto; }

/* Numeros, codigos e precos: largura fixa para alinharem em coluna. */
.dado, td.dado, .num {
  font-family: var(--f-dado);
  font-variant-numeric: tabular-nums;
  font-size: 0.875em;
  letter-spacing: -0.01em;
}

.rotulo {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

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

/* ------------------------------------------------------------- 3. estrutura */

.app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--largura-nav) 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "topo topo"
    "nav  main";
}

.topo {
  grid-area: topo;
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.topo-barra {
  height: var(--altura-topo);
  padding: 0 var(--e5);
  display: flex;
  align-items: center;
  gap: var(--e4);
}

.topo-logo {
  display: flex;
  align-items: center;
  gap: var(--e3);
  text-decoration: none;
  color: var(--ink);
}
.topo-logo img { height: 32px; width: auto; display: block; }

/* O logotipo tem fundo transparente e a palavra "ette" em preto, entao no
   tema escuro ele sumiria. A placa clara abaixo mantem a marca legivel sem
   alterar o arquivo. */
.marca-placa {
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-sm);
  padding: 0;
}

.marca-sub {
  font-family: var(--f-ui);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-left: 1px solid var(--line);
  padding-left: var(--e3);
}
@media (max-width: 620px) { .marca-sub { display: none; } }

.topo-espaco { flex: 1; }

.topo-usuario {
  display: flex;
  align-items: center;
  gap: var(--e3);
  font-size: var(--t-sm);
  color: var(--ink-2);
  min-width: 0;
}
.topo-usuario strong { color: var(--ink); font-weight: 500; }

.nav {
  grid-area: nav;
  background: var(--ground);
  border-right: 1px solid var(--line);
  padding: var(--e5) var(--e3) var(--e6);
}

.nav-grupo + .nav-grupo { margin-top: var(--e5); }
.nav-titulo {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 0 var(--e3);
  margin: 0 0 var(--e2);
}

.nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

.nav a {
  display: block;
  padding: 0.4375rem var(--e3);
  border-radius: var(--r-sm);
  color: var(--ink-2);
  text-decoration: none;
  font-size: var(--t-base);
}
.nav a:hover { background: var(--surface-2); color: var(--ink); }
.nav a[aria-current="page"] {
  background: var(--surface-3);
  color: var(--ink);
  font-weight: 500;
}

/* A coluna do conteudo distribui a altura que o grid da: o corpo cresce e o
   rodape desce junto com ele. Numa tela curta -- o painel, por exemplo -- sem
   isto o rodape ficava logo abaixo dos cartoes, no meio da pagina. */
.main {
  grid-area: main;
  padding: var(--e6) var(--e5) var(--e7);
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.conteudo {
  max-width: 1120px;
  width: 100%;
  margin: 0 auto;
  flex: 1;
  display: flex;
  flex-direction: column;
}
/* flex-grow empurra o rodape; flex-shrink 0 impede que o corpo encolha e
   sobreponha o conteudo quando a pagina e' mais alta que a tela. */
.conteudo-corpo { flex: 1 0 auto; min-width: 0; }

.pagina-topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--e3);
  margin-bottom: var(--e5);
}
.pagina-topo .rotulo { display: block; margin-bottom: var(--e1); }

/* ---------------------------------------------------------------- 4. cartao */

.cartao {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sombra);
}

/* Nao existe regra ".cartao + .cartao { margin-top }" de proposito.
   Ela valia para cartoes empilhados, mas tambem pegava os cartoes dentro de
   .grade: no painel inicial, o segundo e o terceiro cartao ganhavam 16px de
   margem, desciam essa altura e ficavam mais baixos que o primeiro, que nao
   tinha margem nenhuma. O espaco entre cartoes empilhados vem de quem os
   empilha; dentro de .grade, vem do gap. */

.cartao-cabeca {
  padding: var(--e4) var(--e5);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  flex-wrap: wrap;
}
.cartao-cabeca h2, .cartao-cabeca h3 { font-size: var(--t-md); }

.cartao-corpo { padding: var(--e5); }
.cartao-pe {
  padding: var(--e4) var(--e5);
  border-top: 1px solid var(--line);
  display: flex;
  gap: var(--e2);
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
}

.grade {
  display: grid;
  gap: var(--e4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* ------------------------------------------------------------------- ficha
   Cabecalho de um documento: os campos em blocos lado a lado, e o dinheiro
   separado a direita. Substitui a lista vertical de rotulo/valor, que numa
   ficha com dez campos vira uma coluna comprida de texto em que nada salta. */
.ficha {
  display: grid;
  gap: var(--e4);
  grid-template-columns: minmax(0, 2fr) minmax(14rem, 1fr);
  padding: var(--e5);
}

/* A largura minima sai do campo mais comprido que aparece nestas fichas: o
   CNPJ, com 18 caracteres na fonte de dados. Com menos que isso ele quebra no
   meio do numero, e numero quebrado ao meio se le errado. */
.ficha-campos {
  display: grid;
  gap: var(--e3);
  grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
  align-content: start;
  margin: 0;
}

.ficha-campo {
  margin: 0;
  padding: var(--e3) var(--e4);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  min-width: 0;
}
/* O cliente ocupa a faixa inteira: e' o nome mais comprido da ficha. */
.ficha-campo.largo { grid-column: 1 / -1; }

.ficha-campo dt {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.125rem;
}
.ficha-campo dd {
  margin: 0;
  font-size: var(--t-base);
  overflow-wrap: anywhere;
}
.ficha-campo dd.dado { font-family: var(--f-dado); font-variant-numeric: tabular-nums; }
.ficha-campo dd.forte { font-weight: 600; font-size: var(--t-md); }

/* Coluna do dinheiro. */
.ficha-soma {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  padding: var(--e4);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  align-self: start;
}
.ficha-soma-linha {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--e3);
  font-size: var(--t-sm);
  color: var(--ink-2);
}
.ficha-soma-linha .valor {
  font-family: var(--f-dado);
  font-variant-numeric: tabular-nums;
}
.ficha-soma-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--e3);
  padding-top: var(--e3);
  border-top: 1px solid var(--line-forte);
}
.ficha-soma-total .rotulo { font-size: var(--t-base); }
.ficha-soma-total .valor {
  font-family: var(--f-dado);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-lg);
  font-weight: 600;
}

/* Numa tela estreita o dinheiro desce para baixo dos campos. */
@media (max-width: 720px) {
  .ficha { grid-template-columns: 1fr; padding: var(--e4); }
}

/* --------------------------------------------------------------- 5. tabelas */

.tabela-rolo { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-base);
}

table.tabela th {
  text-align: left;
  padding: var(--e3) var(--e4);
  background: transparent;
  border-bottom: 1px solid var(--line-forte);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}

table.tabela td {
  padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

table.tabela tbody tr:hover td { background: var(--surface-2); }
table.tabela tbody tr:last-child td { border-bottom: none; }

/* Dentro da tabela o link precisa se distinguir do texto comum: sem isto ele
   fica com a mesma cor das outras celulas e ninguem percebe que da' para
   clicar. */
table.tabela td a {
  font-weight: 500;
  text-decoration-color: var(--ink-3);
}
table.tabela td a:hover { text-decoration-color: currentColor; }

/* Linha inteira clicavel. O link continua existindo na celula, para teclado,
   leitor de tela e abrir em nova aba; o clique na linha e' um atalho. */
table.tabela tbody tr[data-href],
table.tabela tbody tr[data-submit] { cursor: pointer; }
table.tabela tbody tr[data-href]:hover td,
table.tabela tbody tr[data-submit]:hover td { background: var(--surface-2); }

/* Seta a direita, para indicar que a linha leva a algum lugar. */
table.tabela tbody tr[data-href] td:last-child { position: relative; }
table.tabela tbody tr[data-href] td:last-child::after {
  content: "›";
  position: absolute;
  right: var(--e3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-3);
  font-size: 1.125rem;
  line-height: 1;
}
table.tabela tbody tr[data-href]:hover td:last-child::after { color: var(--ink); }

table.tabela .dir { text-align: right; }
table.tabela .cen { text-align: center; }

/* Tabela de duas colunas rotulo/valor (ficha de cliente, dados do pedido).
   Nao usa a variante .responsiva: la o rotulo viria do atributo data-rotulo e
   apareceria duas vezes, ja que aqui a primeira celula ja e' o rotulo. */
table.tabela.dados td:first-child {
  width: 30%;
  white-space: nowrap;
  vertical-align: top;
}

@media (max-width: 720px) {
  table.tabela.dados,
  table.tabela.dados tbody,
  table.tabela.dados tr,
  table.tabela.dados td { display: block; width: 100%; }

  table.tabela.dados tr {
    border-bottom: 1px solid var(--line);
    padding: var(--e3) 0;
  }
  table.tabela.dados tr:last-child { border-bottom: none; }

  table.tabela.dados td { border: none; padding: 0 var(--e4); }
  table.tabela.dados td:first-child { margin-bottom: 2px; }
}

/* Celula que mostra um valor e traz o botao de alterar ao lado. */
table.tabela td.celula-acao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  flex-wrap: wrap;
}

/* Linha de total no pe da tabela. Sem peso proprio ela se perde no meio dos
   dados, e um total que parece mais uma linha da lista se soma por engano. */
table.tabela tfoot td {
  border-top: 2px solid var(--line-forte);
  background: var(--surface-2);
  font-weight: 600;
  white-space: nowrap;
}

/* ---------------------------------------------- escolha de base (andamento)
   Sobrou do painel, que tinha graficos: e' o par de botoes que escolhe o que
   a tela conta. O nome comeca com "grafico-" por causa de onde nasceu. */

.grafico-acoes { display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap; }

/* Escolha do que contar: duas opcoes lado a lado, a ativa em destaque. */
.grafico-base {
  display: inline-flex;
  border: 1px solid var(--line-forte);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.base-item {
  padding: 0.3125rem 0.625rem;
  font-size: var(--t-sm);
  color: var(--ink-2);
  text-decoration: none;
  background: var(--surface);
  white-space: nowrap;
}
.base-item + .base-item { border-left: 1px solid var(--line-forte); }
.base-item:hover { background: var(--surface-2); color: var(--ink); }
.base-item.ativo {
  background: var(--acao);
  color: var(--acao-texto);
  font-weight: 500;
}

.grafico-base-nota {
  margin: 0 0 var(--e4);
  font-size: var(--t-sm);
  color: var(--ink-3);
  max-width: 70ch;
}


/* ------------------------------------------------- fila de etapas (andamento)
   Barras deitadas: sao poucas etapas e o nome delas e' comprido, o que le
   melhor na horizontal. A barra compara magnitude; o numero ao lado da o
   valor exato, entao o comprimento nunca e' a unica fonte. */

.fila-etapas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }

.etapa {
  display: grid;
  grid-template-columns: minmax(9rem, 15rem) 1fr auto auto;
  align-items: center;
  gap: var(--e3);
  padding: var(--e2) var(--e3);
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--ink);
}
.etapa:hover { background: var(--surface-2); }
.etapa.ativa { background: var(--surface-3); font-weight: 500; }

.etapa-nome { font-size: var(--t-sm); }

.etapa-barra {
  height: 8px;
  background: var(--surface-3);
  border-radius: 4px;
  overflow: hidden;
  min-width: 2rem;
}
.etapa-barra > span {
  display: block;
  height: 100%;
  background: var(--acao);
  border-radius: 4px;
}

.etapa-qtde { color: var(--ink-3); font-size: var(--t-sm); text-align: right; min-width: 2.5rem; }
.etapa-valor { font-size: var(--t-sm); text-align: right; min-width: 6rem; }

@media (max-width: 620px) {
  .etapa {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "nome  valor"
      "barra qtde";
    row-gap: var(--e1);
  }
  .etapa-nome  { grid-area: nome; }
  .etapa-valor { grid-area: valor; }
  .etapa-barra { grid-area: barra; }
  .etapa-qtde  { grid-area: qtde; }
}

/* Lista de ordens dentro de uma celula (tela de artigos). Cada ordem numa
   linha, com o PO em destaque e as datas ao lado. */
.lista-ordens {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e1);
}
.lista-ordens li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--e1) var(--e2);
}
.lista-ordens .rotulo { text-transform: none; letter-spacing: 0; }

/* Campo de quantidade ou preco dentro da tabela: estreito e alinhado a
   direita, para os numeros ficarem em coluna. */
.entrada-numero {
  width: 7rem;
  max-width: 100%;
  text-align: right;
  font-family: var(--f-dado);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) {
  .entrada-numero { width: 8rem; }
}

/* Grade de radios da condicao de pagamento. */
.opcoes-pagamento {
  display: grid;
  gap: var(--e2);
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.opcoes-pagamento .opcao {
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e2) var(--e3);
  border: 1px solid var(--line-forte);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: var(--t-base);
  background: var(--surface);
}
.opcoes-pagamento .opcao:hover { background: var(--surface-2); }
.opcoes-pagamento .opcao input { width: auto; margin: 0; }
.opcoes-pagamento .opcao:has(input:checked) {
  border-color: var(--acao);
  box-shadow: inset 0 0 0 1px var(--acao);
  font-weight: 500;
}
.opcoes-pagamento .opcao:has(input:focus-visible) {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

.vazio {
  padding: var(--e7) var(--e4);
  text-align: center;
  color: var(--ink-3);
  font-size: var(--t-sm);
}
.vazio strong {
  display: block;
  color: var(--ink);
  margin-bottom: var(--e1);
  font-weight: 500;
  font-size: var(--t-base);
}

/* Abaixo de 720px a tabela vira lista: cada linha e' um bloco com rotulos.
   Os representantes usam o sistema no celular, e rolar uma tabela de sete
   colunas na horizontal e' o que mais atrapalha hoje. */
@media (max-width: 720px) {
  table.tabela.responsiva thead { display: none; }
  table.tabela.responsiva,
  table.tabela.responsiva tbody,
  table.tabela.responsiva tfoot,
  table.tabela.responsiva tr,
  table.tabela.responsiva td { display: block; width: 100%; }

  table.tabela.responsiva tr {
    border: 1px solid var(--line);
    border-radius: var(--r);
    margin-bottom: var(--e3);
    background: var(--surface);
    overflow: hidden;
  }
  table.tabela.responsiva td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--e3);
    padding: var(--e2) var(--e4);
    border-bottom: 1px solid var(--line);
    text-align: left;
  }
  table.tabela.responsiva td::before {
    content: attr(data-rotulo);
    font-size: var(--t-xs);
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-3);
    flex: 0 0 auto;
  }
  table.tabela.responsiva td:last-child { border-bottom: none; }
  table.tabela.responsiva tbody tr:hover td { background: transparent; }

  /* No formato de cartao a seta na ultima celula atrapalharia o valor. */
  table.tabela.responsiva tbody tr[data-href] td:last-child::after { content: none; }

  /* O cartao inteiro e' a area de toque; a primeira celula ganha a seta. */
  table.tabela.responsiva tbody tr[data-href] td:first-child {
    background: var(--surface-2);
    font-weight: 500;
  }
  table.tabela.responsiva tbody tr[data-href] td:first-child::after {
    content: "›";
    color: var(--ink-3);
    font-size: 1.125rem;
    line-height: 1;
    margin-left: auto;
    padding-left: var(--e2);
  }
}

/* ------------------------------------------------------------ 6. formulario */

.campo { display: flex; flex-direction: column; gap: var(--e1); margin-bottom: var(--e4); }
.campo:last-child { margin-bottom: 0; }

.campo > label {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink-2);
}

.campo .ajuda { font-size: var(--t-sm); color: var(--ink-3); }
.campo .erro-msg { font-size: var(--t-sm); color: var(--erro); font-weight: 500; }

input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="date"], input[type="search"],
select, textarea {
  width: 100%;
  padding: 0.5rem 0.6875rem;
  font-family: inherit;
  font-size: var(--t-base);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-forte);
  border-radius: var(--r-sm);
  transition: border-color .12s, box-shadow .12s;
}
input[type="number"] { font-family: var(--f-dado); font-variant-numeric: tabular-nums; }

input:hover, select:hover, textarea:hover { border-color: var(--ink-3); }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--foco);
  box-shadow: 0 0 0 3px var(--foco-halo);
}

input::placeholder, textarea::placeholder { color: var(--ink-3); }

input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--erro); }

.linha-campos {
  display: grid;
  gap: var(--e4);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* ---------------------------------------------------------------- 7. botoes */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  padding: 0.5rem 0.9375rem;
  font-family: inherit;
  font-size: var(--t-base);
  font-weight: 500;
  line-height: 1.3;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .12s, border-color .12s, color .12s;
}

.btn-principal {
  background: var(--acao);
  color: var(--acao-texto);
  border-color: var(--acao);
}
.btn-principal:hover {
  background: var(--acao-hover);
  border-color: var(--acao-hover);
  color: var(--acao-texto);
}

.btn-neutro {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-forte);
}
.btn-neutro:hover { background: var(--surface-2); color: var(--ink); }

.btn-perigo {
  background: transparent;
  color: var(--erro);
  border-color: var(--line-forte);
}
.btn-perigo:hover { background: var(--erro-suave); border-color: var(--erro); color: var(--erro); }

.btn-texto {
  background: transparent;
  border-color: transparent;
  color: var(--ink-2);
  padding: 0.375rem 0.5rem;
}
.btn-texto:hover { background: var(--surface-2); color: var(--ink); }

/* Icone dentro de botao. O .btn ja e' flex com gap, entao basta dar tamanho
   ao desenho -- sem isto o SVG assume o tamanho do viewBox e estoura. O
   flex-shrink evita que ele seja espremido quando a barra fica estreita. */
.btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.btn-pequeno { padding: 0.3125rem 0.625rem; font-size: var(--t-sm); }
.btn-largo   { width: 100%; }

.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

.acoes { display: flex; gap: var(--e2); flex-wrap: wrap; }

/* -------------------------------------------------------- 8. avisos e selos */

.aviso-caixa {
  display: flex;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  border-radius: var(--r-sm);
  border: 1px solid var(--borda, var(--line));
  background: var(--fundo, var(--surface-2));
  color: var(--ink);
  font-size: var(--t-base);
  margin-bottom: var(--e4);
}
.aviso-caixa::before {
  content: "";
  flex: 0 0 3px;
  align-self: stretch;
  border-radius: 2px;
  background: var(--cor, var(--ink-3));
}
.aviso-caixa.sucesso { --cor: var(--ok);    --fundo: var(--ok-suave);    --borda: transparent; }
.aviso-caixa.erro    { --cor: var(--erro);  --fundo: var(--erro-suave);  --borda: transparent; }
.aviso-caixa.aviso   { --cor: var(--aviso); --fundo: var(--aviso-suave); --borda: transparent; }
.aviso-caixa.info    { --cor: var(--info);  --fundo: var(--info-suave);  --borda: transparent; }
.aviso-caixa strong  { color: var(--cor); font-weight: 600; }

.selo {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0;
  background: var(--surface-3);
  color: var(--ink-2);
  white-space: nowrap;
}
.selo.ok    { background: var(--ok-suave);    color: var(--ok); }
.selo.erro  { background: var(--erro-suave);  color: var(--erro); }
.selo.aviso { background: var(--aviso-suave); color: var(--aviso); }
.selo.info  { background: var(--info-suave);  color: var(--info); }

/* ------------------------------------------------------------ 9. paginacao */

.paginacao {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1);
  align-items: center;
  justify-content: center;
  padding: var(--e5) 0 0;
}
.paginacao a, .paginacao span {
  min-width: 2rem;
  padding: 0.3125rem 0.5625rem;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--ink-2);
  font-family: var(--f-dado);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  background: var(--surface);
}
.paginacao a:hover { background: var(--surface-2); color: var(--ink); }
.paginacao .atual {
  background: var(--acao);
  border-color: var(--acao);
  color: var(--acao-texto);
  font-weight: 500;
}
.paginacao .resumo {
  border: none;
  background: transparent;
  color: var(--ink-3);
  margin-left: var(--e2);
  font-family: var(--f-ui);
}

/* -------------------------------------------------------------- 10. entrada */

.entrada {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--e4);
  background: var(--ground);
}
.entrada-caixa {
  width: 100%;
  max-width: 352px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sombra-alta);
}
.entrada-corpo { padding: var(--e6) var(--e5) var(--e5); }
.entrada-marca { text-align: center; margin-bottom: var(--e6); }
.entrada-marca img { height: 52px; width: auto; }
.entrada-marca p { margin: var(--e3) 0 0; font-size: var(--t-sm); color: var(--ink-3); }
/* Fica afastado do formulario e separado por um fio: e' outro destino, nao
   mais uma opcao do login que esta acima.
   As margens negativas cancelam o padding de .entrada-corpo, para o fio
   atravessar a caixa inteira em vez de parar antes da borda. */
.entrada-pe {
  margin: var(--e6) calc(var(--e5) * -1) calc(var(--e5) * -1);
  padding: var(--e4) var(--e5);
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: var(--t-sm);
}
.entrada-pe a { color: var(--ink-2); }

/* O botao de tema fica fora da caixa, num canto discreto. */
.entrada-tema {
  position: fixed;
  right: var(--e4);
  bottom: var(--e4);
}

/* ----------------------------------------------- 11. navegacao no celular */

.nav-botao {
  display: none;
  padding: var(--e2);
  background: transparent;
  border: 1px solid var(--line-forte);
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--ink);
  line-height: 0;
}
.nav-botao svg { width: 18px; height: 18px; }

.nav-fundo { display: none; }

/* -------------------------------------------------------- 11b. tema */

/* Um botao so, que percorre: sistema -> claro -> escuro -> sistema.
   O icone visivel indica em qual estado esta. */
.tema-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4375rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  cursor: pointer;
  line-height: 0;
}
.tema-botao:hover { background: var(--surface-2); color: var(--ink); }

.tema-botao svg { width: 17px; height: 17px; display: none; }
.tema-botao[data-estado="sistema"] .i-sistema,
.tema-botao[data-estado="claro"]   .i-claro,
.tema-botao[data-estado="escuro"]  .i-escuro { display: block; }

/* Antes do JS assumir, mostra o icone de sistema para nao piscar vazio. */
.tema-botao:not([data-estado]) .i-sistema { display: block; }

@media (max-width: 900px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-areas: "topo" "main";
  }

  .nav-botao { display: inline-flex; }
  .topo-barra { padding: 0 var(--e4); }

  .nav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(84vw, var(--largura-nav));
    z-index: 50;
    background: var(--surface);
    transform: translateX(-100%);
    transition: transform .2s ease;
    overflow-y: auto;
    box-shadow: var(--sombra-alta);
  }
  .app.nav-aberta .nav { transform: translateX(0); }

  .app.nav-aberta .nav-fundo {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(19, 19, 22, .4);
  }

  .main { padding: var(--e5) var(--e4) var(--e7); }
  .topo-usuario .nome-longo { display: none; }
  .cartao-corpo, .cartao-cabeca, .cartao-pe { padding-left: var(--e4); padding-right: var(--e4); }
}

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

/* --------------------------------------------------------------- 12. rodape */

.rodape {
  border-top: 1px solid var(--line);
  margin-top: var(--e7);
  padding-top: var(--e4);
  font-size: var(--t-sm);
  color: var(--ink-3);
}
.rodape p { margin: 0 0 var(--e1); max-width: none; }
.rodape a { color: var(--ink-3); }

/* ------------------------------------------------------------------ folha
   Via impressa. Na tela nao aparece; no papel e' ela que sai, no lugar dos
   cartoes. As cores sao escritas na mao, sem as variaveis do tema: quem estiver
   no modo escuro na hora de imprimir ainda assim recebe papel branco com letra
   preta -- imprimir fundo escuro gasta tinta e sai ilegivel. */
.folha { display: none; }

@media print {
  .nav, .topo, .rodape, .acoes, .nav-botao,
  .pagina-topo, .aviso-caixa, .cartao { display: none !important; }

  .app  { display: block; }
  .main { padding: 0; }

  /*
   * Laterais pela pagina, topo e base pela folha.
   *
   * A margem vertical fica em zero porque e' ela que abre espaco para o
   * cabecalho e o rodape do proprio navegador -- data e titulo em cima,
   * endereco da pagina embaixo. Nao ha propriedade que os desligue; sem espaco
   * vertical eles nao sao desenhados.
   *
   * As laterais, essas ficam aqui na @page: margem de pagina vale em todas as
   * folhas, enquanto o padding da .folha so recua a primeira e a ultima. Num
   * pedido de varias paginas era o texto que encostava na borda lateral.
   */
  @page { size: A4 portrait; margin: 0 12mm; }

  html, body {
    background: #fff;
    color: #000;
    font-size: 9pt;
  }

  .folha {
    display: block;
    color: #000;
    font-family: var(--fonte, system-ui, sans-serif);
    line-height: 1.35;
    /* So o recuo vertical: as laterais ja vem da margem da @page. */
    padding: 12mm 0;
    /* Sem isto o navegador descarta os fundos cinza ao imprimir, a menos que a
       pessoa lembre de marcar "graficos de fundo" na caixa de impressao. A
       estrutura do documento nao depende deles -- as divisoes sao feitas por
       linhas -- mas com os fundos a leitura fica bem mais facil. */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .folha p { margin: 0; max-width: none; }

  /* cabecalho -- so o numero do pedido, alinhado a direita */
  .folha-cabeca {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    padding-bottom: 3mm;
    border-bottom: 1.2pt solid #000;
  }
  .folha-id { text-align: right; }
  .folha-id-titulo {
    display: block;
    font-size: 7.5pt;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #444;
  }
  .folha-id strong {
    display: block;
    font-size: 15pt;
    font-weight: 700;
    line-height: 1.1;
  }
  .folha-id span { font-size: 8.5pt; color: #444; }

  /* faixa com representante e situacao */
  .folha-faixa {
    display: flex;
    gap: 10mm;
    margin-top: 2mm;
    padding: 1.6mm 2mm;
    background: #f0f0f0;
    font-size: 9pt;
  }
  .folha-faixa b {
    font-weight: 400;
    color: #555;
    text-transform: uppercase;
    font-size: 7.5pt;
    letter-spacing: .06em;
    margin-right: 1mm;
  }

  /* blocos */
  .folha-bloco { margin-top: 5mm; page-break-inside: avoid; }
  .folha-bloco h3 {
    margin: 0 0 1.6mm;
    padding-bottom: 1mm;
    border-bottom: .5pt solid #999;
    font-size: 8pt;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #333;
  }
  .folha-conta { font-weight: 400; color: #666; letter-spacing: 0; }

  .folha-nome {
    font-size: 12pt;
    font-weight: 700;
  }
  .folha-cod {
    font-size: 8.5pt;
    font-weight: 400;
    color: #555;
    margin-left: 3mm;
  }
  .folha-razao { color: #333; }
  .folha-cliente p { margin-bottom: .4mm; }

  /* pares rotulo/valor: o rotulo por cima, pequeno, para o valor ficar limpo */
  .folha-pares {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5mm 8mm;
    margin: 2mm 0 0;
  }
  .folha-pares div { margin: 0; }
  .folha-pares dt {
    font-size: 7pt;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #666;
  }
  .folha-pares dd { margin: 0; font-size: 9.5pt; }
  .folha-pares-largo { gap: 1.5mm 10mm; }

  .folha-obs {
    margin-top: 2.5mm;
    padding: 1.6mm 2mm;
    border-left: 1.5pt solid #999;
    background: #f6f6f6;
    font-size: 8.5pt;
  }
  .folha-obs b {
    font-weight: 400;
    text-transform: uppercase;
    font-size: 7pt;
    letter-spacing: .06em;
    color: #555;
    margin-right: 1.5mm;
  }

  /* itens: uma linha por item.
     As larguras saem da medicao dos textos que existem de verdade no banco
     (Material chega a 28 caracteres, Cor a 30, Firma a 14). Com table-layout
     fixo e nowrap, cada item ocupa exatamente uma linha. */
  .folha-itens {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 8.5pt;
  }
  .folha-itens th,
  .folha-itens td {
    padding: 1.3mm 1.5mm;
    text-align: left;
    vertical-align: baseline;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .folha-itens thead th {
    border-bottom: .8pt solid #000;
    font-size: 7pt;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #333;
  }
  .folha-itens tbody td { border-bottom: .4pt solid #ddd; }
  /* zebra discreta ajuda a seguir a linha ate a coluna do total */
  .folha-itens tbody tr:nth-child(even) td { background: #f7f7f7; }
  .folha-itens .dir { text-align: right; }
  .folha-itens .col-n   { width:  4%; color: #777; }
  .folha-itens .col-po  { width:  6%; }
  .folha-itens .col-mat { width: 26%; }
  .folha-itens .col-cor { width: 25%; }
  .folha-itens .col-fir { width: 12%; }
  .folha-itens .col-qtd { width:  9%; }
  .folha-itens .col-pre { width:  8%; }
  .folha-itens .col-tot { width: 10%; }

  .folha-itens tfoot td {
    padding-top: 2mm;
    border-top: .8pt solid #000;
    font-size: 10pt;
    font-weight: 700;
    background: none;
  }
  .folha-soma-rot {
    text-align: right !important;
    font-size: 7.5pt !important;
    font-weight: 400 !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #555;
  }

  /* cada item inteiro na mesma pagina, e cabecalho repetido se virar folha */
  .folha-itens tr    { page-break-inside: avoid; }
  .folha-itens thead { display: table-header-group; }
  .folha-itens tfoot { display: table-row-group; }

  .folha-vazio { font-size: 9pt; color: #666; }
}