/* =============================================================================
   TUON — Componentes compartilhados
   -----------------------------------------------------------------------------
   Usados pelo site, pelo portal do cliente e pelo painel da TUON.
   Depende de tokens.css. Nada de valor cru aqui: tudo sai de uma variável.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Marca
   -------------------------------------------------------------------------- */

.tuon-marca {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  text-decoration: none;
  color: inherit;
}

.tuon-marca__bloco {
  width: 40px;
  height: 40px;
  flex: none;
  background: var(--tuon-block);
  display: grid;
  place-items: center;
}

.tuon-marca__bloco img { width: 100%; height: 100%; }

.tuon-marca__nome {
  /* O wordmark acompanha o monograma geométrico, não a serif dos títulos. */
  font-family: var(--f-texto);
  font-size: var(--t-md);
  font-weight: var(--p-forte);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* -----------------------------------------------------------------------------
   Botões
   Altura mínima de toque em todos: o painel é usado em pé, na fábrica.
   -------------------------------------------------------------------------- */

.tuon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: var(--toque-min);
  padding: 0 var(--e-5);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: none;
  font-family: var(--f-texto);
  font-size: var(--t-sm);
  font-weight: var(--p-forte);
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--m-rapido) var(--m-curva),
              border-color var(--m-rapido) var(--m-curva),
              color var(--m-rapido) var(--m-curva);
}

.tuon-btn--principal {
  background: var(--tuon-wood);
  border-color: var(--tuon-wood);
  color: #fff;
}
.tuon-btn--principal:hover { background: var(--tuon-wood-deep); border-color: var(--tuon-wood-deep); }

.tuon-btn--bloco {
  background: var(--tuon-block);
  border-color: var(--tuon-block);
  color: var(--tuon-block-ink);
}
.tuon-btn--bloco:hover { background: var(--tuon-ink-2); border-color: var(--tuon-ink-2); }

.tuon-btn--contorno {
  border-color: var(--tuon-line);
  color: var(--tuon-ink);
  background: var(--tuon-surface);
}
.tuon-btn--contorno:hover { border-color: var(--tuon-wood); color: var(--tuon-wood-deep); }

.tuon-btn--fantasma { color: var(--tuon-ink-2); }
.tuon-btn--fantasma:hover { background: var(--tuon-sand); }

.tuon-btn--largo { width: 100%; }

/* Tamanhos compactos */
/* v1.0445 — DOIS tamanhos, e nenhum entre eles. O --sm/--xs sao a mesma
   altura (--toque-compacto): acao inline dentro de linha de lista, usada
   sentado no mouse. Tudo que e acao principal fica no --toque-min. */
.tuon-btn--sm { min-height: var(--toque-compacto); padding: 0 var(--e-4); font-size: var(--t-sm); }
.tuon-btn--xs { min-height: var(--toque-compacto); padding: 0 var(--e-3); font-size: var(--t-xs); }

.tuon-btn:disabled,
.tuon-btn[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; }

/* -----------------------------------------------------------------------------
   Chips de etapa e de estado
   -------------------------------------------------------------------------- */

.tuon-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: 3px 10px;
  border-radius: var(--r-sm);
  background: var(--chip-w, var(--tuon-sand));
  color: var(--chip-c, var(--tuon-ink-2));
  font-family: var(--f-dados);
  font-size: var(--t-xs);
  font-weight: var(--p-medio);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.tuon-chip::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--r-cheio);
  background: currentColor;
  flex: none;
}

.tuon-chip--sem-ponto::before { display: none; }

.tuon-chip--pedido     { --chip-c: var(--et-pedido);     --chip-w: var(--et-pedido-w); }
.tuon-chip--medicao    { --chip-c: var(--et-medicao);    --chip-w: var(--et-medicao-w); }
.tuon-chip--projeto    { --chip-c: var(--et-projeto);    --chip-w: var(--et-projeto-w); }
.tuon-chip--aprovacao  { --chip-c: var(--et-aprovacao);  --chip-w: var(--et-aprovacao-w); }
.tuon-chip--producao   { --chip-c: var(--et-producao);   --chip-w: var(--et-producao-w); }
.tuon-chip--instalacao { --chip-c: var(--et-instalacao); --chip-w: var(--et-instalacao-w); }
.tuon-chip--concluido  { --chip-c: var(--et-concluido);  --chip-w: var(--et-concluido-w); }
.tuon-chip--cancelado  { --chip-c: var(--st-cancelado);  --chip-w: var(--st-cancelado-w); }
.tuon-chip--pausado    { --chip-c: var(--st-pausado);    --chip-w: var(--st-pausado-w); }

/* v1.0413 — a CICATRIZ: onde o item parou quando saiu da linha.
   Vem sempre colada no selo (Cancelado/Pausado) e nunca sozinha. Contorno
   tracejado de propósito: não é uma etapa atual, é memória de onde parou. */
.tuon-chip--parou {
  --chip-c: var(--tuon-muted);
  background: transparent;
  border: 1px dashed var(--tuon-line);
  letter-spacing: 0.02em;
  font-weight: var(--p-normal, 400);
}

.tuon-chip--parou::before { display: none; }

/* v1.0773 — INSTALAÇÃO PREVISTA: ainda não confirmada por lançamento objetivo
   no diário (estado_item.php/instalacao_confirmada_historico). Mesmo traço
   tracejado e discreto da cicatriz "parou em" — de propósito: não é um
   compromisso já cumprido, é uma data planejada. */
.tuon-chip--previsao {
  --chip-c: var(--st-pausado);
  background: transparent;
  border: 1px dashed var(--tuon-line);
  letter-spacing: 0.02em;
  font-weight: var(--p-normal, 400);
}

.tuon-chip--previsao::before { display: none; }

/* -----------------------------------------------------------------------------
   Linha do tempo do item — o componente central do portal
   Não assume 7 etapas: se adapta a quantas a TUON cadastrar.
   -------------------------------------------------------------------------- */

/* Barra de progresso GRADIENTE — compartilhada por admin E portal (os clientes
   também veem gradiente). Termina em VERDE quando cheia; só o preenchimento é
   revelado por clip-path. Ver barraProgresso() em includes/functions.php. */
.tuon-barra {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: var(--tuon-sand, rgba(0, 0, 0, 0.08));
  overflow: hidden;
}
.tuon-barra__fill {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #6488ae 0%, #3e9b8b 48%, #29a268 78%, #1e9e58 100%);
  clip-path: inset(0 calc(100% - var(--pct, 0%)) 0 0 round 999px);
}
@media (prefers-reduced-motion: no-preference) {
  .tuon-barra__fill { transition: clip-path 0.55s cubic-bezier(0.22, 0.61, 0.36, 1); }
}

.tuon-trilha {
  display: flex;
  gap: 3px;
  margin: var(--e-3) 0;
}

/* Barra ripada — cada etapa é um trecho de painel RIPADO, a assinatura da TUON.
   As ripas "ganham madeira" conforme o pedido avança; a etapa atual fica acesa;
   as que faltam ficam como madeira crua. Tudo em CSS (sem JS), com o veio feito
   de repeating-linear-gradient. */
.tuon-trilha__passo {
  flex: 1;
  height: 13px;
  border-radius: var(--r-sm);
  background:
    repeating-linear-gradient(90deg,
      var(--tuon-sand) 0 5px,
      var(--tuon-line) 5px 6px);
}

.tuon-trilha__passo--feito {
  background:
    repeating-linear-gradient(90deg,
      var(--tuon-wood) 0 5px,
      var(--tuon-wood-deep) 5px 6px);
}
/* grão variado entre as etapas — mesmo tratamento da barra ripada de % */
.tuon-trilha__passo--feito:nth-child(3n) {
  background:
    repeating-linear-gradient(90deg,
      var(--tuon-wood-deep) 0 5px,
      var(--tuon-wood) 5px 6px);
}
.tuon-trilha__passo--feito:nth-child(5n) {
  background:
    repeating-linear-gradient(90deg,
      var(--tuon-wood-soft) 0 5px,
      var(--tuon-wood) 5px 6px);
}

/* etapa atual: ripa acesa, com o mesmo brilho pulsante da barra de % */
.tuon-trilha__passo--atual {
  background:
    repeating-linear-gradient(90deg,
      var(--tuon-wood-luz) 0 5px,
      var(--tuon-wood) 5px 6px);
  box-shadow: 0 0 8px rgba(200, 155, 110, 0.6);
}
@media (prefers-reduced-motion: no-preference) {
  /* usa o keyframe compartilhado tuon-ripa-acesa (definido junto de .tuon-ripado) */
  .tuon-trilha__passo--atual { animation: tuon-ripa-acesa 2.6s ease-in-out infinite; }
}

.tuon-trilha__passo--parado {
  background:
    repeating-linear-gradient(90deg,
      var(--st-cancelado) 0 5px,
      #8f2c1e 5px 6px);
}

/* bloco com a contagem discreta "5/7" ao lado da barra */
.tuon-trilha-bloco {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin: var(--e-3) 0;
}
.tuon-trilha-bloco .tuon-trilha { flex: 1; margin: 0; }
.tuon-trilha-bloco .tuon-barra { flex: 1; }

.tuon-trilha__conta {
  flex: none;
  font-family: var(--f-dados);
  font-size: var(--t-xs);
  font-weight: var(--p-forte);
  color: var(--tuon-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tuon-trilha__conta span { color: var(--tuon-faint); }

/* -----------------------------------------------------------------------------
   Cartão
   -------------------------------------------------------------------------- */

.tuon-cartao {
  background: var(--tuon-surface);
  border: 1px solid var(--tuon-line);
  border-radius: var(--r-sm);
  padding: var(--e-5);
}

.tuon-cartao--sobre { box-shadow: var(--s-2); }

/* -----------------------------------------------------------------------------
   Campos de formulário
   -------------------------------------------------------------------------- */

.tuon-campo { display: grid; gap: var(--e-2); min-width: 0; }

.tuon-campo__rotulo {
  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-muted);
}

.tuon-campo__controle {
  width: 100%;
  min-width: 0;
  /* v1.0451 — CAMPO É CONTROLE, E CONTROLE TEM DUAS ALTURAS.
     O campo pedia min-height 48 mas somava 12+12 de padding com a entrelinha
     do corpo (1,62) e fechava em 52 — 4px mais alto que o botão ao lado, e 16
     mais alto que o botão compacto. A altura passa a vir SÓ do token: sem
     padding em cima e embaixo, a caixa fecha exatamente no 48. */
  min-height: var(--toque-min);
  padding: 0 var(--e-4);
  line-height: normal;
  border: 1px solid #948A7B; /* 3.4:1 sobre branco: borda visível (WCAG 1.4.11) */
  border-radius: var(--r-sm);
  background: var(--campo-fundo, #F2E9DE);
  font-size: var(--t-base);
  transition: border-color var(--m-rapido) var(--m-curva);
}

.tuon-campo__controle:hover { border-color: var(--tuon-wood-soft); }
.tuon-campo__controle::placeholder { color: var(--tuon-faint); }

.tuon-campo__ajuda { font-size: var(--t-sm); color: var(--tuon-muted); }

.tuon-campo__erro { font-size: var(--t-sm); color: var(--ui-erro); }
.tuon-campo--erro .tuon-campo__controle { border-color: var(--ui-erro); }

/* só o visual — quem garante o dado maiúsculo de verdade é o mb_strtoupper()
   no servidor ao salvar; isso aqui só mostra maiúsculo enquanto digita */
.pn-maiusculo { text-transform: uppercase; }

/* Campo do código de acesso: um alvo grande, no meio da tela, no celular. */
.tuon-campo__codigo {
  font-family: var(--f-dados);
  font-size: clamp(1.35rem, 6vw, 1.9rem);
  font-weight: var(--p-medio);
  letter-spacing: 0.18em;
  text-align: center;
  text-transform: uppercase;
  min-height: var(--toque-conforto);
  padding: var(--e-4);
}

/* -----------------------------------------------------------------------------
   Interruptor de visibilidade
   -------------------------------------------------------------------------- */

.tuon-chave {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  min-height: var(--toque-min);
  padding: var(--e-2) 0;
  border-top: 1px solid var(--tuon-line-soft);
  cursor: pointer;
}

.tuon-chave:first-of-type { border-top: 0; }
.tuon-chave__texto { font-size: var(--t-sm); }

.tuon-chave__botao {
  position: relative;
  width: 44px;
  height: 26px;
  flex: none;
  border-radius: var(--r-cheio);
  background: var(--tuon-line);
  transition: background var(--m-normal) var(--m-curva);
}

.tuon-chave__botao::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: var(--r-cheio);
  background: var(--tuon-surface);
  box-shadow: var(--s-1);
  transition: transform var(--m-normal) var(--m-curva);
}

.tuon-chave input { position: absolute; opacity: 0; pointer-events: none; }
.tuon-chave input:checked ~ .tuon-chave__botao { background: var(--ui-ok); }
.tuon-chave input:checked ~ .tuon-chave__botao::after { transform: translateX(18px); }
.tuon-chave input:focus-visible ~ .tuon-chave__botao { outline: 2px solid var(--tuon-wood); outline-offset: 2px; }

/* -----------------------------------------------------------------------------
   Tabela
   -------------------------------------------------------------------------- */

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

.tuon-tabela th {
  text-align: left;
  padding: var(--e-3) var(--e-4);
  background: var(--tuon-sand);
  border-bottom: 1px solid var(--tuon-line);
  font-family: var(--f-dados);
  font-size: var(--t-xs);
  font-weight: var(--p-forte);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tuon-tabela td {
  padding: var(--e-3) var(--e-4);
  border-bottom: 1px solid var(--tuon-line-soft);
  vertical-align: top;
}

.tuon-tabela tr:last-child td { border-bottom: 0; }
.tuon-tabela .num { text-align: right; font-family: var(--f-dados); }

/* -----------------------------------------------------------------------------
   Aviso
   -------------------------------------------------------------------------- */

.tuon-aviso {
  padding: var(--e-4);
  border-radius: var(--r-sm);
  border-left: 3px solid var(--aviso-c, var(--tuon-wood));
  background: var(--aviso-w, var(--tuon-wood-wash));
  font-size: var(--t-sm);
  color: var(--tuon-ink-2);
}

.tuon-aviso--ok    { --aviso-c: var(--ui-ok);    --aviso-w: var(--ui-ok-w); }
.tuon-aviso--erro  { --aviso-c: var(--ui-erro);  --aviso-w: var(--ui-erro-w); }
.tuon-aviso--info  { --aviso-c: var(--ui-info);  --aviso-w: var(--ui-info-w); }
.tuon-aviso--alerta{ --aviso-c: var(--ui-alerta);--aviso-w: var(--ui-alerta-w); }

/* -----------------------------------------------------------------------------
   Pill do Portal do Cliente — assinatura exclusiva.
   Único elemento em cápsula de todo o sistema, por decisão: a cápsula é a
   identidade do portal. Dentro dela, a linha do tempo em miniatura; no hover,
   as etapas completam em sequência: o pedido andando.
   -------------------------------------------------------------------------- */

.tuon-pill-portal {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  min-height: var(--toque-min);
  padding: 0 var(--e-5) 0 var(--e-4);
  border-radius: var(--r-cheio);
  border: 1px solid rgba(200, 155, 110, 0.6);
  background: rgba(26, 25, 23, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-family: var(--f-texto);
  font-size: var(--t-sm);
  font-weight: var(--p-forte);
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--m-normal) var(--m-curva),
              border-color var(--m-normal) var(--m-curva),
              color var(--m-normal) var(--m-curva),
              transform var(--m-rapido) var(--m-curva);
}

.tuon-pill-portal:active { transform: scale(0.98); }

.tuon-pill-portal__trilha {
  display: flex;
  gap: 3px;
  width: 46px;
  flex: none;
}

.tuon-pill-portal__trilha i {
  flex: 1;
  height: 3px;
  border-radius: var(--r-cheio);
  background: rgba(200, 155, 110, 0.3);
  transition: background var(--m-normal) var(--m-curva);
}

.tuon-pill-portal__trilha i:nth-child(-n + 4) { background: var(--tuon-wood-luz); }

.tuon-pill-portal:hover,
.tuon-pill-portal:focus-visible {
  background: var(--tuon-wood-luz);
  border-color: var(--tuon-wood-luz);
  color: var(--tuon-block);
}

/* No hover, as etapas restantes completam em sequência. */
.tuon-pill-portal:hover .tuon-pill-portal__trilha i,
.tuon-pill-portal:focus-visible .tuon-pill-portal__trilha i {
  background: var(--tuon-block);
}
.tuon-pill-portal:hover .tuon-pill-portal__trilha i:nth-child(5) { transition-delay: 60ms; }
.tuon-pill-portal:hover .tuon-pill-portal__trilha i:nth-child(6) { transition-delay: 120ms; }
.tuon-pill-portal:hover .tuon-pill-portal__trilha i:nth-child(7) { transition-delay: 180ms; }

/* Variante para fundos claros: cápsula sólida no quase-preto da marca. */
.tuon-pill-portal--claro {
  background: var(--tuon-block);
  border-color: var(--tuon-block);
  color: var(--tuon-block-ink);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.tuon-pill-portal--largo { width: 100%; justify-content: center; }

/* -----------------------------------------------------------------------------
   Progresso ripado
   Um painel ripado sendo montado: ripa concluída ganha madeira em tons
   levemente variados — como madeira de verdade — e a ripa atual fica acesa.
   Os consumidores animam a montagem via .em-vista + o atraso --d de cada ripa.
   -------------------------------------------------------------------------- */

.tuon-ripado {
  display: flex;
  gap: 3px; /* mesmo respiro do motivo .lp-ripas */
  height: 18px;
}

.tuon-ripado i {
  flex: 1;
  min-width: 0;
  border-radius: var(--r-sm);
  background: var(--tuon-sand); /* ripa ainda sem madeira */
}

.tuon-ripado i.feita { background: var(--tuon-wood); }
.tuon-ripado i.feita:nth-child(3n) { background: var(--tuon-wood-deep); }
.tuon-ripado i.feita:nth-child(5n) { background: var(--tuon-wood-soft); }

.tuon-ripado i.atual {
  background: var(--tuon-wood-luz);
  box-shadow: 0 0 8px rgba(200, 155, 110, 0.6);
}

@media (prefers-reduced-motion: no-preference) {
  .tuon-ripado i.atual { animation: tuon-ripa-acesa 2.6s ease-in-out infinite; }
}

/* CASA COMUM — não apagar/renomear sem avisar. Este keyframe é usado por DOIS
   componentes: a barra ripada de % (.tuon-ripado i.atual, aqui ao lado) e a
   barra ripada de etapas (.tuon-trilha__passo--atual, lá em cima). Mexeu no nome
   aqui, ajuste os dois usos. */
@keyframes tuon-ripa-acesa {
  0%, 100% { box-shadow: 0 0 5px rgba(200, 155, 110, 0.35); }
  50%      { box-shadow: 0 0 12px rgba(200, 155, 110, 0.75); }
}

/* =============================================================================
   v1.0339 — hidden ESCONDE, ponto final.
   -----------------------------------------------------------------------------
   O atributo `hidden` só vale `display:none` na folha do navegador, que perde
   pra qualquer regra de classe com `display` (`.pt-lente{display:flex}` deixou
   a lente das fotos do Portal SEMPRE aberta, tapando a tela com o X). Como todo
   JS da casa liga/desliga painel com `el.hidden = true//false`, a regra passa a
   ser global — e cada exceção (só a de impressão do guia) declara `!important`.
   ========================================================================== */
[hidden] { display: none !important; }
input[type="hidden"] { display: none !important; }

/* Textarea é multi-linha: mantém o respiro e cresce com o texto. */
textarea.tuon-campo__controle {
  padding-block: var(--e-3);
  line-height: var(--l-normal);
  min-height: calc(var(--toque-min) * 1.6);
}

/* O campo compacto acompanha o botão compacto — para linhas de lista. */
.tuon-campo--compacto .tuon-campo__controle { min-height: var(--toque-compacto); }

/* Security & Protection against Content Theft in Landing Page */
.lp {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.lp input, .lp textarea, .lp select, .lp [contenteditable], .lp .allow-select {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
img, picture, svg, .tuon-marca {
  -webkit-user-drag: none;
  user-drag: none;
}

/* -----------------------------------------------------------------------------
   Sub-identificação do cliente (v1.0804)
   -----------------------------------------------------------------------------
   Linha compacta abaixo do NOME do cliente — Arquitetura · Engenharia · Obra —
   em admin/cliente.php, admin/financeiro.php, admin/pedido.php e no Portal.
   Fonte Montserrat SEMPRE (pedido explícito do Saulo), à parte da fonte padrão
   da tela — mesma família usada nos relatórios (includes/relatorio_view.php
   define a própria variante escura pro cabeçalho lá, ver .r-topo). A função
   tuonSubClienteHtml() só devolve algo quando há pelo menos um campo
   preenchido; sem isso, nada é impresso e a regra abaixo não entra em jogo.
   -------------------------------------------------------------------------- */
.tuon-sub-cliente {
  margin: var(--e-1) 0 0;
  font-family: 'Montserrat', var(--f-texto);
  font-size: var(--t-sm);
  font-weight: var(--p-normal);
  line-height: 1.5;
  color: var(--tuon-muted);
  max-width: 60ch;
}
.tuon-sub-cliente b { font-weight: var(--p-forte); color: var(--tuon-ink); }
.tuon-sub-cliente__pt { opacity: .5; padding: 0 .2em; }