/* ============================================================================
   componentes.css — as primitivas do design system.

   Botao, tag, avatar, indicador de nivel, tabela densa, cartao, popover, alerta,
   barra de progresso, campo, chip de fila, seletor segmentado, grupo recolhivel,
   lista chave-valor e snackbar.

   Cada uma destas classes tem um Tag Helper correspondente em Fintel.Web/TagHelpers.
   Escrever a classe na mao em uma view e o comeco da deriva visual: em tres meses
   existem quatro botoes primarios ligeiramente diferentes. Use o Tag Helper.

   O catalogo navegavel de tudo o que esta aqui e /design-system.
   ============================================================================ */

.seg{display:flex;background:var(--c-sunken);border-radius:var(--r-sm);padding:2px}
.seg button{padding:3px 8px;border-radius:var(--r-xs);font-size:12px;color:var(--c-ink-3);line-height:1.4}
.seg button[aria-pressed="true"]{background:var(--c-card);color:var(--c-ink);box-shadow:var(--sh-card)}
.av{width:26px;height:26px;border-radius:50%;background:var(--c-sunken);color:var(--c-ink);
  display:grid;place-items:center;font-size:11px;font-weight:600;letter-spacing:-.01em;flex:none;}
.av--sm{width:22px;height:22px;font-size:10px}
.av--lg{width:30px;height:30px;font-size:11.5px}
.sel{display:inline-flex;align-items:center;gap:7px;height:29px;padding:0 8px 0 9px;
  border:1px solid var(--c-line);border-radius:var(--r-sm);background:var(--c-card);
  font-size:12.5px;font-weight:500;box-shadow:var(--sh-card);}
.sel:hover{border-color:var(--c-line-2)}
.sel .dot{width:7px;height:7px;border-radius:50%;background:var(--c-ink-2);flex:none}
.sel .dot--on{background:var(--c-bad)}
.sel .dot--ok{background:var(--c-ok)}
.sel .k{color:var(--c-ink-3);font-weight:400}
/* A pill de situacao. O padrao e NEUTRO, e isso e deliberado: a maioria dos
   estados de um chamado nao e boa nem ma, e pintar todos e o arco-iris que o
   §9.1 recusa. So recebe cor o que exige leitura imediata. */
.tag{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;
  border-radius:var(--r-pill);background:var(--c-sunken);font-size:12px;color:var(--c-ink-2);
  border:1px solid transparent;}
.tag b{color:var(--c-ink);font-weight:600}
.tag--n{padding-left:8px}
.tag--ok{background:var(--c-ok-bg);border-color:var(--c-ok-bd);color:var(--c-ok)}
.tag--ok b{color:var(--c-ok)}
.tag--atencao{background:var(--c-warn-bg);border-color:var(--c-warn-bd);color:var(--c-warn)}
.tag--atencao b{color:var(--c-warn)}
.tag--alarme{background:var(--c-bad-bg);border-color:var(--c-bad-bd);color:var(--c-bad)}
.tag--alarme b{color:var(--c-bad)}
.lvl{display:inline-grid;place-items:center;width:19px;height:18px;border-radius:var(--r-xs);
  background:var(--c-sunken);color:var(--c-ink);font-size:10.5px;font-weight:700;letter-spacing:-.01em;}
.lvl--cur{background:var(--c-brand);color:var(--c-on-brand)}
.btn{display:inline-flex;align-items:center;gap:6px;height:29px;padding:0 11px;
  border:1px solid var(--c-line);border-radius:var(--r-pill);background:var(--c-card);
  font-size:12.5px;font-weight:500;box-shadow:var(--sh-card);white-space:nowrap;}
.btn:hover{border-color:var(--c-line-2);background:var(--c-app)}
.btn--p{background:var(--c-brand);border-color:var(--c-brand);color:var(--c-on-brand)}
.btn--p:hover{background:var(--c-brand-alt);border-color:var(--c-brand-alt)}
.btn--q{border-color:transparent;background:transparent;box-shadow:none;color:var(--c-ink-2)}
.btn--q:hover{background:var(--c-sunken);border-color:transparent;color:var(--c-ink)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn[disabled]:hover{background:var(--c-card);border-color:var(--c-line)}
.kb{font-size:10.5px;color:var(--c-ink-3);border:1px solid var(--c-line);border-radius:3px;padding:0 3px;line-height:15px}
.btn--p .kb{border-color:rgba(255,255,255,.28);color:rgba(255,255,255,.65)}
.gr{border-bottom:1px solid var(--c-line)}
.gr-cab{display:flex;align-items:center;gap:8px;width:100%;padding:11px 16px;
  font-size:12.5px;font-weight:600;color:var(--c-ink);text-align:left;}
.gr-cab:hover{background:var(--c-sunken)}
.gr-cab .ch{padding:0;border:0;color:var(--c-ink-3);transition:transform .18s}
.gr-cab[aria-expanded="false"] .ch{transform:rotate(-90deg)}
.gr-cab .aux{margin-left:auto;font-weight:400;font-size:12px;color:var(--c-ink-3)}
.gr-bd{padding:2px 16px 14px}
.gr-bd[hidden]{display:none}
.kv{display:grid;grid-template-columns:82px minmax(0,1fr);gap:5px 10px;font-size:12.5px}
.kv dt{color:var(--c-ink-3);line-height:1.45}
.kv dd{margin:0;color:var(--c-ink);line-height:1.45}
.kv dd .s{display:block;color:var(--c-ink-3);font-size:11.5px;margin-top:1px}
.kv dd.vazio{color:var(--c-ink-3)}
.prz+.prz{margin-top:13px}
.prz-cab{display:flex;align-items:baseline;gap:8px}
.prz-cab .n{font-size:12.5px;color:var(--c-ink-2)}
.prz-cab .v{margin-left:auto;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.prz-br{height:5px;border-radius:3px;background:var(--c-sunken);margin-top:6px;overflow:hidden;display:flex}
.prz-br i{display:block;height:100%;background:var(--c-ink-2);border-radius:3px;transition:width .9s cubic-bezier(.2,.9,.3,1)}
.prz-br i.q{background:var(--c-bad)}
.prz-pe{display:flex;justify-content:space-between;font-size:11px;color:var(--c-ink-3);margin-top:4px}
.prz--al .prz-cab .v{color:var(--c-bad)}
.alerta{display:flex;gap:9px;padding:10px 11px;border-radius:var(--r-sm);
  background:var(--c-bad-bg);border:1px solid var(--c-bad-bd);margin-top:14px;}
.alerta svg{color:var(--c-bad);margin-top:1px}
.alerta .tx{font-size:12px;line-height:1.5;color:var(--c-ink)}
.alerta .tx b{font-weight:600}
.alerta--ok{background:var(--c-ok-bg);border-color:var(--c-ok-bd)}
.alerta--ok svg{color:var(--c-ok)}
/* A VARIANTE NEUTRA. `.alerta` sozinho e alarme — fundo e borda na familia `bad` —,
   e um bloco que so EXPLICA nao pode chegar vermelho: quem le antes do texto ja
   entendeu que algo deu errado, e nada deu. A cor tem quatro trabalhos (§9.1 regra
   2), e "aqui vai uma explicacao" nao e um deles: o que separa este bloco do texto
   em volta e a SUPERFICIE. */
.alerta--nota{background:var(--c-sunken);border-color:var(--c-line)}
.alerta--nota svg{color:var(--c-ink-3)}
.alerta--nota .tx{color:var(--c-ink-2)}
.alerta--nota .tx b{color:var(--c-ink)}
.pop--p{width:430px;max-width:calc(100vw - 24px)}
.card>.casc{margin-top:0;padding:0 14px 6px}
.pop{position:fixed;left:0;top:0;z-index:80;background:var(--c-card);border:1px solid var(--c-line);
  border-radius:var(--r);box-shadow:var(--sh-modal);padding:5px;min-width:212px;
  opacity:0;transform:translateY(-4px) scale(.99);pointer-events:none;
  transition:opacity .14s,transform .14s;}
.pop.on{opacity:1;transform:none;pointer-events:auto}
.pop-h{padding:7px 9px 5px;font-size:11px;color:var(--c-ink-3)}
.pop-i{display:flex;align-items:center;gap:9px;width:100%;padding:7px 9px;border-radius:var(--r-sm);
  font-size:12.5px;text-align:left;color:var(--c-ink);}
.pop-i:hover{background:var(--c-sunken)}
.pop-i .dot{width:7px;height:7px;border-radius:50%;background:var(--c-ink-3);flex:none}
.pop-i .rt{margin-left:auto;font-size:11px;color:var(--c-ink-3)}
.pop-i[aria-checked="true"]{font-weight:600}
.pop-sep{height:1px;background:var(--c-line);margin:5px -5px}
.pop--w{min-width:330px;padding:14px}
.pop--w h4{font-size:13px;font-weight:600;margin-bottom:3px}
.pop--w .sb{font-size:12px;color:var(--c-ink-2);line-height:1.5}
.pop--w textarea{width:100%;border:1px solid var(--c-line);border-radius:var(--r-sm);background:var(--c-app);
  color:var(--c-ink);font:inherit;font-size:12.5px;padding:8px 10px;resize:vertical;min-height:52px;}
.pop--w textarea:focus-visible{outline:2px solid var(--c-brand);outline-offset:1px;
  border-radius:var(--r-sm);border-color:var(--c-brand)}
.pop--w .pe{display:flex;align-items:center;gap:8px;margin-top:12px}
.pop--w .pe .grow{flex:1}
/* O AVISO PASSOU A TER QUATRO TIPOS EM 10/09/2026, e a superficie mudou junto.

   Ele era preenchimento solido da marca com o texto em --c-on-brand. Com um tipo so
   isso funcionava; com quatro, cada variante precisaria de um par de tokens proprio
   (--c-on-ok, --c-on-bad...) que nao existe e que teria de passar pelo
   TestesDeContrasteDosTokens um a um.

   A saida e a do mockup, que ja resolvia isso: SUPERFICIE NEUTRA, e a cor so no
   icone. O texto fica em --c-ink sobre --c-card, que e o par mais conferido do
   sistema, e nenhuma variante introduz razao de contraste nova — porque nenhuma
   variante pinta texto. */
.snk{position:fixed;left:50%;bottom:62px;transform:translate(-50%,8px);z-index:90;
  display:flex;align-items:flex-start;gap:10px;max-width:min(560px,calc(100vw - 32px));
  background:var(--c-card);color:var(--c-ink);border:1px solid var(--c-line-2);
  border-radius:var(--r);box-shadow:var(--sh-modal);
  padding:10px 14px;font-size:12.5px;line-height:1.45;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;}
.snk.on{opacity:1;transform:translate(-50%,0)}

/* O icone nao encolhe e alinha pela primeira linha: aviso de duas linhas com o
   icone centralizado verticalmente fica com o simbolo no meio do texto. */
.snk svg{flex:none;margin-top:1px}

/* A COR ESTA NO ICONE, E O DESENHO MUDA JUNTO — visto para o que deu certo, triangulo
   para o que exige atencao. Identidade que depende so de cor nao chega a quem nao
   distingue as duas, e a regra vale aqui igual a que vale em grafico (§9.6). */
.snk--marca svg{color:var(--c-brand)}
.snk--ok svg{color:var(--c-ok)}
.snk--warn svg{color:var(--c-warn)}
.snk--bad svg{color:var(--c-bad)}
.segw--pf button{padding:5px 11px;font-size:12px;white-space:nowrap}
.hero{margin-bottom:22px}
.hero-data{font-size:12px;color:var(--c-ink-3);margin-bottom:7px}
.hero-t{font-size:26px;font-weight:600;letter-spacing:-.026em;line-height:1.24;max-width:34ch}
.hero-t b{font-weight:600}
.hero-t .al{color:var(--c-bad)}
.hero-s{font-size:13px;color:var(--c-ink-2);margin-top:7px;line-height:1.5;max-width:70ch}
.card{border:1px solid var(--c-line);border-radius:var(--r);background:var(--c-card);
  box-shadow:var(--sh-card);overflow:hidden;}
.card+.card{margin-top:16px}
.card-cab{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--c-line)}
.card-cab h2{font-size:13px;font-weight:600;letter-spacing:-.006em}

/* Titulo de tela — o degrau de cima da escala.

   Existia como `style="font-size:19px;font-weight:600;letter-spacing:-.01em"` repetido em
   quatro lugares, tres deles inline. A propria pagina de design system o chamava de "Titulo
   de tela, 19px/600": era um degrau nomeado da escala que nunca ganhou nome no CSS. Literal
   copiado e' como a escala tipografica racha em tres meses. */
.titulo-de-tela{font-size:19px;font-weight:600;letter-spacing:-.01em}
.card-cab .grow{flex:1}
.card-cab .aux{font-size:11.5px;color:var(--c-ink-3);text-align:right}
.card-bd{padding:13px 14px}
.card-pe{padding:0 14px 13px;font-size:11.5px;color:var(--c-ink-3);line-height:1.45}
.strip{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--c-line)}
.dc{background:var(--c-card);padding:11px 12px 13px;min-width:0}
.dc-d{display:flex;align-items:baseline;gap:6px}
.dc-n{font-size:16px;font-weight:600;letter-spacing:-.02em}
.dc-w{font-size:11px;color:var(--c-ink-3);text-transform:lowercase}
.dc-c{display:block;font-size:12.5px;margin-top:7px;color:var(--c-ink);line-height:1.4}
.dc-c .s{display:block;color:var(--c-ink-3);font-size:11.5px;margin-top:1px}
.dc-c.zero{color:var(--c-ink-3)}
.dc--al{background:var(--c-bad-bg)}
.dc--al .dc-n,.dc--al .dc-w{color:var(--c-bad)}
.dc-flag{display:inline-flex;align-items:center;gap:4px;color:var(--c-bad);font-size:11px;font-weight:600;margin-top:6px}
.strip-pe{padding:11px 14px;font-size:11.5px;color:var(--c-ink-3);border-top:1px solid var(--c-line);line-height:1.5}
.bola{padding:5px 14px 11px}
.mt{display:flex;align-items:baseline;gap:8px}
.mt-n{font-size:24px;font-weight:600;letter-spacing:-.03em;line-height:1}
.mt-l{font-size:12px;color:var(--c-ink-2)}
.mt-s{font-size:11.5px;color:var(--c-bad);margin-top:8px;line-height:1.45}
.tbl--crt thead th{background:var(--c-app);position:static}
.tbl--crt td{padding:10px}
.tbl--crt tbody tr:last-child td{border-bottom:1px solid var(--c-line)}
.bola-mini{display:flex;gap:4px;align-items:flex-end}
.segw--eixo button{padding:5px 10px;font-size:11.5px;white-space:nowrap}
.tbl-wrap--emb{overflow-x:auto}
.tbl--cli thead th{background:var(--c-app);position:static}
.tbl--cli tbody tr{cursor:pointer}
.tbl--cli td{padding:10px}
.tbl--cli tbody tr:last-child td{border-bottom:1px solid var(--c-line)}
.segw--pub{padding:3px}
.segw--pub button{padding:6px 12px;font-size:12px;white-space:nowrap}
.segw--4 button{font-size:12px}
.fld-hint{font-size:11.5px;color:var(--c-ink-3);margin-top:5px;line-height:1.4}
.vw{display:flex;align-items:center;gap:2px;flex:none}
.vw-add{width:26px;height:26px;border-radius:var(--r-sm);color:var(--c-ink-3);flex:none;
  border:1px dashed var(--c-line-2);display:grid;place-items:center;margin-left:5px;}
.vw-add:hover{color:var(--c-ink);border-color:var(--c-ink-3);border-style:solid}
.fbar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  padding:8px 14px;border-bottom:1px solid var(--c-line);background:var(--c-app);}
.fbar .grow{flex:1}
.fmodo{font-size:11.5px;color:var(--c-ink-2);border:1px solid var(--c-line);border-radius:100px;
  padding:3px 10px;background:var(--c-card);white-space:nowrap;flex:none;}
.fmodo:hover{border-color:var(--c-line-2);color:var(--c-ink)}
.fchip{display:inline-flex;align-items:stretch;border:1px solid var(--c-line);border-radius:var(--r-sm);
  background:var(--c-card);overflow:hidden;font-size:12px;box-shadow:var(--sh-card);}
.fchip>*{display:flex;align-items:center;padding:4px 7px}
.fchip .k{color:var(--c-ink-3);border-right:1px solid var(--c-line);white-space:nowrap}
.fchip .o{color:var(--c-ink-2);border-right:1px solid var(--c-line);white-space:nowrap}
.fchip .v{color:var(--c-ink);font-weight:500;max-width:250px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.fchip .o:hover,.fchip .v:hover{background:var(--c-sunken)}
.fchip .x{color:var(--c-ink-3);border-left:1px solid var(--c-line);padding:4px 6px}
.fchip .x:hover{color:var(--c-bad);background:var(--c-bad-bg)}
.fadd{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--c-ink-2);
  border:1px dashed var(--c-line-2);border-radius:var(--r-sm);padding:4px 9px;flex:none;}
.fadd:hover{color:var(--c-ink);border-color:var(--c-ink-3);border-style:solid}
.fdirty{font-size:11px;color:var(--c-bad);border:1px solid var(--c-bad-bd);background:var(--c-bad-bg);
  border-radius:100px;padding:2px 8px;white-space:nowrap;}
.tbl-nt{padding:0 14px 14px;margin-top:-6px;font-size:11.5px;color:var(--c-ink-3);line-height:1.5;max-width:78ch}
.tbl-vazio{padding:34px 14px;text-align:center;font-size:12.5px;color:var(--c-ink-3);line-height:1.6}
.tbl-vazio b{display:block;color:var(--c-ink);font-weight:600;font-size:13px;margin-bottom:3px}
.tbl-vazio b:not(:first-child){display:inline;font-size:12.5px;margin:0}
.pop--f{min-width:284px;max-width:284px;padding:0;overflow:hidden}
.pop--q{min-width:352px;max-width:352px}
.pop--q label{display:block;font-size:11.5px;color:var(--c-ink-3);margin:12px 0 5px}
.pop--q label:first-of-type{margin-top:10px}
.chk{display:flex;align-items:flex-start;gap:8px;margin-top:11px;cursor:pointer}
.chk .bx{width:15px;height:15px;border:1px solid var(--c-line-2);border-radius:3px;flex:none;margin-top:1px;
  display:grid;place-items:center;background:var(--c-card);}
.chk[aria-checked="true"] .bx{background:var(--c-brand);border-color:var(--c-brand)}
.chk[aria-checked="true"] .bx::after{content:"";width:7px;height:4px;border-left:1.7px solid var(--c-on-brand);
  border-bottom:1.7px solid var(--c-on-brand);transform:rotate(-45deg) translate(1px,-1px);}
.chk .tx{font-size:12.5px;line-height:1.35}
.chk .tx .s{display:block;font-size:11.5px;color:var(--c-ink-3);margin-top:1px}
.segw{display:flex;background:var(--c-sunken);border-radius:var(--r-sm);padding:2px}
.segw button{flex:1;padding:5px 6px;border-radius:var(--r-xs);font-size:11.5px;color:var(--c-ink-3)}
.segw button[aria-pressed="true"]{background:var(--c-card);color:var(--c-ink);box-shadow:var(--sh-card);font-weight:500}
.vw{display:flex;gap:2px;flex:none}
.vw button{display:flex;align-items:center;gap:6px;padding:5px 9px;border-radius:var(--r-sm);
  font-size:12.5px;color:var(--c-ink-3);white-space:nowrap;}
.vw button:hover{background:var(--c-sunken);color:var(--c-ink)}
.vw button .n{font-size:11px;background:var(--c-sunken);border-radius:3px;padding:0 4px;line-height:16px}
.vw button[aria-pressed="true"]{background:var(--c-soft);color:var(--c-ink);font-weight:500}
.vw button[aria-pressed="true"] .n{background:var(--c-card)}
.tbl-wrap{overflow:auto;min-height:0}
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.tbl thead th{position:sticky;top:0;z-index:3;background:var(--c-canvas);
  text-align:left;font-weight:500;font-size:11.5px;color:var(--c-ink-3);
  padding:9px 10px;border-bottom:1px solid var(--c-line);white-space:nowrap;}
.tbl thead th:first-child,.tbl td:first-child{padding-left:14px}
.tbl thead th:last-child,.tbl td:last-child{padding-right:14px}
.tbl td{padding:9px 10px;border-bottom:1px solid var(--c-line);vertical-align:middle}
.tbl td.vazio{color:var(--c-ink-3)}
/* Qualificador que acompanha o valor da celula — a UF ao lado do nome do municipio.
   Nao e coluna propria: duas letras nao pagam uma coluna, e separado do nome ele
   perderia o unico sentido que tem, que e desambiguar homonimo entre estados. */
.td-sec{font-size:11.5px;color:var(--c-ink-3)}
/* Idade e "atualizado ha" nao quebram no meio. Ver TempoRelativoTagHelper. */
.t-rel{white-space:nowrap}
.tbl td:nth-child(4){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
.tbl tbody tr[data-go]{cursor:pointer}
.tbl tbody tr[data-go]:hover td{background:var(--c-sunken)}
.tbl tbody tr.on td{background:var(--c-sunken)}
.tbl tr.gh td{background:var(--c-sunken);color:var(--c-ink-2);font-size:11.5px;font-weight:600;
  padding:6px 14px;border-bottom:1px solid var(--c-line);border-top:1px solid var(--c-line);}
.tbl tr.gh .gn,.tp-h .gn{display:inline-block;background:var(--c-card);border:1px solid var(--c-line);border-radius:3px;
  padding:0 4px;margin-left:5px;font-weight:500;font-size:11px;}
.tbl-pe{padding:12px 14px 20px;font-size:11.5px;color:var(--c-ink-3)}
.cbx{display:grid;place-items:center;width:15px;height:15px;flex:none;
  border:1px solid var(--c-line-2);border-radius:3px;background:var(--c-card);cursor:pointer;}
.cbx:hover{border-color:var(--c-ink-3)}
.cbx[aria-checked="true"]{background:var(--c-brand);border-color:var(--c-brand)}
.cbx[aria-checked="true"]::after{content:"";width:7px;height:4px;border-left:1.7px solid var(--c-on-brand);
  border-bottom:1.7px solid var(--c-on-brand);transform:rotate(-45deg) translate(1px,-1px);}
.kv--mail{grid-template-columns:66px minmax(0,1fr);font-size:12.5px}
.kv--mail dd{color:var(--c-ink)}
mark[data-hl]{background:var(--c-soft);color:var(--c-ink);border-radius:3px;padding:0 3px;
  box-shadow:inset 0 -1px 0 var(--c-line-2);}
.fld{padding:12px 16px;border-bottom:1px solid var(--c-line)}
.fld>label,.fld>div>label{display:block;font-size:11.5px;color:var(--c-ink-3);margin-bottom:5px}
.fld--grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* `margin:0` porque .fld-ro costuma ser um <p>, e a margem de 1em do navegador nao
   tem nada a ver com este layout. Vinte e sete views cancelavam isso a mao, uma a
   uma, com style="margin-top:0" — patch de componente espalhado por trinta arquivos.
   O ritmo entre dois seguidos vem da regra irma, e nao de cada chamador. */
.fld-ro{font-size:12.5px;color:var(--c-ink);line-height:1.45;margin:0}
.fld-ro + .fld-ro{margin-top:6px}
/* Mesma historia: elas nascem com margem de cima para se separar do que veio antes,
   e quando sao a PRIMEIRA coisa do bloco nao ha nada de que se separar.

   `:first-child` sem qualificar o pai, e nao `.card-bd > `: o mesmo bloco aparece em
   card, em caixa de autenticacao e em rodape de card, e enumerar os pais e como a
   regra fica sempre um container atras do uso. */
.alerta:first-child,.acoes:first-child,.fld-ro-s:first-child{margin-top:0}

/* ...e `:first-child` NAO cobre o caso mais comum do projeto. `@Html.AntiForgeryToken()`
   emite um <input type="hidden">, que nao pinta nada e mesmo assim ocupa a posicao de
   primeiro filho — e formularios com `Retorno` tem dois. Todo POST cai nisso.

   Doze views resolviam a mao, com o mesmo par de margens no atributo `style`. Par de
   margem literal na view e o tipo de coisa que deriva em tres meses: bastava uma delas
   virar 12px para o espacamento rachar sem ninguem notar. */
.abre-bloco{margin-top:0;margin-bottom:13px}

/* Corpo de card que segue outro ganha a divisoria. Nove views escreviam a borda a
   mao, uma a uma, e um `border-top` literal na view e o tipo de coisa que sobrevive
   a uma troca de paleta apontando para o token errado. */
.card-bd + .card-bd{border-top:1px solid var(--c-line)}

/* Lista curta dentro de um paragrafo: presenca, recusas de validacao, motivos. Dez
   views usavam `<span style="display:block">` para a mesma coisa. */
.linhas > *{display:block}
.fld-ro-s{display:block;font-size:11.5px;color:var(--c-ink-3);margin-top:3px;line-height:1.45}
.inp{width:100%;height:31px;border:1px solid var(--c-campo-bd);border-radius:var(--r-sm);
  background:var(--c-card);color:var(--c-ink);font:inherit;font-size:12.5px;padding:0 9px;}
/* FOCO VISIVEL, e nao um gesto na direcao dele.

   Isto era `outline:none` + `box-shadow` com --ring, que e 7% de opacidade no claro
   e 8% no escuro. Medido contra o cartao: 1,15:1 e 1,00:1 — nao e indicador fraco,
   e indicador nenhum. E a mudanca de borda que o acompanhava dava 1,16:1 contra a
   borda de repouso. Toda caixa de texto do sistema ficava sem foco visivel.

   Pior: `outline:none` no `:focus` matava tambem o anel global, porque
   `:focus-visible` e subconjunto de `:focus` e `.inp:focus` tem especificidade maior.

   `:focus-visible` e nao `:focus`: campo de texto casa `:focus-visible` inclusive no
   clique — a regra vale para mouse e teclado sem precisar das duas.

   O raio vem repetido de proposito: a regra global de foco impoe --r-xs para dar forma
   ao anel de quem nao tem raio, e sem isto o campo mudaria de canto ao receber foco. */
.inp:focus-visible{outline:2px solid var(--c-brand);outline-offset:1px;
  border-radius:var(--r-sm);border-color:var(--c-brand);box-shadow:none}

/* O <select> DO DESIGN SYSTEM — modificador de `.inp`, e nao uma base nova.

   Ele continua sendo um `<select>` nativo: teclado, seletor do celular, zero JavaScript.
   O que muda e a pele. Sem isto ele saia com a borda do sistema operacional no meio de uma
   tela que nao tem nenhuma outra, e no tema escuro saia BRANCO — o projeto nao declara
   `color-scheme`, entao o controle nativo ignora o tema inteiro.

   Modificador, para a borda, o fundo e o anel de foco virem do MESMO lugar que o campo de
   texto. Duas bases divergiriam no primeiro ajuste de token.

   `appearance:none` leva a seta junto, e por isso ela vem do wrapper. */
.inp--sel{width:auto;height:27px;padding:0 25px 0 9px;cursor:pointer;
  appearance:none;-webkit-appearance:none;max-width:100%;text-overflow:ellipsis;}
.inp--sel:hover{border-color:var(--c-ink-3)}

/* A SETA E MASCARADA, e nao imagem de fundo: assim ela segue a cor do tema. Um SVG em
   `data:` URI traria a cor cozida dentro dele, e ficaria escura sobre fundo escuro. */
.selw{position:relative;display:inline-flex;align-items:center;min-width:0;
  --seta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");}
.selw::after{content:"";position:absolute;right:8px;width:11px;height:11px;pointer-events:none;
  background:var(--c-ink-3);
  -webkit-mask:var(--seta) center/11px 11px no-repeat;mask:var(--seta) center/11px 11px no-repeat;}
.lg{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--c-ink-3)}
.sw{display:block;width:16px;height:9px;border-radius:2px;flex:none}
.sw.at{background:var(--c-soft);border:1px solid var(--c-line-2)}
.sw.dev{background:var(--c-line-2)}
.sw.re{background:var(--c-app);border:1px dashed var(--c-line-2)}
.sw.ind{background:repeating-linear-gradient(135deg,var(--c-bad) 0 2px,transparent 2px 6px);opacity:.75}
.sw.sus{background:repeating-linear-gradient(45deg,var(--c-line-2) 0 2px,transparent 2px 6px)}
.sw.gapl{background:var(--c-bad-bg);border:1px solid var(--c-bad-bd)}
.tbl--tp{border:1px solid var(--c-line);border-radius:var(--r);background:var(--c-card);overflow:hidden}
.tbl--tp thead th{background:var(--c-app);position:static}
.tbl--tp td{padding:9px 10px}
.tbl--tp tbody tr:last-child td{border-bottom:1px solid var(--c-line)}
.tbl--tp .num{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--c-ink-2);font-size:11.5px}
.tbl--tp .sub{display:block;padding:0;border:0;overflow:visible;height:auto;font-size:11.5px;color:var(--c-ink-3);background:none}
.tbl--tp tr.sus{background:var(--c-warn-bg)}
.tbl--tp tfoot td{border-bottom:0;background:var(--c-app);font-weight:600;font-size:12.5px}
.tbl--tp tfoot td:not(:nth-child(-n+2)){font-weight:400;color:var(--c-ink-3);font-size:11.5px}
.lk{color:var(--c-ink-2);font-size:12.5px}
.lk:hover{color:var(--c-ink);text-decoration:underline}
/* ----------------------------------------------------------------------------
   Descarte de coluna por LARGURA — declarado pela tabela, nao pela posicao.

   Aqui moravam quatro regras posicionais: nth-child(4) a 1280, (7) a 1120, (6) a 900
   e (8) a 600, aplicadas a TODA `.tbl` da plataforma. Os numeros vieram da tabela da
   fila do mockup, onde eram os certos. Em producao existem dezessete tabelas, com
   quatro a oito colunas cada, e a mesma posicao significa outra coisa em cada uma —
   o resultado media entre inutil e destrutivo:

     /clientes      1280 escondia Documento;  900 escondia Situacao
     /agentes       1280 escondia Escopo, que e o assunto da tela
     /sla           1280 escondia Vigencia, numa tela cujo tema E a vigencia (P5)
     /produtos/…    1280 escondia a coluna de ACOES — os botoes sumiam da tela
     /tempo         1280 escondia "No que", o vinculo do registro

   Uma coluna nao sabe se pode sair pela posicao em que caiu. Quem sabe e a tabela.
   Por isso `data-corta` no `th` E no `td`: o valor e a largura a partir da qual
   aquela coluna some, e ela some por decisao escrita, nao por coincidencia de indice.

   ORDEM DE DESCARTE, na ordem em que se aplica:
     1. referencia que a pagina de detalhe repete (documento, codigo, franquia)
     2. identidade secundaria (nome longo quando ha nome curto, modulo, nivel)
     3. NUNCA o que muda o que a pessoa faz com a linha (situacao, prazo, estado)
     4. NUNCA coluna de acao — botao que desaparece nao e densidade, e perda de funcao

   Tabela que caiba na largura nao corta nada. Cortar coluna de tabela de quatro
   colunas a 1280px foi metade do estrago acima.

   Travado por TestesDoDescarteDeColuna. */
@media (max-width:1280px){
  .tbl [data-corta="1280"]{display:none}
}
@media (max-width:1120px){
  .tbl [data-corta="1120"]{display:none}
  .strip{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  /* Abaixo de 900 a tabela ROLA na horizontal, e a rolagem e a valvula que permite
     cortar pouco: coluna escondida nao volta, coluna fora da vista volta com o dedo. */
  .tbl-wrap{overflow-x:auto}
  .tbl [data-corta="900"]{display:none}
  .segw--pub{width:100%}
  .segw--pub button{flex:1;white-space:normal}
}
@media (max-width:600px){
  .kv{grid-template-columns:1fr;gap:1px 0}
  .kv dt{margin-top:7px}
  .fld--grid{grid-template-columns:1fr}
  .tbl [data-corta="600"]{display:none}
  .strip{grid-template-columns:1fr}
  .hero-t{font-size:21px}
  .segw--eixo{width:100%;flex-wrap:wrap}
  .segw--eixo button{flex:1 1 44%}
  .segw--4{flex-wrap:wrap}
  .segw--4 button{flex:1 1 46%}
}

/* ----------------------------------------------------------------------------
   Formulario — campo, erro e o campo de codigo.

   `.inp` ja existe e tem 31px, que e a altura da densidade alta das telas de
   trabalho. Formulario de autenticacao e a excecao: e a unica tela que a pessoa
   usa de pe, com pressa, as vezes no celular — dai `.inp--g`, com 36px, que e o
   alvo de toque minimo confortavel. */
.campo{margin-bottom:11px}
.campo>label{display:block;font-size:11.5px;color:var(--c-ink-3);margin-bottom:5px}
.campo>label .op{color:var(--c-ink-3);font-weight:400}
.inp--g{height:36px;font-size:13.5px;padding:0 11px}
.inp[aria-invalid="true"]{border-color:var(--c-bad-bd);background:var(--c-bad-bg)}
.campo-erro{display:block;font-size:11.5px;color:var(--c-bad);margin-top:5px;line-height:1.4}

/* ------------------------------------------------------- opcoes visiveis (.opc)

   Escolha de poucas opcoes, visivel de uma vez. Substitui o <select> onde a lista
   e curta e a opcao MUDA O QUE ACONTECE: canal, natureza, prioridade, visibilidade.
   Select esconde as alternativas atras de um clique, e esconder alternativa de quem
   esta aprendendo a tela e o oposto de conduzir.

   E `input[type=radio]`, e NAO botao. O `.seg`/`.segw` do projeto sao <button>:
   dependem de JavaScript para marcar e nao submetem valor nenhum. Chip que so
   funciona com script e campo que desaparece do formulario quando o script falha
   (secao 9.4). Aqui o radio submete sozinho, o teclado navega com as setas de graca,
   e o leitor de tela anuncia "opcao 2 de 6" sem nada declarado. */
/* `.opc`, e NAO `.chip`: `.chip` ja existe no projeto desde a fase 3 e e um quadrado
   de 34px com icone dentro. Reusar o nome fez a primeira versao desta primitiva
   herdar `width:34px; display:grid`, e os rotulos de 72 a 88px transbordaram para
   cima uns dos outros — medido: quatro pecas de 34px espacadas de 40 com texto de
   88. Nome curto colide; conferir antes custa menos que medir depois. */
.opcs{display:flex;flex-wrap:wrap;gap:6px}
.opc{position:relative;display:inline-flex;flex:none}
/* O input cobre a opcao inteira e fica invisivel: a area de clique e a peca toda, e
   nao um circulo de 13px ao lado do texto. `opacity:0` e nao `display:none` porque
   input escondido com display perde o foco por teclado. */
.opc>input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.opc>span{display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:var(--r-pill);
  border:1px solid var(--c-line-2);background:var(--c-card);
  color:var(--c-ink-2);font-size:12px;line-height:1.4;white-space:nowrap;
  transition:background .12s,border-color .12s,color .12s;}
.opc:hover>span{border-color:var(--c-brand);color:var(--c-ink)}
.opc>input:checked+span{background:var(--c-brand);border-color:var(--c-brand);
  color:var(--c-on-brand);font-weight:600;}
/* O anel vai no span, porque o input tem opacidade zero e o anel dele seria
   invisivel — o mesmo raciocinio do `.bsc-campo:focus-within`. */
.opc>input:focus-visible+span{outline:2px solid var(--c-brand);outline-offset:2px}

/* ---- prioridade: a unica opcao que carrega cor ---------------------------
   Prioridade e SEVERIDADE, e severidade tem ordem — e o caso em que a escala de
   estado (alarme, atencao, confirmacao) se aplica de verdade, diferente de cliente
   ou modulo, que nao tem ordem nenhuma e por isso nunca ganham cor.

   O ponto e REDUNDANTE: o rotulo diz "critica" ao lado dele. O §9.6 recusa
   "identidade dependente de cor sem rotulo ao lado" — o que ele recusa e a cor
   SOZINHA, e aqui ela acompanha a palavra.

   A opcao marcada NAO vira marca: ela assume o tom da propria severidade. Encher de
   plum a peca que diz "critica" apagaria justamente a informacao que a cor traz. */
.opc--pri>span{gap:7px}
.opc--pri .pt{width:6px;height:6px;border-radius:50%;flex:none;background:var(--c-ink-3)}

.opc--pri[data-p="1"] .pt{background:var(--c-bad)}
.opc--pri[data-p="2"] .pt{background:var(--c-warn)}
.opc--pri[data-p="3"] .pt{background:var(--c-ok)}
.opc--pri[data-p="4"] .pt{background:var(--c-ink-3)}

.opc--pri[data-p="1"]>input:checked+span{background:var(--c-bad-bg);border-color:var(--c-bad);color:var(--c-bad)}
.opc--pri[data-p="2"]>input:checked+span{background:var(--c-warn-bg);border-color:var(--c-warn);color:var(--c-warn)}
.opc--pri[data-p="3"]>input:checked+span{background:var(--c-ok-bg);border-color:var(--c-ok);color:var(--c-ok)}
.opc--pri[data-p="4"]>input:checked+span{background:var(--c-sunken);border-color:var(--c-line-2);color:var(--c-ink)}

/* O ponto some dentro da peca marcada: o fundo tingido ja diz a severidade, e o ponto
   da mesma cor sobre o proprio fundo vira um furo. */
.opc--pri>input:checked+span .pt{background:currentColor}

/* ------------------------------------------------------------------ ajuda de campo

   O rotulo e o `?` na mesma linha. O `.campo-cab` existe porque `.campo>label` e
   `display:block` com margem embaixo: por o `?` ao lado exigiria mudar o rotulo para
   inline e reconstruir o espacamento, e a linha explicita custa menos que essa
   corrente de consertos. */
.campo-cab{display:flex;align-items:center;gap:6px;margin-bottom:5px}
.campo-cab>label{margin-bottom:0}

/* O <details>. `list-style:none` nos dois dialetos: o Safari usa ::-webkit-details-marker
   e ignora o `display` do ::marker, entao sem os dois sobra o triangulo do navegador
   ao lado do icone. */
.ajd{position:relative;display:inline-flex;line-height:0}
.ajd>summary{list-style:none;cursor:pointer}
.ajd>summary::-webkit-details-marker{display:none}
.ajd>summary::marker{content:""}

.ajd-b{display:inline-flex;align-items:center;justify-content:center;
  width:17px;height:17px;border-radius:var(--r-pill);
  color:var(--c-ink-3);background:transparent;}
.ajd-b:hover{color:var(--c-brand);background:var(--c-soft)}
.ajd[open]>.ajd-b{color:var(--c-on-brand);background:var(--c-brand)}

/* O painel FLUTUA: `position:absolute` para que abrir a ajuda nao empurre o campo
   seguinte. Ajuda que reorganiza o formulario faz a pessoa perder o lugar onde
   estava, que e o oposto de ajudar.

   `left:-4px` e nao `left:0` para o painel alinhar com o texto do rotulo, e nao com
   a borda do icone. */
.ajd-p{position:absolute;z-index:60;top:calc(100% + 6px);left:-4px;
  width:308px;max-width:min(308px, calc(100vw - 32px));
  background:var(--c-card);border:1px solid var(--c-line-2);border-radius:var(--r);
  box-shadow:var(--sh-pop);padding:10px 12px;
  font-size:11.5px;line-height:1.55;color:var(--c-ink-2);
  text-align:left;font-weight:400;white-space:normal;}
.ajd-p b{color:var(--c-ink);font-weight:600}

/* Perto da borda direita o painel abriria para fora da tela. Ancorar pela direita
   resolve sem medir nada em JavaScript. */
.ajd--esq .ajd-p{left:auto;right:-4px}

/* Em tela estreita ancorar de lado nao resolve: o painel tem 308px e a tela tem 430,
   entao ele sai por um lado ou pelo outro. Abaixo de 600 ele para de flutuar e vira
   bloco normal embaixo do rotulo.

   Empurrar o campo seguinte e ruim no desktop, onde a pessoa esta varrendo o
   formulario e perde o lugar. No celular ela le um campo de cada vez, e um painel
   cortado pela borda e pior que um empurrao. */
@media (max-width:600px){
  .ajd{position:static;display:block;width:100%;line-height:inherit}
  .campo-cab{flex-wrap:wrap}
  .ajd-p,.ajd--esq .ajd-p{position:static;width:100%;max-width:none;
    margin-top:6px;box-shadow:none;}
}


/* O codigo TOTP e um codigo, entao monoespacada — e a unica razao pela qual ela
   aparece aqui. Espacamento largo porque quem digita esta copiando do telefone e
   perde a posicao em seis digitos grudados. */
.inp--codigo{height:44px;font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.34em;
  text-align:center;padding:0 0 0 .34em;}

.campo-senha{position:relative}
.campo-senha .inp{padding-right:66px}
.campo-senha button{position:absolute;right:5px;top:50%;transform:translateY(-50%);
  font-size:11.5px;color:var(--c-ink-3);padding:5px 6px;border-radius:var(--r-xs);}
.campo-senha button:hover{color:var(--c-ink);background:var(--c-sunken)}

.acoes{display:flex;align-items:center;gap:9px;margin-top:14px}
.acoes .grow{flex:1}
.acoes .btn{height:36px;padding:0 15px}

/* Lista de codigos de recuperacao, exibida UMA vez. Duas colunas porque dez
   linhas empilhadas viram um bloco que ninguem le antes de fechar a aba. */
.codigos{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;margin-top:11px}
.codigos li{font-weight:600;font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--c-ink);
  padding:5px 8px;background:var(--c-app);border:1px solid var(--c-line);border-radius:var(--r-xs);}

/* Página de conta: coluna estreita, porque é texto de leitura e não tabela densa. */
.conta-pagina{overflow:auto;padding:22px 24px 50px;max-width:660px}

.mfa-passos{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start}
.mfa-qr{background:var(--c-leito-qr);padding:9px;border-radius:var(--r-sm);border:1px solid var(--c-line);
  flex:none;line-height:0;}
/* Fundo branco fixo, nos dois temas: leitor de QR espera escuro-sobre-claro, e o negativo
   não é lido por boa parte dos autenticadores. */
.mfa-qr svg{width:168px;height:168px;display:block}
.mfa-chave{display:inline-block;margin-top:4px;padding:5px 8px;font-size:12.5px;
  background:var(--c-app);border:1px solid var(--c-line);border-radius:var(--r-xs);
  word-break:break-all;user-select:all;}

@media (max-width:600px){
  .mfa-passos{grid-template-columns:minmax(0,1fr)}
}

@media print{
  /* Impressão dos códigos de recuperação: sai só o que interessa, em preto no branco.

     `.sb` e nao `.rail`: o rail de icones virou sidebar com rotulo na fase 2 da
     migracao Helix, e esta regra continuou escondendo a classe morta — quem
     imprimisse os codigos levava 248px de navegacao para o papel. */
  /* `nav.sb` e nao `.sb`: `.pop--w .sb` e subtitulo dentro de popover, outro
     componente com o mesmo nome curto. */
  nav.sb,.sb-cortina,.top,.barra,.acoes,.alerta{display:none!important}
  .app{display:block;height:auto;overflow:visible}
  .main{display:block;overflow:visible}
  .conta-pagina{padding:0;max-width:none;overflow:visible}
  body{overflow:visible;background:var(--c-papel);color:var(--c-tinta)}
  .card{border:0;box-shadow:none;background:var(--c-papel)}
  .codigos li{border-color:var(--c-tinta-fraca);background:transparent;color:var(--c-tinta)}
}

/* ----------------------------------------------------------------------------
   O WORKSPACE DO CHAMADO — o arranjo do mockup de 31/08/2026.

   A tela era uma pilha de nove cartoes: cada bloco com borda, cabecalho e sombra,
   nove molduras competindo pela mesma atencao. O §9.6 recusa isso com todas as
   letras, e o efeito pratico era o FIO — que e o centro desta tela — parecendo
   apenas mais um cartao entre "Snapshot da abertura" e "Historico de posse".

   Agora o cabecalho, o estado, o SLA e as acoes formam um BLOCO SO no topo, sem
   moldura: quem abre o chamado le, de cima para baixo, o que e, onde esta, quanto
   falta e o que da para fazer. Depois vem o compositor, e depois o fio. */

.tk-head{padding:4px 0 18px;border-bottom:1px solid var(--c-line);margin-bottom:16px}

/* ---- LINHA 1 · o estado, e os dois relogios ---------------------------------

   O ESTADO E O CHIP DOMINANTE, e a dominancia se faz com tamanho e cor — nao com
   uma cor por categoria.

   A cor vem de `Fintel.Dominio.CicloDeVida.TomDeEstado`, que a deriva de `BolaCom`:
   a bola e nossa (marca), esta com alguem de fora (atencao), o caso esta resolvido
   esperando fechamento (confirmacao), ou acabou (neutro). Prazo estourado sobrepoe
   tudo em alarme.

   NAO HA AZUL. A secao 9.1 fecha a cor em quatro trabalhos e a 9.6 recusa "uma cor
   por categoria"; "em atendimento" usa a MARCA, que e exatamente o trabalho de
   identificar o item ativo. Decidido em 05/09/2026, contra criar `--c-info`. */
.tk-l1{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:9px}
.tk-proto{font-size:12.5px;font-weight:700;color:var(--c-brand);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.tk-l1 .grow{flex:1;min-width:0}

/* O chip do estado e MAIOR que os da linha 3, e a diferenca e o ponto: antes os
   quatro fatos vinham do mesmo tamanho, e nada dizia qual importava. */
.tk-estado{height:30px;padding:0 14px;font-size:13px;font-weight:600;
  letter-spacing:-.005em;}

.tk-relogios{display:flex;align-items:center;gap:5px 16px;flex-wrap:wrap}
.tk-rel{display:inline-flex;align-items:center;gap:6px;font-size:12px;
  color:var(--c-ink-3);white-space:nowrap;font-variant-numeric:tabular-nums;}
.tk-rel > svg{flex:none;color:var(--c-ink-3)}
.tk-rel .rot{color:var(--c-ink-3)}
.tk-rel b{color:var(--c-ink);font-weight:600}
/* A nota de pausa e do tom de atencao porque e ressalva, e nao estado: os dois
   numeros ao lado sao de PAREDE, e o SLA nao corre. Sem ela, "neste estado ha 3d"
   ao lado de "SLA 12%" parece contradicao. */
.tk-rel .pausa{padding:1px 7px;border-radius:var(--r-pill);font-size:10.5px;
  font-weight:600;background:var(--c-warn-bg);border:1px solid var(--c-warn-bd);
  color:var(--c-warn);}

/* ---- LINHA 3 · como esta marcado, e o que da para fazer -------------------- */
/* ALINHA PELO MEIO, e nao pelo topo. Os chips tem 24px e o gatilho de acao tem 30:
   encostados no topo, o gatilho fica pendurado abaixo da linha dos chips e a faixa
   le como duas linhas mal fechadas em vez de uma. */
.tk-l3{display:flex;align-items:center;justify-content:space-between;
  gap:8px 12px;margin-top:11px;flex-wrap:wrap;}
.tk-chips{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0}

/* Chip com icone: menor que o do estado, neutro, e o icone e o que permite achar
   o campo sem ler — prioridade, nivel e visibilidade sao consultados de relance. */
.tag--ic{height:24px;padding:0 10px 0 8px;gap:5px;font-size:11.5px}
.tag--ic > svg{flex:none;color:var(--c-ink-3)}

/* A marca como variante de tag. Unica que NAO e alarme/atencao/confirmacao: ela
   marca o item ativo, que e o trabalho que a secao 9.1 da a marca. */
.tag--marca{background:var(--c-brand);border-color:var(--c-brand);
  color:var(--c-on-brand);}
.tag--marca b{color:var(--c-on-brand)}

/* OS DOIS CONTROLES LADO A LADO. Sem `display:flex` aqui, "Eu assumo" e o gatilho
   de acao empilham — sao dois blocos —, e a linha 3 cresce para 66px so para pos um
   embaixo do outro. `align-items:center` porque o form e o <details> tem alturas
   internas diferentes. */
.tk-acoes{position:relative;flex:none;margin-left:auto;
  display:flex;align-items:center;gap:8px;}
.tk-semacao{margin:0;font-size:11.5px;color:var(--c-ink-3);max-width:38ch;
  text-align:right;line-height:1.45;}

/* ---- LINHA 4 · de quem e este chamado ------------------------------------- */
.tk-ctx{display:flex;flex-wrap:wrap;gap:6px 10px;margin-top:12px}

/* Cada item e um alvo de clique, e por isso tem area — nao e texto com sublinhado.
   O fundo so aparece no hover: quatro caixas permanentes na largura toda seriam a
   "borda em tudo" que a secao 9.1 recusa. */
.tk-c{display:inline-flex;align-items:baseline;gap:6px;padding:5px 9px;
  border-radius:var(--r-sm);font-size:12.5px;color:var(--c-ink-3);
  border:1px solid transparent;min-width:0;text-decoration:none;}
.tk-c > svg{flex:none;align-self:center;color:var(--c-ink-3)}
.tk-c .rot{font-weight:500}
.tk-c b{color:var(--c-ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;}
.tk-c .sec{color:var(--c-ink-2)}
a.tk-c:hover{background:var(--c-sunken);border-color:var(--c-line-2)}
a.tk-c:hover b{color:var(--c-brand)}
a.tk-c:hover > svg{color:var(--c-brand)}
/* Sem destino: mesma forma, sem afordancia de clique. */
.tk-c--vazio{cursor:default}

/* O vinculo pendente. AMBAR porque e pendencia, e link porque a busca de identidade
   e o que a resolve — nao ha, hoje, acao que baixe a flag, e um botao "vincular"
   aqui prometeria o que a plataforma nao faz (P3). */
.tk-pend{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;
  border-radius:var(--r-pill);font-size:11.5px;font-weight:600;
  background:var(--c-warn-bg);border:1px solid var(--c-warn-bd);
  color:var(--c-warn);text-decoration:none;}
.tk-pend > svg{flex:none}
.tk-pend .acao{font-weight:500;padding-left:7px;margin-left:1px;
  border-left:1px solid var(--c-warn-bd);}
a.tk-pend:hover{background:var(--c-warn-bd)}
.tk-pend--sem{opacity:.75}

/* O TITULO, com padrao proprio.

   Ele e a unica coisa da tela que a pessoa le em voz alta ao telefone, e precisa ser
   o item de maior peso visual da coluna — sem virar cabecalho de landing page (§9.6
   recusa raio grande e sombra difusa; aqui nao ha nem um nem outro, so tamanho e
   peso).

   `--c-ink` e nao a marca: titulo em cor de marca competiria com o codigo do chamado
   e com a opcao marcada, e a marca no Helix identifica VINCULO e item ativo — nao
   hierarquia de texto. Hierarquia se faz com tamanho e peso. */
.tk-head h1{font-size:21px;font-weight:700;line-height:1.3;letter-spacing:-.022em;
  margin:2px 0 0;color:var(--c-ink);text-wrap:balance;}
/* Chamado encerrado tem o titulo em tom secundario: o caso saiu do fluxo, e o titulo
   gritar num chamado fechado faz a lista de encerrados parecer trabalho pendente. */
.tk-head--fim h1{color:var(--c-ink-2)}


/* ---- o card da mensagem original ------------------------------------------

   O ROTULO ANTIGO ERA O ANTI-PADRAO Nº 1 do §9.6: "O QUE O SOLICITANTE ESCREVEU"
   em caixa alta com letter-spacing largo acima do bloco. Saiu.

   No lugar, um cabecalho que diz de quem e a fala, por onde chegou e quando — as
   tres coisas que se quer saber antes de ler.

   A LARGURA DE LEITURA E LIMITADA, e e a mudanca que mais importa aqui: a coluna
   do centro passa de 1000px, e linha de texto corrido nessa largura faz o olho
   perder o retorno. O que parecia "area vazia ocupando metade do bloco" era o
   texto atravessando a largura inteira e deixando o resto vazio por baixo. */
.tk-msg{margin:14px 0 0;border:1px solid var(--c-line);
  border-left:3px solid var(--c-brand);border-radius:var(--r-sm);
  background:var(--c-sunken);overflow:hidden;}
.tk-msg-cab{display:flex;align-items:center;gap:7px;margin:0;
  padding:8px 12px;border-bottom:1px solid var(--c-line);
  font-size:11.5px;color:var(--c-ink-3);}
.tk-msg-cab b{color:var(--c-ink);font-weight:600;font-size:12px}
.tk-msg-cab .sep{color:var(--c-ink-3)}
.tk-msg-cab .grow{flex:1}
.tk-msg-anx{padding:2px 8px;border-radius:var(--r-pill);font-size:10.5px;font-weight:600;
  background:var(--c-warn-bg);border:1px solid var(--c-warn-bd);color:var(--c-warn);}

/* 74ch — a faixa em que o olho acha o comeco da linha seguinte sem procurar.
   `white-space:pre-wrap` preserva as quebras que vieram do e-mail. */
.tk-msg-tx{max-width:74ch;padding:11px 13px;
  font-size:12.5px;line-height:1.6;color:var(--c-ink);white-space:pre-wrap;}

/* O marcador de anexo NAO importado. Amarelo de atencao e nao neutro: e uma
   LACUNA declarada, e lacuna que parece dado normal deixa de ser vista (P3). */
.anx-marca{display:inline-flex;align-items:center;gap:5px;vertical-align:middle;
  margin:1px 2px;padding:1px 8px;border-radius:var(--r-pill);
  font-size:11px;font-weight:600;white-space:nowrap;
  background:var(--c-warn-bg);border:1px dashed var(--c-warn-bd);color:var(--c-warn);}
.anx-marca > svg{flex:none;width:12px;height:12px}

/* ---- chamados semelhantes -------------------------------------------------
   O bloco so existe quando ha o que mostrar: sem cliente, ou sem assunto e sem
   modulo, nao ha criterio — e criterio inventado seria o P3 ao contrario. */
.tk-sem{margin:14px 0 0;padding:10px 12px;border:1px solid var(--c-line);
  border-radius:var(--r-sm);background:var(--c-card);}
.tk-sem-cab{display:flex;align-items:center;gap:7px;margin:0 0 8px;
  font-size:12px;color:var(--c-ink-3);}
.tk-sem-cab > svg{flex:none;color:var(--c-brand)}
.tk-sem-cab b{color:var(--c-ink);font-weight:600}
.tk-sem-cab .grow{flex:1}
.tk-sem-l{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.tk-sem-l li{display:flex;align-items:baseline;gap:9px;min-width:0;font-size:12px}
.tk-sem-l .tt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;color:var(--c-ink-2);}
.tk-sem-l .st{color:var(--c-ink-3);white-space:nowrap}
.tk-sem-l .dt{color:var(--c-ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---- a ficha: responsavel com avatar, e o snapshot em ajuda --------------- */
.ctx-resp{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.ctx-resp b{color:var(--c-ink);font-weight:600}
.ctx-resp > svg{flex:none;color:var(--c-ink-3);width:15px;height:15px}
/* "ha 3 dias" e o que transforma "onde esta" em "ha quanto tempo parado ali" —
   a pergunta do D3, e a que permite medir tempo por etapa. */
.ctx-resp .ha{color:var(--c-ink-3);font-size:11.5px;font-variant-numeric:tabular-nums}

/* Avatar pequeno, para caber na linha de um campo da ficha. */
.av-s{width:20px;height:20px;font-size:9px;flex:none}

/* O chip de "sem SLA" com a ajuda ao lado, no lugar de dois paragrafos. */
/* O chip de "sem SLA" com a ajuda ao lado, no lugar de dois paragrafos.

   <div> E NAO <p>, e a diferenca nao e estilo. `<ajuda>` renderiza um <details>, e
   <details> nao e conteudo permitido dentro de <p>: o parser FECHA o paragrafo ao
   encontra-lo e joga o <details> para fora. O resultado e que o `display:flex` daqui
   nunca alcancava o icone — ele deixava de ser filho —, e o ⓘ caia numa linha
   propria. Parecia desalinhamento de CSS e era HTML invalido. */
.ctx-chipao{display:flex;align-items:center;gap:7px;margin:0}

/* O snapshot: so o rotulo e o icone de ajuda. O conteudo mora dentro dela. */
.ctx-snap{display:flex;align-items:center;gap:6px;margin:11px 0 0;
  padding-top:10px;border-top:1px solid var(--c-line);
  font-size:11.5px;color:var(--c-ink-3);}


/* ---- o trilho de situacao -------------------------------------------------
   Os estados em sequencia, com o atual marcado. Ele NAO e clicavel: transicao
   exige motivo em varios casos, e um trilho que parece botao ensinaria a
   transicionar sem preencher o motivo. Quem muda estado sao as acoes abaixo. */
.pipe{display:flex;gap:2px;margin-top:14px;overflow-x:auto;scrollbar-width:thin}
.pipe-i{flex:1 1 0;min-width:96px;padding:7px 10px;text-align:center;
  background:var(--c-sunken);border-radius:var(--r-xs);
  font-size:11px;color:var(--c-ink-3);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;}
.pipe-i--feito{color:var(--c-ink-2)}
.pipe-i--aqui{background:var(--c-brand);color:var(--c-on-brand);font-weight:600}
/* Estado final fora do caminho feliz — cancelado, duplicado — nao entra no trilho:
   ele nao e um passo adiante, e por-lo em sequencia sugeriria que e. */
.pipe-i--fora{background:var(--c-bad-bg);color:var(--c-bad);font-weight:600}

/* ---- os dois relogios, lado a lado ----------------------------------------
   Primeira resposta e solucao sao DUAS contagens, e mostra-las empilhadas fazia
   parecer uma so com dois numeros. Lado a lado, cada uma com sua barra e sua
   explicacao, elas se leem como o que sao. */
.sla-par{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.sla-cx{padding:11px 13px;background:var(--c-sunken);border-radius:var(--r-sm)}
.sla-cx-t{display:flex;align-items:baseline;gap:8px;margin-bottom:7px}
.sla-cx-t dt{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--c-ink-3);margin:0;}
.sla-cx-t dd{margin:0 0 0 auto;font-size:12.5px;font-weight:600;color:var(--c-ink);
  font-variant-numeric:tabular-nums;}
.sla-cx-t dd.ok{color:var(--c-ok)}
.sla-cx-t dd.ruim{color:var(--c-bad)}
.sla-cx-n{display:block;margin-top:7px;font-size:11px;line-height:1.5;color:var(--c-ink-3)}

@media (max-width:900px){ .sla-par{grid-template-columns:minmax(0,1fr)} }

/* A BARRA DE ACOES E AS GAVETAS SAIRAM em 05/09/2026, com o cabecalho de quatro
   linhas: o seletor unico de acao substituiu os seis botoes, e `.tk-acoes` passou a
   ser o canto direito da linha 3.

   O CSS delas ficou orfao aqui por um commit, e nao foi inofensivo: o nome
   `.tk-acoes` colidiu com o novo, e o `margin-top:16px` da regra morta empurrou o
   gatilho de acao 16px para baixo da linha dos chips. Classe orfa nao e so peso
   morto — e uma emboscada com o nome que alguem vai reusar. */

/* ---- o compositor ----------------------------------------------------------

   O MODO TEM CARA, e a cara e a MESMA que o comentario vai ter no fio depois.

   Nota interna fica neutra com cadeado; resposta ao cliente tinge a borda e o
   cabecalho na familia `ok`, que e exatamente a que `.fio-c--fora` usa no cartao
   publicado. Escolher um icone aqui e reencontra-lo la e o que faz a marcacao ser
   aprendida em vez de decorada.

   E NAO ha JavaScript nisto. O radio marcado e o sujeito de `:has()`, entao a
   troca de modo acontece com o script quebrado — que e quando saber onde o texto
   vai parar importa mais (§9.4). */
.cmp{border:1px solid var(--c-line);border-radius:var(--r);
  background:var(--c-card);overflow:hidden;margin-bottom:16px;}
.cmp-abas{display:flex;align-items:center;gap:2px;padding:0 4px;
  border-bottom:1px solid var(--c-line);background:var(--c-sunken);}
.cmp-aba{position:relative}
.cmp-aba>input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.cmp-aba>span{display:flex;align-items:center;gap:6px;padding:10px 12px;font-size:12px;
  color:var(--c-ink-3);border-bottom:2px solid transparent;margin-bottom:-1px;}
.cmp-aba>span>svg{flex:none;opacity:.8}
.cmp-aba>input:checked+span{color:var(--c-ink);font-weight:600;border-bottom-color:var(--c-brand)}
.cmp-aba>input:focus-visible+span{outline:2px solid var(--c-brand);outline-offset:-2px}
.cmp-aba--fora>input:checked+span{border-bottom-color:var(--c-ok)}

/* O cabecalho do campo: quem enxerga, antes de escrever. Substitui o
   "so a Fintel enxerga" de 11px que vivia no canto direito da faixa de abas. */
.cmp-cab{display:flex;align-items:flex-start;gap:8px;margin:0;padding:9px 12px;
  border-bottom:1px solid var(--c-line);font-size:11.5px;line-height:1.5;
  color:var(--c-ink-2);}
.cmp-cab>svg{flex:none;margin-top:2px;color:var(--c-ink-3)}
.cmp-cab b{color:var(--c-ink);font-weight:600}
.cmp-cab .em{color:var(--c-ink-3)}

/* ---- os dois modos ----
   O HTML traz as duas versoes e o CSS mostra uma. O `display` de volta e por
   elemento porque um <p>, um <label> e um <botao> nao voltam para o mesmo valor —
   `display:flex` num botao arrancaria o alinhamento do rotulo. */
.cmp .cmp-so--fora{display:none}
.cmp:has(input[name="visibilidade"][value="2"]:checked){border-color:var(--c-ok-bd);
  border-left:3px solid var(--c-ok);}
.cmp:has(input[name="visibilidade"][value="2"]:checked) .cmp-so--dentro{display:none}
.cmp:has(input[name="visibilidade"][value="2"]:checked) p.cmp-so--fora{display:flex}
.cmp:has(input[name="visibilidade"][value="2"]:checked) label.cmp-so--fora{display:flex}
.cmp:has(input[name="visibilidade"][value="2"]:checked) .btn.cmp-so--fora{display:inline-flex}
.cmp:has(input[name="visibilidade"][value="2"]:checked) .cmp-cab{
  background:var(--c-ok-bg);border-bottom-color:var(--c-ok-bd);}
.cmp:has(input[name="visibilidade"][value="2"]:checked) .cmp-cab>svg{color:var(--c-ok)}

.cmp-cx{padding:12px}
/* O CAMPO PRECISA TER CONTORNO.

   Ele herdava `.inp`, que e borda --c-line sobre fundo --c-card: medido, 1,24:1 no
   claro e 1,19:1 no escuro, com o fundo do campo IDENTICO ao do cartao (1,00). Um
   textarea vazio assim nao tem contorno nenhum — e a queixa foi literal, "nao estou
   vendo campo para registro do comentario". Ele estava la, com 944x93, invisivel.

   Fundo afundado e borda --c-line-2: o campo passa a ser um buraco no cartao, que e
   como caixa de texto se le. */
.cmp-cx textarea{width:100%;min-height:96px;resize:vertical;background:var(--c-sunken)}
.cmp-cx textarea::placeholder{color:var(--c-ink-3)}
.cmp-pe{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}

/* ---- publicar e mudar a situacao, no mesmo gesto (item 9) ----

   Pilulas e nao <select>: o seletor de acao do cabecalho ja ensinou que o valor
   escolhido precisa ser lido SEM abrir nada, e aqui sao duas opcoes mais o padrao.
   Radios tambem sao o sujeito que o `:has()` do projeto sabe casar — `option:checked`
   ja custou uma investigacao nesta tela. */
.cmp-entao{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:11px;
  padding-top:11px;border-top:1px solid var(--c-line);}
.cmp-entao .rot{font-size:11.5px;color:var(--c-ink-3);margin-right:2px}
.cmp-op{position:relative}
.cmp-op>input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.cmp-op>span{display:block;padding:4px 11px;border:1px solid var(--c-line-2);
  border-radius:var(--r-pill);font-size:11.5px;color:var(--c-ink-2);
  background:var(--c-card);white-space:nowrap;}
.cmp-op>input:checked+span{border-color:var(--c-brand);background:var(--c-soft);
  color:var(--c-ink);font-weight:600;}
.cmp-op>input:focus-visible+span{outline:2px solid var(--c-brand);outline-offset:2px}
.cmp-op:hover>span{border-color:var(--c-ink-3)}

/* O motivo aparece so para a transicao que o exige. O gatilho e o `data-entao` do
   radio marcado — mesmo contrato do seletor de acao, que ja tem guarda de teste. */
.cmp-motivo{display:none;margin-top:9px}
.cmp:has(input[name="entao"]:checked[data-entao~="motivo"]) .cmp-motivo{display:block}
.cmp-motivo .inp{width:100%}
.cmp-motivo .fld-hint{display:block;margin-top:4px}

/* ---- os anexos do compositor ----

   O INPUT NATIVO SOME DE VISTA E CONTINUA SENDO O CONTROLE. Ele fica de 1px e
   transparente — nao `display:none`, que o tiraria da ordem de tabulacao e deixaria
   quem navega por teclado sem jeito de anexar. O rotulo em volta e o botao, e o
   `:focus-within` traz o anel para ele quando o input invisivel recebe foco.

   O que sai da tela e o "Nenhum arquivo escolhido" do navegador, que passou a ser
   uma segunda resposta a mesma pergunta agora que os chips existem (P7). */
.cp-clipe input[type=file]{position:absolute;width:1px;height:1px;opacity:0;
  pointer-events:none;}
.cp-clipe:focus-within{outline:2px solid var(--c-brand);outline-offset:3px;
  border-radius:var(--r-xs);}
.cp-clipe:hover{color:var(--c-ink)}
.cmp-pe .grow{flex:1}

.anx-chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;padding:0;list-style:none}
.anx-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;
  padding:4px 4px 4px 8px;border:1px solid var(--c-line-2);border-radius:var(--r-pill);
  background:var(--c-sunken);font-size:11.5px;color:var(--c-ink-2);}
/* O cadeado que o chip herda: os dois vem no molde e o CSS mostra um, pelo modo
   marcado. Trocar de aba troca o cadeado de todos os chips de uma vez.

   SEM `display` AQUI, e nao por esquecimento. `.anx-chip .ic` e `.cmp .cmp-so--fora`
   tem a MESMA especificidade, e este arquivo vem depois — um `display:inline-flex`
   nesta linha vencia a regra que esconde, e o chip mostrava o cadeado e o envelope
   ao mesmo tempo, dizendo duas visibilidades contraditorias no mesmo lugar.

   O alinhamento nao precisa dele: o chip e flex, e filho de flex e blocado de
   qualquer forma. */
.anx-chip .ic{color:var(--c-ink-3)}
.anx-chip .ic--fora{color:var(--c-ok)}
.anx-chip .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:22ch;
  color:var(--c-ink);}
.anx-chip .sz{color:var(--c-ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
/* 24px de alvo, e nao os 14px do icone. O §2.5.8 pede 24 — e um "x" de 14px numa
   lista de chips e o botao que se erra e apaga o arquivo errado. */
.anx-chip .rm{display:inline-grid;place-items:center;width:24px;height:24px;
  border:0;border-radius:var(--r-pill);background:transparent;color:var(--c-ink-3);
  cursor:pointer;}
.anx-chip .rm:hover{background:var(--c-bad-bg);color:var(--c-bad)}

/* Arrastar por cima da caixa. Trilho tracejado na marca: ele diz "solte aqui" sem
   escrever, e desaparece no `drop`. */
.cmp-cx--solta{outline:2px dashed var(--c-brand);outline-offset:-6px;
  border-radius:var(--r-sm);}

/* O `<span>` do chip precisa da regra dele: o `display` de volta e por elemento,
   porque <p>, <label>, <botao> e <span> nao voltam para o mesmo valor. */
.cmp:has(input[name="visibilidade"][value="2"]:checked) span.cmp-so--fora{display:inline-flex}

/* ---- o atalho para o compositor, em conversa longa ----

   O compositor abre a conversa, e num chamado com quarenta eventos ele fica a
   quarenta linhas de distancia depois que a pessoa desce para ler.

   `position:sticky` no ultimo filho do `.conv`: ele flutua acima do fio enquanto
   a posicao natural dele estiver abaixo da dobra, e assenta no fim quando a
   rolagem chega la. Nao e `fixed` — fixed sairia do pane e ficaria pairando sobre
   a ficha e sobre a barra de tempo.

   Nasce com `hidden` e so aparece com JavaScript, porque so o script sabe se o
   compositor esta fora de vista. Sem script nada muda: o compositor continua
   alcancavel rolando, que e como esta hoje (§9.4). */
.cmp-ir{position:sticky;bottom:10px;align-self:center;z-index:2;
  box-shadow:0 4px 14px -4px rgba(36,3,44,.35);}
html[data-t="escuro"] .cmp-ir{box-shadow:0 4px 14px -4px rgba(0,0,0,.6)}

/* ---- chamados relacionados, nos detalhes -----------------------------------
   Eles ficam no CENTRO e nao na lateral: "este problema ja voltou duas vezes" muda a
   leitura do caso inteiro, e nao e algo que se consulta — e algo que se le junto com
   o titulo. */
.rel{margin-top:14px;padding-top:13px;border-top:1px solid var(--c-line)}
.rel-t{margin:0 0 7px;font-size:11.5px;color:var(--c-ink-2)}
.rel-t b{color:var(--c-ink)}
.rel .ctx-cham{margin-bottom:6px}

/* ---- a acao, num campo so -------------------------------------------------

   Seis botoes viraram um seletor. O que muda nao e so o espaco: com botoes, a
   pessoa varre a barra procurando o verbo; com um seletor, ela abre a lista e le os
   verbos disponiveis naquele estado — que e a pergunta que ela tem.

   OS CAMPOS DE CADA ACAO APARECEM SEM JAVASCRIPT. O truque e `:has()` sobre a opcao
   marcada: cada <option> declara de que GRUPO de campos ela precisa, e a regra casa
   o grupo. Sao cinco regras genericas, e nao uma por acao.

   Onde `:has()` nao existir, todos os grupos aparecem — degrada para formulario
   longo, e nao para formulario quebrado. */
/* OS CAMPOS CONDICIONAIS, revelados por `:has()` e sem uma linha de JavaScript.

   `input:checked` e nao `option:checked` — e a diferenca custou caro. O seletor foi
   escrito quando o controle era um <select>, e continuou igual quando ele virou menu
   de radios. `option:checked` deixou de casar com qualquer coisa, e o resultado e que
   NENHUM campo condicional aparecia: quem escolhia "suspender" nao via o campo de
   motivo, mandava o formulario sem ele, e o servidor recusava com uma mensagem sobre
   um campo que a tela nunca mostrou.

   O CSS continuou valido e o build continuou verde — seletor que nao casa com nada
   nao e erro, e so o computed style denuncia. Travado por
   TestesDaHigieneDasViews.SeletorCondicional_CasaComOControleQueExiste. */
.acao-frm fieldset{display:none;border:0;padding:0;margin:12px 0 0;min-width:0}
.acao-frm:has(input:checked[data-g~="motivo"]) fieldset[data-g="motivo"]{display:block}
.acao-frm:has(input:checked[data-g~="causa"]) fieldset[data-g="causa"]{display:block}
.acao-frm:has(input:checked[data-g~="cobranca"]) fieldset[data-g="cobranca"]{display:block}
.acao-frm:has(input:checked[data-g~="suspensao"]) fieldset[data-g="suspensao"]{display:block}
.acao-frm:has(input:checked[data-g~="nivel"]) fieldset[data-g="nivel"]{display:block}
@supports not selector(:has(*)){ .acao-frm fieldset{display:block} }

.acao-frm .acoes{margin-top:12px;padding:0 3px 2px}
.acao-frm fieldset[data-g]{padding:0 4px}

/* ---- o seletor de acao, como menu ------------------------------------------
   O GATILHO DIZ ONDE O CHAMADO ESTA; cada opcao diz NO QUE ELE VIRA.

   Um <select> nu mostrava so os verbos, e "suspender" sozinho nao diz o estado que
   produz. Aqui a linha e `verbo -> destino`, com o destino em pill: a pessoa le a
   consequencia antes de escolher, que e a unica forma de escolher direito.

   Continua sendo UM controle e continua sem JavaScript: <details> abre o menu, radio
   marca a opcao, `:has()` revela os campos dela, e um botao executa. */
/* 30px — a MESMA altura do chip de estado da linha 1. O cabecalho tem duas alturas
   de controle e nao seis: 30 para o que decide (o estado, a acao) e 24 para o que
   so descreve (os chips da linha 3). */
.acao-tr{display:flex;align-items:center;gap:8px;cursor:pointer;height:30px;
  list-style:none;padding:0 11px;border-radius:var(--r-sm);
  border:1px solid var(--c-brand);background:var(--c-card);
  font-size:12.5px;font-weight:600;color:var(--c-ink);}
.acao-tr::-webkit-details-marker{display:none}
.acao-tr::marker{content:""}
.acao-tr:hover{background:var(--c-soft)}
.acao-tr .rot{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--c-ink-3);}
.acao-tr .grow{flex:1}
.acao-tr .ctx-chev{color:var(--c-brand);rotate:0deg}
details[open] > .acao-tr .ctx-chev{rotate:180deg}
details[open] > .acao-tr{border-bottom-left-radius:0;border-bottom-right-radius:0}

/* O PAINEL SUSPENSO.

   Na lateral o menu era um bloco empilhado: abria, empurrava o resto da coluna para
   baixo, e estava certo — ali havia coluna sobrando. No cabecalho, empurrar
   empurraria o titulo e o fio, e a tela inteira saltaria a cada abertura.

   Por isso ele sai do fluxo. `right:0` e nao `left:0` porque o gatilho esta encostado
   na direita: alinhar pela esquerda faria o painel vazar da area de conteudo.

   O `.conv` rola, entao o painel alto e alcancavel rolando — nao ha `position:fixed`
   aqui, que se descolaria do gatilho no primeiro scroll. */
.acao-dd{position:relative}
.acao-pnl{position:absolute;right:0;top:calc(100% + 5px);z-index:40;
  width:min(360px,calc(100vw - 32px));
  border:1px solid var(--c-brand);border-radius:var(--r-sm);
  background:var(--c-card);padding:6px;box-shadow:var(--sh-app);}

/* Fechado, o gatilho volta a ser uma pill inteira — nao ha painel colado nele. */
details[open] > .acao-tr{border-radius:var(--r-sm)}

.acao-menu{background:var(--c-card);}
.acao-gr{padding:7px 8px 4px;font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--c-ink-3);}

.acao-op{position:relative;display:block}
.acao-op > input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.acao-op > span{display:flex;align-items:center;gap:8px;padding:7px 9px;
  border-radius:var(--r-xs);font-size:12.5px;color:var(--c-ink);}
.acao-op:hover > span{background:var(--c-sunken)}
.acao-op > input:checked + span{background:var(--c-soft);font-weight:600}
.acao-op > input:focus-visible + span{outline:2px solid var(--c-brand);outline-offset:-2px}
.acao-op > input:disabled + span{color:var(--c-ink-3);cursor:not-allowed}
.acao-op .seta{color:var(--c-ink-3);flex:none}
.acao-op .alvo{margin-left:auto}
/* Opcao bloqueada diz POR QUE, e nao so fica cinza: cinza sem motivo faz a pessoa
   clicar tres vezes antes de desistir. */
.acao-op .porque{font-size:10.5px;color:var(--c-ink-3);margin-left:auto}

/* A secao de ACAO e a unica da lateral que EXECUTA. As outras sete se consultam, e
   dar a todas o mesmo cartao neutro fazia a que age desaparecer entre as que
   informam. Ela ganha a borda da marca e o fundo tingido — uma peca, uma cor, e a
   cor diz "aqui se faz alguma coisa". */
.ctx-acao{border-color:var(--c-brand);background:var(--c-soft)}
.ctx-acao .inp{background:var(--c-card)}
/* O rotulo dela acompanha, para o bloco nao ficar com cabecalho de um e corpo de
   outro. */
.ctx-sec--acao > summary{color:var(--c-brand)}
.ctx-sec--acao > summary .ctx-chev{color:var(--c-brand)}

/* ---- anexos em miniatura ---------------------------------------------------
   Imagem vira miniatura; o resto continua sendo uma linha com o nome. Print e o
   anexo mais comum num chamado de suporte, e abrir cada um para saber qual e
   custa mais que a miniatura. */
.anx{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
.anx-i{display:block;border:1px solid var(--c-line);border-radius:var(--r-sm);
  overflow:hidden;background:var(--c-sunken);text-decoration:none;}
.anx-i:hover{border-color:var(--c-brand)}
.anx-img{display:block;width:132px;height:88px;object-fit:cover;background:var(--c-sunken)}
.anx-cap{display:block;max-width:132px;padding:5px 7px;font-size:10.5px;line-height:1.35;
  color:var(--c-ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.anx-cap .sz{color:var(--c-ink-3);font-variant-numeric:tabular-nums}
/* Nao-imagem: o mesmo cartao, com o icone no lugar da miniatura. Mantem o ritmo da
   fila de anexos em vez de alternar entre cartao e linha de texto. */
.anx-doc{display:flex;align-items:center;justify-content:center;
  width:132px;height:88px;color:var(--c-ink-3);}

/* ---- a atividade: filtros, e o fio -----------------------------------------
   As abas filtram SEM JAVASCRIPT, pelo mesmo truque das acoes: o radio marcado
   decide, e `:has()` casa. Cinco regras, uma por aba.

   Sem `:has()` tudo aparece — que e o estado "Tudo", e portanto o pior caso e a aba
   nao filtrar. Nunca some conteudo. */
.fio-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.fio-bar .grow{flex:1}

.fio-abas{display:flex;gap:4px;flex-wrap:wrap}
.fio-aba{position:relative;display:inline-flex}
.fio-aba > input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.fio-aba > span{padding:4px 10px;border-radius:var(--r-pill);font-size:11.5px;
  color:var(--c-ink-3);border:1px solid transparent;}
.fio-aba:hover > span{color:var(--c-ink)}
.fio-aba > input:checked + span{background:var(--c-soft);color:var(--c-brand);font-weight:600}
.fio-aba > input:focus-visible + span{outline:2px solid var(--c-brand);outline-offset:2px}

/* O FILTRO CASA POR `[data-f]`, e nao por classe de layout.
   
   Ele apontava para `.fio-l` — a classe que toda linha usava quando havia uma forma
   so. Em 05/09/2026 a linha do tempo passou a ter tres formas (`.fio-m` fina,
   `.fio-c` cartao, `.fio-g` grupo) e `.fio-l` deixou de existir: os quatro filtros
   continuaram sintaticamente validos e pararam de casar com qualquer coisa, e as
   abas passariam a nao filtrar nada em silencio.
   
   `[data-f]` e o contrato — quem carrega o atributo e filtravel, seja qual for a
   forma. Travado por TestesDasTelasDeChamado.AbasDoFio_FiltramOQueExisteNaTela. */
.fio-cx:has(#fio-conversa:checked) [data-f]:not([data-f~="conversa"]),
.fio-cx:has(#fio-mudancas:checked) [data-f]:not([data-f~="mudancas"]),
.fio-cx:has(#fio-nivel:checked)    [data-f]:not([data-f~="nivel"]),
.fio-cx:has(#fio-tempo:checked)    [data-f]:not([data-f~="tempo"]){display:none}
/* O divisor de nivel some junto com as linhas: divisor sozinho entre nada e nada
   anuncia uma mudanca que a aba escondeu. */
.fio-cx:has(#fio-conversa:checked) .fio-divisor,
.fio-cx:has(#fio-mudancas:checked) .fio-divisor,
.fio-cx:has(#fio-nivel:checked)    .fio-divisor,
.fio-cx:has(#fio-tempo:checked)    .fio-divisor{display:none}
/* P3 na aba: quando o filtro nao deixa nada, a tela DIZ. Lista vazia sem explicacao
   parece chamado sem historico. */
.fio-vazio{display:none;padding:14px 2px;font-size:12px;color:var(--c-ink-3)}
.fio-cx:has(.fio-l:not([style*="display"])) .fio-vazio{display:none}

/* A linha do fio ganha avatar: quem falou e a primeira coisa que se procura ao
   varrer vinte eventos, e um nome em negrito no meio do texto nao ancora o olho. */

/* ---- anexos do chamado, em seccao propria ----------------------------------
   Eles JA estao no fio, cada um na linha em que foi anexado. Esta secao os reune
   porque "onde esta aquele XML?" e uma pergunta que nao se responde rolando vinte
   eventos — e a resposta nao muda de fonte: sao os mesmos anexos, lidos de outro
   angulo (P7). */
.anx-tab{width:100%;border-collapse:collapse;font-size:11.5px}
.anx-tab th{text-align:left;padding:0 8px 6px 0;font-size:10px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--c-ink-3);}
.anx-tab td{padding:6px 8px 6px 0;border-top:1px solid var(--c-line);vertical-align:middle}
.anx-tab tr:first-child td{border-top:0}
.anx-tab .nm{display:flex;align-items:center;gap:7px;min-width:0;color:var(--c-ink)}
.anx-tab .nm span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.anx-tab .sz,.anx-tab .qd{color:var(--c-ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ----------------------------------------------------------------------------
   A ABERTURA DE CHAMADO.

   Ela era `.conta-pagina`, que e `max-width:660px; overflow:auto`. Numa janela de
   2000px isso da uma faixa de 660px COM ROLAGEM PROPRIA e 1300px vazios a direita:
   o scrollbar do pane aparece no meio da tela, longe de qualquer borda, e parece
   uma barra de navegacao vertical que ninguem pos ali. Some-se dezesseis campos,
   seis cartoes e dez blocos de texto empilhados nessa faixa, e o resultado foi a
   queixa que originou esta reforma.

   Agora e `.split`, o mesmo do workspace: formulario a esquerda, ficha a direita.
   A largura sobrando passa a ter trabalho em vez de sobrar.

   `.abr` tem max-width PROPRIO dentro do pane largo. Formulario de 900px de largura
   nao e mais legivel que um de 640 — e pior, porque o olho perde a coluna do rotulo
   ao voltar para a linha seguinte. O pane usa a largura; o conteudo nao. */
.abr-split{min-height:0}
/* CENTRADA e elastica. A primeira versao punha os cartoes a 640px encostados na
   esquerda de um pane de 846: 206px de folga, toda de um lado, com a cara de
   layout que nao terminou. Centrar transforma a sobra em respiro simetrico, e o
   teto de 820 deixa a coluna crescer sem a linha ficar longa demais para o olho
   voltar — o que reparte a largura de verdade sao os grids de duas colunas
   dentro do cartao. */
.abr{overflow-y:auto;min-height:0;padding:22px 24px 48px;
  display:flex;flex-direction:column;align-items:center;gap:0;
  /* O scrollbar do pane come 15px so do lado direito, e a coluna centrada nasce
     15px fora do centro. `stable both-edges` reserva a calha dos DOIS lados: a
     medida fica simetrica com e sem barra, e nao salta quando o formulario cresce
     o bastante para passar a rolar. */
  scrollbar-gutter:stable both-edges;}
.abr > *{width:100%;max-width:980px}

/* Na v2 os grupos deixam de ser cartoes e viram FAIXAS separadas por regua. Cartao
   dentro de cartao empilhado quatro vezes cria quatro molduras concorrendo pela
   mesma atencao, e o §9.6 recusa "borda e cabecalho e sombra em todo painel, sem
   hierarquia". A regua faz o mesmo trabalho de separar com um traco. */
/* O cabecalho da tela, na area de conteudo. */
.abr-topo{padding:6px 0 4px}
.abr-topo-olho{display:block;font-size:10.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--c-ink-3);margin-bottom:7px;}
.abr-topo h1{font-size:25px;font-weight:700;letter-spacing:-.025em;margin:0;color:var(--c-ink)}
.abr-topo p{margin:7px 0 0;font-size:12.5px;line-height:1.55;color:var(--c-ink-3);max-width:56ch}

.abr-faixa{padding:22px 0 26px;border-top:1px solid var(--c-line)}
.abr-faixa:first-of-type{border-top:0;padding-top:4px}

/* O CABECALHO DA FAIXA em caixa alta.

   Isto contraria o primeiro item da lista de anti-padroes do §9.6 — "rotulo em
   CAIXA ALTA com letter-spacing largo acima de cada bloco". Entrou por decisao
   explicita do Emerson em 31/08/2026, que pediu a tela igual ao mockup v2 depois
   de eu levantar a divergencia. Fica registrado aqui para quem ler depois nao
   achar que foi distracao. */
.abr-olho{display:flex;align-items:baseline;gap:10px;margin-bottom:16px}
.abr-olho b{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--c-brand);}
.abr-olho span{font-size:11.5px;color:var(--c-ink-3)}

/* Grades de campo. Em tela larga a faixa ganha COLUNAS em vez de altura: solicitante,
   perfil, e-mail e telefone numa linha so. Formulario que cresce so para baixo faz o
   agente rolar enquanto o cliente espera na linha. */
.fld--g2{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.fld--g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px 16px}
.fld--g4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px 16px}

/* 1400 e nao 1240: a largura que importa e a do FORMULARIO, e ele e a viewport menos
   a sidebar de 248, a ficha de 346 e o respiro. Em 1280 de viewport o formulario tem
   623px, e quatro colunas ali dao 140px por campo — "Quem pediu" e "E-mail" nao cabem.
   Medido antes de escolher o numero. */
@media (max-width:1400px){
  .fld--g4{grid-template-columns:1fr 1fr}
}
/* 1240: abaixo disso o formulario tem menos de 600px, e tres colunas dao 160px por
   campo — "E-mail" nao cabe. Medido antes de escolher o numero, como o de cima. */
@media (max-width:1240px){
  .fld--g3{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .fld--g2,.fld--g3,.fld--g4{grid-template-columns:minmax(0,1fr)}
}

/* O complemento do cabecalho do grupo. Ele diz o que o grupo REUNE, e existe para
   nao precisar do rotulo em caixa alta com letter-spacing que o §9.6 recusa como
   primeiro item da lista. */
.abr-sub{font-size:11.5px;color:var(--c-ink-3);margin-left:2px}

/* Rotulo de grupo de radio. Nao pode ser <label>: label aponta para UM controle, e
   um grupo de chips tem seis. E o <span> que o `aria-labelledby` do radiogroup
   referencia. */
.campo-rot{display:block;font-size:11.5px;color:var(--c-ink-3)}

/* ---- evidencias: a area de arrastar arquivo -------------------------------
   Tracejada e nao solida: a borda tracejada e a convencao de "solte aqui", e um
   retangulo solido do mesmo tamanho leria como um campo de texto vazio. */
.evid{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;text-align:center;min-height:118px;padding:16px 18px;
  border:1px dashed var(--c-line-2);border-radius:var(--r);
  background:var(--c-sunken);color:var(--c-ink-2);cursor:pointer;
  transition:border-color .12s,background .12s;}
.evid:hover,.evid:focus-within{border-color:var(--c-brand);background:var(--c-soft)}
.evid[data-sobre="1"]{border-color:var(--c-brand);background:var(--c-soft)}
.evid-t{font-size:12.5px;font-weight:600;color:var(--c-ink)}
.evid-s{font-size:11px;color:var(--c-ink-3);line-height:1.5}
.evid input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.evid-lista{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:5px}
.evid-i{display:flex;align-items:center;gap:8px;padding:5px 8px;font-size:11.5px;
  background:var(--c-app);border:1px solid var(--c-line);border-radius:var(--r-xs);}
.evid-i .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.evid-i .tm{margin-left:auto;color:var(--c-ink-3);font-variant-numeric:tabular-nums}

/* ---- o roteiro aplicado --------------------------------------------------
   Ele DIZ que foi aplicado e oferece limpar. Preencher um textarea sem avisar
   faria a pessoa achar que digitou aquilo — a maquina propoe, a pessoa decide (P8). */
.rot-avi{display:flex;align-items:center;gap:10px;margin-top:7px;padding:6px 10px;
  background:var(--c-soft);border-radius:var(--r-sm);
  font-size:11.5px;color:var(--c-ink-2);}
.rot-avi button{margin-left:auto;font-size:11.5px;color:var(--c-brand);
  background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;}

/* ---- antes de abrir ------------------------------------------------------
   A faixa de confirmacao. Em vez de dois botoes soltos, o encerramento e um
   instrumento de leitura: o agente le o que vai acontecer na mesma linha do olhar
   em que confirma. */
.antes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--c-line);border-radius:var(--r);overflow:hidden;
  background:var(--c-sunken);}
.antes > div{padding:11px 14px;border-left:1px solid var(--c-line);min-width:0}
.antes > div:first-child{border-left:0}
.antes dt{font-size:10px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--c-ink-3);margin-bottom:4px;}
.antes dd{margin:0;font-size:12.5px;color:var(--c-ink);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.antes dd.fraco{color:var(--c-ink-3);font-weight:400}
.antes dd.pend{color:var(--c-warn)}

@media (max-width:760px){ .antes{grid-template-columns:1fr 1fr} }

/* ---- rodape da abertura --------------------------------------------------- */
.abr-pe{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px}
.abr-pe .acoes{margin:0;margin-left:auto}
.abr-ck{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--c-ink-2);cursor:pointer}
.abr-ck input{width:15px;height:15px;accent-color:var(--c-brand);margin:0;cursor:pointer}

/* A ficha da abertura rola junto e nao ganha fundo proprio: ela e contexto, nao
   um segundo painel de trabalho competindo com o formulario. */
.abr-ficha{padding:16px 16px 44px;background:var(--c-app)}

/* ---- os blocos do painel de contexto -------------------------------------- */
.ctx-olho{display:block;font-size:10px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--c-ink-3);margin:18px 0 8px;}
.ctx-olho:first-child{margin-top:0}
.ctx-olho .n{color:var(--c-brand);margin-left:5px}

/* ---- secao recolhivel da lateral -------------------------------------------
   O <details> faz o trabalho todo: abre, fecha, guarda o estado do teclado e e
   anunciado pelo leitor de tela, sem uma linha de script. O chevron gira por CSS.

   Quem decide o que nasce aberto e a view, com o atributo `open` — e a secao
   "avancado" e a unica que nasce fechada, porque snapshot de abertura e o tipo de
   coisa que se consulta uma vez por chamado e nao a cada visita. */
.ctx-sec{margin-top:18px}
.ctx-sec:first-of-type{margin-top:0}
.ctx-sec > summary{display:flex;align-items:center;gap:7px;cursor:pointer;
  list-style:none;padding:3px 0;margin-bottom:8px;
  font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--c-ink-3);border-radius:var(--r-xs);}
.ctx-sec > summary::-webkit-details-marker{display:none}
.ctx-sec > summary::marker{content:""}
.ctx-sec > summary:hover{color:var(--c-ink)}
.ctx-sec > summary .n{color:var(--c-brand)}
.ctx-sec > summary .grow{flex:1}
/* O chevron. `rotate` e nao `transform` para nao competir com nada que o elemento
   ja use, e a transicao e de ESTADO — nao e animacao de entrada (§9.6). */
.ctx-chev{flex:none;color:var(--c-ink-3);rotate:-90deg;transition:rotate .14s}
.ctx-sec[open] > summary .ctx-chev{rotate:0deg}
@media (prefers-reduced-motion:reduce){ .ctx-chev{transition:none} }

.ctx-cartao{background:var(--c-sunken);border:1px solid var(--c-line);
  border-radius:var(--r);padding:12px 13px;}
.ctx-nome{font-size:13px;font-weight:600;color:var(--c-ink);letter-spacing:-.01em}
.ctx-meta{margin-top:3px;font-size:11px;color:var(--c-ink-3);
  display:flex;flex-wrap:wrap;gap:4px 8px;font-variant-numeric:tabular-nums;}
.ctx-grade{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;
  margin-top:11px;padding-top:11px;border-top:1px solid var(--c-line);}
.ctx-grade dt{font-size:9.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--c-ink-3);margin-bottom:3px;}
.ctx-grade dd{margin:0;font-size:12px;color:var(--c-ink);font-variant-numeric:tabular-nums}
.ctx-grade dd.fraco{color:var(--c-ink-3);font-weight:400;font-size:11.5px}

/* ---- corrigir o que a ficha mostra -------------------------------------
   A edicao vem FECHADA e a leitura fica por cima. Tres <select> abertos numa
   coluna de 346px transformam consulta em formulario, e a tela do chamado e
   lida cem vezes para cada vez que e corrigida. */
.ctx-editar{margin-top:9px}
.ctx-editar > summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-size:11.5px;font-weight:600;color:var(--c-brand);}
.ctx-editar > summary::-webkit-details-marker{display:none}
.ctx-editar > summary::marker{content:""}
.ctx-editar > summary::before{content:"+";font-size:13px;line-height:1;font-weight:700}
.ctx-editar[open] > summary::before{content:"–"}
.ctx-editar > summary:hover{text-decoration:underline}

.ctx-form{margin-top:10px;padding-top:11px;border-top:1px solid var(--c-line);
  display:grid;gap:10px;justify-items:start;}
/* Os campos ocupam a coluna inteira; so o botao fica do tamanho dele. */
.ctx-form > .campo{width:100%}
.ctx-form select.inp,.ctx-form input.inp{width:100%;font-size:12px}

.ctx-ck{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--c-ink-2);
  cursor:pointer}
.ctx-ck input{accent-color:var(--c-brand)}

/* Desvincular fica discreto a proposito: e a acao rara, e a lista existe para ler.
   Discreto pela cor e pelo corpo do texto, e NAO pela area de clique: 24px e o minimo
   do 2.5.8, e o alvo pequeno castiga justamente quem tem menos firmeza no ponteiro. */
.ctx-x{height:24px;padding:0 8px;font-size:10.5px;color:var(--c-ink-3)}
.ctx-x:hover{color:var(--c-bad);border-color:var(--c-bad-bd);background:var(--c-bad-bg)}

/* Chamado aberto do mesmo cliente. A barra a esquerda tinge pelo estado do SLA —
   e o unico uso de cor por estado aqui, e ele tem rotulo ao lado. */
.ctx-cham{display:block;padding:9px 11px;border-radius:var(--r-sm);
  border:1px solid var(--c-line);border-left:3px solid var(--c-line-2);
  background:var(--c-sunken);margin-bottom:6px;}
.ctx-cham:hover{border-color:var(--c-line-2);background:var(--c-card)}
.ctx-cham--warn{border-left-color:var(--c-warn)}
.ctx-cham--bad{border-left-color:var(--c-bad)}
.ctx-cham-t{display:flex;align-items:baseline;gap:8px;font-size:11px}
.ctx-cham-t .cod{font-weight:600;color:var(--c-brand);font-variant-numeric:tabular-nums}
.ctx-cham-t .sla{margin-left:auto;color:var(--c-ink-3);font-variant-numeric:tabular-nums}
.ctx-cham-q{margin:3px 0 0;font-size:12px;line-height:1.4;color:var(--c-ink)}
.ctx-cham-p{margin:4px 0 0;font-size:10.5px;color:var(--c-ink-3);
  display:flex;flex-wrap:wrap;gap:3px 7px;}

/* A lista de pendencias. Cada item diz se esta resolvido, e os opcionais dizem que
   sao opcionais — pendencia que nao impede nada, marcada igual a que impede, ensina
   a ignorar a lista inteira. */
.ck-lista{list-style:none;margin:11px 0 0;padding:11px 0 0;display:grid;gap:7px;
  border-top:1px solid var(--c-line);}
.ck-i{display:flex;align-items:baseline;gap:8px;font-size:11.5px;color:var(--c-ink-2)}
.ck-i .mk{flex:none;width:13px;height:13px;border-radius:50%;margin-top:2px;
  border:1.5px solid var(--c-line-2);display:grid;place-items:center;}
.ck-i--ok{color:var(--c-ink)}
.ck-i--ok .mk{background:var(--c-ok);border-color:var(--c-ok);color:var(--c-ok-bg)}
.ck-i .op{color:var(--c-ink-3);font-size:10.5px}

.abr-guia{background:var(--c-sunken);border:1px solid var(--c-line);
  border-radius:var(--r);padding:13px 14px 14px;}
.abr-guia-cab{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.abr-guia-cab h2{font-size:12.5px;font-weight:600;margin:0;letter-spacing:-.01em}
.abr-guia-p{font-size:11.5px;line-height:1.55;color:var(--c-ink-2);margin:0 0 9px}
.abr-guia-p b{color:var(--c-ink);font-weight:600}
.abr-guia-p--fim{margin-bottom:0;color:var(--c-ink-3)}

.abr-guia-x{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:22px;height:22px;padding:0;border:0;border-radius:var(--r-xs);
  background:transparent;color:var(--c-ink-3);cursor:pointer;}
.abr-guia-x:hover{background:var(--c-card);color:var(--c-ink)}

/* Area de texto: a view escrevia `style="height:auto;padding:8px 9px"` a mao, e
   altura em atributo de estilo e o tipo de coisa que deriva entre views. */
.inp--area{height:auto;padding:8px 9px;line-height:1.5;resize:vertical;min-height:76px}

@media (max-width:1120px){
  .abr{padding:14px 14px 32px}
  .abr-ficha{padding:14px}
}

/* Abaixo disto o `.split` do shell ja empilha as duas colunas. A ficha vai para
   BAIXO do formulario, e nao para cima: o guia e apoio, e apoio antes do trabalho
   empurra o primeiro campo para fora da tela no celular. */
@media (max-width:900px){
  .abr > .card{max-width:none}
  .abr-ficha{background:var(--c-app)}
}

@media (max-width:600px){
  /* O complemento do grupo cai para a linha de baixo em vez de espremer o titulo. */
  .card-cab:has(.abr-sub){flex-wrap:wrap}
  .abr-sub{margin-left:0;flex-basis:100%}
}

/* Pagina de lista de cadastro: barra de filtro fixa e tabela rolando embaixo.
   Quem rola e a tabela, nao a pagina — a barra de busca precisa ficar no lugar. */
.lista-pagina{display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-height:0;overflow:hidden}
.lista-pagina .tbl-wrap{overflow:auto;min-height:0}
.busca-linha{display:flex;align-items:center;gap:7px}
.busca-linha .inp{width:230px;max-width:46vw}
.tbl-acoes{text-align:right;white-space:nowrap}
.tbl-acoes form{display:inline}
.tbl-pe{padding:10px 14px;border-top:1px solid var(--c-line)}

@media (max-width:600px){
  .busca-linha .inp{width:100%}
}

/* ----------------------------------------------------------------------------
   Busca de identidade — extraida do mockup, tela `busca`.

   O estado vazio e o bloco mais importante desta tela, e o unico do design system
   que usa a cor de alarme como FUNDO. Nao e enfase gratuita: "nada encontrado" e
   o instante em que a duplicata nasce, e a tela precisa parar quem esta com
   pressa. Os quatro caminhos aparecem em ordem, e o quarto — abrir sem vinculo —
   e o unico em cor de alarme no texto. */
.busca-pagina{overflow:auto;min-height:0;padding:24px 24px 40px}
.busca-pagina>*{max-width:840px;margin-left:auto;margin-right:auto}

.bsc-campo{display:flex;align-items:center;gap:11px;
  border:1px solid var(--c-line-2);border-radius:var(--r);background:var(--c-card);
  padding:0 12px;height:46px;box-shadow:var(--sh-pop);}
.bsc-campo svg{color:var(--c-ink-3);flex:none}
.bsc-inp{flex:1;border:0;background:transparent;color:var(--c-ink);font:inherit;
  font-size:15px;letter-spacing:-.01em;min-width:0;}
/* O input nao tem borda propria — a caixa em volta e que e o campo. Por isso o anel
   sai dele e vai para o pai, com :focus-within. Antes so havia o `outline:none`, e o
   campo de busca da aplicacao inteira nao dava sinal nenhum de foco. */
.bsc-inp:focus{outline:none}
.bsc-campo:focus-within{outline:2px solid var(--c-brand);outline-offset:1px;
  border-color:var(--c-brand)}
.bsc-inp::placeholder{color:var(--c-ink-3);font-size:14px}
.bsc-campo .btn{height:32px}

.bsc-norm{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:9px;
  font-size:11.5px;color:var(--c-ink-3);}
.bsc-norm b{color:var(--c-ink-2);font-weight:600}
.bsc-norm .mono{font-size:10.5px;color:var(--c-ink);background:var(--c-sunken);
  border-radius:3px;padding:1px 6px;}
.bsc-norm .ok{color:var(--c-ok)}
.bsc-norm .no{color:var(--c-bad)}

.bsc-exemplos{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:16px}
.bsc-exemplos .k{font-size:11.5px;color:var(--c-ink-3);margin-right:3px}
.bsc-exemplos a{font-weight:600;font-size:11px;color:var(--c-ink-2);
  border:1px solid var(--c-line);border-radius:100px;padding:3px 10px;text-decoration:none;}
.bsc-exemplos a:hover{border-color:var(--c-line-2);color:var(--c-ink);background:var(--c-card);text-decoration:none}
.bsc-exemplos em{font-family:var(--font);font-style:normal;color:var(--c-ink-3);font-size:10.5px;margin-left:4px}

.bsc-sec{margin-top:22px}
.bsc-h{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.bsc-h h3{font-size:12.5px;font-weight:600}
.bsc-h .grow{flex:1}
.bsc-h .aux{font-size:11.5px;color:var(--c-ink-3)}

.pes-card{border:1px solid var(--c-line);border-radius:var(--r);background:var(--c-card);
  box-shadow:var(--sh-card);overflow:hidden;}
.pes-card+.pes-card{margin-top:10px}
.pes-top{display:flex;align-items:flex-start;gap:11px;padding:13px 14px;width:100%}
.pes-nm{font-size:14px;font-weight:600;letter-spacing:-.01em;display:block}
.pes-sb{display:block;font-size:12px;color:var(--c-ink-3);margin-top:3px;line-height:1.45}
.pes-pp{margin-left:auto;font-size:10.5px;color:var(--c-ink-3);border:1px solid var(--c-line);
  border-radius:3px;padding:1px 6px;white-space:nowrap;flex:none;}
.pes-ins{border-top:1px solid var(--c-line);padding:2px 14px 10px}
.ins{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;
  align-items:center;padding:8px 0;font-size:12.5px}
.ins+.ins{border-top:1px solid var(--c-line)}
.ins-mu{font-weight:500}
.ins-mu .s{display:block;font-weight:400;font-size:11.5px;color:var(--c-ink-3);margin-top:1px}
/* tabular-nums porque estes numeros sao comparados entre linhas */
.ins-n{font-variant-numeric:tabular-nums;color:var(--c-ink-2);white-space:nowrap}
.ins-a{font-size:11.5px;color:var(--c-brand);white-space:nowrap}
.pes-nac{display:flex;gap:9px;align-items:flex-start;padding:10px 14px;
  border-top:1px solid var(--c-line);background:var(--c-sunken);font-size:12px;line-height:1.5;}
.pes-nac svg{flex:none;margin-top:2px;color:var(--c-ink-3)}
.pes-acao{padding:11px 14px;border-top:1px solid var(--c-line)}

/* o momento em que a duplicata nasce */
.bsc-vazio{margin-top:20px;border:1px solid var(--c-bad-bd);border-radius:var(--r);
  background:var(--c-bad-bg);overflow:hidden;}
.bsc-vazio-h{display:flex;align-items:flex-start;gap:10px;padding:14px 15px}
.bsc-vazio-h svg{color:var(--c-bad);flex:none;margin-top:1px}
.bsc-vazio-h b{display:block;font-size:13.5px;font-weight:600;margin-bottom:3px}
.bsc-vazio-h>span{font-size:12.5px;color:var(--c-ink-2);line-height:1.5}
.bsc-tent{padding:0 15px 12px}
.bsc-tent .k{font-size:11px;color:var(--c-ink-3);display:block;margin-bottom:6px}
.tent{display:grid;grid-template-columns:190px minmax(0,1fr);gap:10px;padding:5px 0;font-size:12px}
.tent+.tent{border-top:1px solid var(--c-bad-bd)}
.tent .q{font-weight:600;font-variant-numeric:tabular-nums;font-size:11px;color:var(--c-ink-2)}
.tent .r{color:var(--c-ink-3)}
.bsc-esc{display:flex;flex-direction:column;gap:1px;background:var(--c-bad-bd)}
.esc-op{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:11px;
  align-items:center;padding:11px 15px;background:var(--c-card);width:100%;
  color:var(--c-ink);text-decoration:none;}
a.esc-op:hover{background:var(--c-app);text-decoration:none}
.esc-op .n{font-weight:600;font-variant-numeric:tabular-nums;font-size:11px;color:var(--c-ink-3);text-align:center}
.esc-op .t{font-size:12.5px;font-weight:500;line-height:1.35}
.esc-op .t .s{display:block;font-weight:400;font-size:11.5px;color:var(--c-ink-3);margin-top:2px}
.esc-op .a{font-size:11.5px;color:var(--c-brand);white-space:nowrap}
.esc-op--ruim .t{color:var(--c-bad)}
/* caminho que ainda nao existe: aparece, mas nao finge ser clicavel */
.esc-op--bloq{opacity:.62}
.bsc-contador{display:flex;align-items:center;gap:8px;padding:10px 15px;
  border-top:1px solid var(--c-bad-bd);font-size:11.5px;color:var(--c-ink-2);}
.bsc-contador b{color:var(--c-bad);font-weight:600}

@media (max-width:600px){
  .busca-pagina{padding:16px 14px 34px}
  .ins{grid-template-columns:minmax(0,1fr);gap:4px}
  .tent{grid-template-columns:minmax(0,1fr);gap:2px}
  .esc-op{grid-template-columns:20px minmax(0,1fr);}
  .esc-op .a{grid-column:2}
}

/* Acoes de ciclo de vida na tela do chamado. Uma linha por transicao possivel:
   o verbo, para onde vai, e o que aquela transicao exige. Esconder a exigencia
   atras do clique faria a pessoa descobrir o campo obrigatorio depois de decidir. */
.acao-estado{padding:9px 0}
.acao-estado+.acao-estado{border-top:1px solid var(--c-line)}
.acao-linha{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.acao-linha .inp{flex:1;min-width:220px}
.acao-alvo{font-size:11.5px;color:var(--c-ink-3);white-space:nowrap}
.acao-alvo .s{display:block;color:var(--c-bad)}
.acao-extra{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-top:8px;padding-left:2px}
.acao-extra label{font-size:11.5px;color:var(--c-ink-3);display:flex;flex-direction:column;gap:4px}
.acao-extra .inp{width:auto;min-width:150px}
.acao-extra .s{font-size:11.5px;color:var(--c-ink-3);flex:1;min-width:200px;line-height:1.45}

@media (max-width:600px){
  .acao-linha .inp{min-width:100%}
}

/* ---------------------------------------------------------------- fila (RF-09)

   Valores copiados do mockup, e nao reinterpretados. A primeira versao desta
   tela usou os nomes de classe do mockup sem conferir se eles existiam aqui —
   e como o mockup e um arquivo autocontido com CSS proprio, metade nao existia.
   O resultado foi a tela sem contencao e com um vao enorme no topo.
   ------------------------------------------------------------------------- */

/* A barra de filas salvas. */
.vws{display:flex;align-items:center;gap:2px;flex-wrap:wrap;min-width:0}
.vwi{display:flex;align-items:center;border-radius:var(--r-sm)}
.vwi.on{background:var(--c-soft)}
.vwb{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;font-size:12.5px;
  color:var(--c-ink-2);text-decoration:none;border-radius:var(--r-sm);white-space:nowrap}
.vwi.on .vwb{color:var(--c-ink);font-weight:500}
.vwi:not(.on) .vwb:hover{background:var(--c-sunken);color:var(--c-ink)}
.vwb .n{font-size:11px;background:var(--c-sunken);border-radius:3px;padding:0 4px;line-height:16px}
.vwi.on .vwb .n{background:var(--c-card)}

/* Score. tabular-nums porque a coluna se compara — e o triangulo de prazo legal
   vem antes, na cor de alarme, porque data fiscal sobrepoe o score. */
.q-sc{display:inline-flex;align-items:center;gap:5px;font-variant-numeric:tabular-nums;
  font-weight:600;letter-spacing:-.01em}
.q-sc--vazio{color:var(--c-ink-3);font-weight:400}
.fl{color:var(--c-bad);display:inline-grid;place-items:center;font-size:9px}

/* A celula do chamado: assunto em cima, submetadados embaixo. */
.q-as{display:block;color:var(--c-ink);text-decoration:none;line-height:1.35}
.q-as:hover{text-decoration:underline}
.q-mt{display:block;font-size:11.5px;color:var(--c-ink-3);margin-top:2px}

.q-es{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;color:var(--c-ink-2)}

/* Executor. Fila e italico e cinza de proposito: ela nao e uma pessoa, e a
   diferenca precisa ser lida sem ler o texto. */
.q-pe{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;color:var(--c-ink-2)}
.q-pe--fila{color:var(--c-ink-3);font-style:italic;flex-wrap:wrap;white-space:normal;gap:0}
.q-pe--fila .nm{display:inline-flex;align-items:center;gap:5px}

/* "sem responsavel ha X dias". Alarme acima do limiar versionado. */
.q-orf{display:block;width:100%;font-size:11px;color:var(--c-ink-3);
  font-variant-numeric:tabular-nums;margin-top:2px}
.q-orf.al{color:var(--c-bad);font-weight:600}

/* Presenca: quem esta com o chamado aberto agora (RF-08). */
.q-viv{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--c-ok);flex:none}

.cp-hint{font-size:11.5px;color:var(--c-ink-3)}
.cp-hint--al{color:var(--c-bad)}

/* A barra de acao em massa, no pe da fila. */
/* A BARRA E UMA PILHA, e nao uma fila.

   Ela era `display:flex; flex-wrap:wrap`, e a intencao escrita aqui era "cada acao e uma
   linha propria" — mas flex so quebra quando FALTA largura. Em 1900px as tres acoes, o
   texto de aviso e o campo de motivo cabiam todos numa linha de 30px de altura, com os
   rotulos espremidos sobre controles minusculos e cada botao encostado no controle da
   acao seguinte.

   Grid de uma coluna: as linhas sao linhas porque a estrutura diz, e nao porque a tela
   ficou estreita. */
.fila-massa{display:grid;gap:10px;padding:11px 14px;
  border-top:1px solid var(--c-line);background:var(--c-app)}
.fila-massa-cab{margin:0;font-size:11.5px;color:var(--c-ink-3);max-width:78ch}

/* O MOTIVO E DAS TRES ACOES, e por isso ocupa a linha inteira, antes delas. No fim da
   barra ele lia como se fosse do ultimo grupo. */
.fila-massa-m{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--c-ink-3)}
.fila-massa-m .req{color:var(--c-ink-2);font-weight:600}

/* As tres acoes lado a lado enquanto couberem, cada uma como um bloco fechado: rotulo,
   controle e botao juntos, com borda propria. Sem a borda, o botao de uma acao encosta no
   controle da outra e nao ha como saber qual usa qual. */
.fila-massa-gs{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start}
.fila-massa-l{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap;
  border:1px solid var(--c-line);border-radius:var(--r-sm);padding:8px 10px;
  background:var(--c-card)}
.fila-massa-l > label{display:flex;flex-direction:column;gap:4px;
  font-size:11.5px;color:var(--c-ink-3);margin:0}

/* ------------------------------------------------- fio e composer (RF-10) */

/* Nota interna e mensagem sao a MESMA tabela e se distinguem pela visibilidade.
   A diferenca precisa ser lida sem ler o texto — daí o fundo de nota (--nt) e o
   selo, exatamente como o mockup faz. */
/* ---- a linha do tempo ------------------------------------------------------

   DUAS FORMAS, e a diferenca entre elas e o ponto.

   Comentario e CARTAO: tem texto que se le, avatar grande, fundo proprio. Mudanca
   de sistema e LINHA FINA: tem um fato que se confere de relance, icone e nada
   mais. Antes as duas usavam a mesma caixa, e um "trocou de responsavel" ocupava
   a mesma area que uma resposta de dez linhas ao cliente.

   O que se ganha e densidade onde ela cabe: quarenta eventos de sistema em
   quarenta linhas de 26px sao lidos rolando uma vez. */
.fio-lista{display:flex;flex-direction:column;gap:0}

/* O separador de dia. Regua com o rotulo encostado a esquerda — centralizado
   competiria com o conteudo pelo eixo de leitura. */
.fio-dia{display:flex;align-items:center;gap:9px;margin:14px 0 8px;
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--c-ink-3);}
.fio-dia:first-child{margin-top:2px}
.fio-dia::after{content:"";flex:1;height:1px;background:var(--c-line)}

/* ---- a mudanca de sistema: uma linha ---- */
.fio-m{display:flex;align-items:baseline;gap:8px;margin:0;padding:5px 2px;
  font-size:12.5px;color:var(--c-ink-2);min-width:0;}
.fio-m > svg{flex:none;align-self:center;color:var(--c-ink-3);width:14px;height:14px}
.fio-m .tx{flex:1;min-width:0}
/* O antes -> depois em negrito: e ele a informacao principal da linha, e nao o
   verbo. "mudou a situacao" repete em vinte linhas; "novo -> em atendimento" nao. */
.fio-m b{color:var(--c-ink);font-weight:600}
.fio-m .mtv{color:var(--c-ink-3)}
.fio-m .qm{color:var(--c-ink-3);white-space:nowrap}
.fio-m .tm{color:var(--c-ink-3);font-size:11.5px;white-space:nowrap;
  font-variant-numeric:tabular-nums;}
/* O motivo livre indentado sob a linha: e o "por que" que o §7.1 exige, e
   esconde-lo atras de hover faria a exigencia virar formalidade. */
.fio-m-motivo{margin:-2px 0 6px 24px;padding:0;font-size:12px;color:var(--c-ink-3);
  line-height:1.5;max-width:74ch;}

/* ---- o grupo consolidado ---- */
.fio-g{margin:0}
.fio-g > summary{display:flex;align-items:center;gap:8px;padding:6px 2px;
  cursor:pointer;list-style:none;font-size:12.5px;color:var(--c-ink-2);}
.fio-g > summary::-webkit-details-marker{display:none}
.fio-g > summary::marker{content:""}
.fio-g > summary:hover{color:var(--c-ink)}
.fio-g > summary .tx{flex:none}
.fio-g > summary b{color:var(--c-ink);font-weight:600}
/* Quais campos mudaram, no resumo: "estado · responsavel · prioridade" responde
   se vale expandir. Sem isso, "fez 3 alteracoes" obriga a abrir para saber. */
.fio-g > summary .cps{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;color:var(--c-ink-3);font-size:11.5px;}
.fio-g > summary .tm{color:var(--c-ink-3);font-size:11.5px;
  font-variant-numeric:tabular-nums;}
.fio-g > summary .ctx-chev{flex:none}
.fio-g-cx{margin:0 0 6px 24px;padding-left:11px;
  border-left:1px solid var(--c-line);}

/* ---- o comentario: cartao ---- */
.fio-c{margin:6px 0;border:1px solid var(--c-line);border-radius:var(--r-sm);
  background:var(--c-card);overflow:hidden;}
.fio-c-cab{display:flex;align-items:center;gap:8px;padding:8px 11px;
  border-bottom:1px solid var(--c-line);font-size:12px;}
.fio-c-cab .qm b{color:var(--c-ink);font-weight:600}
.fio-c-cab .rl{color:var(--c-ink-3);font-size:11.5px;margin-left:5px}
.fio-c-cab .grow{flex:1}
.fio-c-cab .tm{color:var(--c-ink-3);font-size:11.5px;white-space:nowrap;
  font-variant-numeric:tabular-nums;}
/* A DIRECAO com icone e palavra, e nao so com cor: cadeado para o que fica
   dentro, envelope com seta para o que saiu. Cor sozinha nao e canal. */
.fio-c-cab .dir{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;
  border-radius:var(--r-pill);font-size:10.5px;font-weight:600;white-space:nowrap;}
.fio-c--nota .dir{background:var(--c-warn-bg);border:1px solid var(--c-warn-bd);
  color:var(--c-warn);}
.fio-c--fora .dir{background:var(--c-ok-bg);border:1px solid var(--c-ok-bd);
  color:var(--c-ok);}
/* A regua a esquerda repete a direcao na borda do cartao, para quem varre a
   coluna sem ler os selos.

   TOKEN FORTE, e nao o de borda. Ela saiu daqui medindo `--c-ok-bd` contra
   `--c-card`: 1,38:1 no claro e 1,88:1 no escuro. Isso nao e discreto, e ausente —
   terceira vez nesta tela que eu ponho uma decoracao que ninguem ve, depois do
   separador "·" e da regua da linha de abertura. Com `--c-ok` e `--c-warn` a mesma
   regua mede 5,13:1 e 7,3:1, e 3px de cor cheia continuam sendo 3px.

   Ela e REDUNDANTE de proposito — o selo com icone e palavra ja diz a direcao —, e
   redundante nao quer dizer que possa ser invisivel: redundancia so ajuda quem a
   enxerga. */
.fio-c--nota{border-left:3px solid var(--c-warn)}
.fio-c--fora{border-left:3px solid var(--c-ok)}
/* O corpo do comentario, com o pouco de Markdown que ele aceita.

   `white-space:pre-wrap` SAIU. Ele existia porque o texto ia cru e as quebras
   precisavam sobreviver; agora a conversao emite <p> e <br>, e manter o pre-wrap
   somaria a quebra do HTML com a do texto — duas linhas em branco onde havia uma. */
.fio-c-tx{padding:11px 13px;max-width:74ch;font-size:12.5px;line-height:1.6;
  color:var(--c-ink);overflow-wrap:anywhere;}
.fio-c-tx > :first-child{margin-top:0}
.fio-c-tx > :last-child{margin-bottom:0}
.fio-c-tx p{margin:0 0 9px}
/* `list-style:disc` de volta: o base.css zera a marca de TODA lista, porque no
   resto da aplicacao <ul> e estrutura e nao enumeracao. Aqui e enumeracao — e
   sem a marca os itens viram linhas soltas indentadas, que nao se leem como lista. */
.fio-c-tx ul{margin:0 0 9px;padding-left:20px;list-style:disc}
.fio-c-tx li{margin:2px 0}
.fio-c-tx a{color:var(--c-brand);text-decoration:underline;text-underline-offset:2px}
/* Codigo tem fundo e nao familia propria: a monoespacada saiu do design system em
   27/08/2026 (§9.1 regra 4), e o que distingue codigo de prosa aqui e a superficie. */
.fio-c-tx code{padding:1px 5px;border-radius:var(--r-xs);background:var(--c-sunken);
  border:1px solid var(--c-line);font-size:12px;font-family:inherit;}
.fio-c-tx pre{margin:0 0 9px;padding:9px 11px;border-radius:var(--r-sm);
  background:var(--c-sunken);border:1px solid var(--c-line);overflow-x:auto;font-family:inherit;}
/* O <code> dentro do <pre> perde a caixa: a caixa ja e o <pre>, e duas bordas
   aninhadas leem como dois blocos. */
/* SEM MONOESPACADA, inclusive aqui. O navegador poe uma por padrao em <pre> e
   <code>, e o §9.6 lista monoespacada como anti-padrao — a familia saiu do design
   system em 27/08/2026. O que distingue codigo de prosa e a SUPERFICIE: fundo
   afundado, borda e o bloco proprio.

   A perda e real e esta declarada: XML indentado alinha pior em fonte
   proporcional. Se um dia valer a excecao, ela e do design system e nao desta
   regra — e volta com um token, nao com um `monospace` solto aqui. */
.fio-c-tx pre code{padding:0;border:0;background:none;font-size:12px;
  white-space:pre;line-height:1.5;font-family:inherit;}
.fio-c .anx{padding:0 13px 11px}

/* ---- o mais recente ----
   Regua de marca a esquerda, e nada mais. Fundo tingido faria parecer alerta, e
   o evento mais novo nao e um problema — e so o mais novo. */
.fio-l--novo{position:relative}
.fio-m.fio-l--novo::before,.fio-g.fio-l--novo::before{content:"";position:absolute;
  left:-9px;top:6px;bottom:6px;width:2px;border-radius:2px;background:var(--c-brand);}
.fio-c.fio-l--novo{box-shadow:inset 3px 0 0 var(--c-brand)}

/* O anexo no fio: pill com nome e tamanho. E um link para o endpoint que
   revalida — nunca uma URL do armazenamento. */
.msg-anexo{display:inline-flex;align-items:center;gap:6px;margin-top:6px;
  padding:3px 8px;border:1px solid var(--c-line);border-radius:var(--r-sm);
  background:var(--c-app);font-size:12px;color:var(--c-ink);text-decoration:none}
.msg-anexo:hover{border-color:var(--c-line-2)}
.msg-anexo .sz{color:var(--c-ink-3);font-size:11px;font-variant-numeric:tabular-nums}

/* O composer. A aba de nota interna vem marcada: e o mais restritivo (P6). */
.cp-tabs{display:flex;gap:2px;margin-bottom:8px;flex-wrap:wrap}
.cp-tab{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;
  border:1px solid var(--c-line);border-radius:var(--r-sm);font-size:12.5px;
  color:var(--c-ink-2);cursor:pointer;background:var(--c-app)}
.cp-tab:has(input:checked){background:var(--c-soft);color:var(--c-ink);font-weight:500;
  border-color:var(--c-line-2)}
.cp-tab input{margin:0}
.cp-pe{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.cp-clipe{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;
  color:var(--c-ink-2);cursor:pointer}
.cp-clipe input[type=file]{max-width:190px;font-size:11.5px}

/* ------------------------------------------- barra e montador de fila (RF-09) */

/* O + da barra: nova fila a partir dos filtros que estao na tela. */
.vw-add{display:inline-grid;place-items:center;width:24px;height:24px;margin-left:4px;
  border:1px dashed var(--c-line-2);border-radius:var(--r-sm);color:var(--c-ink-3);
  text-decoration:none;font-size:14px;line-height:1}
.vw-add:hover{color:var(--c-ink);border-color:var(--c-ink-3)}

/* O kebab da fila ativa. <details> e menu sem uma linha de JavaScript: abre, fecha
   com Esc, e navega por teclado de graca. */
.vwm{position:relative}
.vwm>summary{list-style:none;cursor:pointer;padding:2px 6px;color:var(--c-ink-3);
  border-radius:var(--r-xs);line-height:1}
.vwm>summary::-webkit-details-marker{display:none}
.vwm>summary:hover{color:var(--c-ink);background:var(--c-sunken)}
.vwm-pop{position:absolute;top:100%;right:0;z-index:60;min-width:250px;margin-top:4px;
  display:flex;flex-direction:column;gap:8px;padding:10px;
  background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r);box-shadow:var(--sh-pop)}
.vwm-pop form{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.vwm-pop input[type=text]{flex:1 1 130px;min-width:0}
.vwm-pop .rt{color:var(--c-bad);font-size:11px}
/* O link da fila: campo so-leitura, largura toda, e a selecao inteira ao focar. Sem
   script ele continua servindo — o endereco esta a vista e copia-se a mao. */
.vwm-lnk{display:block}
.vwm-lnk .inp{font-size:11.5px;height:27px;color:var(--c-ink-2)}
.vwm-lnk .inp:focus{color:var(--c-ink)}

/* Ordenacao e agrupamento. Eles viajam na query e nao gravam. */
.fbar-ctl{display:flex;align-items:center;gap:10px;flex:none}
.fdirty{font-size:11px;color:var(--c-bad);font-weight:600;
  border:1px solid var(--c-bad-bd);background:var(--c-bad-bg);
  border-radius:var(--r-xs);padding:1px 6px}

/* SLA restante (RF-11). A medida vem do cache do motor; a barra e o percentual
   consumido. Sem calculo, a celula fica VAZIA e diz que esta (P3) — coluna vazia
   com aparencia de folga e o pior resultado possivel aqui. */
.q-sla{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font-variant-numeric:tabular-nums;color:var(--c-ink-2)}
.q-sla .m{display:block;width:42px;height:4px;border-radius:2px;
  background:var(--c-sunken);overflow:hidden;flex:none}
.q-sla .m i{display:block;height:100%;background:var(--c-ink-2)}
.q-sla.al{color:var(--c-bad);font-weight:600}
.q-sla.al .m i{background:var(--c-bad)}
.q-sla.pausa{color:var(--c-ink-3)}
/* Hachurada, e nao so mais clara. O relogio parado precisa ser distinguivel do relogio
   correndo SEM depender de cor, e a hachura ja e o vocabulario do proprio design system
   para isso: e o mesmo padrao de `.sw.sus` na legenda, no mesmo angulo. */
.q-sla.pausa .m i{opacity:.7;
  background:repeating-linear-gradient(45deg,var(--c-ink-3) 0 2px,transparent 2px 5px)}
/* A palavra que diz o estado. Peso normal e --t3: ela informa, nao grita — o numero
   continua sendo o que a pessoa le primeiro. */
.q-sla-mk{font-size:11px;font-weight:400;color:var(--c-ink-3)}
.q-sla.al .q-sla-mk{color:var(--c-bad)}
.q-sla--vazio{color:var(--c-ink-3)}

/* O montador. */
/* DUAS COLUNAS: definicao a esquerda, previa a direita.

   O montador tinha teto de 760px numa tela com o dobro — a largura estava sobrando, e a
   previa e justamente o que se quer olhar ENQUANTO se monta. Abaixo de 1120 as duas
   empilham, que e o mesmo ponto de corte em que a ficha do chamado encolhe. */
.mtd-wrap{display:grid;grid-template-columns:minmax(0,760px) minmax(0,1fr);gap:0;align-items:start}
.mtd-previa{position:sticky;top:0;padding:14px 16px;border-left:1px solid var(--c-line);
  min-width:0;font-size:12.5px}
.mtd-n{margin:0 0 8px;font-size:13px;color:var(--c-ink-2)}
.mtd-n b{font-size:19px;color:var(--c-ink);font-weight:650;font-feature-settings:"tnum" 1}
.mtd-lista{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:7px}
.mtd-lista li{display:flex;flex-direction:column;gap:1px;min-width:0}
.mtd-lista a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mtd-mt{font-size:11px;color:var(--c-ink-3)}
@media (max-width:1120px){
  .mtd-wrap{grid-template-columns:minmax(0,1fr)}
  .mtd-previa{position:static;border-left:0;border-top:1px solid var(--c-line)}
}
.montador{max-width:760px}
/* A linha de condicao: o <select multiple> ocupa a largura que sobra, e a lista de valores
   nao empurra o resto para fora. */
.cond-vs{flex:1 1 220px;min-width:0;height:auto;padding:4px 6px}
.cond-sem{font-size:11.5px;color:var(--c-ink-3);align-self:center}
.cond-acoes{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap}
.cond{display:flex;gap:6px;align-items:flex-start;flex-wrap:wrap;margin-bottom:6px}
.cond select,.cond input[type=text]{min-width:0}
.cond input[type=text]{flex:1 1 200px}
.cond-vals{flex:1 1 100%}
.fvals{border:1px solid var(--c-line);border-radius:var(--r-sm);padding:8px;margin:4px 0 0}
.fvals legend{font-size:11.5px;color:var(--c-ink-3);padding:0 4px}
.fval{display:inline-flex;align-items:center;gap:5px;margin:0 10px 4px 0;font-size:12.5px}
.fval .n{font-size:11px;color:var(--c-ink-3);background:var(--c-sunken);
  border-radius:3px;padding:0 4px;font-variant-numeric:tabular-nums}

/* --------------------------------------------- workspace do chamado (RF-10) */

/* O lado esquerdo do .split: onde o trabalho acontece.
   Rola sozinho — quem rola e cada pane, e nao a pagina. E o que da sensacao de
   aplicacao em vez de site (§9.2). */
.conv{overflow-y:auto;min-height:0;padding:16px 18px 40px;display:flex;
  flex-direction:column;gap:14px}
/* NADA AQUI ENCOLHE, e a falta desta linha esmagava o compositor.

   Item de flex encolhe ate o tamanho do proprio conteudo e nao menos — EXCETO
   quando tem `overflow` diferente de `visible`, e ai o minimo automatico vira zero.
   O compositor tem `overflow:hidden` desde sempre, e era o unico filho direto com
   essa propriedade: num chamado com fio longo, toda a pressao de encolhimento caia
   sobre ele. Medido: 74px de altura para um conteudo de 164px, com o campo, os
   anexos e o botao cortados pelo proprio overflow.

   A regra vale para o filho que existe hoje e para o que alguem puser amanha. Numa
   coluna que ROLA nada deveria encolher — quem nao cabe sai pela rolagem, que e o
   que a rolagem existe para fazer. Conserta-la so no `.cmp` deixaria a proxima
   secao com `overflow` esperando o mesmo tombo, e a mensagem "esta cortado" nao
   aponta para flex nenhum. */
.conv > *{flex:none}
.conv > .card{margin:0}

/* A ficha ja tem overflow e borda no shell.css; aqui so o respiro interno. */
.ficha{padding:16px 16px 40px}
.ficha .card{margin:0 0 12px}
.ficha .card:last-child{margin-bottom:0}

/* Em tela estreita o split empilha (shell.css, 900px), e a ficha vira o rodape
   da pagina — os fatos depois do trabalho, que e a ordem certa quando so cabe
   uma coluna. */
@media (max-width:900px){
  .conv{padding:12px 14px 20px}
  .ficha{padding:12px 14px 30px}
}

/* SLA estourado. A UNICA cor de alarme do sistema (--al), e so quando exige
   acao — o §9.1 e explicito em ter uma so. */
.sla-estourou{color:var(--c-bad);font-weight:600}


/* ============================================================================
   AS PRIMITIVAS DE DADO — fase 3 do Helix, 27/08/2026.

   Cada uma existe para impedir uma mentira especifica, e a mentira esta nomeada
   junto da regra. Ver os Tag Helpers em TagHelpers/PrimitivasDeDados.cs e as
   amostras em /design-system.
   ============================================================================ */

/* ---- barra de SLA ---------------------------------------------------------
   Tres faixas: verde abaixo de 70, ambar de 70 a 90, vermelho de 90 em diante.
   Quem varre a fila precisa separar "vai vencer" de "venceu" sem ler numero.

   O percentual chega como custom property (--p), e nao como largura literal: o
   componente continua morando aqui, e a view so entrega o dado. */
.sla{display:block;width:42px;height:5px;border-radius:var(--r-pill);
  background:var(--c-sunken);overflow:hidden;flex:none;}
.sla > i{display:block;height:100%;width:var(--p,0);border-radius:var(--r-pill);
  transition:width .5s cubic-bezier(.2,.85,.3,1);}
.sla--folgado > i{background:var(--c-ok)}
.sla--apertado > i{background:var(--c-warn)}
.sla--estourando > i{background:var(--c-bad)}
/* Pausado nao e uma quarta faixa: e a MESMA faixa com o relogio parado. A hachura
   diz isso sem cor, porque distinguir dois tons de cinza e o que o §9.6 proibe. */
.sla--pausa{opacity:.55}
.sla--pausa > i{background-image:repeating-linear-gradient(
  135deg,transparent 0 3px,var(--c-card) 3px 5px)}
.sla--larga{width:100%}

/* ---- delta ----------------------------------------------------------------
   SETA E COR SAO SEPARADAS. A seta diz para onde o numero foi; a cor diz se isso
   e bom. Backlog subindo: seta para cima, vermelha. SLA subindo: seta para cima,
   verde. Pintar de vermelho tudo que cai e o jeito mais rapido de o painel mentir.

   O NUMERO veste token de texto, nunca a cor do delta: numero colorido se compara
   mal entre linhas. A cor fica na seta e no fundo. */
.delta{display:inline-flex;align-items:center;gap:4px;flex:none;
  font-size:11.5px;border-radius:var(--r-pill);padding:2px 8px 2px 6px;}
.delta b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--c-ink)}
.delta--boa{background:var(--c-ok-bg);color:var(--c-ok)}
.delta--ruim{background:var(--c-bad-bg);color:var(--c-bad)}
.delta--neutro{background:var(--c-sunken);color:var(--c-ink-3)}

/* ---- chip de icone tingido ------------------------------------------------
   34px, raio 10. A variante diz o ESTADO, nunca "qual metrica e esta" — uma cor
   por categoria e enfeite, e enfeite colorido some junto com o significado. */
.chip{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center}
.chip--marca{background:var(--c-soft);color:var(--c-brand)}
.chip--confirmacao{background:var(--c-ok-bg);color:var(--c-ok)}
.chip--atencao{background:var(--c-warn-bg);color:var(--c-warn)}
.chip--alarme{background:var(--c-bad-bg);color:var(--c-bad)}

/* ---- cartao de indicador --------------------------------------------------
   O cartao ja existe como .card. Isto e so o arranjo do indicador dentro dele. */
.ind{display:flex;align-items:flex-start;gap:12px;padding:14px}
.ind-txt{min-width:0;display:grid;gap:2px}
.ind-rot{font-size:11.5px;color:var(--c-ink-3)}
/* tabular-nums NAO entra aqui: numero heroi e isolado, nao se compara com
   vizinho, e a largura fixa do tabular deixa o digito frouxo (§9.1 item 7). */
.ind-val{font-size:21px;font-weight:600;letter-spacing:-.03em;color:var(--c-ink);line-height:1.1}
.ind-pe{display:flex;align-items:center;gap:7px;margin-top:3px}
.ind-nota{font-size:11px;color:var(--c-ink-3)}

/* ---- paginacao keyset -----------------------------------------------------
   ANTERIOR E PROXIMA, e nada mais. Keyset nao sabe quantas paginas existem — nao
   ha COUNT, e e por nao haver que a lista de 37.842 chamados abre rapido. Numero
   de pagina exigiria o COUNT de volta. */
.pag{display:flex;align-items:center;gap:6px;padding:12px 14px}
.pag-b{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;
  border:1px solid var(--c-line);border-radius:var(--r-pill);background:var(--c-card);
  font-size:12.5px;font-weight:500;color:var(--c-ink-2);white-space:nowrap;}
.pag-b:hover{border-color:var(--c-line-2);background:var(--c-sunken);color:var(--c-ink)}
.pag-b[aria-disabled="true"]{opacity:.38;cursor:not-allowed}
.pag-b[aria-disabled="true"]:hover{background:var(--c-card);border-color:var(--c-line);color:var(--c-ink-2)}
.pag-b:last-child{margin-left:auto}

/* ---- aviso transitorio ----------------------------------------------------
   Ele NAO substitui a mensagem do servidor: recusa e erro continuam na caixa
   .alerta, que fica. Este e para o que so precisa ser visto uma vez.

   Nasce visivel. Quem o remove e o script — sem ele a caixa fica, que e um efeito
   colateral aceitavel; nao renderizar sem script esconderia a confirmacao de quem
   mais precisa dela. */
.snk[data-aviso]{opacity:1;transform:translate(-50%,0);pointer-events:auto}

/* ---- abas de recorte -------------------------------------------------------
   Sao LINKS, e nao botoes: cada recorte e um endereco, e endereco se manda por
   mensagem. Funciona sem uma linha de script.

   A aba ativa veste a tinta da marca, igual ao item ativo da sidebar — e o peso
   muda junto, para a marca nao ser a unica pista. */
.abas{display:flex;align-items:center;gap:4px;padding:10px 14px 0;flex-wrap:wrap}
.aba{display:inline-flex;align-items:center;gap:7px;
  padding:6px 13px;border-radius:var(--r-pill);
  font-size:12.5px;color:var(--c-ink-2);white-space:nowrap;}
.aba:hover{background:var(--c-sunken);color:var(--c-ink)}
.aba[aria-current="page"]{background:var(--c-soft);color:var(--c-brand);font-weight:700}
/* A contagem vem depois do rotulo e em tabular: numeros de larguras diferentes
   fazem as abas dancarem quando a lista recarrega. */
.aba-n{font-variant-numeric:tabular-nums;font-size:11.5px;color:var(--c-ink-3)}
.aba[aria-current="page"] .aba-n{color:var(--c-brand)}

/* ============================================================================
   O PAINEL DE OPERACAO — fase 4 do Helix.

   Duas visualizacoes, e as duas obedecem ao §9.6: uma serie, uma cor; sem eixo
   duplo; valor legivel sem tooltip; e a rampa sequencial so em dado que tem
   ordem, que aqui e contagem.
   ============================================================================ */
.painel{overflow:auto;padding:20px 22px 40px;display:grid;gap:14px;max-width:1180px}
.painel-cab{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
/* A data de corte fica ao lado do titulo, e nao num rodape: o §7.2 existe porque
   corte que ninguem ve e corte que se move na vespera de uma reuniao ruim. */
.painel-corte{font-size:12px;color:var(--c-ink-3);margin:0}
/* A data de corte (RF-15.1), a mesma frase em toda tela que mostra esforco. Herda o
   tamanho do .painel-corte, que ela substituiu no painel. */
.data-corte{font-size:12px;color:var(--c-ink-3);margin:0;line-height:1.45}
.data-corte b{color:var(--c-ink-2);font-weight:600}
.painel-bloco{overflow:hidden}
/* A procedencia de cada numero (P2). Ela e parte do indicador, nao nota de rodape. */
.painel-proc{font-size:11.5px;color:var(--c-ink-3);line-height:1.5;margin:10px 0 0;max-width:80ch}
.painel-proc b{color:var(--c-ink-2);font-weight:600}

/* ---- volume por semana ----------------------------------------------------
   UMA SERIE, UMA COR. Sem legenda: o titulo ja a nomeia, e legenda de serie
   unica e ruido. So a semana corrente destaca, porque so ela tem um estado
   diferente das outras -- esta incompleta. */
.vol{position:relative;display:flex;align-items:flex-end;gap:6px;height:132px;padding-top:6px}
.vol-col{flex:1;min-width:0;display:flex;align-items:flex-end;height:100%}
/* Raio so no topo: a barra nasce na linha de base, e arredondar embaixo faz ela
   parecer flutuando. */
.vol-col > i{display:block;width:100%;height:var(--p,0);min-height:2px;
  background:var(--c-brand);border-radius:4px 4px 0 0;
  transition:height .5s cubic-bezier(.2,.85,.3,1);}
.vol-col:hover > i{background:var(--c-brand-alt)}
/* A semana em curso e a unica destacada, e o destaque e HACHURA e nao outra cor:
   cor nova aqui viraria segunda serie, e nao ha segunda serie. */
.vol-col--atual > i{
  background-image:repeating-linear-gradient(
    135deg,transparent 0 4px,var(--c-card) 4px 6px);}
/* A linha de media atravessa por cima, tracejada, para nao se confundir com uma
   barra. Ela e a unica outra marca do grafico. */
.vol-media{position:absolute;left:0;right:0;bottom:var(--p,0);height:0;
  border-top:1px dashed var(--c-ink-3);z-index:1;pointer-events:none;}
.vol-eixo{display:flex;font-size:11px;color:var(--c-ink-3);margin-top:6px;
  font-variant-numeric:tabular-nums;}
.vol-eixo .grow{flex:1}

/* ---- mapa de calor --------------------------------------------------------
   Rampa SEQUENCIAL sobre contagem, que e o uso correto dela. O degrau 0 e a
   superficie: "nenhum chamado nesta hora" e "um chamado nesta hora" sao coisas
   diferentes, e pinta-las igual esconde o buraco que interessa ver. */
.calor-wrap{overflow-x:auto}
/* `table-layout:fixed` + `min-width`: sem os dois, a tabela ENCOLHE em vez de rolar.
   Medido a 430px: a celula caia de 20 para 15px e o rotulo de hora virava borrao,
   com o wrap achando que cabia tudo. Rolar horizontalmente dentro do proprio bloco
   e o que o §9.5 pede de conteudo largo -- quem nao pode rolar e a pagina. */
.calor{border-collapse:separate;border-spacing:2px;font-size:11px;
  table-layout:fixed;min-width:620px;}
.calor-h{font-weight:500;color:var(--c-ink-3);text-align:center;padding:0 0 4px;
  font-variant-numeric:tabular-nums;width:20px;}
.calor-m{text-align:right;font-weight:500;color:var(--c-ink-2);white-space:nowrap;
  padding-right:8px;max-width:140px;overflow:hidden;text-overflow:ellipsis;}
.calor-c{width:20px;min-width:20px;height:16px;border-radius:3px;background:var(--h0)}
.calor-c--0{background:var(--h0)}
.calor-c--1{background:var(--h1)}
.calor-c--2{background:var(--h2)}
.calor-c--3{background:var(--h3)}
.calor-c--4{background:var(--h4)}
.calor-c--5{background:var(--h5)}
.calor-leg{display:flex;align-items:center;gap:3px;margin-top:10px}
.calor-leg .grow{flex:1}
.calor-leg-t{font-size:11px;color:var(--c-ink-3);margin:0 5px;font-variant-numeric:tabular-nums}
/* A tabela equivalente. O §9.6 proibe identidade que so existe em cor, e um mapa
   de calor e exatamente isso se o numero nao estiver em lugar nenhum. */
.calor-tab{margin-top:12px;border-top:1px solid var(--c-line);padding-top:10px}
.calor-tab > summary{font-size:12px;color:var(--c-ink-2);cursor:pointer}
.calor-tab > summary:hover{color:var(--c-ink)}

/* ---- o que ainda nao da para medir ---------------------------------------- */
.lacunas{margin:12px 0 0;display:grid;gap:12px}
.lacunas dt{font-size:12.5px;font-weight:600;color:var(--c-ink)}
.lacunas dd{margin:2px 0 0;font-size:12px;color:var(--c-ink-2);line-height:1.5;max-width:80ch;
  border-left:2px solid var(--c-warn-bd);padding-left:10px;}

/* ============================================================================
   /MEU-DIA — fase 6 do Helix.
   ============================================================================ */

/* ---- a linha do dia -------------------------------------------------------
   Faixa fixa de 08h as 19h. Fixa, e nao derivada do calendario: uma faixa que
   muda de largura conforme o dia faz o olho comparar posicoes que nao sao
   comparaveis entre um dia e outro.

   Cada peca recebe --i (onde comeca) e --l (quanto ocupa), em percentual. O
   valor e dado; a geometria continua morando aqui. */
.dia{position:relative;height:52px;border-radius:var(--r-sm);
  background:var(--c-sunken);overflow:hidden;}
.dia > *{position:absolute;top:0;bottom:0;left:var(--i);width:var(--l)}

/* Fora de jornada e almoco: CINZA, e nunca hachurado. Eles nao sao lacuna --
   sao tempo que ninguem espera que tenha registro, e hachurar os dois igual
   faria a pessoa procurar o que preencher no proprio almoco. */
.dia-fora{background:var(--c-line-2)}

/* MARCA, e nao rampa de calor. Apontado e apoio nao sao duas intensidades da
   mesma coisa -- sao duas categorias, e pintar categoria numa rampa inventa uma
   ordem que nao existe (secao 9.1, regra 2). Sao dois degraus da MESMA marca:
   mesma identidade, um deles mais fraco. */
.dia-bl{background:var(--c-brand);border-radius:3px;border:1px solid var(--c-card)}
.dia-bl:hover{background:var(--c-brand-alt)}
/* Apoio interno nao tem chamado: conta no total e nao aponta para lugar nenhum.
   Esta na legenda -- distincao visual sem entrada na legenda e enfeite. */
.dia-bl--apoio{background:var(--c-brand-alt)}
.dia-bl--apoio:hover{background:var(--c-brand-alt)}
/* Em curso e listrado, e a listra ANDA -- e o unico movimento da tela, e existe
   porque "o cronometro esta correndo agora" e a coisa que muda decisao. */
.dia-bl--curso{background-image:repeating-linear-gradient(
  135deg,transparent 0 5px,var(--c-card) 5px 8px);animation:anda 1.6s linear infinite}
@keyframes anda{to{background-position:18px 0}}
@media (prefers-reduced-motion:reduce){ .dia-bl--curso{animation:none} }

/* A lacuna e a UNICA coisa da faixa que pede acao, e ela e clicavel. Ambar, e
   nao vermelho: buraco a confirmar nao e falha. */
/* A hachura e a borda sao em --c-warn, e nao em --c-warn-bd: contra o leito o
   tom de borda dava 1,02:1 -- a unica peca da faixa que pede acao era a menos
   visivel dela. */
.dia-lac{background:var(--c-warn-bg);border:1px solid var(--c-warn);border-radius:3px;
  background-image:repeating-linear-gradient(
    135deg,transparent 0 4px,var(--c-warn) 4px 6px);}
.dia-lac:hover{background-color:var(--c-warn-bd)}

.dia-mk{width:0;border-left:2px solid var(--c-ink);z-index:2}
.dia-mk--agora{border-color:var(--c-bad)}

.dia-eixo{position:relative;height:16px;margin-top:5px;font-size:10.5px;
  color:var(--c-ink-3);font-variant-numeric:tabular-nums;}
.dia-eixo > span{position:absolute;left:var(--i);transform:translateX(-50%)}

.dia-leg{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:10px;
  font-size:11.5px;color:var(--c-ink-3);}
.dia-leg .grow{flex:1}
.dia-leg-c{display:inline-block;width:11px;height:11px;border-radius:3px;
  vertical-align:-1px;margin-right:5px;}
.dia-leg-c--bl{background:var(--c-brand)}
.dia-leg-c--apoio{background:var(--c-brand-alt)}
.dia-leg-c--lac{background:var(--c-warn-bg);border:1px solid var(--c-warn)}
.dia-leg-c--fora{background:var(--c-line-2)}

/* ---- comece por aqui ------------------------------------------------------
   O MOTIVO tem peso proprio, e nao e nota de rodape: ele e o que faz a
   ordenacao ser obedecida. Score opaco e o jeito mais rapido de o agente
   ignorar a ordem e rolar ate achar o que reconhece. */
.fazer{list-style:none;margin:0;padding:0;display:grid;gap:2px;counter-reset:f}
.fazer-i{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:baseline;
  padding:9px 10px;border-radius:var(--r-sm);}
.fazer-i:hover{background:var(--c-sunken)}
.fazer-t{grid-column:1;font-size:13px;color:var(--c-ink);min-width:0}
.fazer-t:hover{color:var(--c-brand)}
.fazer-m{grid-column:1;font-size:11.5px;color:var(--c-ink-2)}
.fazer-m--venceu{color:var(--c-bad);font-weight:600}
.fazer-a{grid-column:2;grid-row:1 / span 2;display:flex;align-items:center;gap:8px;flex:none}

/* ---- voltou --------------------------------------------------------------- */
.voltou{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:9px;font-size:12.5px}

/* ---- conciliacao ----------------------------------------------------------
   Tres estados, e o terceiro importa: "a plataforma nao consegue conferir" NAO
   e "pendente". Ele sai da conta do progresso e nao ganha marca -- fingir que
   esta feito seria o oposto do P3. */
.concil{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:3px}
.concil-i{display:flex;align-items:flex-start;gap:10px;padding:9px 10px;
  border-radius:var(--r-sm);}
.concil-i:hover{background:var(--c-sunken)}
.concil-mk{width:18px;height:18px;flex:none;display:grid;place-items:center;margin-top:1px}
.concil-i--ok .concil-mk{color:var(--c-ok)}
.concil-i--falta .concil-mk{color:var(--c-warn)}
/* Sem marca, e com a borda tracejada dizendo que a duvida e da plataforma. */
.concil-i--nao-sei .concil-mk{border:1px dashed var(--c-line-2);border-radius:50%}
.concil-tx{display:grid;gap:1px;min-width:0;flex:1}
.concil-tx b{font-size:12.5px;font-weight:600;color:var(--c-ink)}
.concil-i--ok .concil-tx b{color:var(--c-ink-2);font-weight:500}

/* A linha de ajuda no rodape de uma secao da ficha. Mesma forma do snapshot: so o
   rotulo e o icone; o texto mora dentro do <details> da ajuda.

   NO RODAPE E NAO NO <summary> DA SECAO. `<ajuda>` e um <details>, e por-lo dentro
   do <summary> de outro <details> e interativo dentro de interativo — o clique fica
   ambiguo e o leitor de tela anuncia dois controles onde ha um. */
.ctx-ajuda{display:flex;align-items:center;gap:6px;margin:10px 0 0;
  padding-top:9px;border-top:1px solid var(--c-line);
  font-size:11.5px;color:var(--c-ink-3);}

/* A troca de executor: select largo e botao ao lado, numa linha. */
.ctx-troca{display:flex;align-items:center;gap:7px;margin-top:8px}
.ctx-troca .inp{flex:1;min-width:0;font-size:12px}

/* O link que inverte a ordem do fio. Discreto: e a acao rara — o padrao (mais
   recente primeiro) responde a pergunta do dia. O chevron gira para indicar a
   direcao da leitura, e `.prao` e o que aponta para cima. */
.fio-ordem{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;
  border-radius:var(--r-pill);font-size:11.5px;color:var(--c-ink-3);
  text-decoration:none;white-space:nowrap;}
.fio-ordem:hover{background:var(--c-sunken);color:var(--c-ink)}
.fio-ordem > svg{flex:none;width:12px;height:12px}
.fio-ordem > svg.prao{rotate:180deg}

/* A abertura: a MESMA linha fina das outras, e nada a mais.
   
   A primeira versao tinha uma regua de 2px a esquerda em `--c-line-2`, para
   marcar "aqui comeca a historia". Medida, ela da 1,44:1 contra a pagina — nao e
   discreta, e ausente, exatamente como o separador `·` que ja tinha custado uma
   investigacao. Decoracao que ninguem ve nao decora; o que distingue esta linha e
   o icone e o texto, que dizem o canal e o solicitante.
   
   Marca-la com cor a poria em competicao com o mais recente, que e o que se
   procura ao abrir a tela. */
.fio-m--ab .lk{font-size:11.5px;white-space:nowrap}

/* ---- a barra de formatacao e o aviso de rascunho (itens 12 e 14) ----

   Barra discreta: ela e atalho de digitacao, e nao o assunto do compositor. Sem
   fundo proprio, sem borda em volta — o que a separa do campo e o espaco. */
.cmp-fmt{display:flex;align-items:center;gap:4px;margin-bottom:7px}
.cmp-fmt button{display:inline-flex;align-items:center;height:24px;padding:0 8px;
  border:1px solid transparent;border-radius:var(--r-xs);background:transparent;
  color:var(--c-ink-3);font-size:11.5px;font-family:inherit;cursor:pointer;}
.cmp-fmt button:hover{background:var(--c-sunken);color:var(--c-ink);
  border-color:var(--c-line);}
.cmp-fmt button:focus-visible{outline:2px solid var(--c-brand);outline-offset:1px}
.cmp-fmt button b{font-size:12.5px}
.cmp-fmt .grow{flex:1}
/* O aviso do rascunho e informacao de fundo: ele confirma, nao chama. */
.cmp-rasc{font-size:11px;color:var(--c-ink-3);white-space:nowrap}

/* ---- as acoes de cada comentario (item 17) ----

   Elas aparecem no hover E no foco de dentro do cartao. So no hover, quem navega
   por teclado nunca as encontra — e o §10.3 pede navegacao por teclado com foco
   visivel, o que exige que o alvo do foco esteja visivel. */
.fio-c-ac{display:flex;align-items:center;gap:2px;margin-left:6px;
  opacity:0;transition:opacity .12s}
.fio-c:hover .fio-c-ac,.fio-c:focus-within .fio-c-ac{opacity:1}
.fio-c-ac .ac{padding:2px 7px;border:1px solid transparent;border-radius:var(--r-xs);
  background:transparent;color:var(--c-ink-3);font-size:11px;font-family:inherit;
  cursor:pointer;text-decoration:none;white-space:nowrap;}
.fio-c-ac .ac:hover{background:var(--c-sunken);color:var(--c-ink);border-color:var(--c-line)}
/* O anel de foco TRAZ a acao junto: sem isto o botao recebe foco dentro de um bloco
   com opacidade zero, e o anel fica invisivel sobre nada. */
.fio-c-ac .ac:focus-visible{opacity:1;outline:2px solid var(--c-brand);outline-offset:1px}

/* A citacao dentro do corpo do comentario. Regua a esquerda e texto recuado: e a
   forma que se le como "isto foi dito por outra pessoa" sem precisar de rotulo. */
.fio-c-tx blockquote{margin:0 0 9px;padding:2px 0 2px 11px;
  border-left:2px solid var(--c-line-2);color:var(--c-ink-2);}
.fio-c-tx blockquote b{color:var(--c-ink)}

/* ---- fechar um comentario (D-116) ----

   Painel suspenso, e nao bloco empilhado: o cartao do comentario esta no meio do
   fio, e um formulario que abre empurrando empurra a conversa inteira para baixo
   toda vez que alguem clica para ver o que a acao faz.

   <details> puro. Abre, fecha, responde ao teclado e sai por Esc sem script, e o
   formulario dentro dele e um POST normal — a acao existe com o script quebrado. */
.fio-c-fch{position:relative}
.fio-c-fch > summary{list-style:none;cursor:pointer}
.fio-c-fch > summary::-webkit-details-marker{display:none}
.fio-c-fch > summary::marker{content:""}
.fio-c-fch[open] > summary{background:var(--c-sunken);color:var(--c-ink);
  border-color:var(--c-line);}
.fio-c-fch-p{position:absolute;right:0;top:calc(100% + 5px);z-index:30;
  width:min(320px,calc(100vw - 40px));padding:11px 12px;
  border:1px solid var(--c-line-2);border-radius:var(--r-sm);
  background:var(--c-card);box-shadow:var(--sh-app);
  display:flex;flex-direction:column;gap:5px;text-align:left;}
.fio-c-fch-p .t{margin:0;font-size:11.5px;line-height:1.5;color:var(--c-ink-2)}
.fio-c-fch-p .t b{color:var(--c-ink)}
.fio-c-fch-p .inp{width:100%}
.fio-c-fch-p .fld-hint{margin-top:0}
.fio-c-fch-p .btn{align-self:flex-start;margin-top:3px}
/* O painel aberto mantem as acoes visiveis: elas vivem num bloco que so aparece
   no hover, e o mouse sai dele para preencher o formulario. */
.fio-c:has(.fio-c-fch[open]) .fio-c-ac{opacity:1}

/* ---- inserir modelo de resposta (item 13) ----

   Gaveta na propria barra de formatacao: ela e um auxilio de escrita, e vive com os
   outros. O painel e suspenso porque o compositor nao pode crescer meia tela toda vez
   que alguem abre a lista para ver o que tem. */
.cmp-mdl{position:relative}
.cmp-mdl > summary{display:inline-flex;align-items:center;height:24px;padding:0 8px;
  border:1px solid transparent;border-radius:var(--r-xs);color:var(--c-ink-3);
  font-size:11.5px;cursor:pointer;list-style:none;}
.cmp-mdl > summary::-webkit-details-marker{display:none}
.cmp-mdl > summary::marker{content:""}
.cmp-mdl > summary:hover{background:var(--c-sunken);color:var(--c-ink);border-color:var(--c-line)}
.cmp-mdl > summary:focus-visible{outline:2px solid var(--c-brand);outline-offset:1px}
.cmp-mdl[open] > summary{background:var(--c-sunken);color:var(--c-ink);border-color:var(--c-line)}
/* Teto de altura com rolagem: com quinze modelos cadastrados o painel passaria da tela,
   e o ultimo ficaria inalcancavel. */
.cmp-mdl-p{position:absolute;left:0;top:calc(100% + 5px);z-index:30;
  width:min(420px,calc(100vw - 40px));max-height:320px;overflow-y:auto;
  padding:6px;border:1px solid var(--c-line-2);border-radius:var(--r-sm);
  background:var(--c-card);box-shadow:var(--sh-app);}
.cmp-mdl-i{padding:7px 8px;border-radius:var(--r-xs)}
.cmp-mdl-i + .cmp-mdl-i{border-top:1px solid var(--c-line)}
.cmp-mdl-i:hover{background:var(--c-sunken)}
.cmp-mdl-i .nm{display:flex;align-items:center;gap:8px;margin:0 0 3px;font-size:12px;
  color:var(--c-ink);}
.cmp-mdl-i .nm b{flex:1;min-width:0;font-weight:600}
.cmp-mdl-i .ins{padding:2px 8px;border:1px solid var(--c-line-2);border-radius:var(--r-pill);
  background:var(--c-card);color:var(--c-ink-2);font-size:11px;font-family:inherit;
  cursor:pointer;}
.cmp-mdl-i .ins:hover{border-color:var(--c-brand);color:var(--c-ink)}
/* O texto e PREVIA, e nao o modelo inteiro: tres linhas dizem se e este o modelo, e
   quinze empurrariam os outros para fora do painel. */
.cmp-mdl-i .tx{margin:0;font-size:11.5px;line-height:1.5;color:var(--c-ink-3);
  white-space:pre-wrap;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;}

/* ---- a fila legivel (08/09/2026) ------------------------------------------

   LARGURA CONTIDA. A coluna "Chamado" nao tinha largura e esticava ate ocupar
   metade da tela, empurrando as colunas de dado para a direita — em 1920 o olho
   percorria trinta centimetros entre o titulo e o SLA. `table-layout:fixed` faz
   as larguras do <th> valerem, e o teto de 1600px impede a linha de crescer
   alem do que se le de uma vez. */
.tbl-wrap .tbl{table-layout:fixed;max-width:1600px}
.tbl--fila td{vertical-align:middle}

/* O titulo corta em vez de empurrar: numa lista, uma linha de titulo com o dobro
   da altura desalinha as trinta abaixo dela. */
.q-as{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- o score, e a conta dele ---- */
.q-sc-d{display:inline-block;position:relative}
.q-sc-d > summary{list-style:none;cursor:pointer;border-radius:var(--r-xs)}
.q-sc-d > summary::-webkit-details-marker{display:none}
.q-sc-d > summary::marker{content:""}
.q-sc-d > summary:hover{color:var(--c-ink)}
.q-sc-d > summary:focus-visible{outline:2px solid var(--c-brand);outline-offset:2px}
/* O painel e suspenso: empurrar a linha para baixo desalinharia a tabela inteira
   a cada abertura. */
.q-sc-p{position:absolute;left:0;top:calc(100% + 4px);z-index:30;width:210px;
  padding:8px 10px;border:1px solid var(--c-line-2);border-radius:var(--r-sm);
  background:var(--c-card);box-shadow:var(--sh-app);}
.q-sc-p dl{display:grid;grid-template-columns:1fr auto;gap:3px 10px;margin:0;
  font-size:11.5px;}
.q-sc-p dt{color:var(--c-ink-3);min-width:0}
.q-sc-p dd{margin:0;color:var(--c-ink);font-variant-numeric:tabular-nums;text-align:right}
.q-sc-p .tt{border-top:1px solid var(--c-line);padding-top:3px;margin-top:2px;
  font-weight:600;color:var(--c-ink);}

/* ---- prioridade: ponto E palavra ----
   A cor sozinha nao e canal (§9.6). O ponto repete o que a palavra diz, para quem
   varre a coluna de relance — e a palavra sustenta quem nao distingue as cores. */
.q-pri{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--c-ink-2)}
.q-pri .pt{width:6px;height:6px;border-radius:50%;flex:none;background:var(--c-ink-3)}
.q-pri[data-p="1"] .pt{background:var(--c-bad)}
.q-pri[data-p="2"] .pt{background:var(--c-warn)}
.q-pri[data-p="3"] .pt{background:var(--c-ok)}
.q-pri[data-p="4"] .pt{background:var(--c-ink-3)}

/* ---- idade e dias sem atualizacao ----
   `tabular-nums` porque sao numeros que se COMPARAM entre linhas (§9.1 nº 7): sem
   ele "9 d" e "14 d" nao alinham, e o olho perde a coluna. */
.q-dd{font-size:12px;color:var(--c-ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.q-dd.at{color:var(--c-warn);font-weight:600}
.q-dd.al{color:var(--c-bad);font-weight:600}

/* ---- o executor, e a ausencia dele ----
   Em fila de triagem, "sem executor" e o dado principal da linha — e por isso ele
   e DITO, e nao deduzido de o nome da fila aparecer onde deveria estar o de alguem. */
.q-pe{display:flex;align-items:center;gap:6px;min-width:0}
.q-pe .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.q-pe--fila{flex-wrap:wrap;gap:3px 6px}
.q-pe--fila .nm{font-size:11.5px;color:var(--c-ink-3)}
.q-orf{display:inline-flex;align-items:center;padding:1px 7px;border-radius:var(--r-pill);
  background:var(--c-warn-bg);border:1px solid var(--c-warn-bd);color:var(--c-warn);
  font-size:10.5px;font-weight:600;white-space:nowrap;}
.q-orf.al{background:var(--c-bad-bg);border-color:var(--c-bad-bd);color:var(--c-bad)}
.q-orf-d{font-size:10.5px;color:var(--c-ink-3);white-space:nowrap}

/* ---- o motivo do SLA nao calculado ----
   Chip, e nao travessao: o travessao obrigava a passar o mouse para saber por que,
   e o motivo vivia so no `title`. */
.q-sla--vazio{display:inline-flex;align-items:center;padding:1px 7px;
  border-radius:var(--r-pill);background:var(--c-sunken);border:1px solid var(--c-line);
  color:var(--c-ink-3);font-size:10.5px;white-space:nowrap;}

/* ---- o grupo que recolhe ----
   Checkbox escondido no cabecalho e `:has()`: abre e fecha sem uma linha de
   JavaScript, e o subtotal continua visivel com o grupo fechado — que e o unico
   motivo de recolher. */
.gh-t{display:flex;align-items:center;gap:7px;cursor:pointer;width:100%}
.gh-t .ctx-chev{color:var(--c-ink-3);rotate:0deg;transition:rotate .12s;flex:none}
.gg:has(.gh input:checked) .gh-t .ctx-chev{rotate:-90deg}
.gg:has(.gh input:checked) tr:not(.gh){display:none}
.gh-t input:focus-visible + .ctx-chev{outline:2px solid var(--c-brand);outline-offset:2px;
  border-radius:var(--r-xs)}
.gnt{font-size:11px;color:var(--c-ink-3);font-weight:400}

/* ---- as notas da fila ----
   Gaveta, e nao paragrafo permanente: o texto explica a regra e por isso fica, mas
   lido a cada abertura por quem ja sabe ele e a tela virando parede. */
/* A FAIXA TEM SUPERFICIE, e nao flutua sobre o canvas.

   Ela ficava entre a borda de baixo da barra e o cabecalho da tabela, sem fundo nem linha:
   o criterio da fila e os avisos apareciam soltos no meio do nada, e liam-se como texto
   perdido em vez de como parte do cabecalho. Mesmo fundo da barra, mesma borda — as duas
   viram um bloco de cabecalho de duas linhas. */
.fila-notas{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:8px 14px;
  background:var(--c-app);border-bottom:1px solid var(--c-line);}
.fila-nota > summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  list-style:none;font-size:11.5px;color:var(--c-ink-3);}
.fila-nota > summary::-webkit-details-marker{display:none}
.fila-nota > summary::marker{content:""}
.fila-nota > summary:hover{color:var(--c-ink)}
/* A NOTA DE ATENCAO tem o icone na cor de atencao.

   O `<icone>` pinta com `currentColor`, e o summary e --c-ink-3: o triangulo de alerta saia
   na mesma cor do texto de corpo, ou seja, saia como um marcador. "Ha linha sem SLA
   calculado" e um ESTADO — lacuna mostrada como lacuna (P3) —, e estado e um dos quatro
   trabalhos da cor (§9.1 nº 2).

   So o icone, e o texto um tom acima. As outras duas notas da faixa sao AJUDA, nao estado, e
   continuam neutras: ambar nelas seria cor gasta onde nao ha nada acontecendo. */
.fila-nota--at > summary{color:var(--c-ink-2)}
.fila-nota--at > summary > svg{color:var(--c-warn)}
.fila-nota--at > summary:hover{color:var(--c-ink)}
/* O CRITERIO DA FILA e contexto, e nao estado.

   Ele usava `.fld-ro`, que e --c-ink: o texto mais forte da faixa era o menos urgente dela, e
   o aviso ao lado, o mais fraco. A hierarquia estava ao contrario. */
.fila-crit{font-size:11.5px;color:var(--c-ink-2);line-height:1.45;margin:0}
.fila-nota > summary:focus-visible{outline:2px solid var(--c-brand);outline-offset:2px;
  border-radius:var(--r-xs)}
.fila-nota p{margin:5px 0 0;max-width:74ch;font-size:11.5px;line-height:1.5;
  color:var(--c-ink-2);}

/* ----------------------------------------------------------------------------
   Consulta universal — /chamados

   O cabecalho existe porque `/chamados` e `/fila` pareciam a mesma tela com
   filtros diferentes. Ele diz o que a tela e antes de a pessoa rolar.

   Sem borda, sem sombra, sem cabecalho de painel: a hierarquia sai do peso e da
   cor do texto (§9.1 nº 3). Um bloco com moldura aqui competiria com a tabela,
   que e o conteudo.
   ---------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------
   O topo da consulta.

   ELE TINHA SEIS FAIXAS EMPILHADAS — cabecalho em dois paragrafos, busca,
   chips, abas, ordenacao e "filtro aplicado" — e ~19% da altura da tela ia
   embora antes da primeira linha da tabela. Pior: as seis tinham o mesmo peso
   visual, e tres acoes ancoradas a direita em tres alturas diferentes liam
   como tres coisas sem relacao.

   Agora sao QUATRO, e a hierarquia sai da posicao: legenda, faixa de busca com
   as acoes de tela a direita, abas com o que o recorte aplica, e os filtros.
   Densidade alta e controlada — quem usa passa oito horas por dia nisso. */
.cons-cab{margin:0;padding:12px 14px 0;font-size:12px;color:var(--c-ink-3);line-height:1.5}
.cons-cab-t{font-weight:600;color:var(--c-ink)}

.cons-linha{display:flex;align-items:center;gap:10px;padding:10px 14px 0;flex-wrap:wrap}

/* As tres acoes de tela, juntas e a direita: ordenar, colunas, exportar. Elas
   respondem a mesma pergunta — "como eu quero ver esta lista" — e por isso
   ficam no mesmo lugar, e nao espalhadas por tres faixas. */
.cons-tela{display:flex;align-items:center;gap:5px;margin-left:auto;flex-wrap:wrap}

/* O que o recorte aplica, dito na tela em vez de escondido no repositorio.
   Rotulo em peso, nao em CAIXA ALTA com letter-spacing (§9.6). */
.cons-cond{font-size:11.5px;color:var(--c-ink-3)}
/* Quando ele e paragrafo proprio — a interpretacao da busca —, precisa da margem. */
p.cons-cond{margin:8px 14px 0}
.cons-cond-r{font-weight:700;color:var(--c-ink-2)}
.cons-cond-r::after{content:":";margin-right:4px}

/* A busca da consulta universal. Um campo, e ele domina a faixa — e o que
   sobra a direita e acao, nao enfeite. */
.cons-busca{display:flex;align-items:center;gap:8px;flex:1 1 360px;min-width:0}
.cons-busca-c{flex:1 1 240px;min-width:0;max-width:460px}
.cons-busca-x{font-size:12px}

/* A ordenacao divide o trilho com as abas: e escolha de recorte tambem, so
   que do eixo do tempo. `margin-left:auto` empurra para a direita; a 900px o
   trilho quebra e ela desce inteira, sem cortar. */


/* Pessoa na linha da lista: avatar 20px e o nome ao lado. O nome importa —
   identidade que depende so de cor ou de inicial nao se le (§9.6). */
.cons-pes{display:inline-flex;align-items:center;gap:6px;min-width:0}
.cons-pes .av{flex:0 0 auto}

/* Fila no lugar do executor NAO e ausencia: o chamado tem onde estar. */
.cons-fila{color:var(--c-ink-3)}

/* Ambar e atencao, e ninguem com a bola pede atencao. Nao e alarme: o chamado
   nao esta quebrado, esta parado. */
.cons-orfao{color:var(--c-warn);font-weight:600}

/* Celula vazia — "nao se aplica". Distinta de `.cons-lacuna`, que e "falta
   preencher", e distinta de ESTADO vazio, que e a tabela inteira sem linhas e
   tem componente proprio (<estado-vazio>).

   NAO se chama `tbl-vazio`: esse nome e vigiado por
   `NenhumaView_EscreveOEstadoVazioAMao`, que reprova o build quando uma view o
   escreve — a guarda existe para impedir estado vazio a mao, e reusar o nome
   para outra coisa a faria disparar em falso. Antes daqui a celula usava
   `.tbl-nt`, que e a classe da NOTA abaixo da tabela: dois papeis na mesma
   classe divergem no primeiro ajuste. */
.cel-vazia{color:var(--c-ink-3)}

/* Lacuna de PREENCHIMENTO, distinta de "nao se aplica" (que e `.tbl-vazio`).
   Cinza e nao ambar: e coisa a fazer, nao alarme — e uma lista com trezentas
   linhas em ambar nao tem mais ambar nenhum. */
.cons-lacuna{color:var(--c-ink-3);text-decoration:underline;text-decoration-style:dotted;
             text-underline-offset:2px}
.cons-lacuna:hover{color:var(--c-ink)}

/* ----------------------------------------------------------------------------
   A tabela da consulta trunca por ATRIBUTO, e nao por posicao.

   `.tbl td:nth-child(4)` (linha 247) trunca a QUARTA coluna de todas as
   dezessete tabelas em 170px. E dela que vem o modulo cortado em /chamados —
   nao do nome do modulo. Regra posicional e a armadilha nº 3 do front-end.md:
   ela some do lugar certo assim que uma coluna muda de posicao, e a consulta
   universal deixa a pessoa escolher a ordem das colunas (F10).

   Aqui a quarta posicao e neutralizada e o truncamento passa a ser declarado na
   celula. A troca das outras dezesseis tabelas e refatoracao propria — esta
   registrada em docs/OPORTUNIDADES.md.
   ---------------------------------------------------------------------------- */
.tbl--cols td:nth-child(4){white-space:normal;overflow:visible;
                           text-overflow:clip;max-width:none}
.tbl--cols td[data-trunca]{white-space:nowrap;overflow:hidden;
                           text-overflow:ellipsis;max-width:260px}
.tbl--cols td[data-trunca="curto"]{max-width:150px}

/* ----------------------------------------------------------------------------
   A faixa de filtros da consulta universal.

   O popover e um `<details>` NATIVO: abre, fecha no Escape, e nao depende de
   uma linha de JavaScript. Mesmo mecanismo do kebab da fila (`.vwm`).
   ---------------------------------------------------------------------------- */
.cons-filtros{display:flex;align-items:center;gap:5px;padding:8px 14px 0;flex-wrap:wrap}
.cons-pop{position:relative}
.cons-pop>summary{list-style:none;cursor:pointer;user-select:none}
.cons-pop>summary::-webkit-details-marker{display:none}
.cons-pop[open]>summary{background:var(--c-soft);color:var(--c-brand)}

.cons-pop-c{position:absolute;z-index:40;top:calc(100% + 4px);left:0;min-width:230px;
            max-width:320px;max-height:320px;overflow:auto;padding:5px;
            background:var(--c-card);border:1px solid var(--c-line-2);
            border-radius:var(--r);box-shadow:var(--sh-app)}
.cons-pop-i{display:flex;align-items:center;gap:8px;justify-content:space-between;
            padding:6px 9px;border-radius:var(--r-xs);font-size:12.5px;
            color:var(--c-ink-2);text-decoration:none}
.cons-pop-i:hover{background:var(--c-sunken);color:var(--c-ink)}
.cons-pop-i.on{background:var(--c-soft);color:var(--c-brand);font-weight:600}
.cons-pop-r{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cons-pop-q{color:var(--c-ink-3);flex:0 0 auto}
.cons-pop-i.on .cons-pop-q{color:var(--c-brand)}
.cons-pop-v{margin:0;padding:8px 9px;font-size:12px;color:var(--c-ink-3)}

.cons-aplicados{display:flex;align-items:center;gap:6px;padding:8px 14px 0;flex-wrap:wrap}
.cons-limpar{font-size:12px;margin-left:2px}

/* ----------------------------------------------------------------------------
   Selecao e acao em lote na consulta.

   A BARRA NAO E FIXA A VIEWPORT, e a primeira versao era — `position:fixed`
   com `left:0;right:0` usa coordenada de JANELA, e a tela tem um rail a
   esquerda: a barra passava POR BAIXO da sidebar, com o texto comecando
   cortado em x=0, e disputava o rodape com `.barra` do cronometro.

   Agora ela e a ultima linha da COLUNA DE CONTEUDO: o formulario e um grid
   de `minmax(0,1fr) auto`, a tabela rola na primeira linha e a barra ocupa a
   segunda. Ela fica sempre visivel sem saber a largura do rail, sem z-index e
   sem reservar espaco embaixo da tabela — que era o `padding-bottom:120px`
   que existia so para as ultimas linhas nao sumirem debaixo dela.

   A divergencia da D-124 nº 2 CONTINUA VALENDO no que ela dizia: a acao fica
   ao alcance depois de marcar a linha trinta, e nao num card no topo. O que
   muda e o mecanismo, nao o lugar. */
.cons-ck{width:34px;text-align:center}
.cons-ck input{cursor:pointer}

.cons-lote-f{display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:0;overflow:hidden}

/* UMA LINHA, e nao quatro. A versao anterior gastava ~110px permanentes com
   um paragrafo de explicacao, um campo de motivo e tres grupos empilhados —
   altura fixa para uma acao que a lideranca usa de vez em quando. */
.cons-lote{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
           padding:9px 14px;background:var(--c-app);
           border-top:1px solid var(--c-line-2)}
.cons-lote-cab{margin:0;font-size:11.5px;color:var(--c-ink-3);flex:0 1 auto;max-width:210px}
.cons-lote-m{display:flex;align-items:center;gap:6px;flex:1 1 200px;min-width:0}
.cons-lote-m>span{font-size:12px;color:var(--c-ink-2);white-space:nowrap}
.cons-lote-m .inp{flex:1 1 auto;min-width:0}
.cons-lote-gs{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cons-lote-l{display:flex;align-items:center;gap:6px}
.cons-lote-l label{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--c-ink-2)}
.cons-lote-l .inp--sel{max-width:190px}

/* O desfecho do lote, dito de volta — inclusive o sucesso. */
.cons-recado{margin:10px 14px 0;padding:9px 12px;border-radius:var(--r-sm);
             background:var(--c-soft);color:var(--c-brand);font-size:12.5px}
.cons-recado p{margin:0}
.cons-recado p+p{margin-top:4px}

@media (max-width:1120px){
  /* A explicacao e a primeira a sair: quem chegou ate aqui ja sabe o que a
     barra faz, e o motivo e os botoes e que precisam caber. */
  .cons-lote-cab{display:none}
}

/* Exportar fica ao lado da busca, e nao na barra de lote: ela leva o RESULTADO
   da consulta, e nao a selecao. Sao duas coisas distintas e a tela precisa
   dizer isso pela posicao. */


/* "Carregar mais" e a continuacao das linhas, e por isso vive DENTRO do que
   rola: a pessoa rola ate o fim e o encontra. Fora dali ele caia depois da
   barra de lote, que e a ultima linha da coluna — ordem invertida na leitura.

   Some quando acaba: botao morto dizendo "nao ha mais" e uma linha a mais para
   ninguem. */
.cons-mais{display:flex;justify-content:center;padding:14px 14px 18px}

/* Os popovers das acoes de tela ficam na borda direita, entao abrem para a
   ESQUERDA: ancorados a esquerda, sairiam da tela — e em 1120 sairiam sempre. */
.cons-tela .cons-pop>.cons-pop-c{left:auto;right:0}
.cons-pop-c label.cons-pop-i{cursor:pointer}
.cons-pop-pe{display:flex;justify-content:flex-end;padding:6px 3px 2px;
             border-top:1px solid var(--c-line);margin-top:4px}

/* A segunda faixa, do "mais filtros". Recuada e sem o peso da primeira: ela
   e o que se abre quando a primeira nao bastou, e nao um segundo trilho de
   igual importancia. */
.cons-filtros--mais{padding-top:6px;border-top:1px dashed var(--c-line);margin:8px 14px 0;padding-left:0;padding-right:0}

/* O olho da previa, ao lado do codigo. Discreto ate o hover: ele e um atalho,
   e nao a acao principal da linha — o codigo continua sendo. */
.cons-olho{display:inline-flex;align-items:center;margin-left:6px;color:var(--c-ink-3);
           opacity:.45;vertical-align:middle}
.tbl tbody tr:hover .cons-olho{opacity:1}
.cons-olho:hover{color:var(--c-brand)}

/* A previa e a `.ficha` do design system, e nao uma gaveta: o helix.html tem
   `.drawer` no CSS e nenhum elemento que a use — CSS morto, nao especificacao. */
.cons-previa-t{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cons-previa-x{font-size:18px;line-height:1;text-decoration:none}
.cons-previa-h{margin:6px 0 10px;font-size:14px;font-weight:700;line-height:1.35}
.cons-previa-tags{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.cons-previa-d{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;margin:0 0 14px;
               font-size:12.5px}
.cons-previa-d dt{color:var(--c-ink-3)}
.cons-previa-d dd{margin:0;color:var(--c-ink)}
.cons-previa-desc{font-size:12.5px;color:var(--c-ink-2);margin-bottom:12px}
.cons-previa-desc p{margin:0}
.cons-previa-desc p+p{margin-top:4px;max-height:8.5em;overflow:hidden}
.cons-previa-lacuna{font-size:11.5px;color:var(--c-ink-3);margin:0 0 14px;
                    padding:8px 10px;background:var(--c-sunken);border-radius:var(--r-sm)}
.cons-previa-acoes{display:flex;gap:8px}

/* ----------------------------------------------------------------------------
   O involucro da previa some do layout quando nao ha previa.

   Ele existe so para virar `.split` quando o painel abre. Como `<div>` comum,
   ele QUEBRA A CADEIA DE ALTURA: `.lista-pagina` e um grid com uma linha
   `minmax(0,1fr)`, e essa linha so tem contra o que esticar se o pai tiver
   altura definida. Com um bloco no meio, a lista passou a ser do tamanho do
   conteudo — e a barra de lote, que e a ultima linha dela, parou no meio da
   tela com espaco morto embaixo.

   `display:contents` faz o elemento desaparecer da caixa sem sair do DOM: os
   filhos voltam a ser filhos do pai para efeito de layout, e a lista volta a
   esticar. Quando a previa abre, `.split` vence e o grid de duas colunas vale.
   ---------------------------------------------------------------------------- */
#consulta:not(.split){display:contents}