/* ──────────────────────────────────────────────────────────────────────────
   Indicadores de Ordem de Compra
   ──────────────────────────────────────────────────────────────────────────
   Direção: relatório analítico, não painel de cards. Hairlines no lugar de
   sombras, grade assimétrica (os blocos NÃO têm todos a mesma largura), um
   único número herói, e o dado como a única coisa alta na página.

   PALETA — computada e validada, não escolhida no olho. Todos os valores
   abaixo passaram em scripts/validate_palette.js da skill dataviz:

     par categórico (2 séries: "segurou" x "até chegar")
       #4F6AE8 · #C97A16   CVD ΔE 31.0 (protan) · normal 33.4 · contraste ok

     rampa ordinal quente (envelhecimento da fila — a ordem É a severidade)
       #E8A33D #D9822B #C1651A #A04A10 #78330A   monótona, ΔL ok, ponta clara 2.10:1

     rampa ordinal azul (distribuições sem severidade)
       #8AA6D8 #7093C4 #5E7BA9 #45628F #2D4975   monótona, ΔL ok, ponta clara 2.40:1

   Uma série = uma cor (slot 1). Nunca colorir barra nominal pelo valor: o
   comprimento já diz o tamanho, e gastar a cor nisso queima o único canal livre.

   O portal não tem modo escuro (zero prefers-color-scheme em tokens.css), então
   aqui também não tem: inventar um só nesta aba seria a única tela fora do resto.

   HIERARQUIA — a tela tem 15 blocos, e eles NÃO têm o mesmo peso. Os cinco que
   respondem "onde e com quem o tempo se perde" ficam abertos; os outros oito
   vivem em duas seções recolhidas (.oci-secao), que só buscam do servidor quando
   alguém as abre. Foi isso, e não cortar informação, que resolveu a tela parecer
   poluída: o problema era tudo gritar ao mesmo tempo.

   DESEMPENHO:
     · cada bloco é UMA escrita de innerHTML (string montada em memória), nunca
       nó a nó, para não pagar reflow por linha;
     · a barra de filtros é escrita uma vez e fica fora do ciclo de repintura,
       senão o dropdown do multi-select seria destruído no meio da escolha;
     · animação só em transform/opacity, que rodam no compositor e pulam layout;
     · contain: layout paint isola o reflow de um card dos demais;
     · content-visibility nos blocos de baixo, que nascem fora da tela.
   ────────────────────────────────────────────────────────────────────────── */

.oci {
  --oci-serie1: #4f6ae8;
  --oci-serie2: #c97a16;

  --oci-quente1: #e8a33d;
  --oci-quente2: #d9822b;
  --oci-quente3: #c1651a;
  --oci-quente4: #a04a10;
  --oci-quente5: #78330a;

  --oci-frio1: #8aa6d8;
  --oci-frio2: #7093c4;
  --oci-frio3: #5e7ba9;
  --oci-frio4: #45628f;
  --oci-frio5: #2d4975;

  --oci-tinta: var(--md-sys-color-on-surface);
  --oci-tinta-2: var(--md-sys-color-on-surface-variant);
  --oci-tinta-3: #6b7280;
  --oci-linha: var(--md-sys-color-outline-variant);
  --oci-superficie: var(--md-sys-color-surface);
  --oci-trilho: #eef1f7;

  --oci-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --oci-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  color: var(--oci-tinta);
  padding-bottom: 32px;
}

/* Opção 2: fila acionável à esquerda, comparações independentes à direita. */
.oci .oci-operacional { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; margin-bottom: 24px; }
.oci .oci-fila, .oci .oci-comparativos { min-width: 0; }
.oci .oci-comparativos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.oci .oci-comparativos > div { min-width: 0; }
.oci .oci-comparativos > div > .oci-card { height: 100%; box-sizing: border-box; }
.oci .oci-comparativos > .oci-card { grid-column: auto; }
.oci .oci-operacional .oci-card { margin: 0; padding: 20px; }
.oci .oci-veredito { max-width: none; padding: 22px 24px; border: 1px solid #ead8c1; border-left: 4px solid #b87224; border-radius: 12px; background: #fffbf5; }
.oci .oci-eyebrow { display: block; color: #80551f; font-size: .73rem; font-weight: 650; margin-bottom: 7px; }
.oci .oci-veredito__linha { font-size: .85rem; color: var(--oci-tinta-2); margin-top: 9px; }
.oci .oci-veredito__linha--travado { font-size: clamp(1.2rem, 1.9vw, 1.65rem); line-height: 1.4; color: var(--oci-tinta); margin: 0; }
.oci .oci-numero { padding: 15px 20px; }
.oci .oci-numero__valor { font-size: 1.65rem; margin: 4px 0; }
.oci .oci-corte { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0; font-size: .8rem; color: var(--oci-tinta-2); }
.oci .oci-corte select { min-height: 36px; background: var(--oci-superficie); color: var(--oci-tinta); border: 1px solid var(--oci-linha); border-radius: 7px; padding: 4px 9px; font: inherit; font-weight: 650; }
.oci .oci-corte select:focus-visible { outline: 2px solid var(--oci-serie1); outline-offset: 3px; }
.oci .oci-corte select { width: auto; min-width: 92px; }
.oci .oci-cauda__ctx { font-size: .78rem; line-height: 1.55; }
.oci .oci-escopo, .oci .oci-escala { font-size: .72rem; color: var(--oci-tinta-3); line-height: 1.5; margin: 7px 0 15px; }
.oci .oci-escala { padding-top: 11px; border-top: 1px solid var(--oci-linha); }
.oci .oci-cauda__barra { background: #5677a6; }
.oci .oci-cauda__nome { white-space: normal; overflow-wrap: anywhere; font-weight: 550; }
.oci .oci-travada { grid-template-columns: 42px minmax(0, 1fr) auto; gap: 6px 10px; padding: 15px 0; }
.oci .oci-travada__quem { grid-column: 2 / -1; text-align: left; font-size: .75rem; }
.oci .oci-travada__idade { display: flex; flex-direction: column; align-items: center; }
.oci .oci-travada__idade small { font-size: .62rem; font-weight: 500; }
.oci .oci-periodo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 20px 0 12px; }
.oci .oci-periodo h3 { font-size: 1rem; margin: 0; }
.oci .oci-periodo span { font-size: .8rem; color: var(--oci-tinta-2); }
.oci .oci-observacoes { border-top: 1px solid var(--oci-linha); padding-top: 12px; margin-top: 16px; }
.oci .oci-observacoes summary { cursor: pointer; font-size: .8rem; color: var(--oci-tinta-2); padding: 8px 0; }
.oci .oci-serie__quantidade { text-align: center; font-size: .75rem; color: var(--oci-tinta-2); padding-bottom: 5px; font-variant-numeric: tabular-nums; }
.oci .oci-card__cabeca { justify-content: flex-start; align-items: center; gap: 6px; }
.oci .oci-info { min-width: 28px; min-height: 28px; flex-shrink: 0; }
.oci .oci-faixa { grid-template-columns: 145px minmax(0, 1fr) 72px; }
.oci .oci-faixa__rotulo { overflow-wrap: anywhere; }
@media (min-width: 1101px) {
  .oci .oci-card--12 .oci-faixa { grid-template-columns: 230px minmax(0, 1fr) 85px; }
}
.oci .oci-corte--categoria { margin: 12px 0 20px; flex-wrap: wrap; }
.oci .oci-corte--categoria select { width: auto; max-width: 100%; min-width: 200px; }
.oci .oci-tabela th:first-child, .oci .oci-tabela td:first-child { min-width: 130px; }
.oci .oci-tabela__rolagem:focus-visible { outline: 2px solid var(--oci-serie1); outline-offset: 3px; }
.oci .oci-numero, .oci .oci-cauda__linha, .oci .oci-rank__linha, .oci .oci-faixa { animation: none; }
.oci .oci-spark polyline { animation: none; stroke-dashoffset: 0; }
.oci .oci-spark circle { animation: none; opacity: 1; }
.oci .oci-tira { line-height: 1.8; }
.oci.is-carregando .oci-conteudo { opacity: .65; }
@media (max-width: 1100px) {
  .oci .oci-operacional { grid-template-columns: minmax(0, 1fr); }
  .oci .oci-comparativos { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 740px) {
  .oci .oci-comparativos { grid-template-columns: minmax(0, 1fr); }
  .oci .oci-operacional .oci-card { padding: 17px; }
  .oci .oci-veredito { padding: 18px; }
  .oci .oci-faixa { grid-template-columns: 110px minmax(0, 1fr) 60px; gap: 8px; }
  .oci .oci-corte select { min-height: 44px; }
  .oci .oci-info { min-width: 36px; min-height: 36px; }
  .oci .oci-numeros { grid-template-columns: minmax(0, 1fr); }
  .oci .oci-numero { padding: 14px 16px; }
  .oci .oci-numero__spark { display: none; }
}

/* ── Barra de filtros: UMA linha acima de tudo que ela recorta ──────────── */
.compras-etapa-atual { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; border: 1px solid var(--md-sys-color-outline-variant); border-radius: 10px; font-size: .85rem; }
.compras-indicadores-ativa .compras-head { padding-bottom: 12px; }
.compras-indicadores-ativa .compras-head-sub { display: none; }
.compras-indicadores-ativa .compras-head-eyebrow { display: none; }
.compras-indicadores-ativa .compras-queues { margin-bottom: 12px; }
.compras-indicadores-ativa .oci-filtros { margin-bottom: 16px; padding-bottom: 12px; }

.oci-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--oci-linha);
  margin-bottom: 28px;
}

.oci-filtro {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.oci-filtro > span {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--oci-tinta-3);
}

/* Os três controles da barra vêm de origens diferentes: dois são <select>/<input> nativos e o
   terceiro é o combobox compartilhado, que traz o cinza (#F7FAFC) e o raio da Auditoria. Lado a
   lado isso vira um campo branco encostado em dois cinzas. Aqui a receita é UMA só, escopada em
   .oci-filtro: mesma altura, mesma borda, mesmo fundo e mesmo raio. Não toca no componente, que
   continua igual em todas as outras telas que o usam. */
.oci-filtro select,
.oci-filtro input,
.oci-filtro .audit-ms-button {
  font: inherit;
  font-size: 0.88rem;
  font-weight: 400;
  min-height: 38px;
  padding: 7px 11px;
  border: 1px solid var(--oci-linha);
  border-radius: 9px;
  background: var(--oci-superficie);
  color: var(--oci-tinta);
  min-width: 132px;
  transition: border-color 160ms var(--oci-ease), box-shadow 160ms var(--oci-ease);
}

/* O componente lê tokens --audit-*, que só existem dentro da tela de Auditoria. Mesmo caminho
   que `.compras-filtergroup .compras-ms` já usa em views.css: supridos aqui e apontados para a
   paleta deste painel, senão o texto e o foco perdem a cor fora daquela tela. */
.oci-filtro .audit-ms {
  --audit-text: var(--oci-tinta);
  --audit-text-secondary: var(--oci-tinta-2);
  --audit-accent: var(--oci-serie1);
  --audit-card-bg: var(--oci-superficie);
}

.oci-filtro select:focus-visible,
.oci-filtro input:focus-visible,
.oci-filtro .audit-ms-button:focus-visible,
.oci-filtro .audit-ms-button:focus {
  outline: none;
  border-color: var(--oci-serie1);
  background: var(--oci-superficie);
  box-shadow: 0 0 0 3px rgba(79, 106, 232, 0.16);
}

@media (hover: hover) {
  .oci-filtro select:hover,
  .oci-filtro .audit-ms-button:hover {
    border-color: var(--oci-serie1);
    /* O hover global de botão joga um state-layer escuro por cima; num campo de formulário isso
       lê como "desabilitado" em vez de "sob o cursor". */
    background-image: none;
    box-shadow: none;
    transform: none;
  }
}

/* Refetch NÃO pisca esqueleto: segura o render anterior em opacidade reduzida,
   sem salto de layout (o conteúdo continua ocupando o mesmo espaço). */
.oci.is-carregando .oci-conteudo {
  opacity: 0.45;
  transition: opacity 180ms var(--oci-ease);
  pointer-events: none;
}

/* ── O topo: veredito, travadas e os três números ────────────────────────────

   A tela abre respondendo, não relatando. A ordem de leitura é: uma frase, o que
   precisa de ação hoje, e só então os números do período. Isso inverte o que a
   tela era (quinze cartões de peso igual, sem ponto de entrada) e é a mudança
   que a supervisora de Compras pediu com outras palavras: "olho e não consigo
   ver se é o que eu precisava".

   SEM META, E PORTANTO SEM COR DE JUÍZO. Nenhum dos três números de topo é
   pintado de bom ou ruim: quem estabelece meta de tempo de aprovação é a
   diretoria, e pintar de verde sem meta seria a tela julgando sem lastro. A cor
   de status fica reservada ao único lugar do módulo onde já existe regra — a
   idade das ordens travadas, com os mesmos cortes de `agingCell` e os mesmos
   tokens `--cp-*` que a fila de aprovação usa.
   ───────────────────────────────────────────────────────────────────────────── */

/* A frase-veredito NÃO é um cartão, de propósito. Cartão é o que a tela usa para
   "aqui tem uma métrica"; isto é a conclusão, e precisa se parecer com texto para
   ser lido como texto. Daí o tipo grande, a medida de leitura limitada e a
   hairline embaixo em vez de uma borda em volta. */
.oci-veredito {
  max-width: 78ch;
  margin: 0 0 22px;
  padding: 4px 0 18px;
  border-bottom: 1px solid var(--oci-linha);
  animation: oci-sobe 420ms var(--oci-ease) backwards;
}

.oci-veredito__linha {
  margin: 0;
  font-size: clamp(1.02rem, 1.5vw, 1.22rem);
  line-height: 1.5;
  color: var(--oci-tinta);
}

.oci-veredito__linha--travado {
  margin-top: 5px;
  color: var(--oci-tinta-2);
}

/* O número dentro da frase ganha o peso e a família do display, não uma cor. Cor
   aqui viraria semáforo, e a frase é fato, não avaliação. */
.oci-veredito__n {
  font-family: var(--font-display), sans-serif;
  font-weight: 700;
  color: var(--oci-tinta);
  white-space: nowrap;
}

/* ── Precisa de você: a tira de contexto e a lista ───────────────────────── */

/* A contagem por faixa, que já foi o bloco principal, virou tira fina: ela dá o
   TAMANHO do problema em uma linha, e a lista abaixo dá o problema. */
.oci-tira {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 2px 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--oci-linha);
  font-size: 0.8rem;
  color: var(--oci-tinta-3);
}

.oci-tira__item b {
  font-family: var(--font-display), sans-serif;
  font-weight: 700;
  color: var(--oci-tinta);
  margin-right: 3px;
}

.oci-travadas {
  list-style: none;
  margin: 0;
  padding: 0;
}

.oci-travadas > li {
  animation: oci-sobe 380ms var(--oci-ease) backwards;
  animation-delay: calc(var(--i, 0) * 28ms);
}

/* A linha é um <button> de verdade, para chegar pelo teclado. Em troca, herda o
   botão global do portal: `min-height: 44px` (que aqui até serve de alvo de
   toque), mas também um state-layer em gradiente, uma sombra de 16px e um -1px de
   elevação no hover. Numa lista, esses três viram tremeliques. Zerados aqui; o
   realce do hover é o fundo do trilho e a barra da esquerda. */
.oci-travada {
  display: grid;
  grid-template-columns: 46px minmax(0, 1.6fr) minmax(88px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 9px 12px 9px 10px;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 9px;
  background: transparent;
  background-image: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 140ms var(--oci-ease), border-color 140ms var(--oci-ease);
}

@media (hover: hover) {
  .oci-travada:hover {
    background: var(--oci-trilho);
    background-image: none;
    box-shadow: none;
    transform: none;
    border-left-color: var(--oci-serie1);
  }
}

.oci-travada:focus-visible {
  outline: none;
  background: var(--oci-trilho);
  border-left-color: var(--oci-serie1);
  box-shadow: 0 0 0 2px rgba(79, 106, 232, 0.28);
}

.oci-travada__idade { justify-self: start; }

.oci-travada__id {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.oci-travada__id b {
  font-family: var(--font-display), sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--oci-tinta);
}

.oci-travada__forn {
  font-size: 0.78rem;
  color: var(--oci-tinta-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oci-travada__valor {
  font-family: var(--oci-mono);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--oci-tinta);
}

.oci-travada__quem {
  font-size: 0.82rem;
  color: var(--oci-tinta-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oci-vertodas {
  min-height: 32px;
  margin-top: 10px;
  padding: 5px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--oci-serie1);
  background: transparent;
  background-image: none;
  box-shadow: none;
  border: 1px solid var(--oci-linha);
  border-radius: 999px;
}

@media (hover: hover) {
  .oci-vertodas:hover {
    background: var(--oci-trilho);
    background-image: none;
    box-shadow: none;
    transform: none;
    border-color: var(--oci-serie1);
  }
}

/* "Nada parado" é uma boa notícia, e o vazio padrão (cinza, centralizado) lê como
   falha de carga. Aqui ele ganha o verde do portal, com texto junto. */
.oci-vazio--bom {
  color: var(--cp-ok);
  font-weight: 600;
}

/* ── Resumo em dois indicadores ───────────────────────────────────────────── */

.oci-numeros {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 26px;
  background: var(--oci-linha);
  border: 1px solid var(--oci-linha);
  border-radius: 14px;
  overflow: hidden;
}

.oci-numero {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 18px 20px 16px;
  background: var(--oci-superficie);
  animation: oci-sobe 420ms var(--oci-ease) backwards;
  animation-delay: calc(var(--i, 0) * 60ms);
}

.oci-numero__rotulo {
  display: flex;
  align-items: center;
  font-size: 0.71rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--oci-tinta-3);
}

.oci-numero__valor {
  font-family: var(--font-display), sans-serif;
  font-size: clamp(1.9rem, 3.4vw, 2.45rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--oci-tinta);
}

.oci-numero__valor small {
  display: block;
  margin-top: 2px;
  font-family: var(--oci-mono);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--oci-tinta-2);
}

/* A variação é texto cinza com uma seta, e NÃO um selo verde ou vermelho. A seta
   diz a direção (fato); dizer se a direção é boa seria juízo. E a mesma cor
   estaria errada em metade dos cartões: subir é ruim em "primeira assinatura" e
   é bom em "aprovadas em até 24h". */
.oci-numero__delta {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 0.79rem;
  color: var(--oci-tinta-3);
}

.oci-numero__seta {
  font-size: 0.68rem;
  color: var(--oci-tinta-2);
}

.oci-numero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 4px;
  font-size: 0.75rem;
  color: var(--oci-tinta-3);
}

.oci-numero__spark {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
  font-size: 0.7rem;
  color: var(--oci-tinta-3);
}

/* "12 semanas" numa linha só. Quebrado em duas, o rodapé empurrava o cartão para
   baixo e desalinhava os três. */
.oci-numero__spark > span { white-space: nowrap; }

.oci-spark {
  display: block;
  overflow: visible;
}

/* O traço aparece desenhando da esquerda para a direita. Só stroke-dashoffset, que
   o compositor resolve sem layout. */
.oci-spark polyline {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: oci-traca 900ms var(--oci-ease) 160ms forwards;
}

.oci-spark circle {
  opacity: 0;
  animation: oci-aparece 260ms var(--oci-ease) 980ms forwards;
}

@keyframes oci-traca {
  to { stroke-dashoffset: 0; }
}

@keyframes oci-aparece {
  to { opacity: 1; }
}

/* ── Esteira: onde o tempo mora ──────────────────────────────────────────────
   Era uma faixa de duas colunas, com o número herói à esquerda. O número subiu
   para os três cartões e sobrou a esteira, que agora ocupa a largura inteira e
   diz em palavras qual trecho domina — antes era preciso comparar larguras no
   olho para chegar à conclusão que o próprio dado já tinha.

   Paleta da esteira, validada como rampa ordinal de duas etapas sobre superfície
   clara (#4f6ae8 -> #8199e3: monótona, degrau >= 0,06, ponta clara 2,76:1 contra
   o branco), mais um cinza DELIBERADO para o trecho de máquina, a ΔE 16,9 do azul
   claro em visão normal e 16,3 sob daltonismo. O cinza é cinza de propósito:
   aquele trecho existe para sair da discussão, não para competir. */

.oci-resumo {
  --oci-esteira1: #4f6ae8;
  --oci-esteira2: #8199e3;
  --oci-esteira3: #6b7280;

  padding: 20px 26px 18px;
  margin-bottom: 26px;
  border: 1px solid var(--oci-linha);
  border-radius: 14px;
  background: var(--oci-superficie);
  animation: oci-sobe 420ms var(--oci-ease) backwards;
}

/* A linha de contexto: os números que antes ocupavam a faixa de KPIs e que são
   pano de fundo, não resposta. Ficam aqui, pequenos, disponíveis para quem for
   conferir e invisíveis para quem só quer saber como estamos. */
.oci-contexto {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--oci-linha);
  font-size: 0.79rem;
  color: var(--oci-tinta-3);
}

.oci-contexto__nota { opacity: 0.8; }

/* ── Esteira: a barra que mostra que o tempo é humano ───────────────────── */

.oci-esteira__titulo b {
  font-family: var(--font-display), sans-serif;
  font-weight: 700;
  color: var(--oci-tinta);
}

.oci-esteira__titulo {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--oci-tinta-2);
  margin-bottom: 10px;
}

.oci-esteira__trilho {
  display: flex;
  /* O separador é a superfície, nunca uma borda desenhada na marca. */
  gap: 2px;
  height: 20px;
  margin-bottom: 12px;
}

.oci-esteira__parte {
  height: 100%;
  border-radius: 3px;
  transform-origin: left center;
  animation: oci-cresce-x 560ms var(--oci-ease) backwards;
  animation-delay: calc(var(--i, 0) * 80ms);
  min-width: 3px;
}

/* O trecho dominante fica opaco e os outros recuam. É o mesmo dado de antes; o
   que muda é que a conclusão passa a estar na tela em vez de na cabeça de quem lê. */
.oci-esteira__parte:not(.is-dominante) { opacity: 0.55; }
.oci-esteira__item.is-dominante { font-weight: 600; color: var(--oci-tinta); }

.oci-esteira__parte--a { background: var(--oci-esteira1); }
.oci-esteira__parte--b { background: var(--oci-esteira2); }
.oci-esteira__parte--c { background: var(--oci-esteira3); }

.oci-esteira__legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}

.oci-esteira__item {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 0.82rem;
  color: var(--oci-tinta-2);
}

.oci-esteira__ponto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  transform: translateY(-1px);
}

.oci-esteira__ponto--a { background: var(--oci-esteira1); }
.oci-esteira__ponto--b { background: var(--oci-esteira2); }
.oci-esteira__ponto--c { background: var(--oci-esteira3); }

.oci-esteira__num {
  font-family: var(--oci-mono);
  font-weight: 500;
  color: var(--oci-tinta);
}

@media (max-width: 860px) {
  .oci-resumo {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

/* ── Grade assimétrica dos blocos ───────────────────────────────────────── */

.oci-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
}
.oci-volume-fixo { margin-top: 22px; margin-bottom: 22px; }

.oci-card {
  grid-column: span 12;
  background: var(--oci-superficie);
  border: 1px solid var(--oci-linha);
  border-radius: 16px;
  padding: 20px 22px 22px;
  min-width: 0;
  /* Isola o reflow deste card dos outros catorze. */
  contain: layout paint;
}

.oci-card--7 { grid-column: span 7; }
.oci-card--5 { grid-column: span 5; }
.oci-card--6 { grid-column: span 6; }
.oci-card--4 { grid-column: span 4; }
.oci-card--8 { grid-column: span 8; }
.oci-card--12 { grid-column: 1 / -1; }

/* Blocos que nascem fora da tela: o navegador pula o layout deles até chegarem
   perto da viewport. A altura estimada evita a barra de rolagem pulando. */
.oci-card--adiado {
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
}

.oci-card__cabeca {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.oci-card__titulo {
  font-family: var(--font-display), sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.012em;
}

.oci-card__sub {
  font-size: 0.81rem;
  line-height: 1.45;
  color: var(--oci-tinta-2);
  margin-bottom: 16px;
  max-width: 62ch;
}

.oci-card__acao {
  font: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--oci-tinta-2);
  background: none;
  border: 1px solid var(--oci-linha);
  border-radius: 999px;
  padding: 3px 11px;
  cursor: pointer;
  flex: none;
  transition: color 160ms var(--oci-ease), border-color 160ms var(--oci-ease);
}

.oci-card__acao:hover { color: var(--oci-tinta); border-color: var(--line-strong); }

/* ── Ranking horizontal (uma série: todas as barras na mesma cor) ───────── */

.oci-rank { display: flex; flex-direction: column; gap: 9px; }

.oci-rank__linha {
  display: grid;
  grid-template-columns: minmax(96px, 1.35fr) minmax(0, 2.4fr) auto;
  align-items: center;
  gap: 12px;
  animation: oci-sobe 380ms var(--oci-ease) backwards;
  animation-delay: calc(var(--i, 0) * 34ms);
}

.oci-rank__nome {
  font-size: 0.85rem;
  color: var(--oci-tinta);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oci-rank__trilho {
  height: 16px; /* marca fina: nunca preenche a faixa inteira */
  background: var(--oci-trilho);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}

.oci-rank__barra {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--p, 0) * 1%);
  background: var(--oci-serie1);
  border-radius: 0 4px 4px 0; /* ponta arredondada, quadrada na linha de base */
  transform-origin: left center;
  animation: oci-cresce-x 620ms var(--oci-ease) backwards;
  animation-delay: calc(var(--i, 0) * 34ms + 90ms);
}

.oci-rank__barra--quente { background: var(--oci-quente3); }

/* Coluna numérica: mono e tabular para os dígitos alinharem de fato. A largura
   vem medida da linha mais comprida (--oci-rank-n), senão a barra encosta no
   número quando o valor cresce — foi assim que o ranking da Auditoria quebrou. */
.oci-rank__num {
  font-family: var(--oci-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  color: var(--oci-tinta);
  text-align: right;
  width: var(--oci-rank-n, auto);
  flex: none;
  white-space: nowrap;
}

.oci-rank__num em {
  font-style: normal;
  color: var(--oci-tinta-3);
  font-size: 0.92em;
}

/* ── Cauda: a proporção que passou de uma semana ─────────────────────────
   Uma série só, logo UMA cor só: o que distingue as linhas é o comprimento.
   A cor é a quente do módulo porque passar de 7 dias já está além do corte
   crítico que a fila de OC usa (3 dias), e não uma cor de juízo inventada
   aqui — a tela não tem meta e não pinta ninguém de bom ou ruim.

   Duas bandas por linha, e a de baixo é obrigatória, não decoração: a barra
   sozinha diria "21%" sem dizer 21% de quê, e é exatamente essa omissão que
   fez a versão anterior apontar para quem tinha volume. O bruto fica junto. */

.oci-cauda { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }

.oci-cauda__linha {
  display: grid;
  grid-template-columns: minmax(104px, 1.15fr) minmax(0, 2.4fr) auto;
  grid-template-areas:
    'nome trilho num'
    'ctx  ctx    ctx';
  align-items: center;
  gap: 4px 12px;
  animation: oci-sobe 380ms var(--oci-ease) backwards;
  animation-delay: calc(var(--i, 0) * 34ms);
}

.oci-cauda__nome {
  grid-area: nome;
  font-size: 0.85rem;
  color: var(--oci-tinta);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oci-cauda__trilho {
  grid-area: trilho;
  height: 16px;
  background: var(--oci-trilho);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}

.oci-cauda__barra {
  position: absolute;
  inset: 0 auto 0 0;
  /* SEM piso de largura, de propósito. A primeira versão tinha um piso de 2px
     para a linha não sumir do trilho, e o resultado foi que "nenhuma das 23
     passou de uma semana" desenhava a mesma marquinha laranja que 0,1% e 0,7%:
     a barra dizia que havia algo onde não havia nada. Zero agora é zero, e a
     categoria continua legível porque o nome e a linha de contexto estão lá.
     Raio menor que o dos outros rankings pelo mesmo motivo: com 2px de largura,
     4px de raio transformam a barra num pontinho redondo que não parece barra. */
  width: calc(var(--p, 0) * 1%);
  background: var(--oci-quente3);
  border-radius: 0 2px 2px 0;
  transform-origin: left center;
  animation: oci-cresce-x 620ms var(--oci-ease) backwards;
  animation-delay: calc(var(--i, 0) * 34ms + 90ms);
}

.oci-cauda__num {
  grid-area: num;
  font-family: var(--oci-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  color: var(--oci-tinta);
  text-align: right;
  width: var(--oci-rank-n, auto);
  white-space: nowrap;
}

.oci-cauda__num em { font-style: normal; color: var(--oci-tinta-3); font-size: 0.92em; }

.oci-cauda__ctx {
  grid-area: ctx;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--oci-tinta-3);
}

.oci-cauda__ctx b { font-weight: 600; color: var(--oci-tinta-2); }

/* Nota de rodapé do cartão: o que não cabe em barra e mesmo assim não pode
   sumir — a concentração de volume e as pessoas fora do piso de comparação. */
.oci-nota {
  margin: 14px 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--oci-tinta-3);
}

.oci-nota + .oci-nota { margin-top: 6px; }
.oci-nota b { font-weight: 600; color: var(--oci-tinta); }

/* ── Duas séries por linha: "segurou" x "até chegar" ────────────────────── */

.oci-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-bottom: 14px;
}

.oci-legenda__item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
  color: var(--oci-tinta-2);
}

.oci-legenda__chave {
  width: 12px;
  height: 4px;
  border-radius: 2px;
  flex: none;
}

.oci-par { display: flex; flex-direction: column; gap: 14px; }

.oci-par__linha {
  animation: oci-sobe 380ms var(--oci-ease) backwards;
  animation-delay: calc(var(--i, 0) * 40ms);
}

.oci-par__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.oci-par__nome { font-size: 0.85rem; font-weight: 600; }

.oci-par__passos {
  font-family: var(--oci-mono);
  font-size: 0.75rem;
  color: var(--oci-tinta-3);
}

.oci-par__trilhos { display: flex; flex-direction: column; gap: 4px; }

.oci-par__trilho {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.oci-par__faixa {
  height: 11px;
  background: var(--oci-trilho);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}

.oci-par__preenche {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--p, 0) * 1%);
  border-radius: 0 4px 4px 0;
  transform-origin: left center;
  animation: oci-cresce-x 600ms var(--oci-ease) backwards;
  animation-delay: calc(var(--i, 0) * 40ms + 80ms);
  min-width: 2px;
}

.oci-par__preenche--s1 { background: var(--oci-serie1); }
.oci-par__preenche--s2 { background: var(--oci-serie2); }

.oci-par__valor {
  font-family: var(--oci-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  color: var(--oci-tinta-2);
  white-space: nowrap;
}

/* ── Distribuição ordinal (faixas onde a ordem é o significado) ─────────── */

.oci-faixas { display: flex; flex-direction: column; gap: 2px; }

.oci-faixa {
  display: grid;
  grid-template-columns: minmax(104px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  animation: oci-sobe 380ms var(--oci-ease) backwards;
  animation-delay: calc(var(--i, 0) * 42ms);
}

.oci-faixa + .oci-faixa { border-top: 1px solid var(--oci-linha); }

.oci-faixa__rotulo { font-size: 0.83rem; color: var(--oci-tinta); }

.oci-faixa__trilho { height: 14px; position: relative; }

.oci-faixa__barra {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--p, 0) * 1%);
  border-radius: 0 4px 4px 0;
  background: var(--oci-frio3);
  transform-origin: left center;
  animation: oci-cresce-x 600ms var(--oci-ease) backwards;
  animation-delay: calc(var(--i, 0) * 42ms + 70ms);
  min-width: 2px;
}

.oci-faixa__barra[data-passo='1'] { background: var(--oci-quente1); }
.oci-faixa__barra[data-passo='2'] { background: var(--oci-quente2); }
.oci-faixa__barra[data-passo='3'] { background: var(--oci-quente3); }
.oci-faixa__barra[data-passo='4'] { background: var(--oci-quente4); }
.oci-faixa__barra[data-passo='5'] { background: var(--oci-quente5); }

.oci-faixa__barra[data-frio='1'] { background: var(--oci-frio1); }
.oci-faixa__barra[data-frio='2'] { background: var(--oci-frio2); }
.oci-faixa__barra[data-frio='3'] { background: var(--oci-frio3); }
.oci-faixa__barra[data-frio='4'] { background: var(--oci-frio4); }
.oci-faixa__barra[data-frio='5'] { background: var(--oci-frio5); }

.oci-faixa__num {
  font-family: var(--oci-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.81rem;
  text-align: right;
  white-space: nowrap;
}

.oci-faixa__num em { font-style: normal; color: var(--oci-tinta-3); }

/* ── Série semanal: colunas + eixo ──────────────────────────────────────── */

.oci-serie {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 148px;
  padding-top: 6px;
  border-bottom: 1px solid var(--oci-linha); /* eixo: hairline sólida, nunca tracejada */
}

.oci-serie__col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  position: relative;
}

.oci-serie__barra {
  width: 100%;
  max-width: 24px; /* marca fina: a sobra da faixa vira ar */
  margin: 0 auto;
  height: calc(var(--p, 0) * 1%);
  background: var(--oci-frio3);
  border-radius: 4px 4px 0 0;
  transform-origin: center bottom;
  animation: oci-cresce-y 600ms var(--oci-ease) backwards;
  animation-delay: calc(var(--i, 0) * 45ms);
  min-height: 2px;
}

.oci-serie__col:hover .oci-serie__barra { background: var(--oci-serie1); }

.oci-eixo {
  display: flex;
  gap: 2px;
  margin-top: 7px;
}

.oci-eixo__marca {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  font-family: var(--oci-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.68rem;
  color: var(--oci-tinta-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Tabela gêmea (todo valor alcançável sem depender de cor ou hover) ──── */

.oci-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.83rem;
}

.oci-tabela th {
  text-align: left;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--oci-tinta-3);
  padding: 0 10px 8px 0;
  border-bottom: 1px solid var(--oci-linha);
  white-space: nowrap;
}

.oci-tabela td {
  padding: 7px 10px 7px 0;
  border-bottom: 1px solid var(--oci-linha);
}

.oci-tabela tr:last-child td { border-bottom: none; }

.oci-tabela .num {
  font-family: var(--oci-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* Sem altura fixa: rolagem dentro do card corta a ultima linha no meio e
   esconde que ha mais gente abaixo. O card cresce com o conteudo. */
.oci-tabela__rolagem { overflow-x: auto; }

/* ── Dica flutuante ─────────────────────────────────────────────────────── */

.oci-dica {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  background: var(--md-ref-palette-neutral10);
  color: #fff;
  font-size: 0.78rem;
  line-height: 1.45;
  padding: 8px 11px;
  border-radius: 9px;
  box-shadow: var(--md-sys-elevation-level2);
  max-width: 280px;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 120ms var(--oci-ease), transform 120ms var(--oci-ease);
}

.oci-dica.is-visivel { opacity: 1; transform: translateY(0); }

/* Presa por clique no `?`: mais larga e selecionável, porque aqui a pessoa PARA para ler cinco
   linhas em vez de passar o mouse. `pointer-events` volta a valer para dar conta de copiar o
   texto sem que a caixa suma embaixo do cursor. */
.oci-dica--fixa {
  max-width: 340px;
  padding: 12px 14px;
  pointer-events: auto;
  user-select: text;
}

.oci-dica__titulo { font-weight: 700; margin-bottom: 2px; }

.oci-dica__num {
  font-family: var(--oci-mono);
  font-variant-numeric: tabular-nums;
}

/* ── Vazio e erro ───────────────────────────────────────────────────────── */

.oci-vazio {
  padding: 26px 0;
  text-align: center;
  color: var(--oci-tinta-3);
  font-size: 0.87rem;
}

.oci-erro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding: 14px 18px;
  border: 1px solid var(--md-sys-color-error-container);
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
  border-radius: 14px;
  font-size: 0.88rem;
}

.oci-erro__acao {
  min-height: 32px;
  padding: 5px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--md-sys-color-on-error-container);
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 999px;
}

/* ── Movimento ──────────────────────────────────────────────────────────── */

@keyframes oci-cresce-x {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes oci-cresce-y {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

@keyframes oci-sobe {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}

/* Quem pediu menos movimento recebe o painel inteiro pronto, sem exceção. */
@media (prefers-reduced-motion: reduce) {
  .oci *,
  .oci *::before,
  .oci *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
}


/* ── Seções recolhíveis ─────────────────────────────────────────────────────
   O que resolveu a queixa de "poluído" não foi tirar informação, foi parar de
   dar o mesmo peso a tudo. Os cinco blocos que respondem "onde e com quem o
   tempo se perde" ficam abertos; os outros oito vivem aqui dentro, e a seção só
   busca do servidor quando alguém a abre.

   O cabeçalho é um <button> de verdade, não uma <div> com onclick: ele precisa
   receber foco, responder a Enter e anunciar aria-expanded. */

.oci-secao {
  border-top: 1px solid var(--oci-linha);
  margin-top: 26px;
  padding-top: 4px;
}

.oci-secao__cabeca {
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  padding: 16px 4px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--oci-tinta);
  border-radius: 10px;
}

.oci-secao__cabeca:hover .oci-secao__titulo { color: var(--oci-serie1); }

.oci-secao__cabeca:focus-visible {
  outline: 2px solid var(--oci-serie1);
  outline-offset: 2px;
}

/* Triângulo em CSS puro: um nó a menos e nada para baixar. Gira em transform,
   que é a única propriedade que anima sem custar layout. */
.oci-secao__chevron {
  flex: none;
  width: 0;
  height: 0;
  border-left: 5px solid currentColor;
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
  color: var(--oci-tinta-3);
  transform-origin: 30% 50%;
  transition: transform 200ms var(--oci-ease);
  align-self: center;
}

.oci-secao.is-aberta .oci-secao__chevron { transform: rotate(90deg); }

.oci-secao__titulo {
  font-size: 0.98rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  transition: color 160ms var(--oci-ease);
}

.oci-secao__resumo {
  font-size: 0.82rem;
  color: var(--oci-tinta-2);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oci-secao__corpo:not(:empty) {
  padding-bottom: 8px;
  animation: oci-sobe 340ms var(--oci-ease) backwards;
}

/* ── Ícone de ajuda do cartão ───────────────────────────────────────────────
   Substitui o parágrafo explicativo que existia em cada cartão. O texto não se
   perdeu: virou aria-label e tooltip, então continua alcançável por leitor de
   tela e por teclado, sem ocupar três linhas a cada bloco. */

.oci-info {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 17px;
  height: 17px;
  /* O `min-height: 44px` do botão global (components.css) vence `height` e esticava este ícone
     numa elipse de 17x44. Zerar aqui, junto com box-sizing, é o que mantém o círculo redondo. */
  min-height: 0;
  margin-left: 8px;
  padding: 0;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1;
  color: var(--oci-tinta-3);
  background: var(--oci-trilho);
  border: 1px solid var(--oci-linha);
  border-radius: 50%;
  cursor: help;
  transform: translateY(-1px);
  transition:
    color 140ms var(--oci-ease),
    background 140ms var(--oci-ease),
    border-color 140ms var(--oci-ease);
}

/* O hover global de botão preenchido joga um state-layer, uma sombra de 16px e um -1px de
   elevação. Num círculo de 17px isso vira um borrão, então as três coisas são zeradas aqui. */
.oci-info:hover,
.oci-info:focus-visible {
  color: #fff;
  background: var(--oci-serie1);
  background-image: none;
  border-color: var(--oci-serie1);
  box-shadow: none;
  transform: translateY(-1px);
}

/* ── Filtros: encaixe do multi-select ───────────────────────────────────────
   O combobox compartilhado traz as próprias classes `audit-ms-*` (ver
   public/js/ui/multi-select.js, que manteve os nomes de origem de propósito).
   Aqui só se garante a largura dentro da barra; a aparência do controle é a do
   componente, para ele continuar igual em todas as telas que o usam. */

.oci-filtro > div[id^="oci"] { min-width: 190px; }
.oci-filtro .audit-ms-button { width: 100%; }

.oci-filtro-datas {
  display: flex;
  gap: 10px;
}

.oci-filtro-datas[hidden] { display: none; }

.oci-filtro__rotulo {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--oci-tinta-2);
}

.oci-limpar {
  align-self: flex-end;
  margin-bottom: 1px;
  padding: 7px 12px;
  font-size: 0.8rem;
  color: var(--oci-tinta-2);
  background: none;
  border: 1px solid var(--oci-linha);
  border-radius: 9px;
  cursor: pointer;
  transition: color 140ms var(--oci-ease), border-color 140ms var(--oci-ease);
}

.oci-limpar:hover {
  color: var(--oci-tinta);
  border-color: var(--oci-tinta-3);
}

.oci-limpar[hidden] { display: none; }

/* Resumo operacional: uma linha por alçada, sem repetir a lista de OCs. */
.oci-espera { margin: 0 0 24px; padding: 18px 20px; border: 1px solid var(--oci-linha); border-radius: 14px; background: var(--oci-papel, #fff); }
.oci-espera__cabeca { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.oci-espera__cabeca h3 { margin: 0; font-size: 1rem; }
.oci-espera__cabeca .oci-corte { margin: 0; }
.oci-espera__item { display: grid; grid-template-columns: minmax(130px, 1.4fr) repeat(3, minmax(100px, 1fr)); align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--oci-linha); }
.oci-espera__item:last-child { border-bottom: 0; padding-bottom: 0; }
.oci-espera__item h4 { margin: 0; font-size: .86rem; font-weight: 600; }
.oci-espera__item div { display: flex; flex-direction: column; gap: 2px; }
.oci-espera__item b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.oci-espera__item span { font-size: .76rem; color: var(--oci-tinta-2); }
.oci-espera__destaque b { color: #9a4b12; }
.oci .oci-veredito__n { font-size: 1.45rem; margin-right: 4px; }
.oci-numero__apoio { margin: 6px 0 10px; font-size: .79rem; color: var(--oci-tinta-2); line-height: 1.4; }
.oci-aviso-prazos { border-left: 3px solid #ac701b; padding: 9px 12px; font-size: .8rem; background: #fff8eb; color: #694216; }
.oci-grid > .oci-resumo { grid-column: 1 / -1; }
@media (max-width: 760px) {
  .oci-espera { padding: 16px 15px; }
  .oci-espera__item { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 14px 0; }
  .oci-espera__item h4 { grid-column: 1 / -1; }
  .oci-espera__item b { font-size: 1.05rem; }
  .oci-espera__item span { font-size: .72rem; }
}

/* ── Telas estreitas ────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .oci-card--7, .oci-card--5, .oci-card--6,
  .oci-card--4, .oci-card--8 { grid-column: span 12; }
}

@media (max-width: 760px) {
  /* A permissão acrescenta uma quarta aba. Todas precisam aparecer sem depender de um gesto
     horizontal escondido; usuários sem Indicadores mantêm a faixa móvel original. */
  .compras-queues:has(#comprasQueue-indicadores) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    scroll-snap-type: none;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .compras-queues:has(#comprasQueue-indicadores) .compras-queue {
    width: 100%;
    min-width: 0;
    padding-inline: 8px;
  }
  .oci-resumo { padding: 18px 16px; }
  .oci-numeros { grid-template-columns: minmax(0, 1fr); }
  .oci-veredito__linha { font-size: 1rem; }

  /* A linha da travada em duas faixas: identidade e idade em cima, valor e com
     quem embaixo. Em 375px a grade de quatro colunas espremia o fornecedor até
     sumir, e o fornecedor é metade do "qual ordem é essa". */
  .oci-travada {
    grid-template-columns: 46px minmax(0, 1fr);
    grid-template-areas: 'idade id' '.     quem';
    row-gap: 4px;
  }
  .oci-travada__idade { grid-area: idade; }
  .oci-travada__id    { grid-area: id; }
  .oci-travada__quem  { grid-area: quem; }
  .oci-travada__valor {
    grid-area: id;
    align-self: start;
    justify-self: end;
    font-size: 0.8rem;
  }
  .oci-card { padding: 16px 15px 18px; border-radius: 14px; }
  .oci-rank__linha { grid-template-columns: minmax(78px, 1fr) minmax(0, 1.7fr) auto; gap: 9px; }
  .oci-cauda__linha {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'nome num'
      'trilho trilho'
      'ctx ctx';
    gap: 5px 10px;
  }
  .oci-faixa { grid-template-columns: minmax(84px, auto) minmax(0, 1fr) auto; gap: 9px; }
  .oci-secao__resumo { display: none; }
  .oci-filtros { gap: 10px; }
  .oci-filtro select, .oci-filtro input { min-width: 0; width: 100%; }
  /* O multi-select também: sem isto o `min-width: 190px` do encaixe estoura a
     tela estreita e o botão sai cortado na borda direita. */
  .oci-filtro > div[id^="oci"] { min-width: 0; width: 100%; }
  .oci-filtro { flex: 1 1 140px; min-width: 0; }
  .oci-filtro-datas { flex: 1 1 100%; }
}