/* Tema do sistema — reproduz o visual do Embralot (cores, fontes, raios e sombras
   lidos do sistema em produção em 05/10/2026) para a equipe não estranhar a troca. */

:root {
  --fundo: #F5F8F2;
  --superficie: #FFFFFF;
  --borda: #DFE9DB;
  --borda-suave: #EBF2E8;
  --texto: #20301E;
  --texto-suave: #5E6F58;
  --texto-fraco: #8B9985;
  --primaria: #3E6B47;
  --primaria-clara: #E4EFE2;
  --perigo: #9C4A34;
  --alerta: #D9A441;

  --st-andamento-tx: #2F6B3D; --st-andamento-bg: #E6F2E4; --st-andamento-dot: #4C8A54;
  --st-nao-tx: #5E6F58;       --st-nao-bg: #EDF1EA;       --st-nao-dot: #9AA891;
  --st-paralisado-tx: #9C4A34; --st-paralisado-bg: #F7E8DE; --st-paralisado-dot: #C1684A;
  --st-concluido-tx: #2A5C50; --st-concluido-bg: #E1EFEC; --st-concluido-dot: #3D7A6B;

  --sombra: 0 1px 3px rgba(32, 48, 30, 0.07);
  --fonte: 'Nunito', ui-sans-serif, system-ui, sans-serif;
  --fonte-titulo: 'Quicksand', ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--fundo); color: var(--texto); font-family: var(--fonte); font-size: 14px; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 700; margin: 0; }

/* ---------- estrutura ---------- */
.app { display: flex; min-height: 100vh; }
.lateral {
  width: 220px; flex: 0 0 220px; background: var(--superficie); border-right: 1px solid var(--borda);
  padding: 20px 14px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh;
}
.marca { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 0 4px; }
.marca-icone {
  width: 30px; height: 30px; border-radius: 8px; background: var(--primaria); color: #fff;
  display: grid; place-items: center; font-family: var(--fonte-titulo); font-weight: 700; font-size: 13px;
}
.marca-nome { font-family: var(--fonte-titulo); font-weight: 700; font-size: 14.5px; }
.marca-sub { font-size: 9.5px; color: var(--texto-fraco); }
.menu a {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--texto-fraco);
}
.menu a:hover { color: var(--texto); }
.menu a.ativo { background: var(--primaria-clara); color: var(--primaria); font-weight: 700; }
.menu-secao { font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-fraco); margin: 14px 10px 4px; }
.selo-sinc {
  margin-top: 14px; background: var(--primaria-clara); color: var(--primaria); border-radius: 8px;
  padding: 6px 8px; font-size: 11px; font-weight: 700;
}
.selo-sinc small { display: block; font-weight: 400; color: var(--texto-suave); }
.usuario { margin-top: auto; border-top: 1px solid var(--borda-suave); padding: 10px 6px; }
.usuario-nome { font-size: 12.5px; font-weight: 700; }
.usuario-papel {
  display: inline-block; margin-top: 4px; font-size: 10.5px; font-weight: 700; padding: 2px 8px;
  border-radius: 999px; background: var(--primaria-clara); color: var(--primaria);
}
.principal { flex: 1; min-width: 0; padding: 24px 28px; }

/* ---------- elementos ---------- */
.aviso {
  background: var(--primaria-clara); border: 1px solid var(--borda); border-radius: 12px; padding: 9px 14px;
  color: var(--primaria); font-size: 12px; margin-bottom: 16px;
}
.aviso.erro { background: var(--st-paralisado-bg); color: var(--perigo); border-color: #EBCFC2; }
.cabecalho { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.cabecalho h1 { font-size: 22px; }
.subtitulo { font-size: 12.5px; color: var(--texto-suave); margin: 4px 0 0; }
.acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--fonte); font-size: 12.5px; font-weight: 700;
  padding: 8px 14px; border-radius: 10px; border: 1px solid var(--borda); background: var(--superficie);
  color: var(--primaria); cursor: pointer;
}
.btn:hover { border-color: var(--primaria); }
.btn-primario { background: var(--primaria); color: #fff; border-color: transparent; font-size: 13px; padding: 9px 16px; }
.btn-primario:hover { filter: brightness(1.08); border-color: transparent; }
.btn-pequeno { padding: 4px 9px; font-size: 11.5px; border-radius: 8px; }
.btn-perigo { color: var(--perigo); }
.alternador { display: inline-flex; border: 1px solid var(--borda); border-radius: 10px; overflow: hidden; }
.alternador a { padding: 7px 12px; font-size: 12.5px; font-weight: 700; color: var(--texto-suave); background: var(--superficie); }
.alternador a.ativo { background: var(--primaria); color: #fff; }

.indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 14px; }
.indicador { background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; padding: 10px 12px; box-shadow: var(--sombra); }
.indicador-rotulo { font-size: 10px; color: var(--texto-suave); }
.indicador-valor { font-size: 16px; font-weight: 800; margin-top: 2px; }
.indicador-valor.perigo { color: var(--perigo); }
.indicador-valor.alerta { color: var(--alerta); }

.filtros { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.campo, .filtros select, .filtros input, .formulario input, .formulario select, .formulario textarea {
  font-family: var(--fonte); font-size: 12.5px; color: var(--texto); background: var(--superficie);
  border: 1px solid var(--borda); border-radius: 8px; padding: 7px 10px; outline: none;
}
.campo:focus, .filtros select:focus, .filtros input:focus, .formulario input:focus, .formulario select:focus, .formulario textarea:focus {
  border-color: var(--primaria);
}
.filtros .contagem { margin-left: auto; font-size: 12px; color: var(--texto-fraco); }

/* ---------- selos de status ---------- */
.status {
  display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-em_andamento { color: var(--st-andamento-tx); background: var(--st-andamento-bg); }
.status-em_andamento::before { background: var(--st-andamento-dot); }
.status-nao_iniciado { color: var(--st-nao-tx); background: var(--st-nao-bg); }
.status-nao_iniciado::before { background: var(--st-nao-dot); }
.status-paralisado { color: var(--st-paralisado-tx); background: var(--st-paralisado-bg); }
.status-paralisado::before { background: var(--st-paralisado-dot); }
.status-concluido { color: var(--st-concluido-tx); background: var(--st-concluido-bg); }
.status-concluido::before { background: var(--st-concluido-dot); }

/* ---------- cards do portfólio ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.card {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 16px; padding: 16px;
  box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 12px;
}
.card-topo { display: flex; align-items: center; gap: 8px; }
.card-nome { font-size: 15px; font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-carteira { font-size: 10px; color: var(--texto-fraco); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.icone-editar { color: var(--texto-fraco); font-size: 13px; }
.icone-editar:hover { color: var(--primaria); }
.grade {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--borda);
  border: 1px solid var(--borda); border-radius: 10px; overflow: hidden;
}
.grade > div { background: var(--superficie); padding: 7px 10px; min-width: 0; }
.grade > div.vazio { background: var(--primaria-clara); }
.rotulo { display: block; font-size: 8.5px; color: var(--texto-fraco); text-transform: uppercase; letter-spacing: .05em; }
.valor { display: block; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-rodape .rotulo { font-size: 9px; }
.card-rodape .valor { font-size: 14px; font-weight: 700; }
.sienge {
  display: inline-block; font-size: 8.5px; font-weight: 800; color: var(--primaria); background: var(--primaria-clara);
  border-radius: 4px; padding: 0 4px; margin-left: 4px; vertical-align: middle;
}

/* ---------- tabelas e caixas ---------- */
.caixa { background: var(--superficie); border: 1px solid var(--borda); border-radius: 16px; box-shadow: var(--sombra); padding: 16px; }
.caixa h2 { font-size: 15px; margin-bottom: 10px; }
.tabela { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tabela th {
  text-align: left; font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-fraco);
  font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--borda);
}
.tabela td { padding: 8px 10px; border-bottom: 1px solid var(--borda-suave); vertical-align: middle; }
.tabela tr:hover td { background: #FAFCF8; }
.tabela-caixa { background: var(--superficie); border: 1px solid var(--borda); border-radius: 16px; box-shadow: var(--sombra); overflow-x: auto; }

/* ---------- página do empreendimento ---------- */
.voltar { font-size: 12.5px; color: var(--texto-suave); display: inline-block; margin-bottom: 12px; }
.voltar:hover { color: var(--primaria); }
.cabecalho-emp { background: var(--superficie); border: 1px solid var(--borda); border-radius: 16px; padding: 16px 18px; box-shadow: var(--sombra); margin-bottom: 14px; }
.cabecalho-emp .migalha { font-size: 10.5px; color: var(--texto-fraco); }
.cabecalho-emp h1 { font-size: 20px; margin: 4px 0; }
.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--borda); margin-bottom: 14px; }
.abas a { padding: 8px 12px; font-size: 12.5px; font-weight: 700; color: var(--texto-fraco); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.abas a.ativo { color: var(--primaria); border-bottom-color: var(--primaria); }
.duas-colunas { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 14px; align-items: start; }
@media (max-width: 1000px) { .duas-colunas { grid-template-columns: 1fr; } }
.pilha { display: flex; flex-direction: column; gap: 14px; }
.lista-dados { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.lista-dados .valor { white-space: normal; }

.formulario .linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 12px; }
.formulario label { display: block; font-size: 11px; font-weight: 700; color: var(--texto-suave); margin-bottom: 4px; }
.formulario input, .formulario select, .formulario textarea { width: 100%; }
.formulario .ajuda { font-size: 11px; color: var(--texto-fraco); margin-top: 3px; }
.formulario .erro-campo { font-size: 11px; color: var(--perigo); margin-top: 3px; }

/* autocompletar */
.busca { position: relative; }
.busca-resultados {
  position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin-top: 4px; background: var(--superficie);
  border: 1px solid var(--borda); border-radius: 10px; box-shadow: 0 6px 18px rgba(32, 48, 30, .12);
  max-height: 280px; overflow-y: auto;
}
.busca-resultados:empty { display: none; }
.busca-item { display: block; width: 100%; text-align: left; padding: 7px 10px; border: 0; background: none; font-family: var(--fonte); font-size: 12.5px; color: var(--texto); cursor: pointer; }
.busca-item:hover { background: var(--primaria-clara); }
.busca-item small { color: var(--texto-fraco); }
.busca-titulo { font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-fraco); padding: 6px 10px 2px; }

.vazio-lista { color: var(--texto-fraco); font-size: 12.5px; padding: 18px; text-align: center; }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline; }

/* login */
.login-pagina { min-height: 100vh; display: grid; place-items: center; }
.login-caixa { background: var(--superficie); border: 1px solid var(--borda); border-radius: 16px; padding: 32px; width: 360px; box-shadow: var(--sombra); }
.login-caixa h1 { font-size: 22px; }
.login-caixa p { font-size: 12.5px; color: var(--texto-suave); margin: 4px 0 18px; }

/* relacionamento com centros de custo */
.confianca { display: inline-block; font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: 999px; margin-right: 4px; }
.confianca-alta { color: var(--st-andamento-tx); background: var(--st-andamento-bg); }
.confianca-media { color: #8A6A1F; background: #F8EED6; }
.confianca-baixa { color: var(--st-nao-tx); background: var(--st-nao-bg); }
.sugestao { border: 1px solid var(--borda-suave); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
.sugestao-topo { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.sugestao-qtd { margin-left: auto; font-size: 11px; color: var(--texto-fraco); font-weight: 700; }
.ajuda { font-size: 11px; color: var(--texto-fraco); }
details summary { cursor: pointer; font-size: 11.5px; color: var(--primaria); font-weight: 700; margin-top: 6px; }
.lista-cc { margin: 6px 0 0; padding-left: 18px; font-size: 11.5px; max-height: 220px; overflow-y: auto; }
.lista-cc li { margin: 2px 0; }
.selo-encerrado { display: inline-block; font-size: 9.5px; font-weight: 700; color: var(--texto-fraco); background: var(--st-nao-bg); border-radius: 4px; padding: 0 5px; }
.linha-encerrada td { color: var(--texto-fraco); }
.bloco-empresa { margin-bottom: 12px; }
.bloco-empresa-nome { font-size: 11px; font-weight: 800; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .03em; margin: 4px 0; }

/* ---------- EAP ---------- */
.barra-status { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--st-nao-bg); margin: 4px 0 10px; }
.barra-status span { display: block; height: 100%; }
.legenda-status { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11.5px; color: var(--texto-suave); }
.legenda-status a { display: inline-flex; align-items: center; gap: 5px; padding: 2px 6px; border-radius: 6px; }
.legenda-status a.ativo { background: var(--primaria-clara); color: var(--primaria); }
.ponto { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.seg-nao_iniciado { background: #C9D2C3; } .seg-em_andamento { background: #4C8A54; }
.seg-aguardando_terceiro { background: #D9A441; } .seg-aguardando_aprovacao { background: #E3C36F; }
.seg-em_revisao { background: #6C8EB5; } .seg-concluido { background: #2A5C50; }
.seg-suspenso { background: #9AA891; } .seg-atrasado { background: #C1684A; }
.tabela-eap .linha-grupo td { background: #FAFCF8; font-weight: 700; }
.tabela-eap .nivel-0 td { background: var(--primaria-clara); }
.linha-edicao td { background: #FAFCF8; }
.select-status { padding: 4px 8px !important; font-size: 11.5px !important; font-weight: 700; }

/* status (EAP e tarefas) */
.st-nao_iniciado, .st-pendente { color: var(--st-nao-tx); background: var(--st-nao-bg); }
.st-em_andamento { color: var(--st-andamento-tx); background: var(--st-andamento-bg); }
.st-aguardando_terceiro, .st-aguardando_aprovacao { color: #8A6A1F; background: #F8EED6; }
.st-em_revisao { color: #2F4F7A; background: #E3EBF5; }
.st-concluido, .st-concluida { color: var(--st-concluido-tx); background: var(--st-concluido-bg); }
.st-suspenso, .st-cancelada { color: var(--texto-fraco); background: #F0F2EE; }
.st-atrasado, .st-bloqueada { color: var(--st-paralisado-tx); background: var(--st-paralisado-bg); }
span.status[class*=" st-"] { padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; }
span.status[class*=" st-"]::before { display: none; }

.texto-atraso { color: var(--perigo) !important; font-weight: 700; }
.texto-alerta { color: var(--alerta); font-weight: 700; }
.contador { display: inline-block; min-width: 20px; text-align: center; font-size: 11px; font-weight: 800; color: var(--primaria); background: var(--primaria-clara); border-radius: 999px; padding: 1px 6px; }

/* ---------- prioridade ---------- */
.prio { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.prio-baixa { color: var(--texto-fraco); background: #F0F2EE; }
.prio-media { color: var(--texto-suave); background: var(--st-nao-bg); }
.prio-alta { color: #8A6A1F; background: #F8EED6; }
.prio-urgente { color: #fff; background: var(--st-paralisado-dot); }

/* ---------- Demandas da Semana ---------- */
.semana-nav { background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; padding: 8px 10px; }
.fila { margin-bottom: 14px; }
.fila-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; min-height: 46px; border-radius: 10px; padding: 4px; }
.quadro-semana { background: var(--superficie); border: 1px solid var(--borda); border-radius: 16px; box-shadow: var(--sombra); overflow-x: auto; }
.tabela.quadro { table-layout: fixed; min-width: 1100px; }
.tabela.quadro th.hoje { color: var(--primaria); }
.tabela.quadro td { vertical-align: top; border-right: 1px solid var(--borda-suave); padding: 6px; }
.tabela.quadro td.hoje { background: #FAFCF8; }
.tabela.quadro tr:hover td { background: inherit; }
.quadro-pessoa { position: sticky; left: 0; background: var(--superficie); }
.zona { min-height: 60px; transition: background .1s; }
.zona.sobre { background: var(--primaria-clara) !important; outline: 2px dashed var(--primaria); outline-offset: -3px; }
.cartao {
  background: var(--superficie); border: 1px solid var(--borda); border-left: 3px solid var(--st-nao-dot);
  border-radius: 10px; padding: 7px 8px; margin-bottom: 6px; font-size: 12px; cursor: grab; box-shadow: var(--sombra);
}
.cartao.cartao-alta { border-left-color: var(--alerta); }
.cartao.cartao-urgente { border-left-color: var(--st-paralisado-dot); }
.cartao.cartao-baixa { border-left-color: var(--borda); }
.cartao-atrasado { background: #FFF8F4; }
.cartao-feito { opacity: .55; }
.cartao-feito .cartao-titulo { text-decoration: line-through; }
.cartao.arrastando { opacity: .4; }
.cartao-topo { display: flex; gap: 6px; align-items: flex-start; }
.cartao-titulo { font-weight: 700; line-height: 1.25; word-break: break-word; }
.cartao-info { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: 4px; font-size: 10.5px; color: var(--texto-fraco); }
.cartao-check {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--borda); background: var(--superficie);
  color: var(--primaria); font-size: 11px; line-height: 15px; padding: 0; cursor: pointer; font-weight: 800;
}
.cartao-check:hover { border-color: var(--primaria); background: var(--primaria-clara); }

/* ---------- tarefa ---------- */
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--borda-suave); font-size: 12.5px; }
.checklist li.feito a { text-decoration: line-through; color: var(--texto-fraco); }
.comentario { border-bottom: 1px solid var(--borda-suave); padding: 8px 0; }

/* ---------- painel lateral (como o "Atribuir demanda" do Embralot) ---------- */
.painel-fundo { position: fixed; inset: 0; background: rgba(32, 48, 30, .25); z-index: 40; }
.painel-lateral {
  position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: 100vw; z-index: 41;
  background: var(--superficie); border-left: 1px solid var(--borda); box-shadow: -8px 0 24px rgba(32, 48, 30, .12);
  display: flex; flex-direction: column; animation: painel-entra .18s ease-out;
}
@keyframes painel-entra { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.painel-topo { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--borda); }
.painel-topo h2 { font-size: 17px; }
.painel-fechar { border: 0; background: none; font-size: 16px; color: var(--texto-suave); cursor: pointer; }
.painel-corpo { flex: 1; overflow-y: auto; padding: 16px 20px; }
.painel-corpo .linha { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.campo-painel { margin-bottom: 10px; }
.painel-rodape { display: flex; gap: 8px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--borda); }
.btn-perigo { border-color: #EBCFC2; }

/* fila em faixa horizontal com botão Atribuir */
.fila-cartoes { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.fila-item { flex: 0 0 230px; display: flex; flex-direction: column; }
.fila-item .cartao { flex: 1; margin-bottom: 6px; }
.btn-atribuir { justify-content: center; background: var(--primaria-clara); border-color: var(--primaria); }
.cartao-editar { margin-left: auto; border: 0; background: none; color: var(--texto-fraco); cursor: pointer; font-size: 12px; padding: 0 2px; }
.cartao-editar:hover { color: var(--primaria); }
.add-celula {
  width: 100%; border: 1px dashed transparent; background: none; color: transparent; border-radius: 8px;
  font-weight: 700; cursor: pointer; padding: 2px 0;
}
td.zona:hover .add-celula { border-color: var(--borda); color: var(--texto-fraco); }
.add-celula:hover { background: var(--primaria-clara); color: var(--primaria) !important; }

/* painel do item da EAP */
.painel-largo { width: 520px; }
.secao-painel { border-top: 1px solid var(--borda-suave); margin-top: 14px; padding-top: 12px; }
.secao-painel h3 { font-family: var(--fonte-titulo); font-size: 13.5px; margin: 0 0 8px; }
.linha-tarefa { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--borda-suave); font-size: 12.5px; }
.linha-tarefa a { flex: 1; min-width: 0; font-weight: 700; }
.form-anexo { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.form-anexo input[type=url] { grid-column: span 2; }
.form-anexo button { justify-self: start; }
.link-item:hover { color: var(--primaria); text-decoration: underline; }
.painel-topo .migalha { font-size: 10.5px; color: var(--texto-fraco); }


/* Visão Geral do empreendimento */
.visao-geral { margin-bottom: 14px; }
.vg-situacao { display: grid; grid-template-columns: 160px 1fr auto; gap: 24px; align-items: center; margin-bottom: 14px; }
.vg-avanco-num { font-size: 18px; font-weight: 800; margin: 2px 0 -2px; }
.vg-numeros { display: flex; gap: 18px; }
.vg-numeros div { display: flex; flex-direction: column; align-items: center; min-width: 70px; }
.vg-numeros b { font-size: 18px; font-weight: 800; }
.vg-numeros span { font-size: 10.5px; color: var(--texto-fraco); text-align: center; }
.vg-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 1000px) { .vg-grade, .vg-situacao { grid-template-columns: 1fr; } }

/* carteiras por usuário */
.carteiras-celula { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; min-height: 34px; }
.chk { display: inline-flex !important; align-items: center; gap: 4px; font-size: 12.5px !important; font-weight: 600 !important; color: var(--texto) !important; margin: 0 !important; cursor: pointer; }
.chk input { width: auto !important; }

/* Contratos (Sienge) */
.st-contrato-pending { color: var(--st-nao-tx); background: var(--st-nao-bg); }
.st-contrato-partially_measured { color: var(--st-andamento-tx); background: var(--st-andamento-bg); }
.st-contrato-fully_measured, .st-contrato-completed { color: var(--st-concluido-tx); background: var(--st-concluido-bg); }
.st-contrato-rescinded { color: var(--st-paralisado-tx); background: var(--st-paralisado-bg); }
.barra-medicao { height: 10px; background: var(--borda); border-radius: 999px; overflow: hidden; }
.barra-medicao span { display: block; height: 100%; background: var(--primaria); border-radius: 999px; max-width: 100%; }
.barra-pequena { height: 6px; margin-bottom: 3px; }
.linha-clicavel { cursor: pointer; }
.linha-clicavel:hover td { background: var(--primaria-clara); }
.abas-internas { margin-bottom: 12px; }

/* Disciplinas e observação resumida ("mais detalhes") */
.selo-disciplina { display: inline-block; font-size: 10px; font-weight: 700; color: #2F4F7A; background: #E3EBF5; border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.observacao { font-size: 11.5px; color: var(--texto-suave); margin-top: 2px; }
details.observacao summary { cursor: pointer; list-style: none; }
details.observacao summary::-webkit-details-marker { display: none; }
details.observacao .mais { color: var(--primaria); font-weight: 700; white-space: nowrap; }
details.observacao[open] summary { display: none; }
.observacao-completa { white-space: pre-line; }

/* Cards por disciplina (página do empreendimento) */
.grade-disciplinas { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.card-disciplina { display: block; border: 1px solid var(--borda); border-radius: 12px; padding: 10px 12px; background: var(--superficie); color: inherit; }
.card-disciplina:hover { border-color: var(--primaria); box-shadow: var(--sombra); }
.card-disciplina-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; margin-bottom: 8px; font-size: 13px; }
.card-disciplina-proxima { border-top: 1px solid var(--borda-suave); margin-top: 8px; padding-top: 6px; font-size: 12px; }

/* Participantes (lista de caixas de seleção) */
.lista-checks { max-height: 150px; overflow-y: auto; border: 1px solid var(--borda); border-radius: 8px; padding: 6px 10px; background: var(--superficie); }
.lista-checks > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 2px 10px; }
.lista-checks label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; margin: 0; }
.lista-checks input { width: auto; }

/* Notificações e @menções */
.sino-contagem { display: inline-block; min-width: 18px; text-align: center; font-size: 10.5px; font-weight: 800; color: #fff; background: var(--perigo); border-radius: 999px; padding: 0 5px; margin-left: 4px; }
.notificacao { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--borda-suave); color: var(--texto-suave); font-size: 12.5px; }
.notificacao:hover { background: var(--primaria-clara); }
.notificacao.nao-lida { color: var(--texto); font-weight: 700; }
.notificacao.nao-lida::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--primaria); flex: none; }
.notificacao-texto { flex: 1; min-width: 0; }
.notificacao-tipo { flex: none; width: 130px; font-size: 10px; font-weight: 700; color: var(--texto-fraco); text-transform: uppercase; letter-spacing: .02em; }
.notificacao-tipo.tipo-atrasada, .notificacao-tipo.tipo-prazo_proximo { color: var(--perigo); }
.notificacao-tipo.tipo-mencao, .notificacao-tipo.tipo-atribuida { color: var(--primaria); }
.mencao { color: var(--primaria); font-weight: 700; background: var(--primaria-clara); border-radius: 4px; padding: 0 2px; }
.mencao-campo { position: relative; }
.mencao-lista { position: absolute; left: 0; top: 100%; z-index: 30; min-width: 220px; max-height: 200px; overflow-y: auto; background: var(--superficie); border: 1px solid var(--borda); border-radius: 8px; box-shadow: var(--sombra); }
.mencao-lista div { padding: 6px 10px; font-size: 12.5px; cursor: pointer; }
.mencao-lista div.ativo, .mencao-lista div:hover { background: var(--primaria-clara); color: var(--primaria); }

/* Kanban por status */
.kanban { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 12px; align-items: start; overflow-x: auto; }
.kanban-coluna { background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; padding: 10px; box-shadow: var(--sombra); }
.kanban-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.kanban-zona { min-height: 120px; display: flex; flex-direction: column; gap: 8px; border-radius: 10px; padding: 2px; }
.kanban-vazio { text-align: center; padding: 20px 0; }

/* Calendário por prazo */
.calendario { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; overflow: hidden; box-shadow: var(--sombra); }
.cal-cabecalho { font-size: 10.5px; font-weight: 800; color: var(--texto-fraco); text-transform: uppercase; padding: 8px; border-bottom: 1px solid var(--borda); }
.cal-dia { min-height: 108px; padding: 4px 6px 6px; border-right: 1px solid var(--borda-suave); border-bottom: 1px solid var(--borda-suave); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-dia:nth-child(7n) { border-right: 0; }
.cal-dia.fora { background: #FAFBF8; }
.cal-dia.fora .cal-numero { color: var(--borda); }
.cal-dia.fim-semana { background: #FBFCF9; }
.cal-dia.hoje .cal-numero { background: var(--primaria); color: #fff; border-radius: 999px; padding: 0 7px; }
.cal-numero { align-self: flex-start; font-size: 12px; font-weight: 800; color: var(--texto-suave); }
.cal-tarefa { display: block; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 6px; background: var(--primaria-clara); color: var(--primaria); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-tarefa.atrasada { background: var(--st-paralisado-bg); color: var(--perigo); }
.cal-tarefa.bloqueada { background: #F8EED6; color: #8A6A1F; }
.cal-tarefa.feita { background: #F0F2EE; color: var(--texto-fraco); text-decoration: line-through; }
.cal-mais summary { font-size: 10.5px; color: var(--texto-fraco); font-weight: 700; padding-left: 4px; cursor: pointer; }
.cal-mais[open] { display: flex; flex-direction: column; gap: 3px; }

/* Listas em etiquetas (amenidades, diferenciais) */
.chip { display: inline-block; font-size: 12px; font-weight: 700; color: var(--primaria); background: var(--primaria-clara); border-radius: 999px; padding: 3px 10px; margin: 0 6px 6px 0; }

/* Financeiro */
.curva { width: 100%; height: 190px; display: block; }
.curva polyline { fill: none; stroke-width: 3; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.curva .curva-previsto { stroke: #B9C7B2; stroke-dasharray: 6 4; }
.curva .curva-realizado { stroke: var(--primaria); }
.curva .curva-hoje { stroke: var(--borda); stroke-width: 1; vector-effect: non-scaling-stroke; }
.barras-mes { display: flex; flex-direction: column; gap: 2px; }
.barras-mes span { display: block; height: 6px; border-radius: 999px; min-width: 1px; }
.barras-mes .b-prev-pilha { display: flex; height: 6px; }
.barras-mes .b-prev-pilha span { border-radius: 0; }
.barras-mes .b-lanc { background: #8FA587; }
.barras-mes .b-prev { background: repeating-linear-gradient(45deg, #C9D4C3 0 3px, #E4EADF 3px 6px); }
.barras-mes .b-real { background: var(--primaria); }
.linha-futura td { color: var(--texto-suave); }
.linha-atual td { background: #FAFCF8; }
.linha-fluxo td { padding-top: 0 !important; border-top: 0 !important; }
.fluxo-titulo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11.5px; color: var(--texto-suave); }
.fluxo-titulo + .fluxo-titulo { margin-top: 3px; }
.fluxo-doc { font-weight: 700; color: var(--texto); }

.tabela-valores td { white-space: nowrap; }

/* Faixa do ambiente de demonstração */
.faixa-demo { background: #FBF1E3; color: #8A5A1F; border: 1px solid #EBD6B5; border-radius: 10px; padding: 7px 12px; margin-bottom: 14px; font-size: 12.5px; font-weight: 700; }