/* Contratos — LAYOUT desta tela. Cores, bordas e componentes vêm do tema da Mocka
   (tokens --mocka-*). Duas cores são do app, e não do tema: a pastilha da empresa e a
   cor de cada etapa (0.1.1, mais abaixo). */

.pagina {
  display: flex;
  flex-direction: column;
  gap: var(--mocka-space-4, 16px);
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--mocka-space-4, 16px);
}
/* item de flex não encolhe abaixo do conteúdo: sem isto a tabela larga
   empurra a página inteira no celular (e some a navbar) */
.pagina > *, .dupla > *, .mocka-nav-page { min-width: 0; }

/* Início: cartões de número + dois quadros lado a lado */
.cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--mocka-space-3, 12px);
}
.cartoes .mocka-item { text-align: left; width: 100%; }
.dupla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: var(--mocka-space-3, 12px);
}
.dupla .mocka-scroll { max-height: 360px; }

/* barra de filtros acima das listas */
.barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mocka-space-3, 12px);
}
.barra .busca { flex: 1 1 240px; max-width: 360px; }
.barra .resumo { margin-left: auto; }

/* casca de app (<html data-mocka-page="app">): a appbar e a navbar ficam
   paradas e só a seção rola. Nas páginas de lista, a lista ocupa o resto da
   altura e rola dentro, com o cabeçalho preso; nada de conta com a altura da
   barra (a calc antiga esquecia a barra de título e a página rolava junto) */
.pagina.cheia { height: 100%; box-sizing: border-box; }
/* 0.1.17: as listas das etapas usam a largura toda do monitor (as outras páginas seguem em 1400) */
#etapas-lista { max-width: none; }
/* linhas coloridas (atas a vencer, pagamentos atrasados): tom mais leve que o
   padrão da Mocka, porque aqui são muitas seguidas; a pílula carrega o aviso */
#t-atas, #t-emp, #t-venc, #ficha .mocka-table { --mocka-table-tone-alpha: 8%; }
.pagina.cheia > .lista { flex: 1 1 0; min-height: 240px; }

.mocka-table td.orgao { max-width: 340px; white-space: normal; }
.mocka-table .fraco { color: var(--mocka-text-faint); }
.mocka-table.compacta td.orgao { max-width: 220px; }
.estrela { color: var(--mocka-text-faint); margin-left: 2px; }

/* barra de faturamento dentro da célula */
.fat { display: inline-flex; align-items: center; gap: var(--mocka-space-2, 8px); }
.fat .mocka-progress { width: 64px; }
.fat span { min-width: 3.2em; text-align: right; }
.mocka-table .curto { display: inline-block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* detalhe expandido de uma linha */
.detalhe {
  display: flex;
  flex-direction: column;
  gap: var(--mocka-space-3, 12px);
  padding: var(--mocka-space-2, 8px) var(--mocka-space-2, 8px) var(--mocka-space-3, 12px);
  white-space: normal;
}
.campos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: var(--mocka-space-2, 8px) var(--mocka-space-4, 16px);
  margin: 0;
}
.campos div { min-width: 0; }
.campos dt { color: var(--mocka-text-faint); font-size: var(--mocka-small-size, 12px); }
.campos dd { margin: 0; overflow-wrap: anywhere; }
.detalhe .obs { margin: 0; color: var(--mocka-text-soft); }
.detalhe .acoes { display: flex; flex-wrap: wrap; gap: var(--mocka-space-2, 8px); }
.detalhe .mocka-table { font-size: var(--mocka-small-size, 12px); }

/* formulário dentro da folha "Cadastrar ata" */
.form-ata { display: flex; flex-direction: column; gap: var(--mocka-space-3, 12px); }
.form-ata .linha { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mocka-space-3, 12px); }
.form-ata label.rotulo { display: flex; flex-direction: column; gap: 4px; color: var(--mocka-text-soft); font-size: var(--mocka-small-size, 12px); }
.form-ata .mocka-input, .form-ata .mocka-select { width: 100%; }

.pagina[hidden] { display: none; }
/* ficha: resumo da linha da lista no topo */
.resumo-ata .campos { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--mocka-space-3, 12px) var(--mocka-space-4, 16px); }
.resumo-ata dd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 22px; }
/* Dados gerenciais: quadros (não clicáveis) e a linha de total do mês a mês */
.mocka-card-body > .cartoes { margin: 0; }
.mocka-table tr.total td { font-weight: 600; border-top: 2px solid var(--mocka-line); }

/* pastilha da empresa = cor de MARCA, a mesma do Painel (PALETA_EMPRESA, escolha do
   usuário em 19/08/2026: "TCJM = preto no laranja como o ícone; VWM = branco no
   0a5af6"). Não é cor de tema: a pastilha traz o fundo dela, opaco, e se lê igual
   no claro e no escuro. */
.mocka-pill.empresa[data-empresa="TCJM"] { --_bg: #FF9900; --_fg: #0A0A0A; }
.mocka-pill.empresa[data-empresa="VWM"]  { --_bg: #0A5AF6; --_fg: #FFFFFF; }
.mocka-pill.empresa[data-empresa="MEGMED"] { --_bg: #FFFFFF; --_fg: #162E42; box-shadow: inset 0 0 0 1px #162E42; }
.dica { margin: 0; color: var(--mocka-text-faint); font-size: var(--mocka-small-size, 12px); }

/* célula corrigida à mão: um filete na cor de aviso, sem mudar o texto */
.mocka-table td.corrigido { box-shadow: inset 3px 0 0 var(--mocka-warn); }

/* ficha da ata */
.aba { display: flex; flex-direction: column; gap: var(--mocka-space-4, 16px); padding: var(--mocka-space-4, 16px); }
.campo > .mocka-button--link { align-self: flex-start; }
/* 0.1.25: grade FIXA de 12 colunas, com largura máxima — o campo não muda de lugar nem estica
   com o tamanho da tela. Três faixas: larga (12), média (6, até 1000px) e celular (1). */
.campos-form {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--mocka-space-3, 12px) var(--mocka-space-4, 16px);
  max-width: 1180px; align-items: start;
}
.campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; grid-column: span var(--s, 3); }
.campos-grupo {
  grid-column: 1 / -1; margin: 6px 0 -4px; padding-bottom: 4px;
  font-size: var(--mocka-caption-size, 11px); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--et-tinta, var(--mocka-text-soft)); border-bottom: 1px solid var(--et-linha, var(--mocka-border));
}
.campos-grupo:first-child { margin-top: 0; }
.campo-calc {
  display: flex; align-items: center; justify-content: flex-end; min-height: 32px; padding: 0 10px;
  border: 1px dashed var(--mocka-border); border-radius: var(--mocka-radius, 6px);
  font-variant-numeric: tabular-nums; color: var(--mocka-text);
}
.campo input[type="number"] { text-align: right; }
@media (max-width: 1000px) {
  .campos-form { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .campo { grid-column: span var(--sm, 3); }
}
@media (max-width: 600px) {
  .campos-form { grid-template-columns: 1fr; }
  .campo { grid-column: 1 / -1; }
}
.campo-rotulo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 22px; color: var(--mocka-text-soft); font-size: var(--mocka-small-size, 12px); }
.campo .mocka-input, .campo .mocka-select { width: 100%; }
.campo .fraco { font-size: var(--mocka-small-size, 12px); }
.log { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }

/* histórico: linha do tempo à esquerda, contatos e notas do órgão à direita */
.hist-grade { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--mocka-space-4, 16px); align-items: start; }
.hist-col { display: flex; flex-direction: column; gap: var(--mocka-space-4, 16px); min-width: 0; }
.linha-tempo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--mocka-space-3, 12px); }
.evento { padding-left: var(--mocka-space-3, 12px); border-left: 2px solid var(--mocka-line); }
.evento-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.evento-texto { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.evento .fraco { margin: 2px 0 0; }
.contatos { list-style: none; margin: 0 0 var(--mocka-space-3, 12px); padding: 0; display: flex; flex-direction: column; gap: var(--mocka-space-3, 12px); }
.contato { display: flex; flex-direction: column; gap: 4px; padding-bottom: var(--mocka-space-3, 12px); border-bottom: 1px solid var(--mocka-line); }
.contato-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.contato .acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.nota-orgao { width: 100%; height: auto; }
.form-ata .acoes { display: flex; justify-content: flex-end; }

/* arquivos da pasta do processo */
.arq-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--mocka-space-3, 12px); align-items: start; }
.arquivos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.arquivo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--mocka-space-2, 8px); }
.arq-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* nome clicável: o botão-link da Mocka centraliza; na lista, alinha à esquerda e corta no fim */
.arquivo button.arq-nome { display: block; min-width: 0; max-width: 100%; text-align: left; justify-self: start; }
.soltar {
  display: flex; align-items: center; gap: var(--mocka-space-3, 12px);
  margin-top: var(--mocka-space-2, 8px); padding: var(--mocka-space-4, 16px);
  border: 2px dashed var(--mocka-line); border-radius: var(--mocka-radius-medium, 8px);
  color: var(--mocka-text-soft);
}
.soltar.sobre { border-color: var(--mocka-accent); color: var(--mocka-text); }
.mocka-notice code, .obs code { overflow-wrap: anywhere; }

/* ---------- 0.1.1: cada etapa tem a sua cor ----------
   Cor de IDENTIDADE da etapa (como a pastilha da empresa): fixa, igual em todos os temas.
   Fora do vermelho e do amarelo, que continuam sendo só aviso (atrasado, vence logo).
   --et é a cor cheia; fundo e tinta saem dela misturada com o tema, e por isso se leem
   no claro e no escuro. Quem leva data-et="n" ganha as três. */
[data-et="1"] { --et: #7C4DEB; }  /* violeta: em homologação */
[data-et="2"] { --et: #2F6FE4; }  /* azul: ativos */
[data-et="3"] { --et: #0891B2; }  /* ciano: aguardando compra */
[data-et="4"] { --et: #6B8A0F; }  /* oliva: aguardando entrega */
[data-et="5"] { --et: #D9650A; }  /* laranja: cotação de frete */
[data-et="6"] { --et: #C9358F; }  /* rosa: faturados em trânsito */
[data-et="7"] { --et: #A0623A; }  /* marrom: entregues e não recebidos */
[data-et="8"] { --et: #2A8F52; }  /* verde: finalizados */
[data-et="nc"] { --et: #A3263F; } /* bordô: NC, não conformidade (fora do caminho) */
[data-et="x"] { --et: #7D838C; }  /* cinza: inativos */
[data-et] {
  --et-fundo: color-mix(in srgb, var(--et) 13%, var(--mocka-surface));
  --et-fundo-2: color-mix(in srgb, var(--et) 24%, var(--mocka-surface));
  --et-tinta: color-mix(in srgb, var(--et) 68%, var(--mocka-text));
  --et-linha: color-mix(in srgb, var(--et) 45%, var(--mocka-line));
}
.mocka-pill[data-et] { --_bg: var(--et-fundo-2); --_fg: var(--et-tinta); }

/* o número da etapa, numa bola da cor dela */
.etapa-num {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--et, var(--mocka-muted)); color: #fff;
  font-weight: 700; font-size: var(--mocka-small-size, 12px); line-height: 1;
}

/* ---------- Etapas: uma ABA por etapa ---------- */
.etapas-abas { flex: 1 1 0; }
.etapas-abas > .mocka-tabs-bar { gap: 3px; padding-left: 0; }
.etapa-tab {
  /* 0.1.17: o NÚMERO grande à esquerda, centrado na altura; à direita o nome inteiro (pode
     quebrar em mais de uma linha) e, embaixo, a quantidade entre parênteses. Mesma largura. */
  flex: 1 1 0; min-width: 0; justify-content: center; align-items: center; gap: 8px;
  height: auto; padding: 6px 6px 7px; position: relative;
  border-top-width: 3px;
  color: var(--mocka-text-soft);
  background: var(--et-fundo);
  transition: background-color 150ms, color 150ms, transform 120ms;
}
.etapa-tab:hover { background: var(--et-fundo-2); color: var(--mocka-text); }
.etapa-tab:not([aria-selected="true"]):hover { transform: translateY(-2px); }
.etapa-tab[aria-selected="true"] {
  --_bg: var(--et-fundo);
  --_bd: var(--et-linha);
  border-top-color: var(--et);
  color: var(--et-tinta);
}
.etapa-tab.vazia:not([aria-selected="true"]) { opacity: 0.55; }
.etapa-tab > .etapa-num { width: 32px; height: 32px; font-size: 17px; }
.etapa-tab-txt { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; line-height: 1.15; }
.etapa-tab-nome { white-space: normal; overflow-wrap: anywhere; font-size: 13px; font-weight: 600; }

.etapa-tab > .etapa-ponto { position: absolute; top: 5px; right: 6px; }
.etapa-tab .mocka-badge { border-color: var(--et-linha); color: var(--et-tinta); padding: 1px 7px; }
.etapa-ponto { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--mocka-warn); }
.etapa-ponto[data-tone="danger"] { background: var(--mocka-danger); }

/* o painel da aba: faixa na cor da etapa (o que é, o que entra, o que sai, quanto tem) */
.etapa-painel { --_bd: var(--et-linha); min-height: 0; }
.etapa-cab {
  display: flex; align-items: center; gap: var(--mocka-space-3, 12px);
  padding: var(--mocka-space-3, 12px) var(--mocka-space-4, 16px);
  background: var(--et-fundo);
  border-bottom: 1px solid var(--et-linha);
  border-radius: calc(var(--mocka-tabs-panel-radius, var(--mocka-radius-large, 9px)) - 1px) calc(var(--mocka-tabs-panel-radius, var(--mocka-radius-large, 9px)) - 1px) 0 0;
  transition: background-color 200ms;
}
.etapa-icone {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--et); color: #fff; --mocka-icon-size: 22px;
}
.etapa-cab-texto { flex: 1 1 auto; min-width: 0; }
.etapa-cab .mocka-heading { margin: 0; font-size: 20px; line-height: 1.2; color: var(--et-tinta); }
.etapa-req { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; color: var(--mocka-text-soft); font-size: var(--mocka-small-size, 12px); }
.etapa-req .mocka-icon { --mocka-icon-size: 14px; color: var(--mocka-text-faint); }
.etapa-nums { flex: none; display: flex; align-items: center; gap: var(--mocka-space-4, 16px); }
.etapa-nums .n { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.etapa-nums .n strong { font-size: 20px; color: var(--et-tinta); font-variant-numeric: tabular-nums; }
.etapa-nums .n span { color: var(--mocka-text-faint); font-size: var(--mocka-caption-size, 11px); }
.etapa-corpo {
  flex: 1 1 0; min-height: 0; display: flex; flex-direction: column;
  gap: var(--mocka-space-3, 12px); padding: var(--mocka-space-3, 12px);
}

/* listas por etapa: uma tabela por etapa, só a da etapa escolhida aparece */
.listas { display: flex; flex-direction: column; flex: 1 1 0; min-height: 240px; }
.listas > .lista { flex: 1 1 0; min-height: 0; animation: lista-entra 180ms ease-out; }
.listas > .lista[hidden] { display: none; }
.listas .mocka-table { --mocka-table-tone-alpha: 8%; }
@keyframes lista-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .listas > .lista { animation: none; } .etapa-tab, .passo { transition: none; } }

/* ---------- 0.1.3: células de DUAS LINHAS e o campo que se corrige na lista ---------- */
.listas .mocka-table td { vertical-align: middle; }
.l1, .l2 { min-height: 18px; overflow: hidden; text-overflow: ellipsis; }
.l1 { font-weight: 500; }
.l2 { margin-top: 2px; color: var(--mocka-text-soft); font-size: var(--mocka-small-size, 12px); }
td.orgao .l1 { white-space: normal; }
/* dinheiro nunca é cortado com reticências: a coluna tem largura para o valor inteiro */
.mocka-num .l1, .mocka-num .l2 { overflow: visible; text-overflow: clip; white-space: nowrap; }
.ed { cursor: text; border-radius: 4px; padding: 0 2px; margin: 0 -2px; border-bottom: 1px dashed transparent; }
.ed:hover { border-bottom-color: var(--mocka-text-faint); background: var(--mocka-surface-2); }
.ed.vazio { color: var(--mocka-text-faint); font-style: italic; font-weight: 400; opacity: 0.75; }
.ed.corrigido { box-shadow: inset 0 -2px 0 var(--mocka-warn); }
.ed.editando { display: inline-block; min-width: 90px; max-width: 100%; border-bottom-color: transparent; background: none; }
.ed-input {
  font: inherit; color: var(--mocka-text); width: 100%; box-sizing: border-box; height: 22px; padding: 0 4px;
  background: var(--mocka-surface); border: 1px solid var(--mocka-accent); border-radius: 4px; outline: none;
}
/* ---------- ações da linha: GRADE fixa de ícones (o texto só aparece na dica) ----------
   Sete casas, sempre na mesma ordem e do mesmo tamanho, em todas as etapas:
   detalhes · ficha · histórico · arquivos · voltar/encerrar · inativar · avançar. Casa sem ação fica vazia. */
.acoes-grade { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 26px; gap: 2px; vertical-align: middle; }
.mocka-button.ac {
  position: relative;
  width: 26px; height: 26px; min-width: 0; padding: 0;
  border-radius: var(--mocka-radius-small, 6px);
  color: var(--mocka-text-soft);
  --mocka-button-icon-size: 16px;
}
.mocka-button.ac .mocka-icon { --mocka-icon-size: 16px; transition: transform 150ms; }
.ac-vazia { width: 26px; height: 26px; }
/* avançar: cheio, na cor da etapa PARA ONDE vai */
.mocka-button.ac.ac-vai { --_bg: var(--et); --_bd: var(--et); color: #fff; }
.mocka-button.ac.ac-vai:hover { --_bg: var(--et); color: #fff; filter: brightness(1.12); transform: scale(1.08); }
.mocka-button.ac.ac-sai:hover { color: var(--mocka-danger); }
/* tem histórico registrado: um ponto no canto */
.ac.tem::after {
  content: ""; position: absolute; inset: 3px 3px auto auto; width: 6px; height: 6px; z-index: 1; border: 0; filter: none;
  border-radius: 50%; background: var(--mocka-accent); display: block;
}
/* a seta dos detalhes vira quando a linha está aberta; a seta da Mocka sai (é a mesma ação) */
tr[aria-expanded="true"] .ac[data-acao="detalhe"] .mocka-icon { transform: rotate(180deg); }
tr[aria-expanded="true"] .ac[data-acao="detalhe"] { color: var(--mocka-text); --_bg: var(--mocka-surface-2); }
.listas .mocka-table-expander { display: none; }
.listas .mocka-table-cell--expandable { padding-left: 8px !important; }
.mocka-button--primary[data-et] { --_bg: var(--et); --_bd: var(--et); color: #fff; box-shadow: none; }

/* legenda dos ícones, ao lado da busca */
.legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; color: var(--mocka-text-faint); font-size: var(--mocka-caption-size, 11px); }
.legenda span { display: inline-flex; align-items: center; gap: 4px; }
.legenda .mocka-icon { --mocka-icon-size: 13px; }

/* ---------- Início: o fluxo das 8 etapas (setas) ---------- */
.fluxo { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); }
.passo {
  appearance: none; border: 0; background: none; padding: 0; margin: 0; font: inherit; color: inherit;
  display: flex; flex-direction: column; gap: 6px; min-width: 0; text-align: left; cursor: pointer;
  transition: transform 120ms;
}
.passo:hover { transform: translateY(-2px); }
.passo:focus-visible { outline: var(--mocka-focus-ring, 2px) solid var(--mocka-accent); outline-offset: 2px; }
.passo-seta {
  display: flex; align-items: center; gap: 6px; height: 36px;
  padding: 0 16px 0 22px; margin-right: -8px;
  background: var(--et); color: #fff; font-weight: 700; white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%);
  --mocka-icon-size: 16px;
}
.passo:first-child .passo-seta {
  padding-left: 12px; border-radius: 8px 0 0 8px;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
}
.passo:hover .passo-seta { filter: brightness(1.1); }
.passo-seta .nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.passo-info { display: flex; flex-direction: column; gap: 2px; padding: 0 10px 0 12px; min-width: 0; }
.passo-qtd { color: var(--mocka-text-soft); font-size: var(--mocka-small-size, 12px); }
.passo-qtd strong { font-size: 20px; color: var(--et-tinta); margin-right: 2px; }
.passo-valor { color: var(--mocka-text-faint); font-size: var(--mocka-small-size, 12px); }
.passo-alerta { min-height: 18px; }
.passo-alerta .mocka-pill { white-space: normal; height: auto; max-width: 100%; }

/* Gerencial: o quadro de cada etapa leva a cor dela */
.mocka-card[data-et] { border-left: 4px solid var(--et); }

/* detalhe do empenho: o caminho pelas etapas 3–8 */
.etapas-lt { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.etapa-passo { display: grid; grid-template-columns: 22px 1fr; gap: var(--mocka-space-2, 8px); align-items: start; }
.etapa-bola {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; font-size: 11px; font-weight: 700;
  border: 2px solid var(--et); color: var(--et-tinta); box-sizing: border-box;
}
.etapa-passo[data-estado="feita"] .etapa-bola { background: var(--et); color: #fff; }
.etapa-passo[data-estado="atual"] .etapa-bola { background: var(--et-fundo-2); box-shadow: 0 0 0 3px var(--et-fundo-2); }
.etapa-passo[data-estado="falta"] { color: var(--mocka-text-faint); }
.etapa-passo[data-estado="falta"] .etapa-bola { border-color: var(--mocka-line); color: var(--mocka-text-faint); }
.provas { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 2px; font-size: var(--mocka-small-size, 12px); }

/* ---------- 0.1.2: a ficha mora DENTRO do painel da aba ----------
   As abas das etapas ficam em cima; a faixa colorida vira o cabeçalho do contrato; embaixo,
   a trilha 1 → 8, o resumo e as abas da ficha. Só o corpo rola. */
.etapa-painel.com-ficha > .etapa-cab:not(.ficha-cab), .etapa-painel.com-ficha > .etapa-corpo { display: none; }
.ficha { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.ficha[hidden] { display: none; }
.ficha-cab #ficha-voltar { flex: none; color: var(--et-tinta); }
.ficha-corpo {
  flex: 1 1 0; min-height: 0; overflow: auto;
  display: flex; flex-direction: column; gap: var(--mocka-space-3, 12px);
  padding: var(--mocka-space-3, 12px);
  animation: lista-entra 180ms ease-out;
}
.ficha-corpo > * { flex: none; }
.ficha-corpo > .mocka-tabs { flex: none; }
.aba-topo { display: flex; align-items: center; gap: var(--mocka-space-2, 8px); }

/* a trilha: as 8 etapas em linha; cheia = já passou ou está; com número = empenhos do contrato lá */
.trilha { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
.trilha-passo {
  appearance: none; font: inherit; cursor: pointer; min-width: 0;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 8px;
  border: 1px solid var(--mocka-line); border-radius: 999px;
  background: transparent; color: var(--mocka-text-faint);
  font-size: var(--mocka-small-size, 12px); font-weight: 600;
  transition: background-color 150ms, transform 120ms;
}
.trilha-passo:hover { transform: translateY(-1px); background: var(--et-fundo); }
.trilha-passo:focus-visible { outline: var(--mocka-focus-ring, 2px) solid var(--mocka-accent); outline-offset: 2px; }
.trilha-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trilha-passo[data-estado="falta"] .etapa-num { background: var(--mocka-muted); opacity: 0.6; }
.trilha-passo:not([data-estado="falta"]) { background: var(--et-fundo); border-color: var(--et-linha); color: var(--et-tinta); }
.trilha-passo[data-estado="atual"], .trilha-passo[aria-current="step"] { background: var(--et-fundo-2); border-color: var(--et); box-shadow: 0 0 0 2px var(--et-fundo-2); }
.trilha-passo .mocka-badge { font-size: var(--mocka-caption-size, 11px); padding: 0 6px; border-radius: 999px; border: 1px solid var(--et-linha); background: var(--mocka-surface); color: var(--et-tinta); }

/* empenhos da ficha: linha clicável; a que está em foco leva a cor da etapa dela */
.emps-ficha tbody tr { cursor: pointer; }
.emps-ficha tr.em-foco > td { background: var(--et-fundo); }
.emps-ficha tr.em-foco > td:first-child { box-shadow: inset 4px 0 0 var(--et); }

/* a linha que acabou de chegar à etapa (ou de onde se voltou da ficha) pisca na cor da etapa */
tr.chegou > td { animation: chegou 1800ms ease-out; }
@keyframes chegou { 0%, 35% { background-color: var(--et-fundo-2); box-shadow: inset 0 2px 0 var(--et), inset 0 -2px 0 var(--et); } 100% { box-shadow: inset 0 0 0 transparent; } }

/* ficha: as ações da etapa ficam no cabeçalho, na mesma grade de ícones */
.ficha-acoes { margin-left: auto; flex: none; }
.ficha-acoes .acoes-grade { grid-auto-columns: 34px; gap: 4px; }
.ficha-acoes .mocka-button.ac, .ficha-acoes .ac-vazia { width: 34px; height: 34px; }
.ficha-acoes .ac-vazia { display: none; }

/* a porta (folha "Avançar") */
.porta-de { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.porta-de .mocka-icon { --mocka-icon-size: 14px; color: var(--mocka-text-faint); }
.campos-porta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mocka-space-3, 12px); }
.check-porta { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
.form-ata .acoes { gap: var(--mocka-space-2, 8px); }

@media (max-width: 1280px) { .legenda { display: none; } }
@media (max-width: 700px) {
  /* celular: só a aba escolhida mostra o nome; as outras, número e quantidade */
  .etapa-tab:not([aria-selected="true"]) .etapa-tab-nome { display: none; }
  .etapa-tab > .etapa-num { width: 24px; height: 24px; font-size: 13px; }
}

@media (max-width: 900px) {
  .hist-grade { grid-template-columns: 1fr; }
  .etapa-cab { flex-wrap: wrap; }
  .etapa-nums { width: 100%; justify-content: flex-start; }
  .etapa-nums .n { align-items: flex-start; }
  .trilha-passo:not([aria-current]) .trilha-nome { display: none; }
}

@media (max-width: 600px) {
  .pagina { padding: var(--mocka-space-3, 12px); }
  .dupla { grid-template-columns: 1fr; }
  .form-ata .linha { grid-template-columns: 1fr; }
  /* celular: a seção rola inteira, a lista não tem rolagem própria */
  .pagina.cheia { height: auto; }
  .pagina.cheia > .lista { flex: none; min-height: 0; }
  .etapas-abas, .etapa-corpo, .listas, .listas > .lista { flex: none; min-height: 0; }
  .ficha, .ficha-corpo { flex: none; min-height: 0; overflow: visible; }
  .trilha { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* celular: o fluxo vira uma faixa que rola de lado */
  .fluxo { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 150px; overflow-x: auto; padding-bottom: 4px; }
  .campos-porta { grid-template-columns: 1fr; }
}

/* ---------- a ESTRELA de notificação (1ª coluna) e o filtro ----------
   0.1.21: ligada, a estrela é VERMELHA e pulsa de leve (pedido do usuário; era laranja TCJM). */
.mocka-button.ac.estrela { color: var(--mocka-text-faint); opacity: 0.55; }
.mocka-button.ac.estrela:hover { opacity: 1; color: var(--mocka-danger); }
.mocka-button.ac.estrela.ligada { opacity: 1; color: var(--mocka-danger); }
.mocka-button.ac.estrela, .mocka-button.ac.estrela:hover { --_bg: transparent; --_bd: transparent; background: transparent; border-color: transparent; box-shadow: none; }   /* só a estrela, sem quadrado */
.mocka-button.ac.estrela.ligada svg { fill: var(--mocka-danger); }
.mocka-button.ac.estrela.ligada .mocka-icon { animation: estrela-pulsa 1.8s ease-in-out infinite; transform-origin: center; }
@keyframes estrela-pulsa { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.22); opacity: 0.7; } }
@media (prefers-reduced-motion: reduce) { .mocka-button.ac.estrela.ligada .mocka-icon { animation: none; } }
.ficha-acoes .estrela .mocka-icon { --mocka-icon-size: 20px; }
.listas .mocka-table td.col-estrela { text-align: center; padding-left: 4px; padding-right: 4px; }
.notif-det .mocka-icon { --mocka-icon-size: 14px; color: var(--mocka-danger); vertical-align: -2px; }
.notif-det .mocka-icon svg { fill: var(--mocka-danger); }
/* 0.2.0: a entrada do PWA (login) ocupa a tela inteira; o estado ("Lendo os contratos…") no lugar do formulário */
#entrada { position: fixed; inset: 0; z-index: 5; background: var(--mocka-bg); }
#entrada-form { display: flex; flex-direction: column; gap: var(--mocka-space-3, 12px); }
#entrada-form[hidden] { display: none; }
.entrada-estado { text-align: center; color: var(--mocka-text-soft); margin: var(--mocka-space-4, 16px) 0; }
/* 0.2.4: "BANCO DE DADOS PARA TESTE", bem no meio da barra de título, até a inauguração (v 1.0).
   Vermelho com listras de obra, letra branca: de propósito não combina com o tema. */
.aviso-teste {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3;
  padding: 6px 18px; border-radius: 6px; white-space: nowrap; pointer-events: auto;
  font-weight: 800; font-size: 15px; letter-spacing: .08em; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
  background: repeating-linear-gradient(-45deg, #d40000 0 14px, #a80000 14px 28px);
  border: 2px solid #fff; box-shadow: 0 0 0 2px #d40000, 0 2px 8px rgba(0, 0, 0, .3);
}
.aviso-teste--login { position: static; transform: none; text-align: center; margin: 0 0 var(--mocka-space-3, 12px); font-size: 13px; }
.aviso-teste[hidden] { display: none; }
@media (max-width: 900px) { .aviso-teste { font-size: 11px; padding: 4px 8px; letter-spacing: .04em; } }
@media (max-width: 620px) { .mocka-appbar > .aviso-teste { top: auto; bottom: -2px; transform: translate(-50%, 50%); font-size: 10px; } }
.botao-novo { flex: none; gap: 5px; }   /* 0.1.44: cadastrar contrato sem pregão */
.botao-novo .mocka-icon { --mocka-icon-size: 14px; }
.filtro-notif { flex: none; gap: 5px; }
.filtro-notif .mocka-icon { --mocka-icon-size: 14px; color: var(--mocka-danger); }
.filtro-notif .mocka-icon svg { fill: var(--mocka-danger); }
.filtro-notif[aria-pressed="true"] { background: var(--mocka-danger); border-color: var(--mocka-danger); color: #fff; }
.filtro-notif[aria-pressed="true"] .mocka-icon { color: #fff; }
.filtro-notif[aria-pressed="true"] .mocka-icon svg { fill: #fff; }

/* ---------- 0.1.27: a marca TCJM por cima de qualquer tema da Mocka ----------
   Só enfeite, sem mexer em medida nem em variável da Mocka: um filete laranja no alto da barra
   do app (sombra interna: não ocupa espaço). */
.mocka-appbar { box-shadow: inset 0 3px 0 #FF9900; }

/* 0.1.31: quadro do Gerencial que gera a planilha de conferência */
.mocka-card.conferivel { cursor: pointer; transition: transform 120ms, box-shadow 120ms; }
.mocka-card.conferivel:hover { transform: translateY(-1px); box-shadow: 0 0 0 2px var(--mocka-accent); }
.mocka-card.conferivel:focus-visible { outline: var(--mocka-focus-ring, 2px) solid var(--mocka-accent); outline-offset: 2px; }

/* ---------- 0.1.33: Configurações (engrenagem à direita no menu) ---------- */
.mocka-navbar > .nav-direita { margin-left: auto; }
.cfg-quem { display: flex; align-items: center; gap: 8px; color: var(--mocka-text-soft); font-size: var(--mocka-small-size, 12px); }
.cfg-quem .mocka-select { min-width: 190px; }
#pg-config .aba-topo { justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cfg-tabela td { vertical-align: middle; }
.cfg-email { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--mocka-space-4, 16px); align-items: start; max-width: 1400px; }
.cfg-vars { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cfg-vars .fraco { flex: 1 0 100%; font-size: var(--mocka-small-size, 12px); }
.cfg-vars button.mocka-pill { cursor: pointer; font-family: var(--mocka-mono-font, monospace); }
.cfg-assunto { font-weight: 700; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--mocka-line, var(--mocka-border)); }
.cfg-texto { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--mocka-ui-font, inherit); font-size: var(--mocka-base-size, 13px); line-height: 1.5; }
@media (max-width: 900px) { .cfg-email { grid-template-columns: 1fr; } }

/* 0.1.37: % da aquisição sobre o valor, ao lado do valor de aquisição */
.valor-pct { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.valor-pct .vp-nums { min-width: 0; }
.pct-aq { flex: none; width: 36px; text-align: right; color: var(--mocka-text-soft); font-size: var(--mocka-base-size, 13px); font-variant-numeric: tabular-nums; }

/* 0.1.40: NC resolvida, na aba NC como histórico — fundo esverdeado, texto apagado e a descrição riscada */
.listas .mocka-table tr.nc-resolvida > td { background: color-mix(in srgb, var(--mocka-ok) 9%, var(--mocka-surface)); color: var(--mocka-text-faint); }
.listas .mocka-table tr.nc-resolvida > td:first-child { box-shadow: inset 4px 0 0 var(--mocka-ok); }
.listas .mocka-table tr.nc-resolvida .l1 { font-weight: 400; }
.listas .mocka-table tr.nc-resolvida > td:last-child .l1 { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--mocka-ok) 70%, transparent); }
.listas .mocka-table tr.nc-resolvida .mocka-pill.empresa { opacity: 0.6; }

/* 0.1.41: a data do contrato ao lado do número, mais leve */
.data-contrato { font-weight: 400; color: var(--mocka-text-soft); margin-left: 6px; }
.data-contrato::before { content: "· "; color: var(--mocka-text-faint); }