/* Elo: componentes (plano 6.0.5 e 6.0.6). Carregar depois de /kit/tokens.css, /kit/base.css e /design/tokens.css.
   Só usa tokens: cor solta aqui é defeito. A galeria viva de tudo isto é /design (papel dono).
   Regras que valem em todo componente: sem sombra (ênfase é a régua esquerda de 3 px na cor do selo), raio 4 px em controle
   e 0 em painel e tabela, sem caixa alta, número tabular à direita, código literal em Plex Mono, cor nunca sozinha. */

/* ───────────── base ───────────── */
html { font-size: 100%; }
body.elo {
  margin: 0; background: var(--mesa); color: var(--tinta);
  font: var(--peso-corpo) var(--t-2)/var(--l-2) var(--fonte);
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.elo h1 { font: var(--peso-titulo) var(--t-5)/var(--l-5) var(--fonte); letter-spacing: -0.012em; margin: 0; }
.elo h2 { font: var(--peso-titulo) var(--t-4)/var(--l-4) var(--fonte); letter-spacing: -0.006em; margin: 0; }
.elo h3 { font: var(--peso-titulo) var(--t-3)/var(--l-3) var(--fonte); margin: 0; }
.elo p { margin: 0; }
.elo p + p { margin-top: var(--e-2); }
.elo a { color: var(--azul); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.elo a:hover { text-decoration-thickness: 2px; }
.elo :focus-visible { outline: none; box-shadow: var(--foco); border-radius: var(--raio); }
.elo .texto-corrido { font-size: var(--t-3); line-height: var(--l-3); max-width: var(--medida); }
.meta { font-size: var(--t-1); line-height: var(--l-1); color: var(--grafite); }
.forte { font-weight: var(--peso-titulo); }
.rotulo { font-weight: var(--peso-rotulo); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.cod, .elo code, .elo kbd, .elo pre { font-family: var(--fonte-mono); font-size: 0.875rem; letter-spacing: 0; }
.elo kbd { padding: 0 4px; border: 1px solid var(--regua-forte); border-radius: 3px; font-size: var(--t-1); color: var(--grafite); background: var(--folha); }
.so-leitor { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pular { position: absolute; left: var(--e-2); top: -48px; z-index: 100; padding: var(--e-2) var(--e-3); background: var(--folha); border: 1px solid var(--azul); }
.pular:focus { top: var(--e-2); }
.icone { width: var(--icone); height: var(--icone); flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icone--p { width: 14px; height: 14px; }

/* ───────────── casca: trilho + faixa + conteúdo ───────────── */
.casca { display: grid; grid-template-columns: var(--trilho) minmax(0, 1fr); min-height: 100vh; }
.casca > :first-child { background: var(--folha); border-right: 1px solid var(--regua); } /* a coluna do trilho vai até o fim da página */
.trilho {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column;
  background: var(--folha); padding: 0 var(--e-2) var(--e-4);
}
.trilho-marca {
  display: flex; align-items: center; gap: var(--e-2); min-height: var(--faixa); margin: 0 calc(-1 * var(--e-2));
  padding: 0 var(--e-4); border-bottom: 1px solid var(--regua); color: var(--tinta); text-decoration: none;
}
.trilho-marca .marca-elo { font: 600 var(--t-3)/1 var(--fonte); letter-spacing: -0.01em; }
.trilho-marca .marca-de { margin-left: auto; }
.marca-simbolo { width: 22px; height: 22px; color: var(--azul); }
.trilho-grupo { list-style: none; margin: 12px 0 0; padding: 0; }
.trilho-grupo:first-of-type { margin-top: var(--e-3); }
.trilho-grupo li + li { margin-top: 2px; }
.trilho a.trilho-item {
  display: flex; align-items: center; gap: 10px; min-height: 30px; padding: 0 var(--e-2) 0 10px; border-radius: var(--raio);
  color: var(--grafite); text-decoration: none; font-weight: var(--peso-rotulo);
}
.trilho a.trilho-item:hover { background: var(--zebra); color: var(--tinta); }
.trilho a.trilho-item[aria-current="page"] { background: var(--azul-selecao); color: var(--azul); box-shadow: inset var(--enfase) 0 0 var(--azul); }
.contador {
  margin-left: auto; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--vermelho); color: var(--sobre-vermelho); font: 600 var(--t-1)/20px var(--fonte); text-align: center;
}
.trilho-pe { margin-top: auto; padding: var(--e-3) 10px 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-1); }
.trilho-pe .botao { justify-self: start; }

.area { min-width: 0; display: flex; flex-direction: column; }
.conteudo { width: 100%; max-width: var(--largura-max); padding: var(--e-5) var(--e-5) var(--e-7); }
.cabeca { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--e-3) var(--e-5); margin-bottom: var(--e-5); }
.cabeca .meta { margin-top: var(--e-1); }
.cabeca-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); }
.como-funciona { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-1); }
.voltar { display: inline-flex; align-items: center; gap: 4px; margin-bottom: var(--e-2); font-size: var(--t-1); }

/* faixa de estado: uma frase; âmbar ou vermelha com a frase do problema */
.faixa {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--e-3);
  min-height: var(--faixa); padding: 0 var(--e-5); background: var(--folha); border-bottom: 1px solid var(--regua);
}
.faixa-frase { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--e-2); }
.faixa-frase p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.faixa[data-estado="ok"] .faixa-frase .icone { color: var(--no-ar); }
.faixa[data-estado="atencao"] { background: var(--atencao); color: var(--sobre-atencao); border-bottom-color: var(--atencao); }
.faixa[data-estado="erro"] { background: var(--vermelho); color: var(--sobre-vermelho); border-bottom-color: var(--vermelho); }
.faixa[data-estado="atencao"] a, .faixa[data-estado="erro"] a { color: inherit; font-weight: 600; }
.faixa-menu { display: none; }
.faixa-busca {
  display: inline-flex; align-items: center; gap: var(--e-2); min-height: 28px; padding: 0 var(--e-2) 0 10px; border-radius: var(--raio);
  border: 1px solid var(--regua-forte); background: var(--folha); color: var(--grafite); font: var(--peso-corpo) var(--t-1)/1 var(--fonte); cursor: pointer;
}
.faixa[data-estado="atencao"] .faixa-busca, .faixa[data-estado="erro"] .faixa-busca { border-color: var(--folha); }

/* ───────────── painéis ───────────── */
.painel { background: var(--folha); border: 1px solid var(--regua); min-width: 0; }
.painel + .painel, .pilha-painel > * + * { margin-top: var(--e-4); }
.painel-cabeca { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); min-height: 48px; padding: var(--e-2) var(--e-4); border-bottom: 1px solid var(--regua); }
.painel-titulo, .elo .painel-titulo { font: var(--peso-titulo) var(--t-3)/var(--l-3) var(--fonte); margin: 0; display: flex; align-items: center; gap: var(--e-2); }
.painel-corpo { padding: var(--e-4); }
.painel-pe { padding: var(--e-2) var(--e-4); border-top: 1px solid var(--regua); }
[data-canal] { --cor-canal: var(--grafite); }
[data-canal="W"] { --cor-canal: var(--selo-w); } [data-canal="M"] { --cor-canal: var(--selo-m); } [data-canal="ML"] { --cor-canal: var(--selo-ml); }
[data-canal="E"] { --cor-canal: var(--selo-e); } [data-canal="P"] { --cor-canal: var(--selo-p); } [data-canal="V"] { --cor-canal: var(--selo-v); }
[data-canal="S"] { --cor-canal: var(--selo-s); } [data-canal="A"] { --cor-canal: var(--selo-a); } [data-canal="Mg"] { --cor-canal: var(--selo-mg); }
[data-canal="alarme"] { --cor-canal: var(--vermelho); }
.com-enfase { box-shadow: inset var(--enfase) 0 0 var(--cor-canal, var(--grafite)); }
.grade > .painel + .painel, .grade-2 > .painel + .painel, .grade-3 > .painel + .painel { margin-top: 0; }
.grade { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }
.grade-3 { display: grid; gap: var(--e-4); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade-2 { display: grid; gap: var(--e-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.linha-flex { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); }
.separa, .elo .separa { margin-top: var(--e-5); }

/* ───────────── selo de origem e chip de estado ───────────── */
.selo-origem {
  display: inline-grid; place-items: center; flex: none; min-width: var(--selo); height: var(--selo); padding: 0 3px; border-radius: 2px;
  background: var(--grafite); color: var(--folha); font: 600 11px/1 var(--fonte); letter-spacing: 0; vertical-align: -3px; cursor: default;
}
.selo-origem[data-origem="W"] { background: var(--selo-w); color: var(--sobre-selo-w); }
.selo-origem[data-origem="M"] { background: var(--selo-m); color: var(--sobre-selo-m); }
.selo-origem[data-origem="ML"] { background: var(--selo-ml); color: var(--sobre-selo-ml); }
.selo-origem[data-origem="E"] { background: var(--selo-e); color: var(--sobre-selo-e); }
.selo-origem[data-origem="P"] { background: var(--selo-p); color: var(--sobre-selo-p); }
.selo-origem[data-origem="V"] { background: var(--selo-v); color: var(--sobre-selo-v); }
.selo-origem[data-origem="S"] { background: var(--selo-s); color: var(--sobre-selo-s); }
.selo-origem[data-origem="A"] { background: var(--selo-a); color: var(--sobre-selo-a); }
.selo-origem[data-origem="Mg"] { background: var(--selo-mg); color: var(--sobre-selo-mg); }
.origem { display: inline-flex; align-items: center; gap: 6px; }

.chip {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px 0 6px; border: 1px solid currentColor; border-radius: var(--raio);
  background: var(--folha); font: var(--peso-rotulo) var(--t-1)/1 var(--fonte); white-space: nowrap; vertical-align: middle;
}
.chip .icone { width: 14px; height: 14px; }
.chip[data-estado="no-ar"] { color: var(--no-ar); }
.chip[data-estado="atencao"] { color: var(--atencao); }
.chip[data-estado="erro"] { color: var(--erro-cor); }
.chip[data-estado="pausado"] { color: var(--pausado); }
.chip[data-estado="sombra"] { color: var(--sombra-cor); border-style: dashed; }
.chip.mudou { animation: chip-mudou 700ms ease-out 1; }
@keyframes chip-mudou { 30% { background: var(--azul-selecao); } }

/* relógio de idade: vermelho quando passa do ritmo da rotina */
.idade { display: inline-flex; align-items: center; gap: 4px; color: var(--grafite); font-size: var(--t-1); line-height: var(--l-1); white-space: nowrap; }
.idade .icone { width: 13px; height: 13px; }
.idade[data-atrasada="true"] { color: var(--erro-cor); font-weight: var(--peso-rotulo); }

/* ───────────── botões e campos (sobre o kit) ───────────── */
.elo .botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--botao); padding: 0 14px;
  border: 1px solid var(--regua-forte); border-radius: var(--raio); background: var(--folha); color: var(--tinta);
  font: var(--peso-rotulo) var(--t-2)/1 var(--fonte); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--duracao), border-color var(--duracao);
}
.elo .botao:hover { background: var(--linha-sob-mouse); }
.elo .botao .icone { width: 16px; height: 16px; }
.elo .botao--principal { background: var(--azul); border-color: var(--azul); color: var(--sobre-azul); font-weight: var(--peso-titulo); }
.elo .botao--principal:hover { background: var(--azul-forte); border-color: var(--azul-forte); }
.elo .botao--perigo { background: var(--folha); border-color: var(--vermelho); color: var(--erro-cor); }
.elo .botao--perigo:hover { background: var(--perigo-sob-mouse); }
.elo .botao--quieto { border-color: transparent; background: transparent; color: var(--azul); padding: 0 8px; }
.elo .botao--quieto:hover { background: var(--linha-sob-mouse); }
.elo .botao--p { min-height: 28px; padding: 0 10px; font-size: var(--t-1); }
.elo .botao[disabled] { opacity: 0.55; cursor: not-allowed; }
.elo .botao[aria-busy="true"] { cursor: progress; opacity: 0.8; }

.elo .campo { display: grid; gap: var(--e-1); align-content: start; }
.elo .campo label, .elo .campo .campo-rotulo { font-weight: var(--peso-rotulo); font-size: var(--t-2); }
.elo .campo .ajuda { font-size: var(--t-1); line-height: var(--l-1); color: var(--grafite); }
.elo .campo .erro-campo { font-size: var(--t-1); line-height: var(--l-1); color: var(--erro-cor); }
.elo :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-height: var(--botao); width: 100%; padding: 6px 10px; border: 1px solid var(--regua-forte); border-radius: var(--raio);
  background: var(--folha); color: var(--tinta); font: inherit;
}
.elo input[aria-invalid="true"], .elo select[aria-invalid="true"], .elo textarea[aria-invalid="true"] { border-color: var(--vermelho); }
.elo input.cod { font-family: var(--fonte-mono); }
.busca { position: relative; display: block; min-width: 0; }
.busca .icone { position: absolute; left: 9px; top: 50%; translate: 0 -50%; color: var(--grafite); width: 16px; height: 16px; pointer-events: none; }
.elo .busca input { padding-left: 32px; }

/* ───────────── tabela densa ───────────── */
.filtros {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); padding: 10px var(--e-3);
  background: var(--folha); border: 1px solid var(--regua); border-bottom: 0;
}
.filtros .busca { flex: 1 1 260px; max-width: 360px; }
.filtro-chip {
  display: inline-flex; align-items: center; gap: 2px; height: 28px; padding: 0 2px 0 10px; border: 1px solid var(--regua-forte);
  border-radius: var(--raio); background: var(--folha); color: var(--tinta); font-size: var(--t-1); white-space: nowrap;
}
.filtro-chip .rotulo-filtro { color: var(--grafite); margin-right: 3px; }
.filtro-chip button { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 3px; background: transparent; color: var(--grafite); cursor: pointer; }
.filtro-chip button:hover { background: var(--linha-sob-mouse); color: var(--tinta); }
.filtro-chip button .icone { width: 14px; height: 14px; }
.filtro-novo { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border: 1px dashed var(--regua-forte); border-radius: var(--raio); background: transparent; color: var(--azul); font: var(--peso-rotulo) var(--t-1)/1 var(--fonte); cursor: pointer; }
.contagem { margin-left: auto; color: var(--grafite); font-size: var(--t-1); white-space: nowrap; }
.contagem strong { color: var(--tinta); font-weight: var(--peso-titulo); }

.tabela-rolagem { overflow: auto; background: var(--folha); border: 1px solid var(--regua); border-radius: 0; }
.tabela-rolagem.alta { max-height: 70vh; }
.elo table.tabela { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-2); }
/* o base.css do kit (padrão 1) põe o cabeçalho de tabela em caixa alta com letra espaçada: no Elo nenhum (plano 6.0.1) */
.elo th { text-transform: none; letter-spacing: 0; }
.elo .tabela th, .elo .tabela td {
  height: var(--linha-tabela); padding: 0 var(--e-3); border-bottom: 1px solid var(--regua); text-align: left; vertical-align: middle; white-space: nowrap;
}
.elo .tabela th {
  position: sticky; top: 0; z-index: 1; background: var(--folha); color: var(--grafite); font: var(--peso-rotulo) var(--t-1)/var(--l-1) var(--fonte);
  text-transform: none; letter-spacing: 0; border-bottom-color: var(--regua-forte);
}
.elo .tabela th.num, .elo .tabela td.num { text-align: right; }
.elo .tabela td.cod { font-family: var(--fonte-mono); font-size: 0.875rem; }
.elo .tabela td.nome { white-space: normal; min-width: 200px; max-width: 440px; }
.elo .tabela td.nome > span { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.elo .tabela tbody tr:nth-child(even) td { background: var(--zebra); }
.elo .tabela tbody tr.clicavel { cursor: pointer; }
.elo .tabela tbody tr.clicavel:hover td { background: var(--linha-sob-mouse); }
.elo .tabela tbody tr[aria-selected="true"] td { background: var(--azul-selecao); }
.elo .tabela tbody tr:last-child td { border-bottom: 0; }
.elo .tabela td.difere { background: var(--diff) !important; }
.elo .tabela a.linha-link { color: inherit; text-decoration: none; }
.elo .tabela a.linha-link:hover { text-decoration: underline; }
.ordenar { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.ordenar .icone { width: 13px; height: 13px; opacity: 0.55; }
th[aria-sort="ascending"] .ordenar, th[aria-sort="descending"] .ordenar { color: var(--tinta); }
th[aria-sort="ascending"] .ordenar .icone, th[aria-sort="descending"] .ordenar .icone { opacity: 1; }
.confortavel .tabela td { height: var(--linha-conforto); }
/* tabela de duas linhas: o principal em cima e o complemento embaixo (pedido e nº no Winthor, total e pagamento) */
.elo .tabela--duas td { height: auto; padding-top: 7px; padding-bottom: 7px; line-height: var(--l-2); }
.elo .tabela--duas td.nome { min-width: 220px; }
.elo .tabela th.quebra { white-space: normal; min-width: 4.5rem; max-width: 6.5rem; } /* cabeçalho longo em duas linhas sobre coluna de número */
.elo .tabela--duas td.nome > span { -webkit-line-clamp: 2; }
.elo .tabela td .l2 { display: block; color: var(--grafite); font: 400 var(--t-1)/var(--l-1) var(--fonte); white-space: nowrap; }
.elo .tabela td .l2 .cod { font-family: var(--fonte-mono); font-size: 0.75rem; }
.elo .tabela td .l2 strong { color: var(--tinta); font-weight: var(--peso-rotulo); }
.com-selo { display: inline-flex; align-items: flex-start; gap: 8px; }
.com-selo > .selo-origem { margin-top: 2px; flex: none; }
.tabela-pe { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding: var(--e-2) var(--e-3); background: var(--folha); border: 1px solid var(--regua); border-top: 0; }
.barra-uso { display: inline-block; width: 56px; height: 4px; background: var(--esqueleto); vertical-align: middle; margin-left: 6px; }
.barra-uso > span { display: block; height: 100%; background: var(--azul); }

/* ───────────── a conta (6.0.4): a soma de um cupom ───────────── */
.conta { position: relative; max-width: 460px; background: var(--folha); border: 1px solid var(--regua); padding: var(--e-5) var(--e-4) var(--e-3); }
.conta::before { /* serrilha do cupom: a única ousadia da interface */
  content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 8px;
  background: radial-gradient(circle at 7px 0, var(--mesa) 5.5px, transparent 6px) 0 0 / 14px 8px repeat-x;
}
.conta-titulo { font: var(--peso-titulo) var(--t-3)/var(--l-3) var(--fonte); margin: 0; }
.conta-linhas { display: grid; grid-template-columns: calc(var(--selo) + 10px) minmax(0, 1fr) 1.75rem minmax(3.5rem, auto); column-gap: 0; margin: var(--e-3) 0 0; }
.conta-linha { display: contents; }
.conta-linha > * { padding: 6px 0; border-bottom: 1px dashed var(--regua); align-self: stretch; display: flex; align-items: center; }
.conta-linha .conta-texto { min-width: 0; display: block; padding-right: 10px; }
.conta-linha .conta-texto small { display: block; color: var(--grafite); font-size: var(--t-1); line-height: var(--l-1); }
.conta-linha .conta-op { justify-content: center; color: var(--grafite); font-weight: var(--peso-rotulo); }
.conta-linha .conta-valor { justify-content: flex-end; font-weight: var(--peso-rotulo); font-variant-numeric: tabular-nums; }
.conta-linha.nao-aplica .conta-valor, .conta-linha.nao-aplica .conta-op { color: var(--grafite); font-weight: var(--peso-corpo); }
.conta-total { display: contents; }
.conta-total > * { padding: 10px 0 6px; border-top: 3px double var(--tinta); margin-top: 6px; display: flex; align-items: center; }
.conta-total .conta-texto { display: block; font-weight: var(--peso-rotulo); padding-right: 10px; }
.conta-total .conta-valor { justify-content: flex-end; font: var(--peso-titulo) var(--t-4)/var(--l-4) var(--fonte); }
.conta-pe { margin-top: var(--e-2); display: grid; gap: 2px; }

/* ───────────── ficha de três colunas: W diz / E decide / canal tem ───────────── */
.ficha3 { display: grid; grid-template-columns: minmax(8rem, 0.7fr) repeat(3, minmax(0, 1fr)); background: var(--folha); border: 1px solid var(--regua); }
.ficha3 > div { padding: 8px var(--e-3); border-bottom: 1px solid var(--regua); min-width: 0; }
.ficha3 > div:not(.ficha3-rotulo) { border-left: 1px solid var(--regua); }
.ficha3 .ficha3-cabeca { display: flex; align-items: center; gap: var(--e-2); font-weight: var(--peso-titulo); padding-top: 10px; padding-bottom: 10px; box-shadow: inset 0 var(--enfase) 0 var(--cor-canal, var(--grafite)); }
.ficha3 .ficha3-cabeca .meta { font-weight: var(--peso-corpo); margin-left: auto; }
.ficha3 .ficha3-rotulo { color: var(--grafite); font-size: var(--t-1); display: flex; align-items: center; }
.ficha3 .ficha3-rotulo.ficha3-cabeca { box-shadow: none; }
.ficha3 .difere { background: var(--diff); }
.ficha3 .difere::after { content: 'difere'; display: inline-block; margin-left: var(--e-2); color: var(--atencao); font-size: var(--t-1); font-weight: var(--peso-rotulo); }
.ficha3 .abre-conta { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--azul); font: var(--peso-rotulo) var(--t-2)/var(--l-2) var(--fonte); cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 4px; }
.ficha3 .abre-conta .icone { width: 14px; height: 14px; }
.ficha3 > div:nth-last-child(-n + 4) { border-bottom: 0; }
.ficha3-abas { display: none; }
.ficha-cabeca { display: grid; gap: var(--e-2); margin-bottom: var(--e-4); }
.ficha-cabeca .codigos { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3); color: var(--grafite); }
.ficha-cabeca .codigos .cod { color: var(--tinta); }
.abas { display: flex; gap: 2px; border-bottom: 1px solid var(--regua); margin-top: var(--e-5); overflow-x: auto; }
.abas button, .abas a { min-height: 40px; padding: 0 var(--e-3); border: 0; background: none; color: var(--grafite); font: var(--peso-rotulo) var(--t-2)/1 var(--fonte); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; white-space: nowrap; }
.abas [aria-selected="true"], .abas [aria-current="page"] { color: var(--azul); box-shadow: inset 0 -3px 0 var(--azul); }

/* ───────────── linha do tempo vertical ───────────── */
.tempo { list-style: none; margin: 0; padding: 0; }
.tempo li { position: relative; display: grid; grid-template-columns: 3.25rem 24px minmax(0, 1fr); column-gap: 10px; padding-bottom: var(--e-4); }
.tempo li::before { content: ''; position: absolute; left: calc(3.25rem + 10px + 12px - 0.5px); top: calc(var(--selo) + 4px); bottom: 2px; width: 1px; background: var(--regua-forte); }
.tempo li:last-child { padding-bottom: 0; }
.tempo li:last-child::before { display: none; }
.tempo .tempo-hora { color: var(--grafite); font-size: var(--t-1); line-height: var(--selo); text-align: right; }
.tempo .selo-origem { margin-top: 0; justify-self: center; } /* coluna de 24 px: cabe a sigla de duas letras (ML, Mg) */
.tempo .tempo-texto { line-height: var(--l-2); margin-top: -2px; }
.tempo .tempo-depois { display: block; color: var(--grafite); font-size: var(--t-1); line-height: var(--l-1); }
.tempo li.tempo-alarme .tempo-texto { color: var(--erro-cor); font-weight: var(--peso-rotulo); }

/* ───────────── cartão de pendência ───────────── */
.pendencias { list-style: none; margin: 0; padding: 0; background: var(--folha); border: 1px solid var(--regua); }
.pendencia { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--e-4); row-gap: 2px; padding: var(--e-3) var(--e-4) var(--e-3) calc(var(--e-4) + 2px); background: var(--folha); box-shadow: inset var(--enfase) 0 0 var(--cor-canal, var(--grafite)); }
.pendencias > .pendencia + .pendencia { border-top: 1px solid var(--regua); }
.pendencia-motivo { font-weight: var(--peso-rotulo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pendencia-alvo { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--tinta); }
.pendencia-alvo .nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--grafite); }
.pendencia-alvo .nome .tinta, .tinta { color: var(--tinta); }
.pendencia-desde { color: var(--grafite); font-size: var(--t-1); line-height: var(--l-1); }
.pendencia-acao { grid-column: 2; grid-row: 1 / span 3; align-self: center; display: flex; gap: var(--e-2); }
.pendencia details { grid-column: 1 / -1; margin-top: var(--e-1); }
.pendencia summary { display: inline-flex; align-items: center; gap: 4px; color: var(--azul); font-size: var(--t-1); cursor: pointer; list-style: none; }
.pendencia summary::-webkit-details-marker { display: none; }
.pendencia details[open] summary .icone { rotate: 90deg; }
.pendencia pre, .erro-painel pre, .gaveta pre { margin: var(--e-2) 0 0; padding: var(--e-3); max-height: 280px; overflow: auto; background: var(--zebra); border: 1px solid var(--regua); white-space: pre-wrap; word-break: break-word; font-size: 0.8125rem; line-height: 1.5; }

/* ───────────── gaveta lateral (detalhe, conta, JSON bruto) ───────────── */
.gaveta {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 40; width: min(var(--gaveta), 100vw); display: flex; flex-direction: column;
  background: var(--folha); border-left: 1px solid var(--regua-forte); transform: translateX(100%); visibility: hidden;
  transition: transform var(--duracao) ease-out, visibility 0s linear var(--duracao);
}
.gaveta.aberta { transform: none; visibility: visible; transition: transform var(--duracao) ease-out; }
.gaveta-cabeca { display: flex; align-items: center; gap: var(--e-2); min-height: var(--faixa); padding: var(--e-2) var(--e-2) var(--e-2) var(--e-4); border-bottom: 1px solid var(--regua); }
.gaveta-cabeca h2 { flex: 1; font-size: var(--t-3); line-height: var(--l-3); }
.gaveta-corpo { flex: 1; overflow: auto; padding: var(--e-4); }
.gaveta-corpo:focus { outline: none; } /* recebe o foco ao abrir só para o leitor de tela começar dali; o anel em volta da gaveta inteira não ajuda quem enxerga */
.gaveta-corpo.na-mesa { background: var(--mesa); }
.fechar { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: var(--raio); background: transparent; color: var(--grafite); cursor: pointer; }
.fechar:hover { background: var(--linha-sob-mouse); color: var(--tinta); }

/* barra de comando (Ctrl+K) e confirmação de destruição: as únicas camadas por cima da tela */
.veu { position: fixed; inset: 0; z-index: 60; background: var(--veu); display: none; }
.veu.aberto { display: block; }
.comando-caixa { width: min(640px, calc(100vw - 32px)); margin: 12vh auto 0; background: var(--folha); border: 1px solid var(--regua-forte); border-radius: var(--raio); overflow: hidden; }
.comando-caixa .busca .icone { left: 14px; width: 18px; height: 18px; }
.elo .comando-caixa .busca input { min-height: 52px; padding-left: 42px; border: 0; border-bottom: 1px solid var(--regua); border-radius: 0; font-size: var(--t-3); }
.comando-lista { list-style: none; margin: 0; padding: var(--e-1) 0; max-height: 50vh; overflow: auto; }
.comando-lista li { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 var(--e-4); cursor: pointer; }
.comando-lista li[aria-selected="true"] { background: var(--azul-selecao); }
.comando-lista .meta { margin-left: auto; }
.comando-grupo { padding: var(--e-2) var(--e-4) 2px; color: var(--grafite); font-size: var(--t-1); }
.comando-pe { display: flex; gap: var(--e-4); padding: var(--e-2) var(--e-4); border-top: 1px solid var(--regua); color: var(--grafite); font-size: var(--t-1); }
.confirmar { width: min(480px, calc(100vw - 32px)); margin: 18vh auto 0; padding: var(--e-5); background: var(--folha); border: 1px solid var(--regua-forte); border-radius: var(--raio); box-shadow: inset 0 var(--enfase) 0 var(--vermelho); display: grid; gap: var(--e-3); }
.confirmar .acoes { display: flex; justify-content: flex-end; gap: var(--e-2); }

/* ───────────── carregando, vazio, erro, aviso ───────────── */
.esqueleto { display: block; height: 12px; background: var(--esqueleto); border-radius: 2px; }
.esqueleto + .esqueleto { margin-top: 12px; }
.esqueleto.w-30 { width: 30%; } .esqueleto.w-45 { width: 45%; } .esqueleto.w-60 { width: 60%; } .esqueleto.w-80 { width: 80%; } .esqueleto.w-95 { width: 95%; }
.esqueleto-linhas { padding: var(--e-4); display: grid; gap: 14px; }
.esqueleto-linhas .esqueleto + .esqueleto { margin-top: 0; }
.vazio-elo { display: grid; gap: var(--e-3); justify-items: start; padding: var(--e-5) var(--e-4); }
.vazio-elo p { max-width: 60ch; color: var(--tinta); }
.erro-painel { padding: var(--e-3) var(--e-4) var(--e-3) calc(var(--e-4) + 2px); background: var(--folha); border: 1px solid var(--regua); box-shadow: inset var(--enfase) 0 0 var(--vermelho); display: grid; gap: var(--e-1); }
.erro-painel .erro-o-que { color: var(--erro-cor); font-weight: var(--peso-titulo); display: flex; align-items: center; gap: 6px; }
.erro-painel summary { color: var(--azul); font-size: var(--t-1); cursor: pointer; }
.avisos { position: fixed; right: var(--e-4); bottom: var(--e-4); z-index: 70; display: grid; gap: var(--e-2); justify-items: end; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: var(--e-3); max-width: 440px; min-height: 44px; padding: var(--e-2) var(--e-2) var(--e-2) var(--e-4); border-radius: var(--raio); background: var(--toast); color: var(--sobre-toast); }
.toast .icone { color: var(--sobre-toast); }
.toast p { flex: 1; }
.toast .desfazer { min-height: 32px; padding: 0 var(--e-2); border: 0; background: none; color: var(--link-no-toast); font: var(--peso-titulo) var(--t-2)/1 var(--fonte); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ───────────── gráfico mínimo: barras finas e linha de 7 dias, sempre com o número ───────────── */
.grafico { display: flex; align-items: flex-end; gap: var(--e-3); }
.grafico svg { display: block; width: 112px; height: 32px; overflow: visible; }
.grafico .barra { fill: var(--regua-forte); }
.grafico .barra.hoje { fill: var(--azul); }
.grafico .linha-7d { fill: none; stroke: var(--azul); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.grafico .ponto-hoje { fill: var(--azul); }
.grafico-numero { font: var(--peso-titulo) var(--t-4)/var(--l-4) var(--fonte); }
.grafico-legenda { color: var(--grafite); font-size: var(--t-1); line-height: var(--l-1); }

/* ───────────── Início: o único número grande ───────────── */
.numero-grande { font: var(--peso-titulo) var(--t-6)/var(--l-6) var(--fonte); letter-spacing: -0.02em; }
.para-quem { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: var(--e-4); }
.pessoa-bloco { background: var(--folha); border: 1px solid var(--regua); box-shadow: inset var(--enfase) 0 0 var(--cor-canal, var(--grafite)); }
a.pessoa-bloco { display: block; color: inherit; text-decoration: none; }
a.pessoa-bloco:hover { background: var(--linha-sob-mouse); }
.pessoa-bloco header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-2); padding: var(--e-3) var(--e-4) var(--e-2) calc(var(--e-4) + 2px); }
.pessoa-bloco header strong { font: var(--peso-titulo) var(--t-3)/var(--l-3) var(--fonte); }
.pessoa-bloco header .quantas { font: var(--peso-titulo) var(--t-4)/var(--l-4) var(--fonte); }
.pessoa-bloco ul { list-style: none; margin: 0; padding: 0 var(--e-4) var(--e-3) calc(var(--e-4) + 2px); display: grid; gap: 6px; }
.pessoa-bloco li { display: flex; justify-content: space-between; gap: var(--e-3); }
.pessoa-bloco li span:last-child { font-weight: var(--peso-rotulo); }
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.numeros > div { padding: var(--e-3) var(--e-4); border-left: 1px solid var(--regua); display: grid; gap: 2px; align-content: start; }
.numeros > div:first-child { border-left: 0; }
.numeros .valor { font: var(--peso-titulo) var(--t-4)/var(--l-4) var(--fonte); }
.lista-simples { list-style: none; margin: 0; padding: 0; }
.lista-simples li { display: flex; align-items: center; gap: var(--e-2); min-height: 40px; padding: 0 var(--e-4); border-top: 1px solid var(--regua); }
.lista-simples li:first-child { border-top: 0; }
.lista-simples li .num, .lista-simples li .direita { margin-left: auto; }
.lista-duas li { padding-top: 7px; padding-bottom: 7px; }
.lista-duas .lista-texto { min-width: 0; }
.lista-duas .chip { margin-left: auto; }
.lista-duas .chip + .num { margin-left: var(--e-2); }
.l2 { display: block; color: var(--grafite); font: 400 var(--t-1)/var(--l-1) var(--fonte); }

/* ───────────── colunas do faturamento (etapas) ───────────── */
.etapas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-3); align-items: start; }
.etapa { background: var(--folha); border: 1px solid var(--regua); min-width: 0; }
.etapa-cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-2); padding: var(--e-3) var(--e-3) var(--e-2); border-bottom: 1px solid var(--regua); }
.etapa-cabeca strong { font: var(--peso-titulo) var(--t-3)/var(--l-3) var(--fonte); }
.etapa-cabeca .quantas { font: var(--peso-titulo) var(--t-4)/var(--l-4) var(--fonte); }
.etapa ul { list-style: none; margin: 0; padding: 0; }
.etapa li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2px var(--e-2); padding: var(--e-2) var(--e-3); border-top: 1px solid var(--regua); }
.etapa li:first-child { border-top: 0; }
.etapa li .meta { grid-column: 2 / -1; }
.etapa-pe { padding: var(--e-2) var(--e-3); border-top: 1px solid var(--regua); }

/* ───────────── foto do produto, de → para, blocos do pedido ───────────── */
.foto { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--regua); background: var(--folha); color: var(--regua-forte); overflow: hidden; vertical-align: middle; flex: none; }
.foto img { width: 100%; height: 100%; object-fit: contain; }
.foto .icone { width: 16px; height: 16px; }
.foto--g { width: 96px; height: 96px; }
.foto--g .icone { width: 28px; height: 28px; }
.de-para { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.de-para .seta { color: var(--grafite); }
.de-para .para { font-weight: var(--peso-titulo); }
.de-para .nota { color: var(--grafite); font-size: var(--t-1); }
.par-rotulo { display: grid; grid-template-columns: minmax(7rem, auto) minmax(0, 1fr); gap: 6px var(--e-3); margin: 0; }
.par-rotulo dt { color: var(--grafite); font-size: var(--t-1); line-height: var(--l-2); }
.par-rotulo dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.aviso-sombra { display: flex; align-items: flex-start; gap: var(--e-2); padding: var(--e-3) var(--e-4); background: var(--folha); border: 1px dashed var(--sombra-cor); color: var(--tinta); }
.aviso-sombra .icone { color: var(--sombra-cor); margin-top: 2px; }
.bipar { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; }
.bipar li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--e-2) var(--e-3); min-height: 64px; padding: var(--e-2) var(--e-4); border-top: 1px solid var(--regua); }
.bipar li:first-child { border-top: 0; }
.bipar .quantos { font: var(--peso-titulo) var(--t-4)/var(--l-4) var(--fonte); }
.so-celular { display: none; }
@media (max-width: 720px) { .so-computador { display: none !important; } .so-celular { display: inline; } }

/* rodapé de ações (celular) */
.rodape-acoes { display: none; }

/* ───────────── folha de impressão A4 (separação, pedido) ───────────── */
@page { size: A4; margin: 12mm 12mm 14mm; }
.folha-a4 { width: 210mm; min-height: 297mm; margin: 0 auto; padding: 12mm; background: var(--folha); border: 1px solid var(--regua); color: var(--tinta); }
.folha-a4 table { width: 100%; border-collapse: collapse; }
.folha-a4 th, .folha-a4 td { padding: 6px 4px; border-bottom: 1px solid var(--regua-forte); text-align: left; font-size: 12pt; }
.folha-a4 .caixa-marcar { display: inline-block; width: 14px; height: 14px; border: 1.5px solid var(--tinta); vertical-align: -2px; }
@media print {
  body.elo { background: var(--folha); }
  .trilho, .faixa, .nao-imprime, .avisos, .gaveta, .rodape-acoes { display: none !important; }
  .casca { display: block; }
  .conteudo { padding: 0; max-width: none; }
  .folha-a4 { width: auto; min-height: 0; padding: 0; border: 0; }
}

/* ───────────── celular (≤ 720 px) ───────────── */
@media (max-width: 720px) {
  /* a caixa do trilho fica vazia no celular (o trilho é fixo): linha auto de altura zero, e a área leva a sobra da tela */
  .casca { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .casca > :first-child { background: none; border-right: 0; }
  .trilho { position: fixed; z-index: 50; left: 0; top: 0; bottom: 0; width: min(300px, 86vw); transform: translateX(-100%); visibility: hidden; transition: transform var(--duracao) ease-out, visibility 0s linear var(--duracao); border-right: 1px solid var(--regua-forte); }
  .trilho.aberto { transform: none; visibility: visible; transition: transform var(--duracao) ease-out; }
  .trilho a.trilho-item { min-height: var(--toque); }
  .faixa { padding: 6px var(--e-3) 6px var(--e-1); align-items: center; }
  .faixa-frase p { white-space: normal; overflow: visible; font-size: var(--t-1); line-height: var(--l-1); }
  .faixa-menu { display: inline-grid; place-items: center; width: var(--toque); height: var(--toque); border: 0; background: none; color: inherit; cursor: pointer; flex: none; }
  .faixa-busca .faixa-busca-texto, .faixa-busca kbd { display: none; }
  .faixa-busca { width: var(--toque); height: var(--toque); padding: 0; justify-content: center; border: 0; background: transparent; color: inherit; }
  .faixa-busca .icone { width: 20px; height: 20px; }
  .conteudo { padding: var(--e-4) var(--e-3) calc(var(--e-7) + 40px); }
  .cabeca { margin-bottom: var(--e-4); }
  .cabeca .cabeca-acoes .botao--principal { display: none; } /* a ação principal vai para o rodapé */
  .elo h1 { font-size: var(--t-4); line-height: var(--l-4); }
  .elo .botao { min-height: var(--toque); }
  .elo .botao--p { min-height: var(--toque); }
  /* no celular todo alvo de toque tem --toque (44 px): filtros, abas, fechar, voltar, "Como funciona" e os links soltos dos painéis
     (medido em 01/11/2026 pelo scripts/provar_telas.cjs: filtro 28 px, botão pequeno 36, aba 40, "Como funciona" 22) */
  .filtro-novo { height: auto; min-height: var(--toque); min-width: var(--toque); justify-content: center; }
  .abas button, .abas a { min-height: var(--toque); }
  .fechar { width: var(--toque); height: var(--toque); }
  .como-funciona, .voltar { min-height: var(--toque); min-width: var(--toque); }
  .pendencia-alvo a { display: inline-flex; align-items: center; min-height: var(--toque); }
  .painel-cabeca > a.meta { display: inline-flex; align-items: center; min-height: var(--toque); }
  .lista-simples li > a.lista-texto { display: flex; align-items: center; min-height: var(--toque); }
  .elo :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { min-height: var(--toque); font-size: 16px; }
  .grade-3, .grade-2, .etapas { grid-template-columns: minmax(0, 1fr); }
  .numeros > div { border-left: 0; border-top: 1px solid var(--regua); }
  .numeros > div:first-child { border-top: 0; }
  .filtros .busca { max-width: none; flex-basis: 100%; }
  .contagem { margin-left: 0; width: 100%; }
  .gaveta { width: 100vw; border-left: 0; }
  .par-rotulo { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .par-rotulo dt { line-height: var(--l-1); }
  .par-rotulo dd { margin-bottom: var(--e-2); }
  .par-rotulo dd:last-child { margin-bottom: 0; }
  .lista-duas li { flex-wrap: wrap; }
  .lista-duas .chip { order: 3; margin-left: 0; }
  .pendencia-motivo, .pendencia-alvo .nome { white-space: normal; }
  .painel-cabeca { flex-wrap: wrap; }
  .pendencia { grid-template-columns: minmax(0, 1fr); }
  .pendencia-acao { grid-column: 1; grid-row: auto; margin-top: var(--e-2); }
  .pendencia-acao .botao { flex: 1; }
  .rodape-acoes { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; gap: var(--e-2); padding: var(--e-2) var(--e-3) calc(var(--e-2) + env(safe-area-inset-bottom)); background: var(--folha); border-top: 1px solid var(--regua-forte); }
  .rodape-acoes .botao { flex: 1 1 0; min-width: 0; white-space: normal; line-height: 1.2; justify-content: center; text-align: center; }
  .rodape-acoes .botao--principal { flex-grow: 1.4; }
  .avisos { left: var(--e-3); right: var(--e-3); bottom: calc(var(--toque) + 28px); justify-items: stretch; }
  .toast { max-width: none; }

  /* tabela vira lista de cartões com as 3 colunas que importam (data-cartao="titulo|valor|meta") */
  .tabela--cartoes thead { display: none; }
  .elo .tabela--cartoes, .tabela--cartoes tbody { display: block; }
  .elo .tabela--cartoes tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--e-3); padding: 10px var(--e-3); border-bottom: 1px solid var(--regua); }
  .elo .tabela--cartoes tbody tr:nth-child(even) td { background: transparent; }
  .elo .tabela--cartoes tbody tr:nth-child(even) { background: var(--zebra); }
  .elo .tabela--cartoes td { display: none; height: auto; padding: 0; border: 0; white-space: normal; }
  .elo .tabela--cartoes td[data-cartao] { display: block; }
  .elo .tabela--cartoes td[data-cartao="titulo"] { grid-column: 1; font-weight: var(--peso-rotulo); min-width: 0; max-width: none; }
  .elo .tabela--cartoes td[data-cartao="valor"] { grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: right; font-weight: var(--peso-titulo); }
  .elo .tabela--cartoes td[data-cartao="meta"] { grid-column: 1; color: var(--grafite); font-size: var(--t-1); line-height: var(--l-1); }
  .elo .tabela--cartoes td[data-cartao="meta"].cod { font-size: 0.8125rem; }
  .elo .tabela--cartoes td.nome > span { -webkit-line-clamp: 2; }
  .elo .tabela--cartoes td[data-cartao="linha"] { grid-column: 1 / -1; margin-top: 4px; text-align: left; }
  .elo .tabela--cartoes td[data-cartao="linha"]:empty { display: none; }
  .elo .tabela--cartoes td .l2 { white-space: normal; }
  .elo .tabela--cartoes td[data-cartao="valor"] .l2 { font-weight: 400; }

  /* ficha: abas W / Elo / Canal em vez das 3 colunas lado a lado */
  .ficha3-abas { display: flex; gap: 0; border: 1px solid var(--regua); border-bottom: 0; background: var(--folha); }
  .ficha3-abas button { flex: 1; min-height: var(--toque); display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; background: none; color: var(--grafite); font: var(--peso-rotulo) var(--t-2)/1 var(--fonte); cursor: pointer; }
  .ficha3-abas button[aria-selected="true"] { color: var(--tinta); box-shadow: inset 0 -3px 0 var(--azul); }
  .ficha3 { grid-template-columns: minmax(7rem, 0.8fr) minmax(0, 1.2fr); }
  .ficha3[data-coluna="w"] > [data-col]:not([data-col="w"]),
  .ficha3[data-coluna="e"] > [data-col]:not([data-col="e"]),
  .ficha3[data-coluna="c"] > [data-col]:not([data-col="c"]) { display: none; }
  .ficha3 > div:nth-last-child(-n + 4) { border-bottom: 1px solid var(--regua); }
  .ficha3 > .ficha3-rotulo.ficha3-cabeca { display: none; }
  .ficha3 > .ficha3-cabeca { grid-column: 1 / -1; border-left: 0 !important; }
}