@font-face { font-family: "Plex"; src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex"; src: url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plex"; src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Plex"; src: url("fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --pinho: #1e4d3f;
  --pinho-claro: #e3ece7;
  --papel: #f6f7f5;
  --folha: #ffffff;
  --tinta: #1b2420;
  --musgo: #5f6e66;
  --linha: #dde2de;
  --ambar: #a86a12;
  --ambar-claro: #fbf0dc;
  --carmim: #b42318;
  --carmim-claro: #fbe7e5;
  --azul: #2f5e8c;
  --azul-claro: #e4edf6;
  --cinza-claro: #eef0ee;
  --sombra: 0 1px 0 rgba(27, 36, 32, .06);
  --raio: 6px;
  color-scheme: light;
}
/* O tema escuro vale quando o html tem data-tema="escuro" (definido pelo seletor ou pelo sistema). */
:root[data-tema="escuro"] {
  --pinho: #6fb69c;
  --pinho-claro: #1d3129;
  --papel: #121614;
  --folha: #1a1f1c;
  --tinta: #e6ebe8;
  --musgo: #9aa8a0;
  --linha: #2c3430;
  --ambar: #e0a54a;
  --ambar-claro: #33281a;
  --carmim: #f07a6f;
  --carmim-claro: #3a1f1d;
  --azul: #86b3dd;
  --azul-claro: #1c2a37;
  --cinza-claro: #232926;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: 400 14px/1.45 "Plex", "Segoe UI", system-ui, sans-serif;
  color: var(--tinta);
  background: var(--papel);
  font-variant-numeric: tabular-nums;
}
[v-cloak] { display: none; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--pinho); }
:focus-visible { outline: 2px solid var(--pinho); outline-offset: 2px; }

/* ---------- estrutura */
.casca { display: grid; grid-template-columns: 216px 1fr; min-height: 100vh; }
.lateral {
  background: var(--pinho); color: #f1f6f3; padding: 20px 12px; display: flex; flex-direction: column; gap: 4px;
  position: sticky; top: 0; height: 100vh;
}
:root[data-tema="escuro"] .lateral { background: #16241f; }
.marca { font-weight: 700; font-size: 18px; padding: 0 10px 18px; letter-spacing: -.01em; }
.marca small { display: block; font-weight: 400; font-size: 12px; opacity: .75; letter-spacing: 0; }
.nav-item {
  display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left;
  background: none; border: 0; border-radius: var(--raio); padding: 8px 10px; color: inherit; cursor: pointer;
}
.nav-item:hover { background: rgba(255, 255, 255, .08); }
.nav-item.ativo { background: rgba(255, 255, 255, .16); font-weight: 600; }
.nav-item .contagem { font-size: 12px; background: rgba(255, 255, 255, .18); border-radius: 10px; padding: 0 7px; }
.lateral .rodape { margin-top: auto; font-size: 12px; padding: 10px; border-top: 1px solid rgba(255, 255, 255, .15); }
.lateral .rodape button { background: none; border: 0; color: inherit; text-decoration: underline; padding: 0; cursor: pointer; font-size: 12px; }

.conteudo { padding: 24px 28px 48px; min-width: 0; }
.cabecalho { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
h1 { font-size: 24px; line-height: 1.2; margin: 0; font-weight: 600; letter-spacing: -.015em; }
h2 { font-size: 16px; margin: 0 0 10px; font-weight: 600; }
h3 { font-size: 14px; margin: 0 0 8px; font-weight: 600; }
.sub { color: var(--musgo); margin: 4px 0 0; }

/* ---------- controles */
.btn {
  border: 1px solid var(--linha); background: var(--folha); border-radius: var(--raio); padding: 7px 12px;
  cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
}
.btn:hover { border-color: var(--musgo); }
.btn.primario { background: var(--pinho); border-color: var(--pinho); color: #fff; font-weight: 500; }
:root[data-tema="escuro"] .btn.primario { color: #0d1512; }
.btn.primario:hover { filter: brightness(1.08); }
.btn.perigo { color: var(--carmim); }
.btn.mini { padding: 3px 8px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: default; }
.link { background: none; border: 0; color: var(--pinho); cursor: pointer; padding: 0; text-decoration: underline; }

input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input[type=month], select, textarea {
  border: 1px solid var(--linha); border-radius: var(--raio); background: var(--folha); padding: 7px 9px; min-width: 0; width: 100%;
}
textarea { resize: vertical; min-height: 64px; }
label.campo { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--musgo); }
label.campo > span { font-weight: 500; }
label.marca-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

.barra { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.barra > * { width: auto; }
.barra input[type=text] { width: 220px; }
.alternador { display: inline-flex; border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; background: var(--folha); }
.alternador button { border: 0; background: none; padding: 7px 12px; cursor: pointer; }
.alternador button.ativo { background: var(--pinho-claro); color: var(--pinho); font-weight: 600; }

/* ---------- indicadores do painel */
.indicadores { display: grid; grid-template-columns: repeat(4, minmax(140px, 1fr)); gap: 10px; margin-bottom: 18px; }
.indicador {
  background: var(--folha); border: 1px solid var(--linha); border-radius: var(--raio); padding: 10px 14px; text-align: left;
  cursor: pointer; display: flex; align-items: baseline; gap: 10px;
}
.indicador strong { font-size: 26px; font-weight: 600; line-height: 1; }
.indicador span { color: var(--musgo); }
.indicador.atraso strong { color: var(--carmim); }
.indicador.ativo { border-color: var(--pinho); box-shadow: inset 0 0 0 1px var(--pinho); }

/* ---------- tabela */
.tabela-wrap { background: var(--folha); border: 1px solid var(--linha); border-radius: var(--raio); overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--linha); vertical-align: middle; }
th { font-weight: 500; color: var(--musgo); font-size: 13px; background: var(--cinza-claro); position: sticky; top: 0; }
tbody tr { cursor: pointer; }
tbody tr:hover td { background: var(--pinho-claro); }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; }
.fraco { color: var(--musgo); }
.vazio { padding: 32px; text-align: center; color: var(--musgo); }

/* ---------- etiquetas */
.etq { display: inline-block; font-size: 12px; border-radius: 4px; padding: 1px 7px; background: var(--cinza-claro); color: var(--musgo); white-space: nowrap; }
.etq.s-a_fazer { background: var(--cinza-claro); color: var(--musgo); }
.etq.s-em_execucao { background: var(--pinho-claro); color: var(--pinho); }
.etq.s-aguardando { background: var(--ambar-claro); color: var(--ambar); }
.etq.s-em_conferencia { background: var(--azul-claro); color: var(--azul); }
.etq.s-concluida { background: var(--pinho); color: #fff; }
:root[data-tema="escuro"] .etq.s-concluida { color: #0d1512; }
.etq.alerta { background: var(--carmim-claro); color: var(--carmim); }
.etq.aviso { background: var(--ambar-claro); color: var(--ambar); }
.prazo.atrasado { color: var(--carmim); font-weight: 600; }
.prazo.proximo { color: var(--ambar); font-weight: 600; }

/* progresso em marcas: uma marca por etapa */
.marcas { display: inline-flex; gap: 2px; vertical-align: middle; }
.marcas i { width: 7px; height: 12px; border-radius: 1px; background: var(--linha); display: block; }
.marcas i.ok { background: var(--pinho); }

/* ---------- kanban */
.kanban { display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: 12px; align-items: start; overflow-x: auto; }
.coluna { background: var(--cinza-claro); border-radius: var(--raio); padding: 10px; min-height: 240px; }
.coluna.alvo { outline: 2px dashed var(--pinho); outline-offset: -4px; }
.coluna h3 { display: flex; justify-content: space-between; color: var(--musgo); font-weight: 500; margin-bottom: 10px; }
.cartao {
  background: var(--folha); border: 1px solid var(--linha); border-radius: var(--raio); padding: 10px; margin-bottom: 8px;
  cursor: grab; box-shadow: var(--sombra);
}
.cartao:hover { border-color: var(--musgo); }
.cartao.atrasado { border-left: 3px solid var(--carmim); }
.cartao .ent { font-weight: 600; line-height: 1.25; }
.cartao .linha-info { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--musgo); }

/* ---------- régua de competências (elemento central do termo) */
.regua { display: flex; gap: 10px; flex-wrap: wrap; padding: 14px; background: var(--folha); border: 1px solid var(--linha); border-radius: var(--raio); }
.bimestre { display: flex; flex-direction: column; gap: 4px; }
.bimestre .meses { display: flex; gap: 3px; }
.bimestre .rotulo-bim { font-size: 11px; color: var(--musgo); }
.mes {
  width: 58px; height: 52px; border-radius: 4px; border: 1px solid var(--linha); background: var(--folha);
  display: flex; flex-direction: column; justify-content: space-between; padding: 4px 6px; cursor: pointer; text-align: left;
}
.mes b { font-size: 13px; font-weight: 600; }
.mes small { font-size: 11px; color: var(--musgo); }
.mes.s-em_execucao { background: var(--pinho-claro); border-color: var(--pinho); }
.mes.s-aguardando { background: var(--ambar-claro); border-color: var(--ambar); }
.mes.s-em_conferencia { background: var(--azul-claro); border-color: var(--azul); }
.mes.s-concluida { background: var(--pinho); border-color: var(--pinho); color: #fff; }
.mes.s-concluida small { color: rgba(255, 255, 255, .8); }
:root[data-tema="escuro"] .mes.s-concluida, :root[data-tema="escuro"] .mes.s-concluida small { color: #0d1512; }
.mes.atrasado { box-shadow: inset 0 -3px 0 var(--carmim); }
.mes.fora { opacity: .55; border-style: dashed; }
.mes.vazio-bim { visibility: hidden; }
.legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--musgo); margin-top: 8px; }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; border: 1px solid var(--linha); }

/* ---------- painéis e grades */
.painel { background: var(--folha); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px; margin-bottom: 16px; }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px 18px; }
.grade dt { font-size: 12px; color: var(--musgo); }
.grade dd { margin: 2px 0 0; }
.form-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.form-grade .l2 { grid-column: span 2; }
.form-grade .l4 { grid-column: 1 / -1; }
fieldset { border: 0; padding: 0; margin: 0 0 18px; }
legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
.aviso-box { background: var(--ambar-claro); color: var(--ambar); border-radius: var(--raio); padding: 10px 12px; margin-bottom: 14px; }
.erro-box { background: var(--carmim-claro); color: var(--carmim); border-radius: var(--raio); padding: 10px 12px; margin-bottom: 14px; }

/* ---------- gaveta e modal */
.fundo { position: fixed; inset: 0; background: rgba(15, 22, 19, .4); z-index: 20; }
.gaveta {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(640px, 100%); background: var(--papel); z-index: 21;
  overflow-y: auto; box-shadow: -8px 0 24px rgba(0, 0, 0, .15); animation: entra .18s ease-out;
}
@keyframes entra { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .gaveta { animation: none; } }
.gaveta-topo { background: var(--folha); border-bottom: 1px solid var(--linha); padding: 18px 20px; position: sticky; top: 0; z-index: 2; }
.gaveta-corpo { padding: 16px 20px 40px; }
.topo-botoes { position: absolute; top: 12px; right: 12px; display: flex; gap: 6px; align-items: center; }
.fechar-btn { background: none; border: 0; font-size: 22px; cursor: pointer; color: var(--musgo); line-height: 1; padding: 2px 8px; }
.topo-info { padding-right: 150px; }

/* competência em tela inteira: ocupa a área de conteúdo, mantendo a navegação à esquerda */
.gaveta.expandida { width: auto; left: 216px; box-shadow: none; animation: none; }
.gaveta.expandida .gaveta-topo { padding: 18px 28px; }
.gaveta.expandida .topo-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: end; }
.gaveta.expandida .topo-acoes .equipe { margin-top: 0; }
.gaveta.expandida .gaveta-corpo { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 16px; padding: 18px 28px 48px; align-items: start; }

@media (max-width: 1100px) {
  .gaveta.expandida .gaveta-corpo, .gaveta.expandida .topo-grade { grid-template-columns: 1fr; }
}
@media (max-width: 900px) { .gaveta.expandida { left: 0; } }
.fechar { position: absolute; top: 12px; right: 12px; background: none; border: 0; font-size: 22px; cursor: pointer; color: var(--musgo); line-height: 1; padding: 4px 8px; }
.modal {
  position: fixed; z-index: 21; top: 4vh; left: 50%; transform: translateX(-50%); width: min(860px, 96vw); max-height: 92vh; overflow-y: auto;
  background: var(--folha); border-radius: 8px; padding: 22px 24px; box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
}
.modal.estreito { width: min(460px, 96vw); }
.acoes { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

.situacoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.situacoes button { border: 1px solid var(--linha); background: var(--folha); border-radius: 14px; padding: 4px 11px; cursor: pointer; font-size: 13px; }
.situacoes button.ativo { border-color: var(--pinho); background: var(--pinho); color: #fff; }
:root[data-tema="escuro"] .situacoes button.ativo { color: #0d1512; }

.etapa { display: grid; grid-template-columns: 22px 1fr auto; gap: 4px 8px; padding: 9px 0; border-bottom: 1px solid var(--linha); align-items: start; }
.etapa:last-child { border-bottom: 0; }
.etapa input[type=checkbox] { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--pinho); cursor: pointer; }
.etapa .nome-etapa.feita { color: var(--musgo); text-decoration: line-through; text-decoration-color: var(--linha); }
.etapa .meta { grid-column: 2 / 4; font-size: 12px; color: var(--musgo); }
.etapa .obs { grid-column: 2 / 4; }
.etapa .obs input { font-size: 13px; padding: 3px 8px; border-color: transparent; background: transparent; color: var(--musgo); }
.etapa .obs input:hover, .etapa .obs input:focus { border-color: var(--linha); background: var(--folha); color: var(--tinta); }
.etapa .obs input:not(:placeholder-shown) { color: var(--tinta); }
.item { padding: 8px 0; border-bottom: 1px solid var(--linha); }
.item:last-child { border-bottom: 0; }
.item .meta { font-size: 12px; color: var(--musgo); }
.historico { font-size: 13px; }
.historico .item { display: grid; grid-template-columns: 128px 1fr; gap: 8px; }
.historico .item > span:first-child { white-space: nowrap; }
td.nw { white-space: nowrap; }

.toasts { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 40; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.equipe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.equipe select { font-size: 13px; padding: 5px 8px; }
.equipe select.substituto { border-color: var(--ambar); background: var(--ambar-claro); }
.toast { cursor: pointer; background: var(--tinta); color: var(--papel); padding: 9px 14px; border-radius: var(--raio); max-width: 560px; }
.toast.erro { background: var(--carmim); color: #fff; }

/* ---------- login */
.entrada { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.entrada .caixa { width: min(380px, 100%); background: var(--folha); border: 1px solid var(--linha); border-radius: 8px; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.entrada h1 { color: var(--pinho); }

.etapas-editor .linha-etapa { display: grid; grid-template-columns: 1fr 150px 130px auto; gap: 8px; align-items: center; margin-bottom: 6px; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--linha); margin-bottom: 16px; }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 14px; cursor: pointer; color: var(--musgo); }
.tabs button.ativo { border-color: var(--pinho); color: var(--tinta); font-weight: 600; }

@media (max-width: 900px) {
  .casca { grid-template-columns: 1fr; }
  .lateral { position: static; height: auto; flex-direction: row; flex-wrap: wrap; }
  .lateral .rodape { margin-top: 0; border: 0; }
  .marca { padding-bottom: 0; width: 100%; }
  .nav-item { width: auto; }
  .indicadores { grid-template-columns: repeat(2, 1fr); }
  .form-grade { grid-template-columns: 1fr 1fr; }
  .conteudo { padding: 16px; }
}

/* ---------- tema na lateral */
.tema { display: flex; gap: 2px; margin-top: 8px; background: rgba(255, 255, 255, .1); border-radius: var(--raio); padding: 2px; }
.lateral .rodape .tema button { flex: 1; text-decoration: none; padding: 3px 0; border-radius: 4px; font-size: 12px; }
.lateral .rodape .tema button.ativo { background: rgba(255, 255, 255, .22); font-weight: 600; }

/* ---------- movimentação bancária */
.resumo-fin { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 8px 0 12px; }
.resumo-fin div { background: var(--cinza-claro); border-radius: var(--raio); padding: 8px 10px; }
.resumo-fin small { display: block; color: var(--musgo); font-size: 12px; }
.resumo-fin strong { font-weight: 600; }
.credito { color: var(--pinho); }
.debito { color: var(--carmim); }
.saldos { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; }

.modal.largo { width: min(1240px, 98vw); top: 2vh; max-height: 96vh; }
.conc-tabela td { vertical-align: top; }
.conc-tabela tbody tr { cursor: default; }
.conc-tabela tbody tr.lanc:hover td { background: var(--pinho-claro); }
.conc-tabela tr.aberta td { background: var(--pinho-claro); }
.conc-tabela select { padding: 4px 6px; font-size: 13px; }
.conc-tabela .memo { max-width: 420px; }
.detalhe-lanc td { background: var(--papel) !important; padding: 14px 16px 18px; }
.ok-sinal { color: var(--pinho); font-weight: 600; }
.doc { border: 1px solid var(--linha); border-radius: var(--raio); background: var(--folha); padding: 8px 10px; margin-bottom: 6px; display: flex; justify-content: space-between; gap: 10px; }
.doc .meta { font-size: 12px; color: var(--musgo); }
.form-doc { background: var(--folha); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px; margin-top: 8px; }
.form-doc .form-grade { grid-template-columns: repeat(6, 1fr); }
.form-doc .l3 { grid-column: span 3; }
.form-doc .l6 { grid-column: 1 / -1; }
.form-doc .l2 { grid-column: span 2; }
.gerar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 0; border-top: 1px solid var(--linha); margin-top: 14px;
  position: sticky; bottom: -22px; background: var(--folha); z-index: 2; }
.gerar select { width: auto; }
.erros-txt { margin-top: 10px; max-height: 220px; overflow-y: auto; }
.erros-txt li { margin-bottom: 3px; }

.form-pend { display: grid; grid-template-columns: 110px 1fr auto; gap: 6px; margin-top: 10px; }
.form-pend > input:first-child { grid-column: 1 / -1; }
.gaveta.expandida .topo-info { padding-right: 0; }
.gaveta.expandida .topo-acoes { padding-top: 22px; }
@media (max-width: 1100px) { .gaveta.expandida .topo-acoes { padding-top: 12px; } }

.info-import { background: var(--azul-claro); color: var(--tinta); border-radius: var(--raio); padding: 10px 12px; margin: 10px 0; display: grid; gap: 4px; font-size: 13px; }
.painel-fin { scroll-margin-top: 190px; }

.pend-anteriores { background: var(--carmim-claro); border-radius: var(--raio); padding: 8px 10px; margin-bottom: 10px; }
.pend-anteriores .item { border-color: rgba(180, 35, 24, .15); }
.titulo-anteriores { font-size: 12px; font-weight: 600; color: var(--musgo); margin: 2px 0 4px; }
.pend-anteriores .titulo-anteriores { color: var(--carmim); }

.fraco-lateral { font-size: 11px; opacity: .65; margin-top: 6px; }
.gaveta:not(.expandida) .topo-info { padding-right: 300px; }

/* ---------- abas da competência */
.abas-comp { display: flex; gap: 2px; margin: 14px -20px -18px; padding: 0 20px; }
.gaveta.expandida .abas-comp { margin: 14px -28px -18px; padding: 0 28px; }
.abas-comp button { background: none; border: 0; border-bottom: 3px solid transparent; padding: 9px 14px; cursor: pointer; color: var(--musgo); font-weight: 500; }
.abas-comp button.ativo { border-color: var(--pinho); color: var(--tinta); font-weight: 600; }
.contagem-aba { font-size: 12px; background: var(--cinza-claro); border-radius: 10px; padding: 0 7px; margin-left: 4px; }
.aba-mov { padding: 16px 20px 0; }
.gaveta.expandida .aba-mov { padding: 18px 28px 0; }
.mov-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.saldos-mov { display: flex; gap: 8px; align-items: flex-end; }
.saldos-mov input { width: 170px; }
.aba-mov .gerar { position: sticky; bottom: 0; padding: 12px 0 14px; }
.conc-tabela tbody tr.lanc { cursor: pointer; }
.etapa { grid-template-columns: 22px 1fr; }
.etapa .meta { grid-column: 2; }
.faixa-versao { position: sticky; top: 0; z-index: 50; background: var(--carmim); color: #fff; padding: 10px 16px; font-weight: 500; text-align: center; }

.tabela-plano tfoot td { background: var(--cinza-claro); border-top: 2px solid var(--linha); }
.input-valor { width: 140px !important; text-align: right; padding: 4px 8px !important; }
.nova-rubrica { display: grid; grid-template-columns: minmax(0, 2fr) 160px 180px auto; gap: 8px; align-items: end; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linha); }
.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 1000px) { .duas-colunas, .nova-rubrica { grid-template-columns: 1fr; } }

.rubrica-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.tabela-folha { width: 100%; border-collapse: collapse; }
.tabela-folha th, .tabela-folha td { padding: 4px 6px; border-bottom: 1px solid var(--linha); }
.tabela-folha th { background: none; position: static; }
.tabela-folha input { padding: 5px 8px; }
.tabela-folha tfoot td { border-bottom: 0; }
input.invalido { border-color: var(--carmim); background: var(--carmim-claro); }

/* ---------- responsável e conferente à direita do cabeçalho */
.gaveta.expandida .topo-grade { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.gaveta.expandida .topo-acoes { padding-top: 26px; }
.gaveta.expandida .topo-acoes .equipe { grid-template-columns: 1fr; gap: 8px; }
.gaveta:not(.expandida) .topo-acoes .equipe { grid-template-columns: 1fr 1fr; }

/* ---------- fluxo da competência em passos */
.fluxo { list-style: none; display: flex; margin: 16px 0 4px; padding: 0; counter-reset: passo; }
.fluxo li { flex: 1; position: relative; min-width: 0; }
.fluxo li + li::before {
  content: ""; position: absolute; top: 14px; left: calc(-50% + 16px); right: calc(50% + 16px); height: 2px; background: var(--linha);
}
.fluxo li.feito + li::before, .fluxo li.feito.atual::before { background: var(--pinho); }
.fluxo button { width: 100%; background: none; border: 0; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--musgo); }
.fluxo .bolinha {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600;
  border: 2px solid var(--linha); background: var(--folha); position: relative; z-index: 1;
}
.fluxo .rotulo { font-size: 12px; text-align: center; line-height: 1.25; }
.fluxo li.feito .bolinha { background: var(--pinho); border-color: var(--pinho); color: #fff; }
.fluxo li.feito .rotulo { color: var(--tinta); }
.fluxo li.atual .bolinha { border-color: var(--pinho); color: var(--pinho); box-shadow: 0 0 0 4px var(--pinho-claro); }
.fluxo li.atual .rotulo { color: var(--tinta); font-weight: 600; }
.fluxo li.feito.atual .bolinha { color: #fff; }
.fluxo button:hover .bolinha { border-color: var(--pinho); }
:root[data-tema="escuro"] .fluxo li.feito .bolinha { color: #0d1512; }

/* ---------- acompanhamento em coluna única */
.gaveta-corpo.coluna-unica, .gaveta.expandida .gaveta-corpo.coluna-unica { display: block; }
.gaveta-corpo.coluna-unica .col-principal .painel, .gaveta-corpo.coluna-unica .col-lateral > .painel { margin-bottom: 16px; }

/* =====================================================================
   Releitura visual (v19): menu claro em seções, barra superior, grades
   ===================================================================== */
:root {
  --papel: #f5f6f8;
  --folha: #ffffff;
  --tinta: #172033;
  --musgo: #667085;
  --linha: #e4e7ec;
  --cinza-claro: #f0f2f5;
  --pinho: #1d5e4b;
  --pinho-claro: #e6f0ec;
  --raio: 8px;
  --sombra-cartao: 0 1px 2px rgba(16, 24, 40, .05);
  --largura-menu: 240px;
}
:root[data-tema="escuro"] { --papel: #0f1412; --folha: #171d1a; --linha: #29312d; --cinza-claro: #1f2622; }
body { font-size: 14px; }

.casca { grid-template-columns: var(--largura-menu) 1fr; }
.lateral {
  background: var(--folha); color: var(--tinta); border-right: 1px solid var(--linha); padding: 18px 12px 14px; gap: 2px;
  overflow-y: auto;
}
:root[data-tema="escuro"] .lateral { background: var(--folha); }
.marca { display: flex; align-items: center; gap: 10px; padding: 2px 10px 18px; margin-bottom: 6px; border-bottom: 1px solid var(--linha); }
.marca strong { display: block; font-size: 16px; letter-spacing: -.01em; }
.marca small { display: block; font-size: 12px; color: var(--musgo); font-weight: 400; }
.marca-icone { color: var(--pinho); display: inline-flex; }
.marca-icone svg { width: 30px; height: 30px; }
.nav-grupo { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--musgo); padding: 16px 10px 6px; }
.nav-item { gap: 10px; justify-content: flex-start; padding: 8px 10px; color: var(--tinta); border-radius: 8px; }
.nav-item .ic { color: var(--musgo); display: inline-flex; }
.nav-item .nav-txt { flex: 1; }
.nav-item:hover { background: var(--cinza-claro); }
.nav-item.ativo { background: var(--cinza-claro); font-weight: 600; }
.nav-item.ativo .ic { color: var(--pinho); }
.nav-item .contagem { background: var(--cinza-claro); color: var(--musgo); font-size: 11.5px; padding: 1px 8px; border-radius: 10px; font-weight: 500; }
.nav-item.ativo .contagem { background: var(--folha); }
.nav-item .contagem.alerta { background: var(--carmim-claro); color: var(--carmim); }
.nav-rodape { margin-top: auto; padding: 14px 10px 0; font-size: 11.5px; color: var(--musgo); }

.area { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.topo {
  height: 62px; display: flex; align-items: center; gap: 18px; padding: 0 28px; background: var(--folha);
  border-bottom: 1px solid var(--linha); position: sticky; top: 0; z-index: 15;
}
.trilha { white-space: nowrap; font-size: 14px; }
.busca-global { flex: 1; max-width: 460px; margin: 0 auto; position: relative; display: flex; align-items: center; }
.busca-global .ic { position: absolute; left: 11px; color: var(--musgo); display: inline-flex; pointer-events: none; }
.busca-global input { padding-left: 36px; height: 38px; background: var(--papel); border-color: var(--linha); border-radius: 8px; }
.usuario-menu { position: relative; }
.chip-usuario { display: flex; align-items: center; gap: 10px; background: var(--folha); border: 1px solid var(--linha); border-radius: 24px; padding: 4px 12px 4px 4px; cursor: pointer; }
.chip-txt { display: flex; flex-direction: column; text-align: left; line-height: 1.2; }
.chip-txt strong { font-size: 13px; }
.chip-txt small { font-size: 11.5px; color: var(--musgo); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--pinho); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 600; flex: none; }
.avatar.mini { width: 22px; height: 22px; font-size: 10px; }
.menu-suspenso {
  position: absolute; right: 0; top: calc(100% + 6px); width: 260px; background: var(--folha); border: 1px solid var(--linha);
  border-radius: 10px; box-shadow: 0 12px 32px rgba(16, 24, 40, .14); padding: 8px; z-index: 30;
}
.menu-titulo { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--musgo); padding: 6px 8px; }
.tema-escolha { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 0 4px 8px; border-bottom: 1px solid var(--linha); margin-bottom: 6px; }
.tema-escolha button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border: 1px solid var(--linha); background: var(--folha); border-radius: 8px; cursor: pointer; font-size: 12px; }
.tema-escolha button.ativo { border-color: var(--pinho); color: var(--pinho); background: var(--pinho-claro); }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; background: none; border-radius: 6px; cursor: pointer; text-align: left; }
.menu-item:hover { background: var(--cinza-claro); }
.menu-item .ic { color: var(--musgo); display: inline-flex; }

.conteudo { padding: 28px 32px 56px; }
h1 { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.cabecalho { margin-bottom: 14px; }
.sub { max-width: 760px; }

/* botões */
.btn { height: 38px; padding: 0 14px; border-radius: 8px; border-color: var(--linha); font-weight: 500; gap: 8px; box-shadow: var(--sombra-cartao); }
.btn .ic { display: inline-flex; color: inherit; }
.btn.contorno { border-color: var(--pinho); color: var(--pinho); }
.btn.mini { height: 28px; padding: 0 9px; font-size: 12.5px; }
.btn.icone-so { width: 38px; padding: 0; justify-content: center; }
.btn.icone-so.mini { width: 28px; }
.ic.pequeno svg { width: 14px; height: 14px; }
.acoes-pagina { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 4px 0 18px; }
.alternador { background: var(--cinza-claro); border: 0; padding: 3px; border-radius: 10px; gap: 2px; }
.alternador button { border-radius: 8px; padding: 6px 14px; display: inline-flex; align-items: center; gap: 6px; color: var(--musgo); font-weight: 500; }
.alternador button .ic { display: inline-flex; }
.alternador button.ativo { background: var(--folha); color: var(--tinta); box-shadow: 0 1px 3px rgba(16, 24, 40, .1); }

/* filtros */
.filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; }
.periodo { display: flex; gap: 6px; align-items: center; }
.periodo input { width: 160px; height: 40px; }
.campo-busca { position: relative; display: flex; align-items: center; flex: 1 1 280px; max-width: 380px; }
.campo-busca .ic { position: absolute; left: 11px; color: var(--musgo); display: inline-flex; pointer-events: none; }
.campo-busca input { padding-left: 36px; height: 40px; border-radius: 8px; }
select.pilula { width: auto; height: 40px; border-radius: 8px; padding: 0 30px 0 12px; background-color: var(--folha); max-width: 240px; }
.pilula-check { height: 40px; padding: 0 12px; border: 1px solid var(--linha); border-radius: 8px; background: var(--folha); }
.link-limpar { background: none; border: 0; color: var(--musgo); cursor: pointer; font-weight: 500; padding: 0 6px; }
.link-limpar:hover { color: var(--tinta); text-decoration: underline; }
.meta-lista { font-size: 12.5px; color: var(--musgo); margin: 6px 0 12px; }

/* indicadores */
.indicadores { gap: 12px; }
.indicador { align-items: center; gap: 12px; padding: 14px 16px; border-radius: 10px; box-shadow: var(--sombra-cartao); }
.indicador > span:last-child { display: flex; flex-direction: column; }
.indicador strong { font-size: 24px; }
.indicador span span { font-size: 13px; }
.ic-ind { width: 38px; height: 38px; border-radius: 9px; background: var(--cinza-claro); color: var(--musgo); display: grid; place-items: center; flex: none; }
.indicador.atraso .ic-ind { background: var(--carmim-claro); color: var(--carmim); }
.indicador.ativo { border-color: var(--pinho); box-shadow: 0 0 0 1px var(--pinho); }

/* grade */
.tabela-wrap { border-radius: 12px; box-shadow: var(--sombra-cartao); }
table.tabela-grade th {
  background: var(--folha); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--musgo);
  padding: 13px 16px; border-bottom: 1px solid var(--linha); user-select: none;
}
table.tabela-grade th.ordenavel { cursor: pointer; }
table.tabela-grade th.ordenavel:hover { color: var(--tinta); }
table.tabela-grade th .seta { color: var(--pinho); }
table.tabela-grade td { padding: 14px 16px; }
table.tabela-grade tbody tr:hover td { background: var(--papel); }
.chave { color: var(--pinho); font-weight: 600; }
.nome-principal { font-weight: 500; }
.pequeno-txt { font-size: 12px; }
.etq { border-radius: 12px; padding: 2px 9px; font-weight: 500; }
.etq.ponto::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: 1px; }
.etq.s-concluida { background: var(--pinho-claro); color: var(--pinho); }
.etq.t-em_execucao { background: var(--pinho-claro); color: var(--pinho); }
.etq.t-em_finalizacao { background: var(--azul-claro); color: var(--azul); }
.etq.t-encerrado { background: var(--cinza-claro); color: var(--musgo); }

/* kanban */
.coluna { background: var(--cinza-claro); border-radius: 12px; }
.coluna h3 { align-items: center; }
.contagem-col { font-size: 12px; color: var(--musgo); background: var(--folha); border-radius: 10px; padding: 0 8px; }
.cartao { border-radius: 10px; padding: 12px; }
.cartao .ent { margin: 6px 0 2px; font-weight: 500; }
.topo-cartao { margin-top: 0; }
.pe-cartao { justify-content: flex-start; gap: 8px; padding-top: 8px; border-top: 1px solid var(--linha); margin-top: 10px; }

/* painéis e modais */
.painel { border-radius: 12px; box-shadow: var(--sombra-cartao); }
.modal { border-radius: 14px; padding: 24px 26px; }
.fechar-quadrado { position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; border-radius: 8px; border: 0; background: var(--cinza-claro); color: var(--musgo); cursor: pointer; display: grid; place-items: center; }
.colunas-editor { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 18px; }
.titulo-secao { font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--musgo); margin-bottom: 6px; }
.linha-coluna { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--linha); }
.linha-coluna .setas { display: flex; gap: 4px; }
.linha-coluna input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--pinho); }
.gaveta.expandida { left: var(--largura-menu); }

@media (max-width: 900px) {
  .casca { grid-template-columns: 1fr; }
  .lateral { position: static; height: auto; flex-direction: column; border-right: 0; border-bottom: 1px solid var(--linha); }
  .topo { padding: 0 16px; }
  .chip-txt, .trilha { display: none; }
  .colunas-editor { grid-template-columns: 1fr; }
  .gaveta.expandida { left: 0; }
}

td.c-entidade { min-width: 240px; }
.busca-global { flex: 1 1 460px; }
.busca-global input { width: 100%; }
.indicador strong { color: var(--tinta); }
.indicador.atraso strong { color: var(--carmim); }
table.tabela-grade th { white-space: nowrap; padding: 13px 14px; }
table.tabela-grade td { padding: 14px 14px; }

/* cabeçalhos de todas as tabelas no mesmo padrão da grade */
.tabela-wrap table th { background: var(--folha); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--musgo); padding: 12px 14px; border-bottom: 1px solid var(--linha); }
.tabela-wrap table td { padding: 12px 14px; }
.cartao .pe-cartao { justify-content: flex-start; }
.avatar.avatar-vazio { background: var(--cinza-claro); border: 1px dashed var(--linha); }
:root[data-tema="escuro"] .avatar { color: #0d1512; }

/* ---------- seções do acompanhamento (padrão Nexx Ops) */
.secao { background: var(--folha); border: 1px solid var(--linha); border-radius: 12px; padding: 18px 20px; margin-bottom: 16px; box-shadow: var(--sombra-cartao); }
.secao-cab { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.secao-cab .chevron { color: var(--musgo); display: inline-flex; margin-top: 3px; transition: transform .15s; }
.secao-cab .chevron.fechado { transform: rotate(-90deg); }
.secao-tit { flex: 1; min-width: 0; }
.secao-tit h3 { margin: 0; font-size: 16px; }
.secao-tit p { margin: 2px 0 0; color: var(--musgo); font-size: 13px; }
.cartoes-resumo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0 14px; }
.cartoes-resumo > div { background: var(--cinza-claro); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.cartoes-resumo strong { font-size: 20px; font-weight: 600; }
.cartoes-resumo span { color: var(--musgo); font-size: 13px; }
.barra-progresso { height: 8px; border-radius: 4px; background: var(--cinza-claro); overflow: hidden; }
.barra-progresso i { display: block; height: 100%; background: #1f8a5b; border-radius: 4px; transition: width .3s; }
.legenda-progresso { display: flex; gap: 16px; font-size: 12px; color: var(--musgo); margin: 8px 0 14px; }
.legenda-progresso i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--cinza-claro); border: 1px solid var(--linha); margin-right: 6px; vertical-align: -1px; }
.legenda-progresso i.conc { background: #1f8a5b; border-color: #1f8a5b; }
table.tabela-secao { width: 100%; border-collapse: collapse; }
table.tabela-secao th { background: var(--cinza-claro); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--musgo); padding: 11px 14px; text-align: left; position: static; }
table.tabela-secao td { padding: 13px 14px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
table.tabela-secao tbody tr { cursor: default; }
table.tabela-secao tbody tr:hover td { background: transparent; }
table.tabela-secao tr:last-child td { border-bottom: 0; }
.nome-etapa-tab { font-weight: 600; margin-right: 6px; }
.pessoa { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.avatar.mini { width: 24px; height: 24px; font-size: 10px; background: #2b3a67; }
:root[data-tema="escuro"] .avatar.mini { background: #9fb3e6; }
.nota-secao { margin-top: 14px; background: var(--cinza-claro); border: 1px solid var(--linha); border-radius: 8px; padding: 12px 14px; font-size: 13px; color: var(--musgo); }
.etq.alerta.ponto, .etq.aviso.ponto { font-weight: 500; }
.riscado { color: var(--musgo); }
.riscado > :first-child { text-decoration: line-through; }
.linha-anterior td { background: var(--ambar-claro); }
.form-pend-nova { display: grid; grid-template-columns: 2fr 140px 1fr auto; gap: 10px; align-items: end; margin: 14px 0; padding: 14px; background: var(--cinza-claro); border-radius: 10px; }
.acoes-inline { display: flex; gap: 6px; }
.vazio-secao { color: var(--musgo); margin: 12px 0 0; }
.soltar-arquivos { margin-top: 14px; border: 1.5px dashed var(--linha); border-radius: 10px; padding: 22px; text-align: center; color: var(--musgo); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--papel); }
.soltar-arquivos.ativo, .soltar-arquivos:hover { border-color: var(--pinho); background: var(--pinho-claro); }
.soltar-arquivos .ic { display: inline-flex; }
.soltar-arquivos small { font-size: 12px; }
.link-forte { color: var(--pinho); }
.lista-anexos { margin-top: 12px; display: grid; gap: 8px; }
.anexo { display: flex; align-items: center; gap: 12px; border: 1px solid var(--linha); border-radius: 10px; padding: 10px 12px; }
.anexo .arquivo { color: var(--pinho); display: inline-flex; }
.anexo-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.anexo-txt a { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anexo-txt small { color: var(--musgo); font-size: 12px; }
.form-comentario { display: flex; gap: 8px; align-items: center; margin: 14px 0 8px; }
.comentario { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--linha); }
.texto-forte { color: var(--tinta); }
@media (max-width: 900px) { .cartoes-resumo, .form-pend-nova { grid-template-columns: 1fr; } }

/* ---------- cockpit */
.cab-com-acoes { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.acoes-cab { display: flex; gap: 10px; align-items: center; }
.ck-cartoes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 6px 0 14px; }
.ck-cartao { background: var(--folha); border: 1px solid var(--linha); border-radius: 12px; padding: 14px 16px; box-shadow: var(--sombra-cartao); display: flex; flex-direction: column; gap: 6px; }
.ck-cartao.clicavel { cursor: pointer; }
.ck-cartao.clicavel:hover { border-color: var(--pinho); }
.ck-rotulo { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--musgo); font-weight: 500; }
.ic-mini { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: var(--cinza-claro); color: var(--musgo); }
.ic-mini svg { width: 15px; height: 15px; }
.ic-mini.verde { background: var(--pinho-claro); color: var(--pinho); }
.ic-mini.vermelho { background: var(--carmim-claro); color: var(--carmim); }
.ic-mini.ambar { background: var(--ambar-claro); color: var(--ambar); }
.ic-mini.azul { background: var(--azul-claro); color: var(--azul); }
.ck-cartao strong { font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.ck-cartao small { color: var(--musgo); font-size: 12.5px; }
.ck-alerta { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-radius: 10px; padding: 12px 16px; margin-bottom: 10px; font-size: 13.5px; }
.ck-alerta.atencao { background: var(--ambar-claro); border: 1px solid #ecd6a8; color: #6b4a10; }
.ck-alerta.risco { background: var(--carmim-claro); border: 1px solid #f0c2bd; color: #7a1a12; }
:root[data-tema="escuro"] .ck-alerta.atencao { border-color: #5a4520; color: var(--ambar); }
:root[data-tema="escuro"] .ck-alerta.risco { border-color: #5a2a26; color: var(--carmim); }
.botao-link { background: none; border: 0; cursor: pointer; font-weight: 600; white-space: nowrap; padding: 0; font-size: 13.5px; }
.ck-grade { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; margin-top: 14px; align-items: start; }
.secao-cab.sem-clique { cursor: default; margin-bottom: 12px; }
.linha-clicavel { cursor: pointer !important; }
table.tabela-secao tbody tr.linha-clicavel:hover td { background: var(--papel); }
.sinal { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--linha); }
.sinal.verde { background: #1f8a5b; }
.sinal.amarelo { background: #d99a1e; }
.sinal.vermelho { background: var(--carmim); }
.carga { display: grid; gap: 6px; }
.carga-linha { display: grid; grid-template-columns: 190px 1fr 52px auto; gap: 12px; align-items: center; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.carga-linha:hover { background: var(--papel); }
.carga-linha.eu { background: var(--pinho-claro); }
.carga-nome { display: flex; align-items: center; gap: 8px; font-size: 13.5px; white-space: nowrap; overflow: hidden; }
.carga-linha.eu .carga-nome { font-weight: 600; }
.carga-barra { height: 14px; border-radius: 4px; background: var(--cinza-claro); display: flex; overflow: hidden; }
.carga-barra i { display: block; height: 100%; }
.carga-barra i.conc { background: #1f8a5b; }
.carga-barra i.aberta { background: #2b3a67; }
.carga-num { font-weight: 600; text-align: right; font-size: 13px; }
.carga-tags { display: flex; gap: 4px; flex-wrap: wrap; min-width: 0; }
.legenda-progresso i.aberta-leg { background: #2b3a67; border-color: #2b3a67; }
.legenda-progresso i.ideal-leg { background: none; border: 0; border-top: 2px dashed var(--musgo); height: 0; width: 14px; vertical-align: 3px; }
.ritmo-resumo { display: flex; gap: 22px; flex-wrap: wrap; font-size: 13.5px; margin-bottom: 8px; color: var(--musgo); }
.ritmo-resumo strong { color: var(--tinta); }
.ritmo-resumo .credito strong { color: var(--pinho); }
.ritmo-resumo .debito strong { color: var(--carmim); }
.grafico-ritmo { width: 100%; height: 210px; display: block; }
.grafico-ritmo .eixos line { stroke: var(--linha); stroke-width: 1; }
.grafico-ritmo .eixos text { fill: var(--musgo); font-size: 11px; font-family: inherit; }
.grafico-ritmo .linha-ideal { fill: none; stroke: var(--musgo); stroke-width: 1.5; stroke-dasharray: 5 4; }
.grafico-ritmo .linha-real { fill: none; stroke: #1f8a5b; stroke-width: 2.5; stroke-linejoin: round; }
.grafico-ritmo .area-real { fill: #1f8a5b; opacity: .12; }
.termo-atencao { padding: 12px 0; border-bottom: 1px solid var(--linha); cursor: pointer; }
.termo-atencao:last-of-type { border-bottom: 0; }
.termo-atencao:hover .ta-cab strong { color: var(--pinho); }
.ta-cab { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.termo-atencao ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--musgo); }
.funil { display: grid; gap: 10px; }
.funil-linha { display: grid; grid-template-columns: 150px 1fr 30px; gap: 10px; align-items: center; font-size: 13px; }
.funil-nome { text-align: right; color: var(--musgo); }
.funil-barra { height: 14px; border-radius: 4px; background: var(--cinza-claro); overflow: hidden; }
.funil-barra i { display: block; height: 100%; border-radius: 4px; }
.funil-linha strong { text-align: right; }
.f-a_fazer { background: #98a2b3; }
.f-em_execucao { background: #2b3a67; }
.f-aguardando { background: #d99a1e; }
.f-em_conferencia { background: #4a6fa5; }
.f-concluida { background: #1f8a5b; }
@media (max-width: 1200px) { .ck-cartoes { grid-template-columns: repeat(3, 1fr); } .ck-grade { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .ck-cartoes { grid-template-columns: 1fr; } .carga-linha { grid-template-columns: 1fr; } }

/* ---------- lançamentos SIT */
.soltar-arquivos.grande { padding: 30px; margin-top: 4px; }
.soltar-arquivos.grande .ic svg { width: 26px; height: 26px; }
.etq.l-sem_extrato { background: var(--cinza-claro); color: var(--musgo); }
.etq.l-classificar { background: var(--ambar-claro); color: var(--ambar); }
.etq.l-pronto { background: var(--azul-claro); color: var(--azul); }
.etq.l-gerado { background: var(--pinho-claro); color: var(--pinho); }
.etq.l-desatualizado { background: var(--carmim-claro); color: var(--carmim); }
.etq.l-importado { background: #1f8a5b; color: #fff; }
.fluxo-lanc { margin: 4px 0 14px; }
.fluxo-lanc button { cursor: default; }
.faixa-estado { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; border: 1px solid var(--linha); background: var(--folha); }
.faixa-estado.l-classificar { background: var(--ambar-claro); border-color: #ecd6a8; }
.faixa-estado.l-desatualizado { background: var(--carmim-claro); border-color: #f0c2bd; }
.faixa-estado.l-gerado, .faixa-estado.l-pronto { background: var(--azul-claro); border-color: #c8d7ea; }
.faixa-estado.l-importado { background: var(--pinho-claro); border-color: #bcd9cb; }
.btn.mini-alto { height: 34px; }
.aba-mov { padding: 0 !important; }
.faixa-lanc { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 14px; border-radius: 10px; background: var(--cinza-claro); font-size: 13.5px; }
.faixa-lanc .ic { color: var(--pinho); display: inline-flex; }
.faixa-lanc .botao-link { margin-left: auto; }
.modal.estreito-medio { width: min(620px, 96vw); }
.gaveta-topo { padding-bottom: 14px; }

/* ---------- cadastro do termo em página única */
.pagina-form { max-width: 1100px; padding-bottom: 80px; }
.pagina-form .secao .form-grade { margin-top: 4px; }
.sub-titulo { font-weight: 600; font-size: 13.5px; margin: 16px 0 8px; }
.rodape-form { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 10px; padding: 14px 0; background: linear-gradient(transparent, var(--papel) 30%); }

/* ---------- competência como página */
.comp-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.comp-nav-meses { display: flex; align-items: center; gap: 10px; }
.comp-nav-meses strong { min-width: 70px; text-align: center; }
.comp-nav-meses .btn .ic { display: inline-flex; }
.cab-comp { padding: 20px 24px; }
.cab-comp .topo-grade { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.cab-comp .topo-info { padding-right: 0; }
.cab-comp .equipe { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 0; }
.cab-comp .fluxo { margin: 22px 0 6px; }
.pagina-comp .gaveta-corpo { padding: 0; }
@media (max-width: 1000px) { .cab-comp .topo-grade { grid-template-columns: 1fr; } }

/* ---------- conferência da importação de entidades */
.tabela-import td { vertical-align: top; }
.tabela-import select, .tabela-import input { padding: 5px 8px; font-size: 13px; }
.tabela-import tr.imp-ignorar td { color: var(--musgo); background: var(--papel); }
.tabela-import tr.imp-criar td:first-child { box-shadow: inset 3px 0 0 var(--azul); }
.tabela-import tr.imp-atualizar td:first-child { box-shadow: inset 3px 0 0 var(--pinho); }
.pequeno-txt.alerta { color: var(--ambar); font-weight: 500; }

/* =====================================================================
   Identidade Chiapin & Contadores Associados (v35)
   Marinho #12205e (marca), azul royal #2b479c (ação), rosa #ed2c67 (destaque),
   cinza #72727d (texto secundário). Verde, âmbar e vermelho ficam só para estado.
   ===================================================================== */
:root {
  --marinho: #12205e;
  --royal: #2b479c;
  --rosa: #ed2c67;
  --rosa-claro: #fde8ef;
  --sucesso: #1a8754;
  --sucesso-claro: #e3f4ea;
  --pinho: #2b479c;            /* cor de ação: links, contornos, seleção */
  --pinho-claro: #e9eef9;
  --tinta: #12205e;
  --musgo: #66697a;
  --papel: #f5f6fa;
  --linha: #e2e5ee;
  --cinza-claro: #eff1f7;
  --azul: #3d5fb8;
  --azul-claro: #e7edfa;
  --carmim: #c0322a;
  --carmim-claro: #fbe9e7;
}
:root[data-tema="escuro"] {
  --marinho: #c9d4f5;
  --royal: #8ea7ec;
  --rosa: #ff5d8f;
  --rosa-claro: #3a1a28;
  --sucesso: #4cc38a;
  --sucesso-claro: #16301f;
  --pinho: #8ea7ec;
  --pinho-claro: #1d2645;
  --tinta: #e6e9f5;
  --musgo: #9aa0b8;
  --papel: #0f1324;
  --folha: #171c31;
  --linha: #2a3150;
  --cinza-claro: #20263f;
  --azul: #8ea7ec;
  --azul-claro: #1d2645;
}

/* marca */
.marca { flex-direction: column; align-items: flex-start; gap: 12px; padding: 4px 10px 16px; }
.marca > img { width: 168px; height: auto; display: block; }
.marca-produto { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: var(--cinza-claro); width: 100%; }
.marca-produto img { width: 22px; height: 22px; }
.marca-produto strong { display: block; font-size: 13.5px; color: var(--marinho); }
.marca-produto small { display: block; font-size: 11.5px; color: var(--musgo); }
.logo-escuro { display: none !important; }
:root[data-tema="escuro"] .logo-claro { display: none !important; }
:root[data-tema="escuro"] .logo-escuro { display: block !important; }
.login-marca img { width: 220px; height: auto; margin: 0 auto 18px; display: block; }
.caixa h1 { text-align: center; margin-bottom: 2px; }
.caixa .sub { text-align: center; }

/* menu: item ativo com a barra rosa da marca */
.nav-item { position: relative; }
.nav-item.ativo { background: var(--pinho-claro); color: var(--marinho); }
.nav-item.ativo::before { content: ""; position: absolute; left: -12px; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--rosa); }
.nav-item.ativo .ic { color: var(--rosa); }
.nav-item .contagem.alerta { background: var(--rosa-claro); color: var(--rosa); }

/* botões e controles */
.btn.primario { background: var(--marinho); border-color: var(--marinho); color: #fff; }
.btn.primario:hover { background: var(--royal); border-color: var(--royal); }
:root[data-tema="escuro"] .btn.primario { color: #0f1324; }
.btn.contorno { border-color: var(--royal); color: var(--royal); }
.avatar { background: var(--marinho); }
.avatar.mini { background: var(--royal); }
:root[data-tema="escuro"] .avatar, :root[data-tema="escuro"] .avatar.mini { color: #0f1324; }
input:focus, select:focus, textarea:focus { border-color: var(--royal); box-shadow: 0 0 0 3px rgba(43, 71, 156, .15); outline: none; }
.chave { color: var(--royal); }
h1, h2, h3 { color: var(--marinho); }

/* trilha de passos: passo atual em rosa, concluídos em marinho */
.fluxo li.feito .bolinha { background: var(--marinho); border-color: var(--marinho); }
.fluxo li.feito + li::before, .fluxo li.feito.atual::before { background: var(--marinho); }
.fluxo li.atual .bolinha { border-color: var(--rosa); color: var(--rosa); box-shadow: 0 0 0 4px var(--rosa-claro); }
.fluxo li.feito.atual .bolinha { background: var(--sucesso); border-color: var(--sucesso); color: #fff; box-shadow: none; }
.abas-comp button.ativo, .tabs button.ativo { border-color: var(--rosa); }

/* estados: verde significa concluído/pronto, independente da marca */
.etq.s-concluida, .etq.t-em_execucao { background: var(--sucesso-claro); color: var(--sucesso); }
.etq.s-em_execucao { background: var(--pinho-claro); color: var(--royal); }
.mes.s-concluida { background: var(--sucesso); border-color: var(--sucesso); }
.mes.s-em_execucao { background: var(--pinho-claro); border-color: var(--royal); }
.credito, .ok-sinal, .ritmo-resumo .credito strong { color: var(--sucesso); }
.etq.l-gerado { background: var(--azul-claro); color: var(--royal); }
.etq.l-importado { background: var(--sucesso); color: #fff; }
.faixa-estado.l-importado { background: var(--sucesso-claro); border-color: #bfe3cd; }
.barra-progresso i, .carga-barra i.conc, .f-concluida, .legenda-progresso i.conc { background: var(--sucesso); border-color: var(--sucesso); }
.sinal.verde { background: var(--sucesso); }
.grafico-ritmo .linha-real { stroke: var(--sucesso); }
.grafico-ritmo .area-real { fill: var(--sucesso); }
.carga-barra i.aberta, .legenda-progresso i.aberta-leg, .f-em_execucao { background: var(--royal); border-color: var(--royal); }
.carga-linha.eu { background: var(--pinho-claro); }
.indicador.ativo { border-color: var(--rosa); box-shadow: 0 0 0 1px var(--rosa); }
.link-forte, .link { color: var(--royal); }
.ic-mini.verde { background: var(--sucesso-claro); color: var(--sucesso); }
.ic-mini.azul { background: var(--pinho-claro); color: var(--royal); }
.marca-icone { color: var(--rosa); }
.soltar-arquivos.ativo, .soltar-arquivos:hover { border-color: var(--royal); background: var(--pinho-claro); }
.info-import { background: var(--azul-claro); }
.caixa h1 { color: var(--marinho); }
.caixa .btn.primario { justify-content: center; width: 100%; }
.marca { padding: 2px 0 14px; }
.marca-produto { padding: 10px 12px; }
.marca-produto img { width: 26px; height: 26px; }
.marca-produto strong { font-size: 15px; }

/* ---------- filtros por coluna (padrão de todas as grades) */
.th-int { display: inline-flex; align-items: center; gap: 2px; }
th.num .th-int { flex-direction: row-reverse; }
.th-ordem { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; }
.th-ordem:hover { color: var(--tinta); }
.th-filtro { background: none; border: 0; padding: 2px; border-radius: 4px; cursor: pointer; color: var(--linha); display: inline-flex; opacity: .9; }
.th-filtro svg { width: 13px; height: 13px; }
th:hover .th-filtro { color: var(--musgo); }
.th-filtro.ativo { color: var(--rosa); }
.th-filtro:hover { background: var(--cinza-claro); color: var(--tinta); }
.chip-filtro { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border: 1px solid var(--linha); border-radius: 8px; background: var(--folha); color: var(--tinta); font-weight: 500; cursor: pointer; white-space: nowrap; max-width: 280px; }
.chip-filtro .ic { display: inline-flex; color: var(--musgo); }
.chip-filtro.ativo { border-color: var(--royal); background: var(--pinho-claro); color: var(--marinho); }
span.chip-filtro { padding: 0 4px 0 12px; cursor: default; }
.chip-txt-btn { background: none; border: 0; font: inherit; color: inherit; cursor: pointer; padding: 0; overflow: hidden; text-overflow: ellipsis; }
.chip-x { background: none; border: 0; font-size: 18px; line-height: 1; color: var(--musgo); cursor: pointer; padding: 0 6px; }
.pop-filtro { position: fixed; z-index: 60; width: 300px; background: var(--folha); border: 1px solid var(--linha); border-radius: 12px; box-shadow: 0 16px 40px rgba(18, 32, 94, .18); padding: 12px; }
.pop-tit { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--musgo); margin: 0 4px 8px; }
.pop-busca { max-width: none; }
.pop-busca input { height: 36px; }
.pop-acoes-topo { display: flex; justify-content: space-between; margin: 8px 4px; font-size: 13px; }
.pop-lista { max-height: 260px; overflow-y: auto; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); padding: 4px 0; }
.pop-item { display: flex; align-items: center; gap: 8px; padding: 6px 6px; border-radius: 6px; cursor: pointer; font-size: 13.5px; }
.pop-item:hover { background: var(--cinza-claro); }
.pop-item input { width: 16px; height: 16px; accent-color: var(--royal); }
.pop-v { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop-n { color: var(--musgo); font-size: 12px; }
.pop-rodape { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; }
.pop-mais { width: 240px; padding: 8px; }
.pop-mais .menu-item { font-size: 13.5px; }

/* ---------- cabeçalho dos lançamentos SIT no padrão da competência */
.campo-leitura { min-height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--linha); border-radius: 8px; background: var(--papel); font-size: 13.5px; }
.campo-leitura.substituto { border-color: var(--ambar); background: var(--ambar-claro); }
.cab-comp .faixa-lanc + .faixa-lanc { margin-top: 8px; }
.faixa-estado-lanc.l-classificar { background: var(--ambar-claro); }
.faixa-estado-lanc.l-desatualizado { background: var(--carmim-claro); }
.faixa-estado-lanc.l-pronto, .faixa-estado-lanc.l-gerado { background: var(--azul-claro); }
.faixa-estado-lanc.l-importado { background: var(--sucesso-claro); }
.pagina-comp .aba-mov { margin-top: 16px; }
.acoes-pagina .alternador + .alternador { margin-left: 6px; }
.estado-txt { display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; flex-wrap: wrap; }

/* ---------- conferência e desempenho */
.aviso-box.trava { display: flex; align-items: center; gap: 8px; }
.aviso-box.trava .ic { display: inline-flex; }
.conf-acao { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 16px; border: 1px solid var(--linha); border-radius: 10px; background: var(--papel); margin-bottom: 12px; }
.form-conf { border: 1px solid var(--royal); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; background: var(--folha); }
.form-conf h4 { margin: 0 0 4px; }
.ap-linha { display: grid; grid-template-columns: 1.3fr 150px 2fr auto; gap: 8px; margin-bottom: 8px; }
.rodadas { display: grid; gap: 10px; margin-top: 4px; }
.rodada { border: 1px solid var(--linha); border-radius: 10px; padding: 10px 14px; }
.rodada-cab { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.apontamento { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px dashed var(--linha); font-size: 13.5px; }
.apontamento.anulado { opacity: .55; text-decoration: line-through; }
.regras-lista { font-size: 13.5px; }
.regras-lista ul { margin: 0 0 10px; padding-left: 18px; }
.regras-lista li { margin-bottom: 4px; }
tr.selecionada td { background: var(--pinho-claro); }
@media (max-width: 900px) { .ap-linha { grid-template-columns: 1fr; } .conf-acao { flex-direction: column; align-items: flex-start; } }

/* ---------- aviso de extrato não importado */
.sem-extrato { display: flex; align-items: center; gap: 18px; padding: 22px 24px; border: 1px dashed var(--ambar); border-radius: 12px; background: var(--ambar-claro); margin-top: 4px; }
.sem-extrato-ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--folha); color: var(--ambar); flex-shrink: 0; box-shadow: 0 0 0 6px rgba(168, 106, 18, .12); }
.sem-extrato-ic .ic svg { width: 24px; height: 24px; }
.sem-extrato-txt { flex: 1; display: grid; gap: 4px; }
.sem-extrato-txt strong { font-size: 16px; color: var(--marinho); }
.sem-extrato-txt span { color: var(--musgo); font-size: 13.5px; }
:root[data-tema="escuro"] .sem-extrato-txt strong { color: var(--tinta); }
@media (max-width: 800px) { .sem-extrato { flex-direction: column; align-items: flex-start; } }

/* ---------- reabrir competência */
.conf-acao.concluida { background: var(--sucesso-claro); border-color: #bfe3cd; }
:root[data-tema="escuro"] .conf-acao.concluida { border-color: #2a4a36; }
.opcoes-reab { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.opcoes-reab label { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--linha); border-radius: 10px; cursor: pointer; }
.opcoes-reab label.ativo { border-color: var(--royal); background: var(--pinho-claro); }
.opcoes-reab input { margin-top: 3px; accent-color: var(--royal); }
.opcoes-reab small { display: block; color: var(--musgo); font-size: 12.5px; margin-top: 2px; }

/* ---------- sino de notificações */
.sino-wrap { position: relative; margin-left: auto; }
.sino { position: relative; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--linha); background: var(--folha); color: var(--musgo); cursor: pointer; display: grid; place-items: center; }
.sino:hover { color: var(--marinho); border-color: var(--royal); }
.sino .ic svg { width: 19px; height: 19px; }
.sino.tem { color: var(--marinho); }
.sino-num { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--royal); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--folha); }
.sino-num.risco { background: var(--rosa); }
.painel-sino { position: absolute; right: 0; top: 48px; width: 420px; max-width: 92vw; background: var(--folha); border: 1px solid var(--linha); border-radius: 12px; box-shadow: 0 18px 44px rgba(18, 32, 94, .2); z-index: 70; overflow: hidden; }
.sino-abas { display: flex; align-items: center; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--linha); }
.sino-abas > button:not(.link) { background: none; border: 0; padding: 8px 10px; border-radius: 8px; font: inherit; font-weight: 600; color: var(--musgo); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.sino-abas > button.ativo { background: var(--pinho-claro); color: var(--marinho); }
.marcar-todas { margin-left: auto; font-size: 12.5px; }
.sino-lista { max-height: 460px; overflow-y: auto; }
.sino-item { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--linha); padding: 12px 14px; font: inherit; color: var(--tinta); cursor: pointer; position: relative; }
.sino-item:hover { background: var(--papel); }
.sino-item.naolida { background: var(--pinho-claro); }
.alerta-item { cursor: default; }
.sino-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--cinza-claro); color: var(--royal); flex-shrink: 0; }
.sino-ic .ic svg { width: 16px; height: 16px; }
.sino-ic.t-devolvida, .sino-ic.t-reaberta, .sino-ic.risco { background: var(--rosa-claro); color: var(--rosa); }
.sino-ic.t-aprovada { background: var(--sucesso-claro); color: var(--sucesso); }
.sino-ic.atencao, .sino-ic.t-contestacao { background: var(--ambar-claro); color: var(--ambar); }
.sino-txt { display: grid; gap: 3px; font-size: 13.5px; flex: 1; min-width: 0; }
.sino-txt strong { font-weight: 600; color: var(--marinho); }
.sino-txt span { color: var(--musgo); }
.sino-txt small { color: var(--musgo); font-size: 12px; }
.sino-txt .botao-link { justify-self: start; font-size: 13px; margin-top: 2px; }
.ponto-novo { width: 8px; height: 8px; border-radius: 50%; background: var(--rosa); margin-top: 6px; flex-shrink: 0; }
.menu-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.menu-check input { accent-color: var(--royal); }
.chip-alerta { border-color: var(--ambar) !important; background: var(--ambar-claro) !important; color: #6b4a10 !important; }
.chip-alerta .ic { color: var(--ambar); }
:root[data-tema="escuro"] .chip-alerta { color: var(--ambar) !important; }
.chip-alerta { max-width: 460px; }

/* ---------- mês ainda não liberado */
.faixa-futuro { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 10px 14px; border-radius: 10px; background: var(--azul-claro); color: var(--marinho); font-size: 13.5px; border: 1px solid #c8d7ea; }
.faixa-futuro .ic { display: inline-flex; color: var(--royal); }
:root[data-tema="escuro"] .faixa-futuro { border-color: var(--linha); color: var(--tinta); }

/* ---------- limpeza */
.lista-limpeza { max-height: 520px; overflow-y: auto; border: 1px solid var(--linha); border-radius: 10px; padding: 4px; }
.btn.perigo-cheio { background: var(--carmim); border-color: var(--carmim); color: #fff; }
.btn.perigo-cheio:disabled { opacity: .5; }