/* Central do CRC: direção "Atlas do CRC".
   Cada aba é uma prancha de atlas: pergunta, figura dominante, legenda com faixas, fonte e notas.
   As regras de honestidade viram convenção visual:
     hachura           = sem registro / não informado
     hachura sobre cor = incompleto (mês em andamento)
     número cinza N de M = poucos casos (sem %, sem seta)
     ciano da marca    = SÓ o que a pessoa escolheu (aba, filtro, item, foco)
   Sem framework, sem CDN. Fontes servidas daqui mesmo (frontend/fontes, licença OFL). */

@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url("/static/fontes/Barlow-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 500; font-display: swap; src: url("/static/fontes/BarlowSemiCondensed-Medium.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 600; font-display: swap; src: url("/static/fontes/BarlowSemiCondensed-SemiBold.woff2") format("woff2"); }

/* ---------------------------------------------------------------- tokens: claro (principal) */
:root {
  /* Identidade Rometal azul-marinho #000052 e ciano #05C3DD do logo. */
  --chao: #F3F4F9;
  --papel: #FFFFFF;
  --papel-2: #F6F7FB;
  --tinta: #0F1230;
  --tinta-2: #383E60;
  --tinta-3: #555B7C;
  --fio: #D9DCE9;
  --borda-controle: #767C9A;
  /* quantidade: do azul-claro ao azul-marinho, luminosidade sempre decrescente. Tudo sai do azul #5594FF e
     do azul-marinho #000052 da marca; o ciano forte #05C3DD fica de fora da escala (é só seleção e foco).
     --rN-t = cor do número sobre o degrau N (AA 4,5:1 medido nos dois temas; uma tabela só, usada por mapa e calor). */
  --r1: color-mix(in srgb, #5594FF 15%, #FFFFFF); --r2: color-mix(in srgb, #5594FF 45%, #FFFFFF); --r3: #5594FF;
  --r4: color-mix(in srgb, #5594FF 50%, #000052); --r5: #000052;
  --r1-t: #0F1230; --r2-t: #0F1230; --r3-t: #0F1230; --r4-t: #FFFFFF; --r5-t: #FFFFFF;
  --hachura: #7C84A2;
  --resolvido: #19724A;
  --sem-retorno: #A84814;
  --aberto: #8A3FA0;
  --alerta: #B42318;
  --neutro: #C5C9D9;
  /* o que a pessoa escolheu: ciano da marca */
  --marca: #05C3DD;
  --marca-suave: #DCF7FA;
  --marca-borda: #00778A;
  --marca-tinta: #000052;
  /* barra do cabeçalho: azul-marinho da marca nos dois temas */
  --cab-fundo: #000052;
  --cab-fio: #232C86;
  --cab-texto: #FFFFFF;
  --cab-texto-2: #C9D1F0;
  --cab-borda: #8C95D0;
  --sombra: 0 1px 2px rgba(5, 0, 31, .06), 0 8px 24px rgba(5, 0, 31, .10);
  --fonte: system-ui, "Segoe UI", "Open Sans", Roboto, Arial, sans-serif;
  --fonte-num: "Barlow", system-ui, "Segoe UI", Arial, sans-serif;
  --fonte-sc: "Barlow Semi Condensed", "Barlow", system-ui, "Segoe UI", Arial, sans-serif;
  --raio: 8px;
  --raio-controle: 6px;
  --rapido: 160ms;
  color-scheme: light;
}
/* escuro: só quando a pessoa escolhe (data-tema="escuro" na raiz; js/tema.js). O tema do sistema não conta.
   Rampa própria: aqui mais atendimento = mais claro (inversão de luminosidade, não cópia). */
:root[data-tema="escuro"] {
  --chao: #070A1E; --papel: #0E1330; --papel-2: #141A3B;
  --tinta: #E8ECF7; --tinta-2: #B8C0DA; --tinta-3: #98A1C2;
  --fio: #242B53; --borda-controle: #6A739E;
  --r1: color-mix(in srgb, #5594FF 20%, #0E1330); --r2: color-mix(in srgb, #5594FF 40%, #0E1330); --r3: color-mix(in srgb, #5594FF 60%, #0E1330);
  --r4: #5594FF; --r5: color-mix(in srgb, #5594FF 45%, #FFFFFF);
  --r1-t: #E8ECF7; --r2-t: #E8ECF7; --r3-t: #E8ECF7; --r4-t: #05001F; --r5-t: #05001F;
  --hachura: #6B759F;
  --resolvido: #4CC38A; --sem-retorno: #F0925A; --aberto: #D08BE6; --alerta: #F7786D; --neutro: #434A70;
  --marca-suave: #0B3A4D; --marca-borda: #05C3DD;
  --sombra: 0 8px 24px color-mix(in srgb, #05001F 70%, transparent);
  color-scheme: dark;
}

/* ---------------------------------------------------------------- base */
* { box-sizing: border-box; }
html { background: var(--chao); }
body {
  margin: 0; color: var(--tinta); background: var(--chao);
  font: 400 14px/1.5 var(--fonte);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--marca); color: var(--marca-tinta); }
[hidden] { display: none !important; }
a { color: inherit; text-underline-offset: 3px; text-decoration-color: var(--borda-controle); }
a:hover { text-decoration-color: currentColor; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; box-shadow: none; border-radius: 2px; }
.atalhos button:focus-visible { outline-offset: -2px; }
.atalhos button[aria-pressed="true"]:focus-visible { box-shadow: none; }   /* em uso + foco = um anel só */
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-family: var(--fonte-num); font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }
.ic { width: 16px; height: 16px; flex: none; }
.ic-p { width: 12px; height: 12px; flex: none; }
.pular { position: absolute; left: 8px; top: -60px; z-index: 50; padding: 8px 12px; background: var(--tinta); color: var(--papel); border-radius: var(--raio-controle); }
.pular:focus { top: 8px; }

/* ---------------------------------------------------------------- cabeçalho fixo */
.topo { position: sticky; top: 0; z-index: 20; }
.cab { background: var(--cab-fundo); border-bottom: 1px solid var(--cab-fio); }
.cab-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; padding: 8px 24px 0; }
.app { display: flex; align-items: center; gap: 14px; white-space: nowrap; color: var(--cab-texto); }
.app .logo { display: block; height: 30px; width: auto; flex: none; }
.app b { padding-left: 14px; border-left: 1px solid var(--cab-borda); font: 600 17px/1.1 var(--fonte-num); letter-spacing: -.01em; }
.cab nav { order: 3; flex: 1 0 100%; min-width: 0; display: flex; margin: 0 -11px; }
.cab-linha .app { flex: 1; min-height: 48px; }
.tema { display: flex; align-items: center; align-self: center; flex: none; gap: 2px; padding: 3px; border: 1px solid var(--cab-borda); border-radius: var(--raio-controle); }
.tema button { min-width: 40px; min-height: 40px; padding: 0 12px; font: 500 14px var(--fonte-sc); color: var(--cab-texto-2); background: none; border: 0; border-radius: 4px; cursor: pointer; }
.tema button:hover { color: var(--cab-texto); }
.tema button[aria-pressed="true"] { color: var(--cab-fundo); background: var(--cab-texto); font-weight: 600; }
.cab-sair { display: flex; align-self: center; flex: none; }
.cab-sair:empty { display: none; }
.cab-sair button { min-height: 40px; padding: 0 14px; font: 500 14px var(--fonte-sc); color: var(--cab-texto-2); background: none; border: 1px solid var(--cab-borda); border-radius: var(--raio-controle); cursor: pointer; }
.cab-sair button:hover { color: var(--cab-texto); border-color: var(--cab-texto); }
.cab-sair button:focus-visible { outline: 2px solid var(--cab-texto); outline-offset: 1px; }
.cab-sair button:disabled { opacity: .6; cursor: default; }
.tema button:focus-visible { outline-color: var(--cab-texto); outline-offset: 1px; }
.sumario {
  display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none;
  flex: 1; min-width: 0; height: 40px;
}
.sumario::-webkit-scrollbar { display: none; }
.sumario.corta-dir { mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
.sumario.corta-esq { mask-image: linear-gradient(90deg, transparent, #000 44px); }
.sumario.corta-esq.corta-dir { mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); }
.aba {
  position: relative; display: flex; align-items: center; gap: 6px; height: 100%; padding: 0 11px;
  font: 500 15px/1 var(--fonte-sc); color: var(--cab-texto-2); background: none; border: 0; cursor: pointer; white-space: nowrap;
  padding-block: 6px;
}
.aba:hover { color: var(--cab-texto); }
.aba[aria-selected="true"] { color: var(--cab-texto); font-weight: 600; }
.aba[aria-selected="true"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 4px; background: var(--marca); }
.aba:focus-visible { outline-offset: -4px; outline-color: var(--cab-texto); box-shadow: none; }
.cab-direita { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.dados-de { font-size: 12px; color: var(--cab-texto-2); text-align: right; line-height: 1.3; }
.botao-campo {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 6px 12px;
  font-weight: 500; color: var(--tinta); background: var(--papel);
  border: 1px solid var(--borda-controle); border-radius: var(--raio-controle); cursor: pointer; white-space: nowrap;
}
.botao-campo:hover { border-color: var(--tinta); }
.botao-campo .ic { color: var(--tinta-2); }
.botao-campo .ic-p { color: var(--tinta-2); }
.cab .periodo > .botao-campo { color: var(--cab-texto); background: transparent; border-color: var(--cab-borda); }
.cab .periodo > .botao-campo:hover { border-color: var(--cab-texto); }
.cab .periodo > .botao-campo:focus-visible { outline-color: var(--cab-texto); }
.cab .periodo > .botao-campo .ic, .cab .periodo > .botao-campo .ic-p { color: var(--cab-texto-2); }

/* popover do período */
.periodo { position: relative; }
.periodo-painel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: 440px; max-width: calc(100vw - 32px); padding: 14px;
  max-height: calc(100vh - 172px); overflow-y: auto; overscroll-behavior: contain; white-space: normal;
  background: var(--papel); border: 1px solid var(--fio); border-radius: var(--raio); box-shadow: var(--sombra);
}
.periodo-painel h2 { margin: 0 0 8px; font: 600 15px var(--fonte-num); }
.periodo-painel h3 { margin: 12px 0 6px; padding-top: 10px; border-top: 1px solid var(--fio); font: 600 13px var(--fonte-num); color: var(--tinta-2); text-transform: none; }
.periodo-painel .defasado { margin: 0 0 8px; padding: 6px 10px; font-size: 13px; line-height: 1.35; color: var(--tinta); background: var(--papel-2); border-left: 3px solid var(--marca); border-radius: 2px; }
.atalhos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.atalhos li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.atalhos button {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1px; width: 100%; min-height: 38px; padding: 4px 10px;
  text-align: left; background: none; border: 0; border-radius: var(--raio-controle); cursor: pointer;
}
.atalhos li:last-child:nth-child(odd) button { flex-direction: row; justify-content: space-between; align-items: baseline; min-height: 36px; gap: 12px; }
.atalhos button:hover { background: var(--papel-2); }
.atalhos button[aria-pressed="true"] { background: var(--marca-suave); box-shadow: inset 0 0 0 1px var(--marca-borda); }
.atalhos .at-nome { flex: none; font-weight: 500; }
.atalhos small { color: var(--tinta-2); font-size: 12px; text-align: left; min-width: 0; }
.atalhos li:last-child:nth-child(odd) small { text-align: right; }
.mes-escolha { display: grid; gap: 5px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--fio); }
.mes-escolha label { font: 600 13px var(--fonte-num); color: var(--tinta-2); }
.mes-escolha select { width: 100%; }
.datas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.datas label { display: grid; gap: 4px; min-width: 0; font-size: 12px; color: var(--tinta-2); }
input[type="date"] {
  font: inherit; height: 36px; padding: 0 8px; width: 100%; min-width: 0; color: var(--tinta); background: var(--papel);
  border: 1px solid var(--borda-controle); border-radius: var(--raio-controle); color-scheme: light;
}
:root[data-tema="escuro"] input[type="date"], :root[data-tema="escuro"] select { color-scheme: dark; }
input[aria-invalid="true"] { border-color: var(--alerta); }
.dados-de.defasado { color: var(--cab-texto); font-weight: 500; }
select, input[type="search"] {
  font: inherit; height: 36px; padding: 0 10px; color: var(--tinta); background: var(--papel);
  border: 1px solid var(--borda-controle); border-radius: var(--raio-controle); min-width: 0;
}
.periodo-acoes { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 12px; }
.erro-campo { margin: 8px 0 0; font-size: 12px; color: var(--alerta); }

/* botões */
.botao {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 14px;
  font-weight: 500; color: var(--papel); background: var(--tinta); border: 1px solid var(--tinta);
  border-radius: var(--raio-controle); cursor: pointer; text-decoration: none; white-space: nowrap;
}
.botao:hover { filter: brightness(1.15); }
.botao.leve { color: var(--tinta); background: var(--papel); border-color: var(--borda-controle); }
.botao.leve:hover { border-color: var(--tinta); filter: none; }
.botao[disabled] { opacity: .55; cursor: not-allowed; }
.link {
  display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 5px 8px; margin: 0 -4px;
  color: var(--tinta-2); background: none; border: 1px solid transparent; border-radius: var(--raio-controle);
  text-decoration: underline; text-decoration-color: var(--borda-controle); text-underline-offset: 3px;
  cursor: pointer; font-weight: 500; transition: background var(--rapido), border-color var(--rapido), color var(--rapido);
}
.link:hover { color: var(--tinta); background: var(--papel-2); border-color: var(--fio); text-decoration-color: currentColor; }
.barras li button.link { margin: 0; padding: 3px 10px; background: var(--papel-2); border-color: var(--fio); border-radius: 999px; text-decoration: none; font-size: 13px; }
.barras li button.link:hover { border-color: var(--borda-controle); color: var(--tinta); }
details.nota > summary {
  display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 3px 10px;
  border: 1px solid var(--fio); border-radius: 999px; background: var(--papel-2);
  font-weight: 500; text-decoration: none; color: var(--tinta-2); cursor: pointer; list-style: none;
  transition: border-color var(--rapido), color var(--rapido);
}
details.nota > summary::-webkit-details-marker { display: none; }
details.nota > summary:hover { border-color: var(--borda-controle); color: var(--tinta); }

/* ---------------------------------------------------------------- régua de seleção */
.regua {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; min-height: 42px;
  padding: 6px 24px; background: var(--papel-2); border-bottom: 1px solid var(--fio);
}
.regua .conta { font: 600 18px/1 var(--fonte-num); white-space: nowrap; }
.regua .conta small { font: 400 14px var(--fonte); color: var(--tinta-2); }
.regua .onde { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; color: var(--tinta-2); }
.caminho { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.caminho button { min-height: 24px; padding: 5px 4px; color: var(--tinta); background: none; border: 0; text-decoration: underline; text-decoration-color: var(--borda-controle); text-underline-offset: 3px; cursor: pointer; border-radius: 3px; }
.caminho button:hover { text-decoration-color: currentColor; }
.caminho .atual { padding: 5px 4px; color: var(--tinta); font-weight: 500; }
.caminho .ic-p { color: var(--tinta-3); }
.chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 2px 0 10px;
  font-size: 13px; color: var(--tinta); background: var(--marca-suave); border: 1px solid var(--marca-borda); border-radius: 999px;
  padding-block: 2px;
}
.chip button { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; color: var(--tinta-2); background: none; border: 0; border-radius: 999px; cursor: pointer; }
.chip button:hover { color: var(--tinta); background: color-mix(in srgb, var(--marca) 35%, transparent); }
.chip.invalido { background: var(--papel); border-style: dashed; }
.voltar { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 10px; font-size: 13px; color: var(--tinta); background: var(--papel); border: 1px solid var(--borda-controle); border-radius: var(--raio-controle); cursor: pointer; }
.voltar:hover { border-color: var(--tinta); }
.regua .limpar { margin-left: auto; font-size: 13px; }
.regua .espiar-chamados { margin-left: auto; min-height: 30px; padding: 3px 10px; font-size: 13px; }
.regua .limpar + .espiar-chamados { margin-left: 0; }
.periodo-regua { display: none; }
.periodo-regua .dados-de { color: var(--tinta-2); }
.periodo-regua .dados-de.defasado { color: var(--tinta); font-weight: 500; }

/* ---------------------------------------------------------------- prancha */
main { padding: 18px 24px 36px; max-width: 1400px; margin: 0 auto; }
.prancha-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; margin-bottom: 14px; }
h1 { margin: 0; font: 600 28px/1.15 var(--fonte-num); letter-spacing: -.015em; text-wrap: balance; }
h1:focus { outline: none; }
.prancha-cab p { margin: 0; color: var(--tinta-3); font-size: 13px; }
h2 { margin: 0; font: 600 17px/1.25 var(--fonte-num); letter-spacing: -.005em; }
h3 { margin: 0; font: 600 15px/1.3 var(--fonte-num); }
.pergunta { margin: 2px 0 12px; color: var(--tinta-3); font-size: 13px; max-width: 72ch; }
.folha {
  background: var(--papel); border: 1px solid var(--fio); border-radius: var(--raio); min-width: 0;
  box-shadow: 0 1px 3px color-mix(in srgb, #05001F 6%, transparent), 0 4px 14px color-mix(in srgb, #05001F 4%, transparent);
}
:root[data-tema="escuro"] .folha {
  border-color: var(--fio);
  box-shadow: 0 2px 10px color-mix(in srgb, #05001F 40%, transparent);
}
.bloco { padding: 20px 22px; }
.grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.s3 { grid-column: span 3; } .s4 { grid-column: span 4; } .s5 { grid-column: span 5; } .s6 { grid-column: span 6; }
.s7 { grid-column: span 7; } .s8 { grid-column: span 8; } .s12 { grid-column: 1 / -1; }
.nota { margin: 10px 0 0; font-size: 12px; color: var(--tinta-3); max-width: 68ch; }
.cab-figura { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px 16px; }
.cab-figura > div { min-width: 0; }
.secao { margin: 28px 0 12px; }
.trocando { opacity: .45; transition: opacity var(--rapido) ease-out; }
.conteudo-prancha { transition: opacity var(--rapido) ease-out; }

/* manchete: a frase do motor que responde "como está o CRC?" */
.manchete-card { display: flex; align-items: flex-start; gap: 12px; padding: 14px 20px; background: var(--papel-2); border: 1px solid var(--fio); }
.manchete-icone { display: grid; place-items: center; width: 28px; height: 28px; flex: none; margin-top: 1px; border-radius: var(--raio-controle); background: var(--papel); border: 1px solid var(--borda-controle); color: var(--tinta); }
.manchete { margin: 0; font-size: 18px; line-height: 1.45; max-width: 68ch; text-wrap: pretty; }
.destaque-numero { margin: 4px 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--fio); }
.destaque-numero .rotulo { font-size: 13px; color: var(--tinta-2); font-weight: 500; }
.destaque-numero .valor { display: block; margin: 6px 0 4px; font: 600 36px/1 var(--fonte-num); letter-spacing: -.02em; }
.destaque-numero .valor small { font-size: 20px; letter-spacing: 0; }
.destaque-numero .valor.poucos { color: var(--tinta-2); font-size: 28px; }
.destaque-numero .base { font-size: 13px; color: var(--tinta-2); }

/* faixa de indicadores: o tipo manda, sem caixinha */
.faixa { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.faixa.de4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ind { padding: 18px 20px 20px; min-width: 0; }
.ind + .ind { border-left: 1px solid var(--fio); }
.ind .rot { font-size: 13px; color: var(--tinta-2); font-weight: 500; }
.ind .valor { display: block; margin: 6px 0 4px; font: 600 36px/1 var(--fonte-num); letter-spacing: -.02em; }
.ind .valor small { font-size: 20px; letter-spacing: 0; }
.ind .valor.poucos { color: var(--tinta-2); font-size: 28px; }
.ind .base { font-size: 13px; color: var(--tinta-2); }
/* número grande clicável: o botão é o número; o ::after estica o alvo para o cartão inteiro */
.ind.clicavel { position: relative; cursor: pointer; }
.ind-abrir { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ind-abrir::after { content: ""; position: absolute; inset: 0; }
.ind-abrir:focus-visible { outline: none; }
.ind.clicavel:has(.ind-abrir:focus-visible) { outline: 2px solid var(--tinta); outline-offset: -3px; border-radius: 2px; }
.ind.clicavel:hover .valor, .ind.clicavel:has(.ind-abrir:focus-visible) .valor { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.ind-seta { margin-left: 6px; vertical-align: -1px; color: var(--tinta-2); }
.ind.clicavel:hover .ind-seta, .ind.clicavel:has(.ind-abrir:focus-visible) .ind-seta { color: var(--tinta); }
.var { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; font-size: 13px; color: var(--tinta-2); }
.var svg { width: 10px; height: 10px; flex: none; margin-top: 5px; }
.var.bom { color: var(--resolvido); }
.var.ruim { color: var(--sem-retorno); }
.var.mudo { color: var(--tinta-3); }

/* em aberto */
.aberto-num { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 12px; }
.aberto-num .num { font-size: 52px; line-height: 1; letter-spacing: -.02em; }
.aberto-num span:last-child { color: var(--tinta-2); }
.pilha { display: flex; height: 14px; gap: 2px; border-radius: 2px; overflow: hidden; }
.pilha i { display: block; height: 100%; min-width: 4px; }
.legenda-pilha { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px 16px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 13px; }
.legenda-pilha li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.legenda-pilha li b { margin-left: auto; font: 600 15px var(--fonte-num); }
.amostra { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.aviso { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 10px 12px; background: var(--papel-2); border-radius: var(--raio); font-size: 13px; }
.aviso .ic { margin-top: 2px; color: var(--sem-retorno); }

/* portas para as pranchas */
.portas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.porta { display: flex; flex-direction: column; padding: 16px 18px 14px; text-align: left; cursor: pointer; transition: border-color var(--rapido), box-shadow var(--rapido); }
.porta:hover { border-color: var(--borda-controle); box-shadow: var(--sombra); }
.porta .fig { display: flex; align-items: flex-start; justify-content: center; min-height: 0; margin: 12px 0 14px; }
.porta .fig > * { width: 100%; }
.porta .fig > svg { width: auto; max-height: 150px; }
.porta p { margin-top: auto !important; }
.porta p { margin: 0; font-size: 13px; color: var(--tinta-2); }
.porta .ir { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; font-weight: 500; }

/* barras horizontais (ranking, assuntos, canal, situação) */
.barras { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; width: 100%; }
.barra-l {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; align-items: center;
  padding: 6px 8px; margin: 0 -8px; font-size: 14px; border-radius: 4px; background: none; border: 0; text-align: left; width: calc(100% + 16px);
}
div.barra-l { cursor: default; }
button.barra-l { cursor: pointer; transition: background var(--rapido), box-shadow var(--rapido); }
button.barra-l .nome { text-decoration: underline dotted var(--borda-controle); text-underline-offset: 3px; }
button.barra-l:hover, .barra-l.realce { background: var(--papel-2); box-shadow: inset 0 0 0 1px var(--borda-controle); }
button.barra-l:hover .nome, .barra-l.realce .nome { text-decoration-style: solid; text-decoration-color: currentColor; }
button.barra-l:hover:not(.sem) .trilho i, .barra-l.realce:not(.sem) .trilho i { background: var(--r5); }
.barra-l .nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-l .n { text-align: right; font: 600 15px var(--fonte-num); }
.barra-l .trilho { grid-column: 1 / -1; height: 6px; background: var(--papel-2); border-radius: 2px; overflow: hidden; }
.barra-l .trilho i { display: block; height: 100%; background: var(--r4); transition: background var(--rapido); }
.barra-l.sem .nome { color: var(--tinta-2); font-style: normal; }
.barra-l.sem .trilho i { background: var(--papel); background-image: repeating-linear-gradient(135deg, var(--hachura) 0 1px, transparent 1px 5px); box-shadow: inset 0 0 0 1px var(--hachura); }
.barra-l.ativo { background: var(--marca-suave); box-shadow: inset 0 0 0 1px var(--marca-borda); }
.barra-l.ativo .nome { font-weight: 600; text-decoration: none; }
.barra-l .pos { display: none; }
.barras.ranking .barra-l { grid-template-columns: 22px minmax(0, 1fr) auto; }
.barras.ranking .barra-l .pos { display: block; font: 500 12px var(--fonte-sc); color: var(--tinta-3); text-align: right; }
.barras.ranking .barra-l .trilho { grid-column: 2 / -1; }
.barras.com-extra .barra-l { grid-template-columns: minmax(0, 1fr) auto 52px; }
.barras.ranking.com-extra .barra-l { grid-template-columns: 22px minmax(0, 1fr) auto 52px; }
.barra-l .p { text-align: right; font-size: 12px; color: var(--tinta-3); }
.corte-pareto {
  display: flex; align-items: center; justify-content: flex-end; margin: 4px 0 6px; padding-bottom: 4px;
  border-bottom: 1px dashed var(--borda-controle); font: 600 12px var(--fonte-sc); color: var(--tinta-2);
}
.grupo + .grupo { margin-top: 18px; }
.grupo > h3 { margin-bottom: 6px; }
.grupo > h3 small { font: 400 13px var(--fonte); color: var(--tinta-3); margin-left: 6px; }

/* figuras SVG */
.fig-svg { display: block; width: 100%; height: auto; overflow: visible; }
.fig-svg text { font: 500 12px var(--fonte-sc); fill: var(--tinta-3); }
.fig-svg .v { font: 600 14px var(--fonte-num); fill: var(--tinta); }
.fig-svg .v.fraco { fill: var(--tinta-2); font-weight: 600; }
.fig-svg .eixo { stroke: var(--borda-controle); stroke-width: 1; shape-rendering: crispEdges; }
.fig-svg .guia { stroke: var(--fio); stroke-width: 1; stroke-dasharray: 3 3; shape-rendering: crispEdges; }
.fig-svg .guia-excelencia { stroke: var(--resolvido); stroke-width: 1; stroke-dasharray: 4 3; opacity: .65; }
.fig-svg .col { fill: var(--r3); transition: filter var(--rapido); }
.fig-svg .col:hover { filter: brightness(1.12); }
.fig-svg .col.escolhido { fill: var(--r5); }
.fig-svg .col.parcial { fill: url(#hachura-r3); stroke: var(--r3); stroke-width: 1; }
.fig-svg .sem-registro { fill: url(#hachura); }
.fig-svg .marca-escolhido { fill: var(--marca); }
.fig-svg .forte { fill: var(--tinta); font-weight: 600; }
.fig-svg .area-nps { fill: var(--r2); fill-opacity: .18; pointer-events: none; }
.fig-svg .linha-nps { fill: none; stroke: var(--r4); stroke-width: 2; }
.fig-svg .ponto { fill: var(--r5); stroke: var(--papel); stroke-width: 2; }
.fig-svg .ponto.oco { fill: var(--papel); stroke: var(--hachura); stroke-width: 1.5; }
.fig-estreita { display: none; }
.dica-svg {
  position: fixed; z-index: 40; padding: 7px 10px; background: var(--papel); color: var(--tinta);
  border: 1px solid var(--fio); border-radius: var(--raio); box-shadow: var(--sombra);
  font-size: 13px; white-space: nowrap; pointer-events: none;
}
.dica-svg b { font: 600 14px var(--fonte-num); }

/* horas */
.horas { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 2px; width: 100%; }
.horas div { height: 34px; border-radius: 2px; display: grid; place-items: center; font: 600 11px var(--fonte-num); }
.horas-eixo { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 2px; width: 100%; margin-top: 4px; font: 500 11px var(--fonte-sc); color: var(--tinta-3); text-align: center; }

/* NPS */
.nps-topo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.nps-topo .num { font-size: 56px; line-height: 1; letter-spacing: -.02em; }
.nps-topo .num.poucos { font-size: 32px; color: var(--tinta-2); }
.nps-faixa { display: flex; height: 16px; gap: 2px; margin: 14px 0 8px; border-radius: 2px; overflow: hidden; }
.nps-faixa i { display: block; height: 100%; min-width: 3px; }
.quesito { display: grid; grid-template-columns: minmax(112px, 30%) minmax(0, 1fr) minmax(40px, auto); gap: 12px; align-items: center; margin: 10px 0; font-size: 13px; }
.quesito b.poucas { font: 500 12px/1.2 var(--fonte); color: var(--tinta-3); max-width: 76px; text-align: right; }
.quesito .r { position: relative; height: 2px; background: var(--borda-controle); }
.quesito .r::before, .quesito .r::after { content: ""; position: absolute; top: -4px; width: 1px; height: 10px; background: var(--borda-controle); }
.quesito .r::before { left: 0; } .quesito .r::after { right: 0; }
.quesito .r i { position: absolute; top: -6px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--r5); box-shadow: 0 0 0 2px var(--papel); }
.quesito b { font: 600 15px var(--fonte-num); text-align: right; }
.quesito .escala { display: flex; justify-content: space-between; grid-column: 2; font: 500 12px var(--fonte-sc); color: var(--tinta-3); margin-top: -6px; }

/* "em preparação": a prancha diz o que vai mostrar, sem número inventado */
.preparo { position: relative; overflow: hidden; }
.preparo::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background-image: repeating-linear-gradient(135deg, var(--hachura) 0 1px, transparent 1px 6px); }
.preparo .selo { display: inline-block; margin-bottom: 8px; padding: 1px 8px; border: 1px dashed var(--borda-controle); border-radius: 999px; font-size: 12px; color: var(--tinta-2); }
.preparo p { margin: 6px 0 0; color: var(--tinta-2); font-size: 13px; max-width: 62ch; }

/* ---------------------------------------------------------------- território */
.mapa-caixa { position: relative; }
#mapa { display: block; width: 100%; height: auto; max-height: 70vh; touch-action: manipulation; }
#mapa path { stroke: var(--papel); stroke-width: .9; vector-effect: non-scaling-stroke; cursor: pointer; transition: opacity var(--rapido); }
#mapa path.zero { fill: var(--papel-2); stroke: var(--borda-controle); stroke-width: .6; }
#mapa path.inerte { cursor: default; }
#mapa path.inerte:hover { stroke: var(--borda-controle); stroke-width: .6; }
#mapa path:hover, #mapa path.realce { stroke: var(--tinta); stroke-width: 1.6; }
#mapa path.escolhido { stroke: var(--tinta); stroke-width: 2.4; }
#mapa.focado path:not(.escolhido) { opacity: .55; }
#mapa path:focus-visible { outline: none; box-shadow: none; stroke: var(--tinta); stroke-width: 3; }
#minimapa { position: absolute; right: 8px; bottom: 8px; width: 96px; height: auto; border: 1px solid var(--fio); border-radius: var(--raio); background: var(--papel); pointer-events: none; }
#minimapa path { fill: var(--papel-2); stroke: var(--fio); stroke-width: 1; }
#minimapa rect { fill: color-mix(in srgb, var(--marca) 35%, transparent); stroke: var(--marca-borda); stroke-width: 2; }
.dica-mapa { position: absolute; z-index: 5; padding: 8px 10px; background: var(--papel); border: 1px solid var(--fio); border-radius: var(--raio); box-shadow: var(--sombra); font-size: 13px; white-space: nowrap; pointer-events: none; }
.dica-mapa b { font: 600 15px var(--fonte-num); }
.dica-mapa span { color: var(--tinta-3); }
.legenda-mapa { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 12px; font-size: 12px; color: var(--tinta-2); }
.legenda-mapa .classe { display: inline-flex; align-items: center; gap: 6px; }
.legenda-mapa .amostra { width: 18px; height: 12px; border-radius: 1px; }
.amostra.zero { background: var(--papel-2); box-shadow: inset 0 0 0 1px var(--borda-controle); }
.hachurado { background-color: var(--papel); background-image: repeating-linear-gradient(135deg, var(--hachura) 0 1px, transparent 1px 5px); box-shadow: inset 0 0 0 1px var(--hachura); }
.segmentado { display: inline-flex; padding: 3px; gap: 3px; border: 1px solid var(--borda-controle); border-radius: var(--raio-controle); }
.segmentado button { min-height: 30px; padding: 5px 14px; font: 500 14px var(--fonte-sc); color: var(--tinta-2); background: none; border: 0; border-radius: 4px; cursor: pointer; }
.segmentado button[aria-pressed="true"] { color: var(--papel); background: var(--tinta); }
.ranking-rolagem { overflow-y: auto; margin-top: 10px; padding-right: 6px; }
.sem-cidade {
  display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 10px; padding: 10px 12px; min-height: 44px;
  font-size: 14px; color: var(--tinta); text-align: left; background: var(--papel); border: 1px dashed var(--borda-controle); border-radius: var(--raio); cursor: pointer;
}
.sem-cidade:hover { border-style: solid; }
.sem-cidade.ativo { background: var(--marca-suave); border: 1px solid var(--marca-borda); }
.sem-cidade .sw { width: 22px; height: 16px; border-radius: 2px; flex: none; }
.sem-cidade b { margin-left: auto; font: 600 15px var(--fonte-num); }
.lado-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ---------------------------------------------------------------- chamados */
.ferramentas { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--fio); }
.busca { position: relative; display: flex; align-items: center; flex: 1 1 260px; max-width: 380px; }
.busca .ic { position: absolute; left: 10px; color: var(--tinta-3); pointer-events: none; }
.busca input { width: 100%; padding-left: 34px; }
.tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela caption { text-align: left; }
.tabela th { text-align: left; font: 500 12px var(--fonte-sc); color: var(--tinta-3); padding: 10px 18px; border-bottom: 1px solid var(--fio); background: var(--papel-2); white-space: nowrap; }
.tabela td { padding: 10px 18px; border-bottom: 1px solid var(--fio); vertical-align: middle; }
.tabela td.c { font: 600 14px var(--fonte-num); white-space: nowrap; }
.tabela td.quando { white-space: nowrap; }
.tabela td .sub { display: block; color: var(--tinta-3); font-size: 12px; }
.tabela tr.grupo-cliente td { padding-top: 14px; background: var(--papel-2); font-weight: 600; }
.tabela tr.grupo-cliente td .sub { display: inline; margin-left: 8px; font-weight: 400; }
.tabela tr.resumo-aberto td { padding-top: 0; }
.resumo-texto { margin: 0; padding: 10px 12px; max-width: 90ch; font-size: 13px; line-height: 1.55; background: var(--papel-2); border-radius: var(--raio); }
.acoes-linha { display: flex; gap: 12px; justify-content: flex-end; white-space: nowrap; }
.pilula { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.pilula i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pilula.res { background: color-mix(in srgb, var(--resolvido) 13%, transparent); color: var(--resolvido); }
.pilula.sr { background: color-mix(in srgb, var(--sem-retorno) 13%, transparent); color: var(--sem-retorno); }
.pilula.ab { background: color-mix(in srgb, var(--aberto) 13%, transparent); color: var(--aberto); }
.pilula.nr { background: color-mix(in srgb, var(--alerta) 13%, transparent); color: var(--alerta); }
.pe-lista { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; font-size: 12px; color: var(--tinta-3); }
.pe-lista .seguranca { display: inline-flex; align-items: center; gap: 6px; }

/* ---------------------------------------------------------------- estados */
.estado { padding: 28px 24px; }
.estado .ic-estado { display: block; width: 28px; height: 28px; color: var(--tinta-3); }
.estado h2 { margin: 10px 0 4px; }
.estado p { margin: 0; max-width: 64ch; color: var(--tinta-2); font-size: 14px; }
.estado .acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.estado.erro .ic-estado { color: var(--alerta); }
.esqueleto { display: block; border-radius: 3px; background: linear-gradient(90deg, var(--papel-2) 0%, var(--fio) 50%, var(--papel-2) 100%); background-size: 200% 100%; animation: brilho 1.4s ease-in-out infinite; }
@keyframes brilho { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.poucos-nota { color: var(--tinta-3); font-size: 12px; }
.aviso-dados { display: flex; gap: 10px; align-items: center; margin: 0 0 16px; padding: 10px 14px; font-size: 13px; background: var(--papel); border: 1px solid var(--alerta); border-radius: var(--raio); }
.aviso-dados .ic { color: var(--alerta); }

/* ---------------------------------------------------------------- notas (como ler) */
.convencoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.convencoes li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: start; }
.convencoes .exemplo { height: 40px; border-radius: 2px; }
.convencoes h3 { margin-bottom: 2px; }
.convencoes p, .texto p { margin: 0; color: var(--tinta-2); font-size: 14px; max-width: 64ch; }
.texto p + p { margin-top: 8px; }
.glossario { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 20px; margin: 0; font-size: 14px; }
.glossario dt { font-weight: 600; }
.glossario dd { margin: 0; color: var(--tinta-2); max-width: 70ch; }

/* rodapé de aparato */
.aparato { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 32px; margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--borda-controle); font-size: 12px; color: var(--tinta-3); }
.aparato p { margin: 0; max-width: 72ch; }
.aparato p + p { margin-top: 4px; }
.aparato b { color: var(--tinta-2); font-weight: 600; }

/* ---------------------------------------------------------------- movimento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------- larguras
   ≥ 900: tudo no cabeçalho.  960 a 1179: grade 12 col com faixa 3+2.  720 a 959: grade 8 col.  < 720: uma coluna. */
@media (max-width: 1179px) {
  .cab-linha { gap: 0 12px; padding: 6px 16px 0; }
  .app { gap: 10px; }
  .app b { font-size: 15px; padding-left: 10px; }
  .cab-direita { gap: 10px; }
  /* cinco indicadores: três em cima e dois embaixo, cada um com a largura que sobra (sem célula vazia) */
  .faixa { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .faixa .ind { grid-column: span 2; }
  .faixa .ind:nth-child(n+4) { grid-column: span 3; }
  .faixa .ind:nth-child(4) { border-left: 0; }
  .faixa .ind:nth-child(n+4) { border-top: 1px solid var(--fio); }
  .faixa.de4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faixa.de4 .ind, .faixa.de4 .ind:nth-child(n+4) { grid-column: auto; }
  .faixa.de4 .ind:nth-child(3) { border-left: 0; }
  .faixa.de4 .ind:nth-child(n+3) { border-top: 1px solid var(--fio); }
}
@media (max-width: 959px) {
  .grade { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .s3 { grid-column: span 4; } .s4 { grid-column: span 4; } .s5, .s6, .s7, .s8, .s12 { grid-column: 1 / -1; }
  .portas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .cab-direita { display: none; }
  .periodo-regua { display: flex; align-items: center; gap: 12px; margin-left: auto; }
  .regua .limpar, .regua .espiar-chamados { margin-left: 0; }
  .periodo-painel { max-height: calc(100vh - 196px); }
}
@media (max-width: 719px) {
  .cab-linha { height: auto; flex-wrap: wrap; gap: 0 12px; padding: 10px 16px 0; }
  .cab-linha .app { min-width: 0; min-height: 40px; gap: 10px; }
  .app .logo { height: 24px; }
  .app b { padding-left: 0; border-left: 0; font-size: 15px; }
  .tema { order: 2; }
  .cab-sair { order: 2; }
  /* com o botão Sair a linha não comporta logo, título, tema e Sair: o título ganha a linha toda */
  .cab-linha:has(.cab-sair button) .app { flex: 1 0 100%; }
  .cab-linha:has(.cab-sair button) .tema { margin-left: auto; }
  .cab-sair button { padding: 0 10px; font-size: 13px; }
  .tema button { padding: 0 9px; font-size: 13px; }
  .cab nav { margin: 6px -16px 0; }
  .sumario { height: 46px; padding: 0 8px; }
  .periodo-regua { flex-wrap: wrap; justify-content: flex-end; }
  .periodo-regua .dados-de:not(.defasado) { display: none; }
  .regua { padding: 8px 16px; }
  main { padding: 20px 16px 32px; }
  h1 { font-size: 23px; }
  .manchete { font-size: 18px; }
  .grade { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .grade > * { grid-column: 1 / -1; }
  .faixa, .faixa.de4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faixa .ind, .faixa .ind:nth-child(n+4) { grid-column: auto; padding: 14px 16px; border-left: 0; border-top: 1px solid var(--fio); }
  .faixa .ind:nth-child(-n+1) { border-top: 0; }
  .faixa:not(.de4) .ind:first-child { grid-column: 1 / -1; }
  .faixa:not(.de4) .ind:nth-child(odd):not(:first-child), .faixa.de4 .ind:nth-child(even) { border-left: 1px solid var(--fio); }
  .faixa.de4 .ind:nth-child(2) { border-top: 0; }
  .ind .valor { font-size: 30px; }
  .barra-l .nome { white-space: normal; overflow: visible; }
  .portas { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .porta .fig { min-height: 96px; }
  .aparato { grid-template-columns: minmax(0, 1fr); }
  .fig-larga { display: none; }
  .fig-estreita { display: block; }
  .dica-mapa, .dica-svg { display: none; }
  .convencoes { grid-template-columns: minmax(0, 1fr); }
  .glossario { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .glossario dd { margin-bottom: 10px; }
  .atalhos { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .atalhos button { flex-direction: row; justify-content: space-between; align-items: baseline; min-height: 36px; gap: 12px; }
  .atalhos small { text-align: right; }
  .periodo-painel { position: fixed; left: 16px; right: 16px; top: auto; bottom: 12px; width: auto; max-width: none; max-height: calc(100vh - 24px); }
  .ferramentas { padding: 12px; }
  .busca { max-width: none; }
  /* a tabela vira cartão de duas linhas */
  .tabela thead { display: none; }
  .tabela, .tabela tbody, .tabela tr, .tabela td { display: block; width: 100%; }
  .tabela tr.linha-chamado { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 12px 14px; border-bottom: 1px solid var(--fio); }
  .tabela tr.linha-chamado td { padding: 0; border: 0; }
  .tabela tr.linha-chamado td.c { grid-column: 1; }
  .tabela tr.linha-chamado td.situacao { grid-column: 2; grid-row: 1; text-align: right; }
  .tabela tr.linha-chamado td.quando, .tabela tr.linha-chamado td.canal { font-size: 12px; color: var(--tinta-3); }
  .tabela tr.linha-chamado td.cliente, .tabela tr.linha-chamado td.assunto, .tabela tr.linha-chamado td.quando, .tabela tr.linha-chamado td.canal { grid-column: 1 / -1; }
  .tabela tr.linha-chamado td.acoes { grid-column: 1 / -1; }
  .acoes-linha { justify-content: flex-start; margin-top: 6px; }
  .acoes-linha .link { min-height: 40px; display: inline-flex; align-items: center; }
  .tabela tr.grupo-cliente td { padding: 12px 14px 8px; }
  .tabela tr.resumo-aberto td { padding: 0 14px 12px; }
}

/* mapa de calor dia × hora */
.calor { display: grid; gap: 2px; align-items: stretch; font: 600 11px var(--fonte-num); }
.calor-eixo { font: 500 11px var(--fonte-sc); color: var(--tinta-3); text-align: center; padding: 2px 0; }
.calor-eixo.lado { text-align: right; padding-right: 6px; align-self: center; }
.calor-celula { display: grid; place-items: center; min-height: 28px; padding: 0; border: 0; border-radius: 2px; font: inherit; cursor: pointer; }
.calor-celula.zero { background: var(--papel-2); cursor: default; }
.calor-celula:hover { outline: 1.5px solid var(--tinta); outline-offset: -1px; }
.calor-celula.ativo { outline: 2px solid var(--tinta); outline-offset: 0; box-shadow: 0 0 0 4px var(--marca); position: relative; z-index: 1; }
.calor.transposto .calor-celula { min-height: 24px; }
.calor-estreito { display: none; }
@media (max-width: 719px) { .calor-largo { display: none; } .calor-estreito { display: grid; } }

/* série diária */
.fig-svg .col.fim { fill: var(--neutro); }
.fig-svg .col.feriado { fill: url(#hachura); stroke: var(--hachura); stroke-width: .8; }

/* notas de 0 a 10 */
.notas { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 4px; height: 150px; align-items: end; margin-top: 14px; }
.nota-col { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 0; }
.nota-col i { display: block; width: 100%; border-radius: 3px 3px 0 0; min-height: 0; }
.nota-n { font: 600 12px var(--fonte-num); margin-bottom: 3px; }
.nota-rot { font: 500 12px var(--fonte-sc); color: var(--tinta-3); margin-top: 4px; border-top: 1px solid var(--borda-controle); width: 100%; text-align: center; padding-top: 2px; }

/* distribuição dos quesitos (1 a 5) */
.dist { display: flex; height: 8px; gap: 1px; border-radius: 1px; overflow: hidden; grid-column: 2 / 3; margin-top: -4px; }
.dist i { display: block; height: 100%; }

/* linha de item com base: "6 de 31 · 19,4%" e poucos casos em cinza */
.linha-taxa { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 2px 12px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--fio); font-size: 14px; }
.linha-taxa .base { font-size: 12px; color: var(--tinta-3); text-align: right; white-space: nowrap; }
.linha-taxa b { font: 600 15px var(--fonte-num); text-align: right; min-width: 52px; }
.linha-taxa.poucos b { color: var(--tinta-3); font: 500 12px var(--fonte); }
.linha-taxa .trilho { grid-column: 1 / -1; height: 5px; background: var(--papel-2); }
.linha-taxa .trilho i { display: block; height: 100%; background: var(--sem-retorno); }
.linha-taxa button {
  min-height: 28px; padding: 5px 8px; margin: 0 -8px; text-align: left; background: none; border: 1px solid transparent;
  border-radius: var(--raio-controle); cursor: pointer; text-decoration: underline dotted var(--borda-controle);
  text-underline-offset: 3px; font: inherit; transition: background var(--rapido), border-color var(--rapido);
}
.linha-taxa button:hover { background: var(--papel-2); border-color: var(--borda-controle); text-decoration-style: solid; text-decoration-color: currentColor; }
.linha-taxa button[aria-pressed="true"] { background: var(--marca-suave); border-color: var(--marca-borda); font-weight: 600; text-decoration: none; }

/* tempo até fechar: resolvidos e sem retorno lado a lado em cada faixa */
.linhas-tempo { display: grid; gap: 6px; }
.tempo-linha { display: grid; grid-template-columns: 96px minmax(0, 1fr) 70px; gap: 10px; align-items: center; font-size: 13px; }
.tempo-linha .dupla { display: grid; gap: 2px; }
.tempo-linha .dupla i { display: block; height: 7px; min-width: 1px; border-radius: 1px; }
.tempo-linha .nums { font: 600 13px var(--fonte-num); text-align: right; white-space: nowrap; }
.coluna { display: grid; gap: 16px; align-content: start; min-width: 0; }
.tempo-linha .nums { display: inline-grid; grid-template-columns: 52px 52px; gap: 6px; text-align: right; }
.tempo-linha .n-res { color: var(--resolvido); }
.tempo-linha .n-sr { color: var(--sem-retorno); }
.tempo-linha.cabeca { font: 500 12px var(--fonte); color: var(--tinta-2); margin-bottom: 2px; }
.tempo-linha.cabeca .leg { display: flex; align-items: center; gap: 6px; }
.tempo-linha.cabeca .nums span { font: 600 12px/1.1 var(--fonte-sc); }
.tempo-linha { grid-template-columns: 96px minmax(0, 1fr) 112px; }
.minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 24px; margin-top: 6px; }
.mini h3 { font-size: 14px; margin-bottom: 4px; }
.mini h3 small { font: 400 12px var(--fonte); color: var(--tinta-3); margin-left: 6px; }
@media (max-width: 1179px) { .minis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 719px) { .minis { grid-template-columns: minmax(0, 1fr); } }
.exemplo.amostras { display: flex; gap: 2px; overflow: hidden; }
.exemplo.amostras i { flex: 1; display: block; }
@media (max-width: 719px) {
  .tempo-linha { grid-template-columns: 70px minmax(0, 1fr) 104px; gap: 8px; }
}
.h1-filtros { font-weight: 500; color: var(--tinta-2); font-size: .78em; }
.datas-fontes { margin: -8px 0 16px; max-width: 64ch; }
.datas-fontes b { font-weight: 600; color: var(--tinta-2); }
.fig-svg .faixa-poucos { fill: var(--papel-2); }
.legenda-nps { margin-top: 8px; }

/* ---------------------------------------------------------------- gaveta lateral de chamados */
.gaveta-camada { position: fixed; inset: 0; z-index: 45; display: flex; justify-content: flex-end; }
.gaveta-fundo { position: absolute; inset: 0; background: color-mix(in srgb, #05001F 45%, transparent); }
.gaveta {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  width: min(520px, 100vw); height: 100%; background: var(--papel);
  border-left: 1px solid var(--fio); box-shadow: var(--sombra);
}
.gaveta-cab {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--fio); background: var(--papel-2);
}
.gaveta-sub { margin: 2px 0 0; font-size: 12px; color: var(--tinta-2); }
.gaveta-corpo { flex: 1; overflow-y: auto; padding: 0 20px; overscroll-behavior: contain; }
.gaveta-lista { margin: 0; padding: 0; list-style: none; }
.gaveta-item { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--fio); font-size: 13px; }
.gaveta-topo { display: flex; align-items: center; gap: 8px; }
.gaveta-topo .c { font: 600 14px var(--fonte-num); }
.gaveta-topo .quando { font-size: 12px; color: var(--tinta-3); }
.gaveta-topo .pilula { margin-left: auto; }
.gaveta-cliente .sub { color: var(--tinta-3); font-size: 12px; }
.gaveta-assunto { color: var(--tinta-2); }
.gaveta-item .acoes-linha { justify-content: flex-start; margin-top: 2px; }
.gaveta-pe {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 20px; border-top: 1px solid var(--fio); background: var(--papel-2);
  font-size: 12px; color: var(--tinta-2);
}