/* CRM de BMs — estilos. Tokens primeiro; claro e escuro. */
/* Paleta idêntica à da Central de O.S. (os.mjdauconsig.com): azul-marinho + laranja, tema claro único. */
:root {
  --navy: #0b2e72;
  --navy-900: #08204f;
  --fundo: #eef2f8;
  --superficie: #ffffff;
  --superficie-2: #f6f8fc;
  --borda: #dbe2ee;
  --borda-2: #c5d0e2;
  --tinta: #13254f;
  --tinta-2: #2b3c63;
  --tinta-3: #5a6a84;
  --lateral-tinta: rgba(255, 255, 255, .72);
  --primaria: #e0680f;
  --primaria-h: #c95a08;
  --primaria-tinta: #ffffff;
  --primaria-suave: #fff1e6;
  --link: #16409a;
  --link-suave: #e8eefb;
  --dado: #1f55c4;            /* série 1 dos gráficos do site */
  --verde: #15803d;   --verde-suave: #ecfdf3;
  --amarelo: #b45309; --amarelo-suave: #fffbeb;
  --vermelho: #b91c1c; --vermelho-suave: #fef2f2;
  --azul: #16409a;    --azul-suave: #e8eefb;
  --preto: #13254f;   --preto-suave: #e3e8f1;
  --roxo: #6d3fc4;    --roxo-suave: #f1ebfc;
  --raio: 10px;
  --sombra: 0 1px 2px rgba(11, 46, 114, .06), 0 1px 3px rgba(11, 46, 114, .05);
  --sombra-g: 0 18px 50px rgba(8, 32, 79, .28);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fundo); color: var(--tinta);
  font: 15px/1.5 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; line-height: 1.2; margin: 0; letter-spacing: -.01em; }
h2 { font-size: 1.05rem; margin: 0 0 .6rem; }
h2 small { font-weight: 400; color: var(--tinta-3); font-size: .8rem; margin-left: .3rem; }
h3 { font-size: .95rem; margin: 1rem 0 .5rem; }
small { color: var(--tinta-3); }
code { background: var(--superficie-2); padding: 0 .3em; border-radius: 4px; }
[hidden] { display: none !important; }
.sub { color: var(--tinta-2); margin: .2rem 0 0; font-size: .9rem; }
.pre { white-space: pre-line; overflow-wrap: anywhere; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.vazio { color: var(--tinta-3); font-size: .9rem; margin: .4rem 0; }
.qtd, .contador {
  display: inline-block; min-width: 1.5em; padding: 0 .45em; border-radius: 99px; text-align: center;
  background: var(--preto-suave); color: var(--tinta-2); font-size: .78rem; font-weight: 600; line-height: 1.5;
}
.contador { background: var(--vermelho); color: #fff; }

/* ---------- estrutura */
.lateral {
  position: fixed; inset: 0 auto 0 0; width: 252px; z-index: 30; display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-900) 100%); color: var(--lateral-tinta); padding: 1rem .75rem;
}
.marca { display: flex; align-items: center; gap: .55rem; color: #fff; font-weight: 650; font-size: .95rem; padding: .25rem .5rem 1rem; }
.marca:hover { text-decoration: none; }
.marca.escura { color: var(--tinta); padding: 0 0 .5rem; }
.marca { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.15; }
.marca-nome { font-size: 1.25rem; font-weight: 800; letter-spacing: .01em; }
.marca-nome b { color: #f47a1e; font-weight: 800; }
.marca.escura .marca-nome { color: var(--navy); }
.marca-sub { font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; opacity: .75; }
.marca.escura { align-items: center; border-bottom: 1px solid var(--borda); padding-bottom: .9rem; margin-bottom: .3rem; }
.lateral nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
.lateral nav a { color: inherit; padding: .55rem .7rem; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; }
.lateral nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }
.lateral nav a.ativo { background: rgba(255, 255, 255, .12); color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 #f47a1e; }
.lateral-pe { border-top: 1px solid rgba(255, 255, 255, .12); padding: .75rem .5rem 0; display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.quem { color: #fff; display: flex; flex-direction: column; min-width: 0; }
.quem strong, .quem small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quem small { color: var(--lateral-tinta); }
button.link { background: none; border: 0; color: var(--lateral-tinta); cursor: pointer; font: inherit; padding: .3rem; }
button.link:hover { color: #fff; text-decoration: underline; }
.menu-toggle, .hamburguer, .veu { display: none; }

.pagina { margin-left: 252px; min-height: 100vh; }
.topo {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: .75rem;
  padding: .6rem 1.5rem; background: var(--superficie); border-bottom: 1px solid var(--borda);
}
.busca { flex: 1; max-width: 560px; }
.busca input { width: 100%; }
.sino { position: relative; color: var(--tinta-2); display: inline-flex; padding: .35rem; }
.sino .contador { position: absolute; top: -2px; right: -6px; font-size: .68rem; }
main { padding: 1.25rem 1.5rem 3rem; max-width: 1500px; }
main.sem-login { max-width: 420px; margin: 0 auto; padding: 8vh 1rem 1rem; }
/* tela de acesso: o mesmo degradê azul-marinho do login da Central de O.S. */
body:has(main.sem-login) { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-900) 100%) fixed; min-height: 100vh; }
.caixa-login { border: 0; border-radius: 16px; box-shadow: var(--sombra-g); }
.caixa-login { display: flex; flex-direction: column; gap: .8rem; padding: 1.5rem; }

.cabecalho { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.migalha { margin: 0 0 .2rem; font-size: .85rem; color: var(--tinta-3); }
.selos, .legenda { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.titulo-secao { margin: 1.6rem 0 .7rem; font-size: 1.1rem; }
.secao { margin-top: 1.6rem; }
.secao h2 { margin-bottom: 0; }
.secao .sub { margin-bottom: .7rem; }

.painel { min-width: 0; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 1.1rem; box-shadow: var(--sombra); margin-bottom: 1rem; }
.painel.sem-padding { padding: 0; overflow: hidden; }
.vazio-grande { text-align: center; padding: 2.5rem 1rem; color: var(--tinta-2); }
.aviso { padding: .7rem 1rem; border-radius: 8px; margin-bottom: 1rem; border: 1px solid; font-weight: 500; }
.aviso.ok { background: var(--verde-suave); border-color: var(--verde); color: var(--tinta); }
.aviso.erro { background: var(--vermelho-suave); border-color: var(--vermelho); color: var(--tinta); }

/* ---------- formulários */
label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; font-weight: 600; color: var(--tinta-2); margin-bottom: .7rem; }
label small { font-weight: 400; }
input, select, textarea {
  font: inherit; color: var(--tinta); background: var(--superficie); border: 1px solid var(--borda-2);
  border-radius: 8px; padding: .5rem .65rem; min-height: 40px; width: 100%;
}
textarea { resize: vertical; min-height: 60px; }
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; min-height: 0; accent-color: var(--primaria); flex: none; }
input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--primaria); outline-offset: 1px;
}
input.curto { width: 5.5rem; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; cursor: pointer; white-space: nowrap;
  font: inherit; font-weight: 600; font-size: .9rem; color: var(--tinta); background: var(--superficie);
  border: 1px solid var(--borda); border-radius: 8px; padding: .45rem .9rem; min-height: 40px;
}
.btn:hover { background: var(--superficie-2); text-decoration: none; }
.btn.primario { background: var(--primaria); border-color: var(--primaria); color: var(--primaria-tinta); }
.btn.primario:hover { background: var(--primaria-h); border-color: var(--primaria-h); }
.btn.perigo { color: var(--vermelho); border-color: var(--vermelho); }
.btn.grande { min-height: 48px; font-size: 1rem; padding: .6rem 1.4rem; text-transform: uppercase; letter-spacing: .02em; }
.btn:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.formulario { max-width: 760px; }
.formulario.estreito { max-width: 420px; }
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.acoes { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: .6rem; }

input:disabled { background: var(--superficie-2); color: var(--tinta-2); cursor: not-allowed; opacity: 1; }
.campo-quando input { max-width: 16rem; }
.campo-senha { display: flex; gap: .4rem; }
.campo-senha input { flex: 1; min-width: 0; }
.senha { display: inline-flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.senha code { font-size: .95rem; padding: .1rem .4rem; user-select: all; }
.btn.mini-btn { min-height: 28px; padding: .1rem .6rem; font-size: .78rem; }

/* ---------- selos e cores de prazo */
.selo { display: inline-flex; align-items: center; gap: .35rem; padding: .12rem .55rem; border-radius: 99px; font-size: .76rem; font-weight: 600; background: var(--preto-suave); color: var(--tinta-2); white-space: nowrap; }
.selo .ponto { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.selo.etapa { background: var(--superficie-2); border: 1px solid var(--borda); color: var(--tinta); }
.selo.tier { background: var(--link-suave); color: var(--link); }
.tier-form { margin-top: .8rem; }
.tier-form select { width: auto; }
.selo.ciclo-n { background: var(--roxo-suave); color: var(--roxo); }
.prazo-verde { background: var(--verde-suave); color: var(--verde); }
.prazo-amarelo, .prazo-espera { background: var(--amarelo-suave); color: var(--amarelo); }
.prazo-vermelho { background: var(--vermelho-suave); color: var(--vermelho); }
.prazo-azul { background: var(--azul-suave); color: var(--azul); }
.prazo-preto { background: var(--preto-suave); color: var(--preto); }
.prazo-analise { background: var(--roxo-suave); color: var(--roxo); }
.borda-verde { --cor-borda: var(--verde); } .borda-amarelo, .borda-espera { --cor-borda: var(--amarelo); }
.borda-vermelho { --cor-borda: var(--vermelho); } .borda-azul { --cor-borda: var(--azul); }
.borda-preto { --cor-borda: var(--preto); } .borda-analise { --cor-borda: var(--roxo); }
.contagem { font-variant-numeric: tabular-nums; font-weight: 650; }

/* ---------- card da BM */
.grade-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: .8rem; }
.card-bm {
  display: flex; flex-direction: column; gap: .3rem; background: var(--superficie); color: var(--tinta);
  border: 1px solid var(--borda); border-left: 4px solid var(--cor-borda, var(--borda)); border-radius: var(--raio);
  padding: .75rem .85rem; box-shadow: var(--sombra); min-width: 0;
}
.card-bm:hover { text-decoration: none; border-color: var(--cor-borda, var(--primaria)); }
.card-topo { display: flex; justify-content: space-between; align-items: center; }
.codigo { font-size: .76rem; font-weight: 700; color: var(--tinta-3); letter-spacing: .03em; }
.card-nome { font-size: 1rem; overflow-wrap: anywhere; }
.card-meta { font-size: .83rem; color: var(--tinta-2); }
.card-etapa { font-size: .8rem; font-weight: 700; letter-spacing: .02em; margin-top: .15rem; }
.card-queda, .queda { color: var(--vermelho); font-size: .83rem; }
.card-prazos { margin: .25rem 0; display: grid; gap: .1rem; font-size: .83rem; }
.card-prazos div { display: flex; justify-content: space-between; gap: .5rem; }
.card-prazos dt { color: var(--tinta-3); } .card-prazos dd { margin: 0; text-align: right; }
.card-pe { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: auto; }
.proximo { font-size: .8rem; color: var(--tinta-2); }

/* ---------- Minhas BMs */
.resumo, .indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; }
.resumo-item, .indicador {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: .8rem .9rem;
  color: var(--tinta); display: flex; flex-direction: column; box-shadow: var(--sombra);
}
a.resumo-item:hover, a.indicador:hover { text-decoration: none; border-color: var(--primaria); }
.resumo-item strong, .indicador strong { font-size: 1.7rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.indicador strong.menor { font-size: 1.15rem; line-height: 1.7; }
.resumo-item span, .indicador span { font-size: .82rem; color: var(--tinta-2); }
.resumo-item.alerta strong, .indicador.ruim strong { color: var(--vermelho); }
.resumo-item.bom { border-color: var(--verde); background: var(--verde-suave); }
.resumo-item.bom strong { color: var(--verde); }
.resumo { margin-bottom: .7rem; }
.resumo.menor .resumo-item strong { font-size: 1.25rem; }
.indicador.destaque { border-color: var(--link); background: var(--link-suave); }

/* ---------- guia: onde estou / o que fazer / quando / próximo */
.guia {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--borda); margin-bottom: 1rem;
  border: 1px solid var(--borda); border-top: 4px solid var(--cor-borda, var(--primaria)); border-radius: var(--raio); overflow: hidden;
}
.guia > div { background: var(--superficie); padding: .8rem 1rem; display: flex; flex-direction: column; gap: .15rem; }
.guia small { text-transform: uppercase; letter-spacing: .05em; font-size: .7rem; font-weight: 700; }
.guia strong { font-size: .95rem; line-height: 1.35; }

.duas-colunas { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.acao h2 { font-size: 1.2rem; }
.acao form { margin-top: .9rem; }
.espera { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center; margin: .5rem 0 1rem; }
.espera-relogio { background: var(--amarelo-suave); border-radius: var(--raio); padding: .8rem 1.2rem; display: flex; flex-direction: column; }
.espera-relogio strong { font-size: 1.9rem; line-height: 1.2; }
.espera dl, .numeros, .ficha { margin: 0; display: grid; gap: .45rem; }
.numeros { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin: .6rem 0; }
dl dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-3); font-weight: 700; }
dl dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.ficha dd { font-weight: 500; }
.citacao { border-left: 3px solid var(--borda); margin: .6rem 0; padding: .3rem .8rem; color: var(--tinta-2); white-space: pre-line; }
details.secundario { margin-top: .9rem; border-top: 1px solid var(--borda); padding-top: .7rem; }
details.secundario > summary { cursor: pointer; font-weight: 600; color: var(--tinta-2); font-size: .9rem; }
details.secundario > summary.btn { display: inline-flex; color: var(--tinta); list-style: none; }
details.secundario > summary.btn::-webkit-details-marker { display: none; }
details.secundario[open] > summary { margin-bottom: .7rem; }

.linha-titulo { display: flex; justify-content: space-between; align-items: baseline; }
.progresso-num { font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.progresso { height: 8px; background: var(--preto-suave); border-radius: 99px; overflow: hidden; margin: .3rem 0 .8rem; }
.progresso span { display: block; height: 100%; background: var(--verde); border-radius: 99px; transition: width .25s; }
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { display: flex; justify-content: space-between; align-items: center; gap: .6rem; border-bottom: 1px solid var(--borda); flex-wrap: wrap; }
.checklist label { flex-direction: row; align-items: center; gap: .7rem; margin: 0; padding: .7rem 0; font-size: .98rem; font-weight: 500; color: var(--tinta); cursor: pointer; flex: 1; }
.item-campo { flex-basis: 100%; padding: 0 0 .9rem 2.1rem; display: flex; flex-direction: column; gap: .4rem; }
.item-campo.solto { padding: 0 0 .7rem; }
.item-campo .rotulo { font-size: .85rem; color: var(--tinta-2); }
.lista-linhas { display: grid; gap: .35rem; }
.lista-linha { display: flex; gap: .35rem; max-width: 26rem; }
.lista-linha input { flex: 1; min-width: 0; min-height: 36px; padding: .35rem .6rem; }
.lista-linha:only-child [data-remover] { visibility: hidden; }
.lista-acoes { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.btn.mini-btn.primario { color: var(--primaria-tinta); }
.campo-item { width: auto; }
.checklist input:checked + span { color: var(--tinta-3); text-decoration: line-through; }
.opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: .8rem; }
.opcao { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .5rem; border: 1px solid var(--borda); border-radius: 8px; padding: .7rem; margin: 0; cursor: pointer; color: var(--tinta); font-size: .95rem; }
.opcao small { flex-basis: 100%; }
.opcao:has(input:checked).ok { border-color: var(--verde); background: var(--verde-suave); }
.opcao:has(input:checked).ruim { border-color: var(--vermelho); background: var(--vermelho-suave); }

details.ciclo { min-width: 0; border: 1px solid var(--borda); border-radius: 8px; margin-bottom: .5rem; padding: .55rem .75rem; }
details.ciclo summary { cursor: pointer; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
details.ciclo[open] summary { margin-bottom: .6rem; }
.analise { border-top: 1px solid var(--borda); padding: .7rem 0; }
.analise:first-of-type { border-top: 0; padding-top: 0; }
.analise header { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.analise p { margin: .35rem 0; }

.nova-obs { display: flex; gap: .5rem; align-items: flex-start; margin-bottom: 1rem; }
.linha-do-tempo { list-style: none; margin: 0; padding: 0 0 0 1rem; border-left: 2px solid var(--borda); }
.linha-do-tempo li { position: relative; padding: 0 0 1rem .4rem; }
.linha-do-tempo li::before { content: ""; position: absolute; left: calc(-1rem - 6px); top: .4rem; width: 10px; height: 10px; border-radius: 50%; background: var(--tinta-3); border: 2px solid var(--superficie); }
.linha-do-tempo li[class*=reprovada]::before, .linha-do-tempo .tipo-queda_registrada::before { background: var(--vermelho); }
.linha-do-tempo .tipo-bm_finalizada::before, .linha-do-tempo .tipo-analise_aprovada::before, .linha-do-tempo .tipo-etapa_liberada::before { background: var(--verde); }
.linha-do-tempo .tipo-ciclo_iniciado::before { background: var(--roxo); }
.linha-do-tempo .quando { font-size: .78rem; color: var(--tinta-3); }
.linha-do-tempo p { margin: .15rem 0; font-size: .88rem; color: var(--tinta-2); }
.mini { background: var(--preto-suave); border-radius: 4px; padding: 0 .3em; font-weight: 700; font-size: .7rem; }

/* ---------- tabelas */
.tabela { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabela th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-3); padding: .6rem .8rem; border-bottom: 1px solid var(--borda); background: var(--superficie-2); white-space: nowrap; }
.tabela th.num { text-align: right; }
.tabela td { padding: .6rem .8rem; border-bottom: 1px solid var(--borda); vertical-align: top; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tr.clicavel { cursor: pointer; } .tabela tr.clicavel:hover { background: var(--superficie-2); }
.tabela.compacta th, .tabela.compacta td { padding: .4rem .5rem; }
.tabela tr.gargalo td { background: var(--vermelho-suave); }
.tabela-form td { min-width: 120px; }
.rolagem { overflow-x: auto; }

/* ---------- filtros */
.filtros { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: .6rem 1rem; margin-bottom: 1rem; }
.filtros summary { cursor: pointer; font-weight: 600; }
.filtros[open] summary { margin-bottom: .7rem; }
.grade-filtros { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0 .8rem; align-items: end; }
.acoes-filtro { display: flex; gap: .5rem; margin-bottom: .7rem; }
.periodo { display: flex; justify-content: space-between; gap: .8rem; flex-wrap: wrap; align-items: center; margin-bottom: .8rem; }
.atalhos { display: flex; gap: .35rem; flex-wrap: wrap; }
.chip { padding: .3rem .8rem; border-radius: 99px; border: 1px solid var(--borda); background: var(--superficie); color: var(--tinta-2); font-size: .85rem; font-weight: 600; }
.chip.ativo { background: var(--navy); border-color: var(--navy); color: #fff; }
.periodo-datas { display: flex; gap: .4rem; align-items: center; }
.periodo-datas input { width: auto; }
.filtro-linha { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: .5rem; }
.filtro-linha label { min-width: 190px; }

/* ---------- kanban */
.kanban { display: flex; gap: .7rem; overflow-x: auto; padding-bottom: 1rem; scroll-snap-type: x proximity; align-items: flex-start; }
.kanban-coluna { flex: 0 0 272px; background: var(--superficie-2); border: 1px solid var(--borda); border-radius: var(--raio); scroll-snap-align: start; max-height: calc(100vh - 210px); display: flex; flex-direction: column; }
.kanban-coluna header { display: flex; justify-content: space-between; align-items: center; padding: .65rem .8rem; font-weight: 700; font-size: .88rem; border-bottom: 1px solid var(--borda); }
.kanban-cards { padding: .6rem; display: flex; flex-direction: column; gap: .55rem; overflow-y: auto; }
.kanban-cards .vazio { text-align: center; margin: .8rem 0; }

/* ---------- gráficos: uma série, um tom; números em tinta de texto */
.grade-paineis { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 1rem; margin-top: 1rem; }
.grade-paineis .painel { margin: 0; }
.barras, .funil { display: grid; gap: .45rem; }
.barra-linha, .funil-linha { display: grid; grid-template-columns: minmax(90px, 38%) 1fr 2.5rem; gap: .6rem; align-items: center; color: var(--tinta); font-size: .88rem; }
.funil-linha:hover { text-decoration: none; }
.funil-linha:hover .funil-nome { text-decoration: underline; }
.barra-nome, .funil-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tinta-2); }
.barra-trilho { height: 14px; display: block; }
.barra { display: block; height: 100%; min-width: 2px; background: var(--dado); border-radius: 0 4px 4px 0; }
.barra-valor { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.colunas { display: flex; align-items: flex-end; gap: 2px; height: 150px; border-bottom: 1px solid var(--borda); margin-bottom: 1.4rem; }
.coluna { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; min-width: 0; }
.coluna-barra { width: min(70%, 28px); background: var(--dado); border-radius: 4px 4px 0 0; min-height: 0; }
.coluna:hover .coluna-barra { filter: brightness(1.15); }
.coluna-valor { font-size: .72rem; font-weight: 650; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.coluna-nome { position: absolute; bottom: -1.3rem; font-size: .66rem; color: var(--tinta-3); white-space: nowrap; }
.colunas .coluna:nth-child(even) .coluna-nome { visibility: hidden; }
.colunas:has(.coluna:nth-child(-n+8):last-child) .coluna-nome { visibility: visible; }

.painel.selfie { border-left: 4px solid var(--cor-borda, var(--vermelho)); }
.painel.selfie form { margin: 0; }
.template-linha { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .55rem 0; border-top: 1px solid var(--borda); flex-wrap: wrap; }
.template-linha:first-of-type { border-top: 0; }
.acao .aviso { font-weight: 400; margin: .2rem 0 .8rem; }

/* ---------- notificações */
.notificacoes { list-style: none; margin: 0; padding: 0; }
.notificacoes li { border-bottom: 1px solid var(--borda); }
.notificacoes li.vazio { padding: 1.5rem; text-align: center; }
.notificacoes a { display: flex; gap: .8rem; padding: .8rem 1rem; color: var(--tinta); align-items: flex-start; }
.notificacoes a:hover { background: var(--superficie-2); text-decoration: none; }
.notificacoes .nao-lida { background: var(--link-suave); }
.notificacoes .nao-lida strong::after { content: "•"; color: var(--primaria); margin-left: .4rem; }
.notificacoes .corpo { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.notificacoes .corpo span { color: var(--tinta-2); font-size: .9rem; }
.notificacoes time { font-size: .78rem; color: var(--tinta-3); white-space: nowrap; }

/* ---------- configurações */
.abas { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: 1rem; position: sticky; top: 57px; z-index: 10; background: var(--fundo); padding: .4rem 0; }
.abas a { padding: .35rem .8rem; border-radius: 99px; background: var(--superficie); border: 1px solid var(--borda); color: var(--tinta-2); font-weight: 600; font-size: .85rem; }
.painel[id] { scroll-margin-top: 120px; }
.lista-config { display: grid; gap: .5rem; margin-top: .8rem; }
.linha-config { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .45rem 0; border-bottom: 1px solid var(--borda); font-weight: 500; color: var(--tinta); font-size: .93rem; margin: 0; flex-direction: row; }
.linha-config span small { display: block; font-weight: 400; }
.par { display: flex; gap: .4rem; align-items: center; }
.par input { width: 6rem; } .par select { width: auto; }
.linha-form { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.linha-form input[type=text] { flex: 1; min-width: 160px; }
.linha-form.inativo input[type=text], .usuario.inativo summary { opacity: .55; }
.linha-form.novo { border-top: 1px dashed var(--borda); padding-top: .7rem; }
.mini-caixa { flex-direction: row; align-items: center; gap: .35rem; margin: 0; font-weight: 500; white-space: nowrap; }
.usos { min-width: 4.5rem; text-align: right; }
details.usuario { border: 1px solid var(--borda); border-radius: 8px; padding: .55rem .8rem; }
details.usuario summary { cursor: pointer; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.form-usuario { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0 .8rem; align-items: end; margin-top: .8rem; }
.form-usuario .btn, .form-usuario .mini-caixa { margin-bottom: .7rem; }

.resumo-tier { display: flex; gap: 1.2rem; flex-wrap: wrap; margin: 0 0 .8rem; font-size: 1.05rem; }
.resumo-tier strong { font-size: 1.4rem; }
.titulo-painel { padding: 1rem 1.1rem .6rem; margin: 0; }
@media print {
  .lateral, .topo, .veu, .nao-imprimir, .aviso { display: none !important; }
  .pagina { margin: 0; } main { padding: 0; max-width: none; } body { background: #fff; }
  .painel, .indicador { box-shadow: none; break-inside: avoid; }
}

/* ---------- celular */
@media (max-width: 900px) {
  .lateral { transform: translateX(-100%); transition: transform .2s; width: 270px; }
  .menu-toggle:checked ~ .lateral { transform: none; }
  .menu-toggle:checked ~ .veu { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 25; }
  .pagina { margin-left: 0; }
  .hamburguer { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; cursor: pointer; flex: none; }
  .hamburguer span, .hamburguer span::before, .hamburguer span::after { display: block; width: 20px; height: 2px; background: var(--tinta); border-radius: 2px; position: relative; content: ""; }
  .hamburguer span::before { position: absolute; top: -6px; } .hamburguer span::after { position: absolute; top: 6px; }
  .topo { padding: .5rem .75rem; gap: .5rem; }
  .topo .btn { padding: .4rem .55rem; font-size: .78rem; }
  main { padding: 1rem .9rem 3rem; }
  .guia { grid-template-columns: 1fr 1fr; }
  .duas-colunas { grid-template-columns: minmax(0, 1fr); }
  .abas { top: 53px; }
}
@media (max-width: 640px) {
  h1 { font-size: 1.3rem; }
  .guia, .duas, .opcoes { grid-template-columns: minmax(0, 1fr); }
  .grade-filtros { grid-template-columns: 1fr 1fr; }
  .grade-filtros .acoes-filtro { grid-column: 1 / -1; }
  .painel { padding: .9rem; }
  input[type=datetime-local] { min-width: 0; }
  .resumo, .indicadores { grid-template-columns: 1fr 1fr; }
  .kanban-coluna { flex-basis: 84vw; max-height: none; }
  .nova-obs { flex-direction: column; } .nova-obs .btn { align-self: flex-end; }
  .periodo-datas { flex-wrap: wrap; }
  .btn.grande { width: 100%; }
  /* tabelas viram cartões */
  .cartoes-no-celular thead { display: none; }
  .cartoes-no-celular, .cartoes-no-celular tbody, .cartoes-no-celular tr, .cartoes-no-celular td { display: block; width: 100%; }
  .cartoes-no-celular tr { padding: .6rem .9rem; border-bottom: 1px solid var(--borda); }
  .cartoes-no-celular td { border: 0; padding: .12rem 0; display: flex; justify-content: space-between; gap: 1rem; text-align: right; }
  .cartoes-no-celular td::before { content: attr(data-rotulo); color: var(--tinta-3); font-size: .78rem; text-align: left; flex: none; }
  .cartoes-no-celular td:first-child { text-align: left; display: block; font-size: 1rem; margin-bottom: .2rem; }
  .cartoes-no-celular td:first-child::before { content: none; }
}