/* ============================================================
   Painel de Reuniões — Mec Autopartes
   Paleta validada: superfícies, tinta e cores de status.
   ============================================================ */

/* Mesma paleta e tipografia dos procedimentos MEC (public/procedimentos-html/):
   Oswald para títulos e números grandes, IBM Plex Mono para rótulos/dados/
   códigos, laranja da marca como acento. Ver fontes abaixo. */
:root {
  color-scheme: light;
  --plano:        #f3efe6;
  --superficie:   #ffffff;
  --superficie-2: #ece4d2;
  --tinta:        #1b1712;
  --tinta-2:      #4a4136;
  --tinta-3:      #8c8070;
  --grade:        #e6ddc9;
  --linha:        #ddd2bc;
  --borda:        rgba(27, 23, 18, 0.12);
  --acento:       #f26522;
  --acento-fraco: #fce4d5;

  --bom:     #2f8f46;
  --atencao: #c98a1f;
  --serio:   #a15a2e;
  --critico: #c1392b;
  --neutro:  #8c8070;

  /* Paleta de DADOS — separada da paleta de status de propósito: verde/vermelho
     ali significam "bom/crítico", e uma série de gráfico não pode herdar esse
     sentido. Ordem categórica e rampa ordinal validadas para CVD (protan,
     deutan, tritan) e contraste, nos dois temas. */
  --dado-1: #2a78d6;  /* CMV               */
  --dado-2: #1baf7a;  /* Folha e encargos  */
  --dado-3: #4a3aa7;  /* Fixo operacional  */
  --dado-4: #eda100;  /* Imposto do mês    */
  --dado-pos: #2a78d6;
  --dado-neg: #e34948;
  --conf-1: #104281;  /* livro     — mais confiável  */
  --conf-2: #256abf;  /* rateio                      */
  --conf-3: #3987e5;  /* estimado                    */
  --conf-4: #86b6ef;  /* arbitrado — menos confiável */

  --raio: 6px;
  --sombra: 0 1px 2px rgba(27, 23, 18, .06), 0 4px 16px rgba(27, 23, 18, .07);
  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-display: 'Oswald', var(--fonte);
  --fonte-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-tema="claro"])) {
    color-scheme: dark;
    --plano:        #14120e;
    --superficie:   #1e1b15;
    --superficie-2: #262019;
    --tinta:        #f3ece0;
    --tinta-2:      #cbbfa9;
    --tinta-3:      #8c8070;
    --grade:        #2c2620;
    --linha:        #362f26;
    --borda:        rgba(243, 236, 224, 0.12);
    --acento:       #ff7a3d;
    --acento-fraco: #3a2418;
    --bom:     #4caf6a;
    --atencao: #e0a83f;
    --serio:   #c9814f;
    --critico: #e05a4c;
    --neutro:  #8c8070;
    --dado-1: #3987e5;
    --dado-2: #199e70;
    --dado-3: #9085e9;
    --dado-4: #c98500;
    --dado-pos: #3987e5;
    --dado-neg: #e66767;
    --conf-1: #184f95;
    --conf-2: #256abf;
    --conf-3: #3987e5;
    --conf-4: #86b6ef;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .35);
  }
}

:root[data-tema="escuro"] {
  color-scheme: dark;
  --plano:        #14120e;
  --superficie:   #1e1b15;
  --superficie-2: #262019;
  --tinta:        #f3ece0;
  --tinta-2:      #cbbfa9;
  --tinta-3:      #8c8070;
  --grade:        #2c2620;
  --linha:        #362f26;
  --borda:        rgba(243, 236, 224, 0.12);
  --acento:       #ff7a3d;
  --acento-fraco: #3a2418;
  --bom:     #4caf6a;
  --atencao: #e0a83f;
  --serio:   #c9814f;
  --critico: #e05a4c;
  --neutro:  #8c8070;
  --dado-1: #3987e5;
  --dado-2: #199e70;
  --dado-3: #9085e9;
  --dado-4: #c98500;
  --dado-pos: #3987e5;
  --dado-neg: #e66767;
  --conf-1: #184f95;
  --conf-2: #256abf;
  --conf-3: #3987e5;
  --conf-4: #86b6ef;
  --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .35);
}

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url('fonts/oswald-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/plexmono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/plexmono-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/plexmono-600.woff2') format('woff2');
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--fonte);
  background: var(--plano);
  color: var(--tinta);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0; font-weight: 600; letter-spacing: 0.005em;
  font-family: var(--fonte-display); text-transform: uppercase;
}
a { color: var(--acento); }

/* Dados e códigos ganham a mono técnica; números grandes ficam tabulares. */
.cod, table.lista th, .etiqueta, .chip, .gantt-rot-cab, .gantt-tick, .gantt-nota,
.proc-meta, .proc-rev, .etapa-ver-meta, .etapa-ver-num, .avatar,
.ata-cab .org, .ata-status, .titulo-bloco, .tile .rotulo, .legenda,
.filtros .contagem, .alternador button, .relatorio-carimbo, .aviso {
  font-family: var(--fonte-mono);
}
.tile .valor { font-family: var(--fonte-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* ------------------------------------------------------------ cabeçalho */

header.topo {
  position: sticky; top: 0; z-index: 40;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
  display: flex; align-items: center; gap: 20px;
  padding: 0 20px; height: 58px;
}

.marca { display: flex; align-items: center; gap: 10px; font-weight: 650; white-space: nowrap; font-family: var(--fonte-display); text-transform: uppercase; letter-spacing: 0.01em; }
.marca .ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--acento); }
.marca small { display: block; font-weight: 400; font-size: 11px; color: var(--tinta-3); line-height: 1; font-family: var(--fonte-mono); text-transform: none; letter-spacing: 0; }

nav.abas { display: flex; gap: 2px; margin-left: 8px; flex: 1; overflow-x: auto; }
nav.abas button {
  border: 0; background: none; font: inherit; font-family: var(--fonte-display); text-transform: uppercase;
  letter-spacing: 0.01em; font-weight: 500; font-size: 13.5px; color: var(--tinta-2);
  padding: 7px 13px; border-radius: 8px; cursor: pointer; white-space: nowrap;
}
nav.abas button:hover { background: var(--superficie-2); color: var(--tinta); }
nav.abas button[aria-current="page"] { background: var(--acento-fraco); color: var(--acento); font-weight: 600; }

.acoes-topo { display: flex; gap: 6px; align-items: center; }

/* ------------------------------------------------------------ botões */

.btn {
  font: inherit; font-size: 14px; cursor: pointer;
  border: 1px solid var(--borda); background: var(--superficie);
  color: var(--tinta); padding: 7px 13px; border-radius: 8px;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn:hover { background: var(--superficie-2); }
.btn.primario { background: var(--acento); border-color: var(--acento); color: #fff; font-weight: 550; }
.btn.primario:hover { filter: brightness(1.08); }
.btn.perigo { color: var(--critico); }
.btn.perigo:hover { background: rgba(208, 59, 59, .09); }
.btn.icone { padding: 7px 9px; }
.btn.pequeno { padding: 4px 9px; font-size: 13px; }
.btn.bom { color: var(--bom); border-color: rgba(12, 163, 12, .35); }
.btn.bom:hover { background: rgba(12, 163, 12, .09); }

/* ------------------------------------------------------------ layout */

main { padding: 22px 20px 80px; max-width: 1400px; margin: 0 auto; }

.cabecalho-secao {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px 16px; flex-wrap: wrap; margin-bottom: 12px;
}
/* Título e subtítulo na mesma linha: em tela de reunião, cada linha de
   cabeçalho é uma linha a menos de tabela. Em telas estreitas o subtítulo
   quebra para baixo sozinho. */
.cabecalho-secao > div:first-child {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.cabecalho-secao h1 { font-size: 19px; }
.cabecalho-secao p { margin: 0; color: var(--tinta-3); font-size: 13px; }

.cartao {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); box-shadow: var(--sombra);
}
.cartao > h3 {
  font-size: 14px; padding: 14px 16px 0; color: var(--tinta);
}
.cartao > h3 + .sub { margin: 2px 16px 0; font-size: 12.5px; color: var(--tinta-3); }

/* ------------------------------------------------------------ painel */

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.tile { padding: 14px 16px 16px; }
.tile .rotulo { font-size: 12.5px; color: var(--tinta-2); display: flex; align-items: center; gap: 6px; }
.tile .valor { font-size: 34px; font-weight: 640; line-height: 1.15; margin-top: 4px; }
.tile .nota { font-size: 12px; color: var(--tinta-3); }

.grade-graficos { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px; }
.grade-graficos .cartao { padding-bottom: 14px; }
/* Entrada dos gráficos. A barra cresce a partir do eixo — que é de onde ela é
   lida — e não do meio nem de fora da tela: o movimento repete o gesto de medir.
   `--eixo` cada SVG declara (o zero muda de lugar entre o gráfico de ranking e o
   de sobra/falta) e `--fila` é o índice da linha, herdado do <g> dela, que
   escalona as barras em vez de estourar todas juntas. O texto entra depois da
   barra: número antes do tamanho vira ruído. */
@keyframes viz-cresce { from { transform: scaleX(0); } }
@keyframes viz-surge  { from { opacity: 0; } }

.anima-viz .viz-marca {
  transform-box: view-box; transform-origin: var(--eixo, 0px) 0;
  animation: viz-cresce .5s cubic-bezier(.22, .75, .25, 1) backwards;
  animation-delay: calc(var(--fila, 0) * 55ms);
}
.anima-viz .viz text, .anima-viz .viz .viz-conector {
  animation: viz-surge .3s ease-out backwards;
  animation-delay: calc(var(--fila, 0) * 55ms + 60ms);
}
/* O que pertence à ponta da barra espera a barra chegar. Sem isto o "−87 mil"
   acende parado no fim do trajeto e a barra vai atrás dele, como se o número
   fosse alvo e não resultado. */
.anima-viz .viz .viz-valor, .anima-viz .viz .viz-pct, .anima-viz .viz .viz-conector {
  animation-delay: calc(var(--fila, 0) * 55ms + 380ms);
}
/* Quem pediu menos movimento no sistema recebe o gráfico pronto, sem discussão. */
@media (prefers-reduced-motion: reduce) {
  .anima-viz .viz-marca, .anima-viz .viz text,
  .anima-viz .viz .viz-conector, .anima-viz .viz .viz-valor, .anima-viz .viz .viz-pct { animation: none; }
}

.viz { padding: 10px 16px 0; overflow-x: auto; }
.viz svg { width: 100%; height: auto; display: block; overflow: visible; min-width: 380px; }
.viz text { font-family: var(--fonte); }
.viz text.viz-valor { font-family: var(--fonte-mono); }

.legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 4px 16px 0; font-size: 12.5px; color: var(--tinta-2); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* ------------------------------------------------------------ filtros */

.filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.filtros input[type="search"], .filtros select {
  font: inherit; font-size: 14px; padding: 7px 10px; border-radius: 8px;
  border: 1px solid var(--borda); background: var(--superficie); color: var(--tinta);
}
.filtros input[type="search"] { min-width: 230px; flex: 1; max-width: 340px; }
.filtros .contagem { margin-left: auto; font-size: 13px; color: var(--tinta-3); }

.alternador { display: inline-flex; border: 1px solid var(--borda); border-radius: 8px; overflow: hidden; }
.alternador button {
  font: inherit; font-size: 13.5px; border: 0; background: var(--superficie);
  color: var(--tinta-2); padding: 6px 12px; cursor: pointer;
}
.alternador button[aria-pressed="true"] { background: var(--acento-fraco); color: var(--acento); font-weight: 600; }

/* ------------------------------------------------------------ tabela */

/* Rolagem própria da tabela: é o que faz o cabeçalho grudar sem cobrir a
   primeira linha (com overflow-x no envelope, o sticky passa a ser relativo a
   este container — daí `top: 0`, não a altura do cabeçalho da página). */
.envelope-tabela { overflow: auto; border-radius: var(--raio); max-height: calc(100vh - 215px); }
table.lista { width: 100%; border-collapse: collapse; background: var(--superficie); font-size: 14px; }
table.lista th {
  text-align: left; font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--tinta-3); padding: 10px 12px;
  border-bottom: 1px solid var(--linha); white-space: nowrap; background: var(--superficie);
  position: sticky; top: 0; z-index: 5; cursor: pointer; user-select: none;
}
table.lista th:hover { color: var(--tinta); }
table.lista td { padding: 10px 12px; border-bottom: 1px solid var(--grade); vertical-align: top; }
table.lista tbody tr { cursor: pointer; }
table.lista tbody tr:hover { background: var(--superficie-2); }
table.lista td.titulo { font-weight: 550; min-width: 260px; }
table.lista td.titulo small { display: block; font-weight: 400; color: var(--tinta-3); font-size: 12.5px; margin-top: 2px; }
.cod { font-size: 12px; color: var(--tinta-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

.vazio { padding: 40px 16px; text-align: center; color: var(--tinta-3); background: var(--superficie); }

/* ------------------------------------------------------------ etiquetas */

.etiqueta {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: 12.5px; font-weight: 550; padding: 2px 9px 2px 7px;
  border-radius: 999px; border: 1px solid var(--borda); background: var(--superficie-2);
  color: var(--tinta-2);
}
.etiqueta i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.etiqueta.prazo-vencido { color: var(--critico); border-color: rgba(208, 59, 59, .35); }

.chip {
  display: inline-block; font-size: 12.5px; padding: 2px 9px; border-radius: 999px;
  background: var(--superficie-2); color: var(--tinta-2); border: 1px solid var(--borda);
}

.ficha {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 8px;
  padding: 10px 11px; margin-bottom: 8px; cursor: pointer; box-shadow: var(--sombra);
}
.ficha:hover { border-color: var(--acento); }
.ficha .t { font-weight: 550; font-size: 13.5px; }
.ficha .m { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; font-size: 12px; color: var(--tinta-3); }

/* ------------------------------------------------------------ gantt */

.gantt-envelope { padding: 12px 4px 8px; overflow-x: auto; }
.gantt { min-width: 720px; }
.gantt-linha, .gantt-cab {
  display: grid; grid-template-columns: 240px 1fr; align-items: center;
  gap: 12px; padding: 6px 12px; border-bottom: 1px solid var(--grade);
}
.gantt-linha { cursor: pointer; min-height: 44px; }
.gantt-linha:hover { background: var(--superficie-2); }
.gantt-cab { border-bottom: 1px solid var(--linha); }
.gantt-rot {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 13.5px; min-width: 0;
}
.gantt-rot .cod { flex: none; margin-top: 2px; }
.gantt-rot > div { min-width: 0; }
.gantt-titulo {
  display: block; font-weight: 550;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gantt-rot small { display: block; color: var(--tinta-3); font-size: 12px; }
.gantt-rot-cab {
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--tinta-3); font-weight: 600;
}

.gantt-pista {
  position: relative; height: 28px; background: var(--superficie-2);
  border-radius: 6px;
}
.gantt-eixo { background: none; height: 22px; }
.gantt-tick {
  position: absolute; top: 0; height: 100%;
  border-left: 1px dashed var(--grade); padding-left: 4px;
  font-size: 11px; color: var(--tinta-3);
}
.gantt-tick span { position: relative; top: 2px; }
.gantt-hoje {
  position: absolute; top: -4px; bottom: -4px; width: 2px;
  background: var(--acento); border-radius: 1px;
}
.gantt-linha .gantt-pista .gantt-hoje { top: 0; bottom: 0; }
.gantt-cab .gantt-pista::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 1px; background: var(--grade);
}

.gantt-barra {
  position: absolute; top: 4px; bottom: 4px;
  background: var(--cor); border-radius: 4px;
  display: flex; align-items: center; padding: 0 6px;
  font-size: 11.5px; color: #fff; font-weight: 550;
  white-space: nowrap; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
}
.gantt-barra.venceu { background: var(--critico); }
.gantt-barra.concluido { opacity: .55; }
.gantt-barra span { text-shadow: 0 1px 1px rgba(0, 0, 0, .3); }

.gantt-sem-prazo { padding: 14px 12px 6px; border-top: 1px solid var(--linha); margin-top: 8px; }
.gantt-sem-prazo h4 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--tinta-3); font-weight: 600; margin-bottom: 8px;
}
.gantt-sem-prazo-lista {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
}

/* ------------------------------------------------------------ modal */

.fundo {
  position: fixed; inset: 0; background: rgba(11, 11, 11, .45);
  display: flex; justify-content: flex-end; z-index: 60; backdrop-filter: blur(2px);
}
.gaveta {
  background: var(--superficie); width: min(620px, 100%); height: 100%;
  overflow-y: auto; box-shadow: -8px 0 32px rgba(0, 0, 0, .18);
  display: flex; flex-direction: column;
}
.gaveta > header {
  position: sticky; top: 0; background: var(--superficie); z-index: 2;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--borda);
}
.gaveta > header h2 { font-size: 16px; flex: 1; }
.gaveta .corpo { padding: 16px 18px; flex: 1; }
.gaveta > footer {
  position: sticky; bottom: 0; background: var(--superficie);
  border-top: 1px solid var(--borda); padding: 12px 18px;
  display: flex; gap: 8px; align-items: center;
}
.gaveta > footer .esq { margin-right: auto; }

/* ------------------------------------------------------------ formulário */

.campo { margin-bottom: 14px; }
.campo > label { display: block; font-size: 12.5px; font-weight: 600; color: var(--tinta-2); margin-bottom: 5px; }
.campo input[type="text"], .campo input[type="password"], .campo input[type="date"],
.campo input[type="time"], .campo select, .campo textarea {
  width: 100%; font: inherit; font-size: 14px; padding: 8px 10px;
  border: 1px solid var(--linha); border-radius: 8px;
  background: var(--plano); color: var(--tinta);
}
.campo textarea { resize: vertical; min-height: 76px; line-height: 1.55; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: 2px solid var(--acento); outline-offset: -1px; border-color: var(--acento);
}
.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tripla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ajuda { font-size: 12px; color: var(--tinta-3); margin-top: 4px; }

/* ------------------------------------------------------------ atas */

.atas-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: start; }
.lista-atas { display: flex; flex-direction: column; gap: 6px; }
.lista-atas .item-ata {
  text-align: left; font: inherit; cursor: pointer; padding: 10px 12px;
  border: 1px solid var(--borda); background: var(--superficie);
  border-radius: 9px; color: var(--tinta); display: block; width: 100%;
}
.lista-atas .item-ata:hover { border-color: var(--acento); }
.lista-atas .item-ata[aria-current="true"] { background: var(--acento-fraco); border-color: var(--acento); }
.lista-atas .item-ata .d { font-weight: 600; font-size: 14px; }
.lista-atas .item-ata .s { font-size: 12px; color: var(--tinta-3); display: block; }

.ata { padding: clamp(18px, 3vw, 30px); }
.ata-cab { border-bottom: 2px solid var(--tinta); padding-bottom: 14px; margin-bottom: 20px; }
.ata-cab-topo {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; flex-wrap: wrap; margin-bottom: 2px;
}
.ata-cab .org { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); }
.ata-acoes { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ata-status { text-transform: uppercase; letter-spacing: .05em; font-size: 11.5px; }
.ata-status-rascunho { color: var(--tinta-2); }
.ata-status-finalizada { color: var(--bom); border-color: rgba(12, 163, 12, .35); background: rgba(12, 163, 12, .09); }
.ata-status-cancelada { color: var(--critico); border-color: rgba(208, 59, 59, .35); background: rgba(208, 59, 59, .09); text-decoration: line-through; }
.ata-cab:has(.ata-status-cancelada) h2,
.ata-cab:has(.ata-status-cancelada) .meta { opacity: .55; }
.ata-cab h2 { font-size: clamp(19px, 2.2vw, 24px); margin: 4px 0 8px; }
.ata-cab h2 .titulo-ata {
  border: 0; background: none; font: inherit; width: 100%; padding: 0; color: inherit;
  min-width: 0;
}
.ata-cab .meta {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px 18px; font-size: 13.5px; color: var(--tinta-2);
}
.ata-cab .meta span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ata-cab .meta-local { grid-column: span 2; }
.ata-cab .meta-input {
  border: 0; background: none; font: inherit; color: inherit; padding: 0;
  max-width: 100%; min-width: 0;
}
.ata h3.bloco {
  font-size: 12px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--tinta-3); margin: 24px 0 8px; padding-bottom: 5px;
  border-bottom: 1px solid var(--grade);
}
.ata .texto { white-space: pre-wrap; line-height: 1.65; }
.ata .texto:empty::before { content: "—"; color: var(--tinta-3); }

.participantes { display: flex; flex-wrap: wrap; gap: 6px; }
.participantes label {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px;
  border: 1px solid var(--borda); border-radius: 999px; padding: 4px 11px;
  cursor: pointer; background: var(--superficie);
}
.participantes label:has(input:checked) { background: var(--acento-fraco); border-color: var(--acento); color: var(--acento); font-weight: 550; }
.participantes input { accent-color: var(--acento); }

.item-pauta {
  border: 1px solid var(--borda); border-radius: 9px; padding: 12px 14px;
  margin-bottom: 10px; background: var(--superficie);
}
.item-pauta > header { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.item-pauta > header .t { font-weight: 600; flex: 1; }
.item-pauta .grade-item { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.item-pauta .encaminhamento { grid-column: 1 / -1; }

.assinaturas { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 34px 40px; margin-top: 46px; }
.assinatura { border-top: 1px solid var(--tinta-2); padding-top: 6px; font-size: 13px; text-align: center; color: var(--tinta-2); }

/* ------------------------------------------------------------ equipe */

.grade-equipe { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.pessoa { padding: 13px 15px; display: flex; gap: 11px; align-items: flex-start; cursor: pointer; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: var(--acento-fraco); color: var(--acento);
  display: grid; place-items: center; font-weight: 650; font-size: 14px;
}
.pessoa .n { font-weight: 600; font-size: 14px; }
.pessoa .c, .pessoa .u { font-size: 12.5px; color: var(--tinta-3); }

/* ------------------------------------------------------------ aviso */

.aviso {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--tinta); color: var(--plano); padding: 9px 18px;
  border-radius: 999px; font-size: 13.5px; z-index: 90; box-shadow: var(--sombra);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.aviso.ativo { opacity: 1; }

/* ------------------------------------------------- modo apresentação */

body.apresentando { font-size: 17px; }
body.apresentando table.lista { font-size: 15.5px; }
body.apresentando .tile .valor { font-size: 44px; }
body.apresentando .col-oculta-apresentacao { display: none; }
body.apresentando .so-edicao { display: none !important; }
body.apresentando .cabecalho-secao h1 { font-size: 26px; }
body.apresentando .atas-layout { grid-template-columns: 1fr; }

/* --------------------------------------------- exportação e importação */

.acoes-secao { display: flex; gap: 8px; flex-wrap: wrap; }

/* Ações da aba, na barra do topo. A borda separa o que é da aba (Excel, PDF,
   Importar) do que vale para o painel inteiro (Apresentar, Tema, Backup). */
.acoes-vista { display: flex; gap: 8px; }
.acoes-vista:not(:empty) {
  margin-right: 4px; padding-right: 12px; border-right: 1px solid var(--linha);
}

.texto-apoio { font-size: 13.5px; color: var(--tinta-2); line-height: 1.55; margin: 0 0 12px; }
.lista-regras { margin: 0 0 14px; padding-left: 18px; font-size: 13.5px; color: var(--tinta-2); }
.lista-regras li { margin-bottom: 5px; line-height: 1.5; }
.titulo-bloco { font-size: 13px; margin: 18px 0 8px; color: var(--tinta-2); }

.resumo-importacao { display: flex; gap: 10px; margin: 4px 0 16px; }
.tile-mini {
  flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px;
  border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie-2);
  font-size: 12.5px; color: var(--tinta-2);
}
.tile-mini .valor { font-size: 24px; font-weight: 600; color: var(--tinta); font-variant-numeric: tabular-nums; }
.tile-mini.alerta { border-color: var(--atencao); }
.tile-mini.alerta .valor { color: var(--serio); }

.avisos-importacao { font-size: 13px; margin-bottom: 12px; }
.avisos-importacao summary { cursor: pointer; font-weight: 600; color: var(--tinta-2); }
.avisos-importacao ul { margin: 8px 0 0; padding-left: 18px; color: var(--tinta-2); }
.avisos-importacao li { margin-bottom: 4px; line-height: 1.45; }

.tabela-previa { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela-previa th {
  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--tinta-3); padding: 6px 8px; border-bottom: 1px solid var(--linha);
}
.tabela-previa td { padding: 6px 8px; border-bottom: 1px solid var(--grade); vertical-align: top; }

/* ------------------------------------------------------------ relatório */

/* Só existe na hora de imprimir/salvar em PDF: fica fora do fluxo da tela. */
#impressao { display: none; }

.relatorio-topo {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 20px; border-bottom: 2px solid #222; padding-bottom: 8px; margin-bottom: 14px;
}
.relatorio-topo h1 { font-size: 17pt; margin: 0; }
.relatorio-topo p { margin: 3px 0 0; font-size: 9.5pt; color: #444; }
.relatorio-carimbo { text-align: right; font-size: 9.5pt; color: #444; }
.relatorio-carimbo b { display: block; font-size: 11pt; color: #000; }

.relatorio-tabela { width: 100%; border-collapse: collapse; font-size: 9pt; }
.relatorio-tabela th {
  text-align: left; padding: 5px 6px; border-bottom: 1.5px solid #222;
  font-size: 8pt; text-transform: uppercase; letter-spacing: .04em;
}
.relatorio-tabela td { padding: 5px 6px; border-bottom: 1px solid #ccc; vertical-align: top; }
/* Código, status e prazo não podem quebrar no meio: "T-001" virando duas
   linhas custa altura em todas as linhas da folha. */
.relatorio-tabela td:nth-child(1),
.relatorio-tabela td:nth-child(5),
.relatorio-tabela td:nth-child(6),
.relatorio-tabela td:nth-child(9) { white-space: nowrap; }
.relatorio-tabela td .det {
  display: block; color: #555; font-size: 8pt; margin-top: 2px;
  /* Descrição longa não pode empurrar a tabela para fora da folha. */
  max-height: 3.4em; overflow: hidden;
}
.relatorio-rodape { margin-top: 14px; font-size: 8.5pt; color: #666; }

/* ------------------------------------------------------------ relatório: ata */

/* Assinatura e rodapé ficam grudados no fim físico da folha (A4 menos as
   margens de 12mm do @page), não soltos logo depois do conteúdo — só
   funciona de verdade quando a ata cabe numa página; se passar disso, o
   flex não tem como saber onde a próxima folha começa. */
.impresso-ata { display: flex; flex-direction: column; min-height: 273mm; }
.ata-fim { margin-top: auto; }

/* Timbre e rodapé no mesmo esquema do PDF de orçamento do app da oficina
   (grupomec/oficina/backend/core/pdf.py): logo à esquerda + dados à direita,
   linha laranja #ff6a13 por baixo — a mesma cor da marca, hex fixo (não
   var(--acento)) porque o impresso tem que sair sempre claro mesmo com o
   painel em tema escuro. */
.timbre {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-bottom: 6px; margin-bottom: 14px; border-bottom: 1.2pt solid #ff6a13;
}
.timbre-logo { height: 15mm; width: auto; object-fit: contain; }
.timbre-info { text-align: right; }
.timbre-info b { display: block; font-size: 13pt; color: #111827; }
.timbre-info span { display: block; font-size: 9pt; color: #666; margin-top: 2px; }

.relatorio-topo-ata { border-bottom: none; align-items: flex-start; }
.relatorio-marca { display: flex; flex-direction: column; }
.relatorio-marca h1 { font-size: 18pt; margin: 0; }
.relatorio-marca p { margin: 2px 0 0; font-size: 10pt; color: #444; }
.relatorio-topo-ata .relatorio-carimbo span { display: block; }

.ata-status-imp {
  display: inline-block; margin-top: 5px; padding: 2px 9px; border-radius: 20px;
  font-size: 8pt; text-transform: uppercase; letter-spacing: .04em;
  border: 1px solid #ff6a13; color: #ff6a13;
}
.ata-status-imp-finalizada { border-color: #2f8f46; color: #2f8f46; }
.ata-status-imp-cancelada { border-color: #c1392b; color: #c1392b; }

.relatorio-bloco {
  font-size: 9.5pt; text-transform: uppercase; letter-spacing: .05em; color: #ff6a13;
  border-bottom: 1px solid #eee; padding-bottom: 3px; margin: 16px 0 8px;
}
.relatorio-texto { font-size: 10.5pt; line-height: 1.5; margin: 0; }
.relatorio-vazio { color: #777; font-size: 10pt; margin: 0; }

.relatorio-item {
  border: 1px solid #ddd; border-left: 3px solid #ff6a13; border-radius: 4px;
  padding: 8px 10px; margin-bottom: 8px; break-inside: avoid;
}
.relatorio-item-cab { display: flex; gap: 8px; align-items: baseline; font-size: 9.5pt; margin-bottom: 4px; flex-wrap: wrap; }
.relatorio-item-cab .cod { font-family: var(--fonte-mono); font-weight: 600; color: #ff6a13; }
.relatorio-item-cab .t { font-weight: 600; flex: 1; }
.relatorio-item-cab .resp { color: #666; font-size: 8.5pt; }
.relatorio-item p { font-size: 9.5pt; margin: 3px 0; }

.relatorio-caixa {
  background: #fff3ea; border: 1px solid #ff6a13; border-radius: 4px;
  padding: 10px 12px; font-size: 10.5pt; line-height: 1.5;
}

/* Assinatura: espaço em branco de verdade pra caneta, a linha vem depois
   dele — antes a linha ficava colada no nome, sem espaço pra assinar. */
.relatorio-assinaturas { display: flex; flex-wrap: wrap; gap: 22px 32px; margin-top: 8px; break-inside: avoid; }
.relatorio-assinatura { flex: 1 1 200px; text-align: center; font-size: 9.5pt; }
.relatorio-assinatura .linha { height: 34px; border-bottom: 1px solid #333; }
.relatorio-assinatura .nome { padding-top: 4px; }

.rodape-ata {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 24px; padding-top: 6px; border-top: 1.2pt solid #ff6a13;
  font-size: 8.5pt; color: #666;
}

/* ------------------------------------------------------------ impressão */

@media print {
  header.topo, .lista-atas, .acoes-topo, .so-edicao, .filtros, .aviso { display: none !important; }

  /* Relatório de tarefas: some com o painel e imprime só ele. */
  body.imprimindo > *:not(#impressao) { display: none !important; }
  body.imprimindo #impressao { display: block; }
  .relatorio-tabela thead { display: table-header-group; }
  .relatorio-tabela tr { break-inside: avoid; }

  /* Página nomeada: só o relatório de tarefas vira paisagem — a ata continua
     em retrato, que é como ela é assinada. */
  @page { margin: 12mm; }
  @page paisagem { size: A4 landscape; margin: 10mm; }
  .relatorio { page: paisagem; }
  .envelope-tabela { max-height: none; overflow: visible; }
  table.lista th { position: static; }
  body { background: #fff; color: #000; font-size: 11.5pt; }
  main { padding: 0; max-width: none; }
  .atas-layout { display: block; }
  .cartao { border: 0; box-shadow: none; }
  .ata { padding: 0; }
  .ata h3.bloco { color: #000; border-color: #999; }
  .item-pauta { border-color: #bbb; break-inside: avoid; }
  .assinaturas { break-inside: avoid; }
  textarea, input, select { border: 0 !important; padding: 0 !important; background: none !important; }
}

@media (max-width: 1100px) {
  .atas-layout { grid-template-columns: 1fr; }
  .lista-atas { flex-direction: row; overflow-x: auto; padding-bottom: 4px; gap: 8px; }
  .lista-atas .item-ata { flex: 0 0 auto; min-width: 220px; max-width: 260px; }
  .item-pauta .grade-item { grid-template-columns: 1fr; }

  /* Ao abrir um procedimento em tela estreita, some com a lista e o título
     da seção: o procedimento vira a tela inteira, com um jeito de voltar,
     em vez de dividir espaço como no desktop. */
  .vista-procedimentos.detalhe-aberto .proc-cabecalho-lista,
  .vista-procedimentos.detalhe-aberto .lista-atas { display: none; }
  .vista-procedimentos.detalhe-aberto .cartao { border: 0; box-shadow: none; }
  .vista-procedimentos.detalhe-aberto .voltar-proc { display: inline-flex; margin: 0 16px 10px; }
}

.voltar-proc { display: none; }

/* Com Excel/PDF/Importar no topo, a barra não cabe mais em uma linha só em
   tela estreita: as abas eram espremidas até sumirem. Aqui elas descem para
   uma linha própria em vez de desaparecer. */
@media (max-width: 1000px) {
  header.topo { height: auto; flex-wrap: wrap; padding: 8px 14px; row-gap: 6px; gap: 12px; }
  nav.abas { order: 3; flex-basis: 100%; margin-left: 0; }
  .acoes-topo { margin-left: auto; }
}

@media (max-width: 860px) {
  main { padding: 18px 14px 60px; }
  .dupla, .tripla { grid-template-columns: 1fr; }
  nav.abas button { padding: 7px 10px; font-size: 13.5px; }
  .ata-cab .meta-local { grid-column: auto; }
}

/* Celular de verdade: painel e procedimentos são as telas que precisam
   estar impecáveis aqui — ajustes finos além do que os breakpoints
   acima já cobrem. */
@media (max-width: 480px) {
  .marca small { display: none; }
  .cabecalho-secao h1 { font-size: 17px; }
  .tiles { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .tile { padding: 12px 12px 13px; }
  .tile .valor { font-size: 27px; }
  .tile .rotulo { font-size: 11.5px; }
  .lista-atas { gap: 6px; }
  .lista-atas .item-ata { min-width: 168px; max-width: 200px; padding: 8px 10px; }
  .conteudo-procedimento { padding: 14px 14px 18px; font-size: 13.5px; }
  .conteudo-procedimento h2 { font-size: 17px; }
  .conteudo-procedimento h3 { font-size: 14.5px; margin: 18px 0 7px; }
  .proc-meta { padding: 0 12px 12px; font-size: 12.5px; gap: 8px; }
}

/* --------------------------------------------- gantt: período e rótulos */

.gantt-periodo {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px 0; font-size: 13px; color: var(--tinta-2);
}
.gantt-nota { font-size: 12.5px; color: var(--tinta-3); }

/* Rótulo de data para barras estreitas demais para comportá-lo dentro. */
.gantt-rotulo-fora {
  position: absolute; top: 50%; transform: translate(6px, -50%);
  font-size: 11.5px; font-weight: 600; color: var(--tinta-2);
  white-space: nowrap; pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.gantt-rotulo-fora.a-esquerda { transform: translate(calc(-100% - 6px), -50%); }

/* -------------------------------------------------------- procedimentos */

.lista-atas .item-ata .etiqueta { margin-top: 4px; }

.proc-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 0 16px 14px; font-size: 13px; color: var(--tinta-2);
}
.proc-rev { color: var(--tinta-3); }
.proc-rascunho-aviso {
  color: var(--atencao); font-weight: 600; background: rgba(250, 178, 25, .12);
  border: 1px solid rgba(250, 178, 25, .35); border-radius: 8px; padding: 4px 10px;
}

.fluxograma-preview { padding: 14px 16px 18px; margin: 0 16px 16px; }
.fluxograma-preview > h3 { font-size: 13px; color: var(--tinta-2); margin: 0 0 8px; }
.fluxograma-preview-fixo { position: sticky; top: 12px; }
.fluxograma-wrap { overflow-x: auto; }
.fluxograma-wrap svg { display: block; }
.fig-etapa { fill: var(--acento-fraco); stroke: var(--acento); stroke-width: 1.5; }
.fig-decisao { fill: var(--superficie-2); stroke: var(--serio); stroke-width: 1.5; }
.fig-texto { fill: var(--tinta); font-size: 12.5px; }
.fig-numero { fill: var(--tinta-3); font-size: 11px; font-weight: 600; }
.fig-linha, .fig-linha-arco { stroke: var(--tinta-3); stroke-width: 1.5; fill: none; }
.fig-linha-arco { stroke-dasharray: 4 3; }
.fig-seta-cabeca { fill: var(--tinta-3); }
.fig-rotulo { fill: var(--tinta-2); font-size: 11px; font-weight: 600; }
.fig-fim { fill: var(--tinta-3); font-size: 11px; font-style: italic; }

.etapas-lista { display: flex; flex-direction: column; gap: 10px; padding: 0 16px 16px; }
.etapa-ver { display: flex; gap: 12px; padding: 12px 14px; background: var(--superficie-2); border-radius: var(--raio); }
.etapa-ver-num {
  flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--acento-fraco);
  color: var(--acento); font-weight: 700; font-size: 12.5px;
  display: flex; align-items: center; justify-content: center;
}
.etapa-ver-num small { font-size: 9px; vertical-align: super; color: var(--serio); }
.etapa-ver-corpo h4 { font-size: 14px; margin: 0 0 4px; }
.etapa-ver-corpo > p { margin: 0 0 6px; font-size: 13px; color: var(--tinta-2); line-height: 1.55; white-space: pre-line; }
.etapa-ver-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--tinta-3); margin-bottom: 6px; }
.etapa-ver-porque, .etapa-ver-situacao { font-size: 12.5px; color: var(--tinta-3); margin: 0 0 4px; }
.etapa-ver-ramos { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; margin-top: 6px; }
.etapa-ver-ramos span:first-child { color: var(--bom); }
.etapa-ver-ramos span:last-child { color: var(--critico); }

.anexos { display: flex; flex-direction: column; gap: 10px; padding: 0 16px 16px; }
.anexo summary { cursor: pointer; font-weight: 600; font-size: 13.5px; padding: 12px 14px; }
.anexo .envelope-tabela, .anexo .conteudo-procedimento { padding: 0 14px 14px; max-height: 420px; }
.anexo-tabela td { font-size: 12px; padding: 5px 8px; vertical-align: top; }

.conteudo-procedimento { padding: 20px 24px 26px; line-height: 1.65; font-size: 14px; }
.conteudo-procedimento h2 { font-size: 20px; margin: 0 0 12px; }
.conteudo-procedimento h3 { font-size: 15.5px; margin: 22px 0 8px; color: var(--acento); }
.conteudo-procedimento p { margin: 0 0 10px; color: var(--tinta-2); }
.conteudo-procedimento .lema { font-style: italic; color: var(--tinta); font-size: 15px; }
.conteudo-procedimento .assinatura { color: var(--tinta-3); font-size: 12.5px; margin-top: 18px; }
.conteudo-procedimento .aviso-doc {
  background: rgba(250, 178, 25, .12); border: 1px solid rgba(250, 178, 25, .35);
  border-radius: 8px; padding: 10px 14px; font-size: 13px;
}
.conteudo-procedimento ul, .conteudo-procedimento ol { margin: 0 0 12px; padding-left: 20px; color: var(--tinta-2); }
.conteudo-procedimento li { margin-bottom: 4px; }
.conteudo-procedimento .regra { margin-bottom: 16px; }
.conteudo-procedimento .regra h3 { margin-top: 0; display: flex; align-items: center; gap: 8px; }
.conteudo-procedimento .regra-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; background: var(--acento-fraco);
  color: var(--acento); font-size: 12px; font-weight: 700;
}

.editor-fluxo-layout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 16px; align-items: start; }
.etapas-editor { display: flex; flex-direction: column; gap: 12px; }
.etapa-editor { padding: 14px 16px; }
.etapa-editor-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.etapa-editor-cab .etapa-num { font-weight: 700; font-size: 13px; }
.etapa-editor-cab select { width: auto; padding: 5px 8px; }
.etapa-editor-mover { margin-left: auto; display: flex; gap: 4px; }
.ramos-decisao { margin-top: 4px; }
.ramo { display: flex; flex-direction: column; gap: 6px; }
.ramo label { font-size: 12px; font-weight: 600; color: var(--tinta-2); }
.ramo input { margin-bottom: 4px; }

.editor-toolbar { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.editor-toolbar button {
  font: inherit; font-size: 13px; cursor: pointer; border: 1px solid var(--borda);
  background: var(--superficie); border-radius: 6px; padding: 5px 10px;
}
.editor-toolbar button:hover { background: var(--superficie-2); }
.editor-conteudo {
  border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px 20px;
  min-height: 240px; line-height: 1.6; background: var(--superficie);
}
.editor-conteudo:focus { outline: 2px solid var(--acento); outline-offset: 2px; }
.editor-conteudo h3 { font-size: 15.5px; margin: 16px 0 8px; }
.editor-conteudo ul, .editor-conteudo ol { padding-left: 20px; }

.rodape-edicao { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; padding: 0 16px 16px; }

@media (max-width: 1100px) {
  .editor-fluxo-layout { grid-template-columns: 1fr; }
  .fluxograma-preview-fixo { position: static; }
}

/* Prazo além do período mostrado: a ponta some na borda. */
.gantt-barra.transborda {
  border-top-right-radius: 0; border-bottom-right-radius: 0;
  -webkit-mask-image: linear-gradient(to right, #000 78%, rgba(0, 0, 0, .25) 100%);
          mask-image: linear-gradient(to right, #000 78%, rgba(0, 0, 0, .25) 100%);
}

/* ------------------------------------------------------------ financeiro */

/* O aviso vem antes de qualquer número porque três deles são rateio da
   diretoria, não registro contábil. Esconder isso seria mentir por omissão. */
.fin-aviso {
  background: var(--acento-fraco); border: 1px solid var(--acento);
  border-radius: var(--raio); padding: 11px 14px; margin-bottom: 16px;
  font-size: 13.5px; line-height: 1.55; color: var(--tinta);
}
/* Só a primeira linha é título do aviso. Os outros <strong> são ênfase no meio
   da frase e precisam continuar dentro dela. */
.fin-aviso > strong:first-child { display: block; margin-bottom: 2px; }

.fin-premissas { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 12px; margin-bottom: 16px; }
/* Os três cartões repetem a mesma estrutura (rótulo, controle, explicação) e
   precisam ser lidos em linha: o rótulo do pró-labore ocupa duas linhas e
   empurrava só o controle dele para baixo, desalinhando os sliders. Subgrid faz
   as três partes dividirem as trilhas do container, então cada faixa começa na
   mesma altura sem fixar altura de nada. O row-gap volta a zero porque o gap de
   12px é entre cartões, não entre as partes de um cartão. */
.fin-premissa {
  display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); box-shadow: var(--sombra); padding: 12px 14px 13px;
}
.fin-premissa > label { display: block; font-family: var(--fonte-mono); font-size: 12px; color: var(--tinta-2); }
.fin-premissa p { margin: 7px 0 0; font-size: 12.5px; color: var(--tinta-3); line-height: 1.5; }
.fin-premissa p strong { color: var(--tinta-2); font-family: var(--fonte-mono); }

.fin-controle { display: flex; align-items: center; gap: 11px; margin-top: 7px; }
.fin-controle input[type="range"] { flex: 1; accent-color: var(--acento); min-width: 0; height: 22px; }
.fin-controle output {
  font-family: var(--fonte-mono); font-variant-numeric: tabular-nums;
  font-size: 17px; font-weight: 600; min-width: 52px; text-align: right; color: var(--tinta);
}

/* Marca de estimativa: some no modo Apresentar? Não — justamente ali é que
   não pode sumir, com a diretoria olhando o número projetado. */
.fin-marca-estimado {
  display: inline-block; font-family: var(--fonte-mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .06em; vertical-align: middle;
  padding: 1px 7px; border-radius: 999px; margin: 0 2px;
  background: var(--conf-3); color: #fff;
}
.fin-nota { margin: 8px 16px 2px; font-size: 12.5px; color: var(--tinta-3); line-height: 1.55; }
.fin-nota strong { color: var(--tinta-2); }
.fin-titulo-tabela { font-size: 14px; margin: 26px 0 12px; }
.fin-valor {
  text-align: right; white-space: nowrap;
  font-family: var(--fonte-mono); font-variant-numeric: tabular-nums; font-weight: 550;
}

@media (max-width: 640px) {
  .fin-controle output { font-size: 15px; min-width: 44px; }
}
/* Gráficos de largura total usam viewBox de 1000 em vez de 460: no card largo
   o SVG escala para a largura do container, e com o viewBox estreito o texto
   dobrava de tamanho e vazava. O min-width maior mantém a proporção legível no
   celular — ali a barra rola dentro do card em vez de encolher a fonte. */
.viz-larga svg { min-width: 800px; }

/* Valor em reais é bem mais largo que a contagem de tarefas do Painel: sem
   isto "−R$ 198.559" quebra entre o "R$" e o número no celular. */
.tiles-moeda { grid-template-columns: repeat(auto-fit, minmax(192px, 1fr)); }
.tiles-moeda .tile .valor { font-size: 26px; white-space: nowrap; }
body.apresentando .tiles-moeda .tile .valor { font-size: 34px; }

/* --------------------------------------------------------- planejamento */

/* A tabela do plano é formulário, não lista: cada linha se preenche ali mesmo.
   Por isso os campos vêm discretos — borda só no foco e no hover — senão 45
   linhas de caixinha viram um formulário de cartório e ninguém lê o texto. */
.tabela-plano tbody tr { cursor: default; }
.tabela-plano td { vertical-align: top; }
.tabela-plano input[type="date"], .tabela-plano input[type="number"], .tabela-plano select {
  font: inherit; font-size: 13px; color: var(--tinta); background: transparent;
  border: 1px solid transparent; border-radius: 6px; padding: 4px 5px; max-width: 100%;
}
.tabela-plano select { max-width: 148px; }
.tabela-plano input[type="number"] { width: 56px; text-align: right; font-family: var(--fonte-mono); }
.tabela-plano td.dias { white-space: nowrap; color: var(--tinta-3); font-size: 12px; }
.tabela-plano input:hover, .tabela-plano select:hover { border-color: var(--borda); }
.tabela-plano input:focus, .tabela-plano select:focus {
  outline: none; border-color: var(--acento); background: var(--superficie);
}
.tabela-plano input.vencido { color: var(--critico); font-weight: 600; }

.cod-etapa {
  font-family: var(--fonte-mono); font-size: 12px; color: var(--tinta-3); margin-right: 4px;
}
/* Folga zero não é enfeite: é a diferença entre "atrasou uma etapa" e "atrasou a
   mudança". Vai escrito, porque cor sozinha não diz isso a ninguém. */
.selo-critico, .folga {
  display: inline-block; font-family: var(--fonte-mono); font-size: 10.5px;
  padding: 1px 7px; border-radius: 999px; margin-left: 6px; vertical-align: middle;
  white-space: nowrap; font-weight: 500;
}
.selo-critico { background: var(--critico); color: #fff; }
.folga { color: var(--tinta-3); border: 1px solid var(--borda); }
.etapa-critica td.titulo { box-shadow: inset 3px 0 0 var(--critico); }

/* Item principal e subitens. A etapa é uma frase só — o que ela entrega, por que
   existe e de quem depende são desdobramentos dela, e por isso entram recuados,
   com o rótulo do lado em vez de dentro do texto: quem varre a coluna procurando
   "entrega" acha as 45 na mesma coluna vertical. */
.tabela-plano .item-principal { font-weight: 550; line-height: 1.4; }
.tabela-plano .subitens {
  display: grid; grid-template-columns: max-content 1fr; gap: 2px 10px;
  margin: 5px 0 0; padding-left: 11px; border-left: 2px solid var(--grade);
}
.tabela-plano .subitens dt {
  font-family: var(--fonte-mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--tinta-3); padding-top: 2px; white-space: nowrap;
}
.tabela-plano .subitens dd { margin: 0; font-size: 12.5px; color: var(--tinta-2); line-height: 1.5; }
.tabela-plano .subitens dd i { color: var(--tinta-3); }
.tabela-plano .subitens .depende { font-family: var(--fonte-mono); font-size: 11.5px; color: var(--tinta-3); }

.tabela-plano tr.faixa-fase td {
  background: var(--superficie-2); border-bottom: 1px solid var(--linha);
  padding: 0 12px 0 0; position: sticky; top: 34px; z-index: 1;
}
/* A faixa da fase é o botão: a área de clique é a linha inteira, não uma seta de
   12px que obriga a mira. */
.btn-fase {
  font: inherit; text-align: left; border: 0; background: none; cursor: pointer;
  padding: 9px 4px 9px 12px; color: var(--tinta); display: inline-flex;
  align-items: baseline; gap: 8px; max-width: 100%;
}
.btn-fase .seta { color: var(--tinta-3); font-size: 11px; width: 10px; flex: none; }
.btn-fase strong { font-size: 13px; }
.btn-fase .ajuda-fase { font-size: 12.5px; color: var(--tinta-3); }
.btn-fase:hover strong { color: var(--acento); }
.tabela-plano tr.faixa-fase .soma {
  font-family: var(--fonte-mono); font-size: 11.5px; color: var(--tinta-3);
  float: right; margin-left: 12px; padding: 11px 0;
}
.tabela-plano tr.faixa-fase .soma b { color: var(--critico); font-weight: 600; }
/* Fase fechada não é linha de tabela, é resumo: o topo arredondado a separa da
   fase seguinte, que sem isso encosta nela como se fosse a mesma coisa. */
.tabela-plano tr.faixa-fase.fechada td { border-bottom: 1px solid var(--borda); }

/* No modo Apresentar o plano vira leitura: os campos perdem a cara de campo e
   ficam só o valor, que é o que a diretoria precisa ver projetado. */
body.apresentando .tabela-plano input, body.apresentando .tabela-plano select {
  border-color: transparent; background: transparent; pointer-events: none; appearance: none;
}

/* --------------------------------------------------- glossário financeiro */

.btn-glossario {
  font: inherit; font-family: var(--fonte-mono); font-size: 11px; cursor: pointer;
  text-transform: none; letter-spacing: 0; font-weight: 400; vertical-align: middle;
  color: var(--tinta-3); background: none; border: 1px solid var(--borda);
  border-radius: 999px; padding: 1px 9px; margin-left: 8px;
}
.btn-glossario:hover { color: var(--acento); border-color: var(--acento); }

/* A legenda vira o próprio atalho para a explicação: quem não entendeu o
   rótulo clica nele, em vez de procurar um "?" no outro canto do cartão. */
.legenda-clicavel button {
  font: inherit; font-family: var(--fonte-mono); font-size: 12.5px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 2px 6px; margin: 0 -6px;
  border-radius: 6px; color: var(--tinta-2); text-align: left;
}
.legenda-clicavel button:hover { background: var(--superficie-2); color: var(--tinta); }
.legenda-clicavel button:hover i { outline: 2px solid var(--acento); outline-offset: 1px; }
.legenda-clicavel i { width: 10px; height: 10px; border-radius: 3px; flex: none; }

.glossario-intro { margin: 0 0 14px; font-size: 13.5px; color: var(--tinta-2); line-height: 1.6; }

.verbete { border-top: 1px solid var(--grade); padding: 15px 0 4px; }
.verbete.foco { background: var(--acento-fraco); margin: 0 -18px; padding: 15px 18px 8px; border-radius: var(--raio); }
.verbete h3 { font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
.verbete h3 i { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.verbete-total {
  font-family: var(--fonte-mono); font-variant-numeric: tabular-nums;
  font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0;
}
.verbete-def { margin: 7px 0 10px; font-size: 13px; color: var(--tinta-2); line-height: 1.6; }

.verbete-linhas { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.verbete-linhas td { padding: 5px 0; border-bottom: 1px solid var(--grade); vertical-align: top; color: var(--tinta-2); }
.verbete-linhas td:last-child {
  text-align: right; white-space: nowrap; padding-left: 12px;
  font-family: var(--fonte-mono); font-variant-numeric: tabular-nums; color: var(--tinta);
}
.verbete-linhas small { display: block; font-family: var(--fonte-mono); font-size: 11px; color: var(--tinta-3); }
.verbete-resto td { color: var(--tinta-3); font-style: italic; }
.viz-clicavel { cursor: pointer; }
.viz-clicavel:hover path { filter: brightness(1.12); }
.viz-clicavel:hover text { fill: var(--tinta); }
.viz-clicavel:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.verbete-totais { margin-left: auto; display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: flex-end; }
.verbete-total em { font-style: normal; font-weight: 400; font-size: 11px; color: var(--tinta-3); }
.verbete-nota { display: block; margin-top: 3px; font-family: var(--fonte); font-size: 11.5px;
  font-style: italic; color: var(--serio); line-height: 1.45; max-width: 46ch; }

/* ================================================================ COMUNICADOS
   A ficha imita a leitura de um documento afixado no mural: título grande,
   quem assina, a partir de quando vale e o texto respirando. O bloco de envio
   fica no rodapé porque é operação, não conteúdo — quem só vai ler a regra não
   precisa tropeçar na lista de telefones. */

.comunicado { padding: clamp(18px, 3vw, 30px); }
.comunicado-cab { border-bottom: 2px solid var(--tinta); padding-bottom: 14px; margin-bottom: 20px; }
.comunicado-cab-topo {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.comunicado-etiquetas, .comunicado-acoes { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.comunicado-cab h2 { font-size: clamp(19px, 2.4vw, 25px); line-height: 1.25; }
.comunicado-meta {
  display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 10px;
  font-size: 12.5px; color: var(--tinta-3);
}
.comunicado-meta strong { color: var(--tinta-2); font-weight: 600; }
.comunicado-resumo {
  margin: 12px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--tinta-2);
  border-left: 3px solid var(--acento); padding-left: 12px;
}

.comunicado-corpo { font-size: 14.5px; line-height: 1.72; color: var(--tinta); max-width: 68ch; }
.comunicado-corpo p { margin: 0 0 14px; }
.comunicado-corpo h4 {
  font-family: var(--fonte-display); font-size: 15px; font-weight: 600;
  margin: 24px 0 9px; color: var(--tinta);
}
.comunicado-corpo ul { margin: 0 0 14px; padding-left: 20px; }
.comunicado-corpo li { margin-bottom: 5px; }
.comunicado-corpo strong { font-weight: 650; }

.comunicado-envio { margin-top: 30px; border-top: 1px solid var(--grade); padding-top: 4px; }
.envio-resumo { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.envio-lista { display: flex; flex-direction: column; gap: 1px; }
.envio-linha {
  display: grid; grid-template-columns: 108px minmax(140px, 1fr) minmax(0, 2fr) auto;
  gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--grade);
  font-size: 12.5px;
}
.envio-quem { font-weight: 550; min-width: 0; }
.envio-quem small {
  display: block; font-weight: 400; font-family: var(--fonte-mono);
  font-size: 11px; color: var(--tinta-3);
}
.envio-nota { color: var(--tinta-3); min-width: 0; overflow-wrap: anywhere; }
.envio-nota em { font-style: normal; white-space: nowrap; }

/* ------------------------------------------------------- diálogo de envio */

.gaveta-larga { max-width: 640px; }

.wa-estado {
  font-size: 12.5px; line-height: 1.55; padding: 10px 12px; border-radius: var(--raio);
  border: 1px solid var(--borda); background: var(--plano); color: var(--tinta-2);
  margin-bottom: 16px;
}
.wa-estado.ok { border-color: rgba(47, 143, 70, .35); color: var(--bom); }
.wa-estado.alerta { border-color: rgba(201, 138, 31, .45); background: rgba(201, 138, 31, .09); color: var(--tinta-2); }
.wa-estado small { display: block; margin-top: 3px; color: var(--tinta-3); font-family: var(--fonte-mono); font-size: 11px; }

.envio-atalhos { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }

.destinatarios {
  border: 1px solid var(--borda); border-radius: var(--raio);
  max-height: 320px; overflow-y: auto; padding: 4px 0;
}
.destinatario-grupo h4 {
  font-family: var(--fonte-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--tinta-3); padding: 10px 12px 5px; font-weight: 500;
}
.destinatario {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px;
  align-items: center; padding: 6px 12px; cursor: pointer; font-size: 13px;
}
.destinatario:hover { background: var(--superficie-2); }
.destinatario input { margin: 0; }
.destinatario-nome small { display: block; font-size: 11.5px; color: var(--tinta-3); }
.destinatario-tel {
  font-family: var(--fonte-mono); font-size: 11.5px; color: var(--tinta-3); white-space: nowrap;
}
/* Sem telefone continua na lista, apagado: é a própria lista que mostra qual
   cadastro está faltando. */
.destinatario.sem-telefone { cursor: not-allowed; }
.destinatario.sem-telefone .destinatario-nome { color: var(--tinta-3); }
.destinatario.sem-telefone .destinatario-tel { color: var(--critico); }

.previa-zap {
  margin: 0; padding: 12px 14px; border-radius: var(--raio);
  border: 1px solid var(--borda); background: var(--plano);
  font-family: var(--fonte); font-size: 13px; line-height: 1.6; color: var(--tinta-2);
  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 260px; overflow-y: auto;
}

.campo-marcavel {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
  font-size: 13px; color: var(--tinta-2); cursor: pointer;
}

@media (max-width: 760px) {
  .envio-linha { grid-template-columns: 100px minmax(0, 1fr); row-gap: 4px; }
  .envio-nota, .envio-linha > button { grid-column: 1 / -1; }
}

.gaveta > header h2 small {
  display: block; font-weight: 400; font-size: 12px; color: var(--tinta-3);
  font-family: var(--fonte-mono); margin-top: 2px;
}
/* A ata imprime em retrato e é documento assinado: o log de quem recebeu no
   WhatsApp é operação, não faz parte do papel. */
@media print { .comunicado-envio { display: none !important; } }

/* ------------------------------------------------- telefone na aba Equipe */

.pessoa-tel {
  margin-top: 5px; font-family: var(--fonte-mono); font-size: 11.5px;
  color: var(--tinta-2); display: flex; align-items: center; gap: 5px;
}
.pessoa-tel.mudo { color: var(--tinta-3); }
.pessoa-tel.faltando { color: var(--serio); }

/* O cadastro que falta vira uma linha só, no topo da aba: a lista de quem
   ficou de fora vale mais que um contador. */
.aviso-cadastro {
  border: 1px solid rgba(201, 138, 31, .45); background: rgba(201, 138, 31, .09);
  border-radius: var(--raio); padding: 10px 13px; margin-bottom: 4px;
  font-size: 13px; line-height: 1.55; color: var(--tinta-2);
}
.aviso-cadastro strong { color: var(--tinta); }
.aviso-cadastro-nomes {
  display: block; margin-top: 4px; font-family: var(--fonte-mono);
  font-size: 11.5px; color: var(--tinta-3);
}

/* --------------------------------------------- engrenagem / configurações */

.config-corpo { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 18px; align-items: start; }

.config-secoes { display: flex; flex-direction: column; gap: 6px; }
.config-secao {
  font: inherit; text-align: left; cursor: pointer; padding: 9px 11px;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); color: var(--tinta);
}
.config-secao:hover { border-color: var(--acento); }
.config-secao[aria-current="true"] { background: var(--acento-fraco); border-color: var(--acento); }
.config-secao .d { font-weight: 600; font-size: 13.5px; display: block; }
.config-secao .s { font-size: 11.5px; color: var(--tinta-3); display: block; margin-top: 2px; line-height: 1.4; }

.config-conteudo h3 { font-size: 15px; margin: 0 0 10px; }
.config-nota { font-size: 12.5px; line-height: 1.6; color: var(--tinta-3); margin: 12px 0 0; }
.config-acoes { margin-top: 14px; }
.config-passos { margin: 0 0 14px; padding-left: 20px; font-size: 13.5px; line-height: 1.7; color: var(--tinta-2); }
.config-passos strong { color: var(--tinta); }

/* Fundo branco fixo atrás do QR: em tema escuro o PNG do worker fica preto no
   preto e a câmera não lê. */
.wa-qr {
  display: flex; justify-content: center; padding: 14px;
  background: #fff; border: 1px solid var(--borda); border-radius: var(--raio);
}
.wa-qr img { display: block; width: 260px; height: 260px; image-rendering: pixelated; }

@media (max-width: 700px) {
  .config-corpo { grid-template-columns: 1fr; }
  .wa-qr img { width: min(260px, 62vw); height: auto; }
}
/* QR expirado continua visível, mas apagado: some seria pior — a pessoa perde
   a referência do que estava tentando ler. */
.wa-qr.expirado img { opacity: .35; }

/* ----------------------------------------- sub-navegação dentro do grupo */

/* Acima do título da tela, não dentro dele: é navegação, e navegação que
   entra no meio do conteúdo vira mais um botão perdido. */
.subnav { margin-bottom: 16px; }
.subnav button { padding: 7px 15px; }

@media print { .subnav { display: none !important; } }