/* Puzzle Flow — identidade oficial Puzzle Arquitetura
   Paleta monocromática: preto, cinzas e branco. Cor só nos status.
   Fonte da marca: Century Gothic (com Jost como alternativa próxima na web).
   Mobile-first: escrevo pro celular primeiro, depois o app se adapta a telas maiores. */

:root { --fonte-marca: "Century Gothic", "Jost", "Questrial", system-ui, -apple-system, sans-serif; }

:root {
  /* Paleta Puzzle Flow (referência visual 05/11/2026) — neutros 60–70%, azul-petróleo 15–25%, cores de estado 5–10% */
  --preto:    #17191B;  /* Preto Mineral — títulos, ícones, contraste */
  --petroleo: #344E5C;  /* Azul-Petróleo — ações, destaques e navegação ativa */
  --petroleo-escuro: #2A404C;
  --concreto: #E7E8E7;  /* fundo geral e áreas amplas */
  --cinza-frio: #D8DEE2;/* bordas, divisões e campos */
  --cinza-medio: #9AA3AA;/* elementos secundários */
  --grafite:  #1F2428;  /* títulos e texto */
  --marfim:   #F5F6F6;  /* fundo geral */
  --nevoa:    #EDEFF1;  /* fundo secundário */
  --card:     #FFFFFF;  /* cards e campos */
  --greige:   #9AA3AA;  /* elementos desativados / neutros */
  --texto:    #2A3135;  /* texto principal */
  --texto-suave: #5F6B73; /* texto secundário */
  --borda:    #D8DEE2;  /* bordas e divisórias */
  --taupe:    #5F6B73;
  --texto-fraco: #66737B; /* contraste AA em textos pequenos */
  --desativado: #9AA3AA;
  /* variações de apoio (superfícies, cards e gráficos) */
  --apoio-1: #F5F6F6; --apoio-2: #EDEFF1; --apoio-3: #DDE4E8; --apoio-4: #C9D2D7; --apoio-5: #A6B3BA; --apoio-6: #7A8F98;

  /* cores funcionais — estados, alertas e indicadores */
  --s-a_iniciar:   #9AA3AA;
  --s-em_producao: #456B82; /* informação */
  --s-aguardando:  #A77D37; /* atenção */
  --s-atrasado:    #B45555; /* alerta */
  --s-aprovado:    #507B64; /* sucesso */
  --s-pessoas:     #7A8F98;
  --f-sucesso-fundo: #E8EFEA; --f-atencao-fundo: #F4EEE1; --f-alerta-fundo: #F4E6E6; --f-info-fundo: #E5ECF0;

  --raio: 20px;
  --sombra: 0 1px 2px rgba(17,17,17,0.03), 0 8px 24px rgba(17,17,17,0.05);
}

* { box-sizing: border-box; }

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

a { color: inherit; text-decoration: none; }

/* ---------- topo ---------- */

.topo {
  padding: 18px 20px;
  border-bottom: 1px solid var(--borda);
  background: var(--card);
  position: sticky;
  top: 0;
  z-index: 10;
}

.topo-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 860px;
  margin-inline: auto;
}

.marca { display: flex; align-items: center; gap: 11px; }
.logo { width: 28px; height: 28px; flex: none; }

.marca-nome {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--grafite);
}
.marca-nome em {
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--texto-suave);
}

.topo-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--texto-suave);
  padding: 6px 10px;
  border-radius: 8px;
}
.topo-link:hover { background: var(--nevoa); color: var(--grafite); }

/* ---------- conteúdo ---------- */

.conteudo {
  padding: 20px;
  max-width: 860px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 26px;
  min-height: 60vh;
}

.cabecalho-tela {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.ola {
  margin: 0;
  font-size: 27px;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--grafite);
}

.subtitulo {
  margin: 6px 0 0;
  color: var(--texto-suave);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.voltar {
  font-size: 13px;
  font-weight: 500;
  color: var(--texto-suave);
  margin-bottom: -10px;
}
.voltar:hover { color: var(--grafite); }

.titulo-secao {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--grafite);
}
.contador-secao {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px;
  border-radius: 999px; background: var(--nevoa); color: var(--grafite);
  font-size: 11px; font-weight: 700; text-transform: none; letter-spacing: normal;
  vertical-align: middle;
}

.ajuda { margin: 6px 0; color: var(--texto-suave); font-size: 13px; }
.ajuda.centro { text-align: center; }

.linha-entre { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.linha-entre .titulo-secao { margin: 0; }

.pilha { display: flex; flex-direction: column; gap: 10px; }
.sub { margin: 2px 0 0; color: var(--texto-suave); font-size: 13px; }

/* ---------- card genérico ---------- */

.card {
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 16px;
  display: block;
}
.card[hidden] { display: none; }
a.card { transition: transform .12s, box-shadow .12s; }
a.card:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(17,17,17,.05), 0 10px 28px rgba(17,17,17,.08); }

/* ---------- selo de status ---------- */

.selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--nevoa);
  color: var(--texto-suave);
  white-space: nowrap;
}
.selo.s-em_producao { background: #E5ECF0; color: #456B82; }
.selo.s-aguardando  { background: #FBF1E0; color: #96631A; }
.selo.s-atrasado    { background: #F4E6E6; color: #B45555; }
.selo.s-aprovado    { background: #E8EFEA; color: #3F6350; }

.ponto { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ponto.s-a_iniciar   { background: var(--s-a_iniciar); }
.ponto.s-em_producao { background: var(--s-em_producao); }
.ponto.s-aguardando  { background: var(--s-aguardando); }
.ponto.s-atrasado    { background: var(--s-atrasado); }
.ponto.s-aprovado    { background: var(--s-aprovado); }

/* ---------- barra de progresso ---------- */

.barra-prog { height: 6px; background: var(--nevoa); border-radius: 999px; overflow: hidden; margin: 8px 0; }
.barra-prog i { display: block; height: 100%; background: var(--grafite); border-radius: 999px; transition: width .3s; }

/* ---------- Para hoje: reflexão diária, cartão de abertura ---------- */
.para-hoje {
  position: relative; width: 100%; border-radius: 20px; padding: 28px 24px 22px;
  margin: 4px 0 20px; overflow: hidden;
  background:
    radial-gradient(ellipse at top left, rgba(255,255,255,.04), transparent 60%),
    linear-gradient(155deg, #1C1C1C 0%, #101010 60%, #050505 100%);
  box-shadow: 0 14px 32px rgba(0,0,0,.18);
  opacity: 0; transform: translateY(6px);
  animation: paraHojeEntra 420ms ease-out forwards;
}
.para-hoje::before {
  content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
}
.para-hoje-titulo {
  font-family: "Century Gothic", Jost, sans-serif; font-weight: 600; font-size: 11px;
  letter-spacing: 2px; text-transform: uppercase; color: #A8A8A8; margin: 0 0 14px;
}
.para-hoje-texto {
  font-family: "Cormorant Garamond", "Libre Baskerville", Lora, serif; font-weight: 500;
  font-size: 22px; line-height: 1.5; color: #FFFFFF; margin: 0;
}
.para-hoje-autor {
  font-family: "Century Gothic", Jost, sans-serif; font-size: 12px; color: #9A9A9A;
  text-align: right; margin: 14px 0 0;
}
@keyframes paraHojeEntra { to { opacity: 1; transform: translateY(0); } }

/* ---------- card de projeto ---------- */

.projeto-card { padding-top: 0; overflow: hidden; }
.projeto-capa {
  height: 130px; margin: -1px -16px 14px; background-size: cover; background-position: center;
  background-color: var(--nevoa); border-bottom: 1px solid var(--borda);
}
.projeto-capa-vazia { display: grid; place-items: center; }
.projeto-capa-vazia img { width: 38px; height: 38px; opacity: .25; }
.projeto-card h3 { margin: 0; font-size: 17px; font-weight: 600; color: var(--grafite); }
.projeto-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.projeto-meta { display: flex; justify-content: space-between; font-size: 13px; color: var(--texto-suave); margin-top: 12px; }

/* ---------- farol do projeto (aviso rápido) ---------- */

.farol-ponto {
  display: inline-block; width: 9px; height: 9px; border-radius: 999px;
  margin-right: 7px; vertical-align: middle; position: relative; top: -1px;
}
.farol-ponto-vermelho { background: var(--s-atrasado); }
.farol-ponto-amarelo  { background: var(--s-aguardando); }
.farol-ponto-verde    { background: var(--s-aprovado); }

/* tingimento suave do card conforme o farol — dentro da paleta, sem sair do mono */
.projeto-card.farol-vermelho { background: rgba(214, 69, 69, .04); }
.projeto-card.farol-amarelo  { background: rgba(199, 155, 46, .05); }
.projeto-card.farol-verde    { background: rgba(63, 143, 91, .04); }

/* ---------- barra de distribuição de status (tela Projetos) ---------- */

.dist-status-caixa { margin-bottom: 16px; }
.dist-status-legenda {
  display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--texto-suave);
  margin-top: 8px;
}
.dist-status-legenda span { display: inline-flex; align-items: center; gap: 5px; }
.dist-status-legenda i { display: inline-block; width: 8px; height: 8px; border-radius: 999px; }
.chip-filtro-farol {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--texto-suave);
  background: none; border: 1px solid transparent; border-radius: 999px; padding: 3px 8px; cursor: pointer;
}
.chip-filtro-farol i { display: inline-block; width: 8px; height: 8px; border-radius: 999px; }
.chip-filtro-farol:hover { background: var(--nevoa); }
.chip-filtro-farol.ativo { border-color: var(--borda); background: var(--card); color: var(--grafite); font-weight: 600; }
.fin-seg-clicavel { border: none; cursor: pointer; padding: 0; }
.fin-seg-clicavel.ativo { outline: 2px solid var(--preto); outline-offset: -2px; }

/* ---------- bloco de progresso (tela projeto) ---------- */

.bloco-prog .linha-entre { margin-bottom: 4px; }
.bloco-prog strong { font-size: 18px; color: var(--grafite); }

/* ---------- card de etapa ---------- */

.etapa-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.etapa-info { display: flex; align-items: center; gap: 14px; }
.etapa-card h4 { margin: 0; font-size: 15px; font-weight: 600; color: var(--grafite); }
.etapa-ordem {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--nevoa);
  color: var(--texto-suave);
  font-size: 13px; font-weight: 600;
}

/* ---------- chips (ambientes) ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--card); border: 1px solid var(--borda);
  border-radius: 999px; padding: 6px 8px 6px 14px;
  font-size: 13px; font-weight: 500;
}
.chip-x, .item-x, .chip-x:hover {
  border: none; background: none; cursor: pointer;
  color: var(--texto-fraco); font-size: 18px; line-height: 1; padding: 0 4px;
}
.chip-x:hover, .item-x:hover { color: var(--s-atrasado); }

/* ---------- itens do checklist ---------- */

.item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; }
.item-corpo { flex: 1; }
.item-desc { margin: 0; font-weight: 500; color: var(--grafite); }
.item-feito .item-desc { text-decoration: line-through; color: var(--texto-fraco); }
.item-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 6px; font-size: 12px; color: var(--texto-suave); }
.item-x { align-self: center; }
.tag { background: var(--nevoa); border-radius: 6px; padding: 2px 8px; font-weight: 500; }
.prazo-vencido { color: var(--s-atrasado); font-weight: 600; }

/* checkbox bonito */
.item-check { position: relative; display: block; width: 22px; height: 22px; flex: none; cursor: pointer; margin-top: 1px; }
.item-check input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.marca-check {
  display: block; width: 22px; height: 22px; border-radius: 7px;
  border: 2px solid var(--borda); background: var(--card); transition: .12s;
}
.item-check input:checked + .marca-check {
  background: var(--s-aprovado); border-color: var(--s-aprovado);
}
.item-check input:checked + .marca-check::after {
  content: ""; position: absolute; left: 7px; top: 3px;
  width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* ---------- membro da equipe ---------- */

.membro { display: flex; align-items: center; justify-content: space-between; }

/* ---------- a TRAVA ---------- */

.trava { border-radius: var(--raio); padding: 18px; }
.trava-ok {
  background: #E8EFEA; color: #3F6350; font-weight: 600; text-align: center;
  border: 1px solid #CFE6D6;
}
.trava-bloq { background: #F7EDED; border: 1px solid #E6CFCF; }
.trava-livre { background: var(--card); border: 1px solid var(--borda); box-shadow: var(--sombra); }

.falta-titulo { margin: 14px 0 8px; font-weight: 600; color: #B45555; font-size: 14px; }
.falta-lista { margin: 0; padding-left: 20px; color: var(--grafite); font-size: 14px; }
.falta-lista li { margin: 4px 0; }

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

.botao-principal {
  width: 100%;
  padding: 14px;
  background: var(--preto);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, transform .05s;
  text-align: center;
}
.botao-principal:hover { background: #000; }
.botao-principal:active { transform: translateY(1px); }
.botao-principal:disabled { background: var(--greige); cursor: not-allowed; opacity: .7; }

.botao-secundario {
  padding: 12px 16px; background: var(--card); color: var(--grafite);
  border: 1.5px solid var(--borda); border-radius: 12px;
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.botao-secundario:hover { color: var(--grafite); border-color: var(--greige); }

.botao-add {
  background: var(--card); color: var(--grafite);
  border: 1.5px solid var(--grafite); border-radius: 999px;
  padding: 7px 14px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  flex: none;
}
.botao-add:hover { border-color: var(--preto); background: var(--nevoa); }

/* ---------- estado vazio ---------- */

.vazio {
  background: var(--card); border: 1px solid var(--borda);
  border-radius: var(--raio); box-shadow: var(--sombra);
  padding: 40px 24px; text-align: center;
}
.vazio-icone { width: 30px; height: 30px; opacity: .5; }
.vazio-titulo { margin: 14px 0 6px; font-weight: 600; color: var(--grafite); }
.vazio-texto { margin: 0 auto 18px; color: var(--texto-suave); font-size: 13px; max-width: 42ch; }
.vazio .botao-principal { width: auto; display: inline-block; padding: 12px 22px; }

/* ---------- rodapé ---------- */

.rodape {
  padding: 32px 20px 40px; text-align: center; color: var(--texto-fraco);
  font-size: 12px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  border-top: 1px solid var(--borda); margin-top: 20px;
}
.rodape-logo { width: 130px; max-width: 55%; opacity: .7; }

/* ---------- modal (janela de formulário) ---------- */

.modal[hidden] { display: none; }
.modal {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: flex-end; justify-content: center;
}
.modal-fundo { position: absolute; inset: 0; background: rgba(17,17,17,.4); }
.modal-caixa {
  position: relative; background: var(--card);
  width: 100%; max-width: 460px;
  border-radius: 20px 20px 0 0;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 40px rgba(17,17,17,.2);
  animation: sobe .2s ease;
  /* Modal de macroetapa (e outros formulários grandes) passava do tamanho da
     tela no celular sem nenhum jeito de rolar até os campos de baixo — sem
     isso, dava pra ver só o início do formulário. */
  max-height: 90vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
@keyframes sobe { from { transform: translateY(20px); opacity: .6; } to { transform: none; opacity: 1; } }

.modal-titulo { margin: 0 0 16px; font-size: 18px; font-weight: 600; color: var(--grafite); }

.campo { display: block; margin-bottom: 14px; }
.campo span { display: block; font-size: 13px; font-weight: 500; color: var(--texto-suave); margin-bottom: 6px; }
.campo input, .campo select {
  width: 100%; padding: 11px 12px; font-family: inherit; font-size: 15px;
  border: 1px solid var(--borda); border-radius: 10px; background: var(--card); color: var(--texto);
}
.campo input:focus, .campo select:focus { outline: none; border-color: var(--grafite); }
.campo-linha { display: flex; gap: 12px; }
.campo-linha .campo { flex: 1; }

.modal-acoes { display: flex; gap: 10px; margin-top: 8px; }
.modal-acoes .botao-principal, .modal-acoes .botao-secundario { width: auto; flex: 1; }

/* ---------- dashboard: cartões de números ---------- */

.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile {
  background: var(--card); border: 1px solid var(--borda); border-radius: var(--raio);
  box-shadow: var(--sombra); padding: 16px; display: flex; flex-direction: column; gap: 2px;
}
.tile-ico {
  width: 30px; height: 30px; border-radius: 9px; background: var(--nevoa);
  display: grid; place-items: center; margin-bottom: 4px; color: var(--taupe);
}
.tile-alerta .tile-ico { background: #F4E6E6; color: var(--s-atrasado); }
.icone-svg { width: 16px; height: 16px; }
.tile-num { font-size: 30px; font-weight: 300; letter-spacing: -.02em; color: var(--grafite); line-height: 1.1; }
.tile-rot { font-size: 12px; color: var(--texto-suave); }
.tile-alerta { border-color: #E6CFCF; background: #F7EDED; }
.tile-alerta .tile-num { color: var(--s-atrasado); }

/* ---------- barra de comando da Puzzle IA (painel inicial) ---------- */

.barra-ia {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--borda); border-radius: 999px;
  padding: 13px 8px 13px 16px; margin: 4px 0 18px; box-shadow: var(--sombra);
  cursor: pointer; transition: box-shadow .15s, border-color .15s;
}
.barra-ia:hover { border-color: var(--greige); box-shadow: 0 2px 4px rgba(17,17,17,.04), 0 10px 26px rgba(17,17,17,.06); }
.barra-ia-icone { flex: none; color: var(--taupe); display: grid; place-items: center; }
.barra-ia-texto {
  flex: 1; color: var(--texto-suave); font-size: 14.5px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
.barra-ia-mic {
  flex: none; width: 34px; height: 34px; border-radius: 50%; border: none;
  background: var(--nevoa); color: var(--grafite); display: grid; place-items: center; cursor: pointer;
}
.barra-ia-mic:hover { background: var(--borda); }

/* ---------- painel inicial: resumo por área ---------- */

/* a faixa em si ganha um fundo levemente diferente do resto da página, pra se
   destacar como um bloco só — sempre dentro da paleta (só um tom de cinza a mais). */
.faixa-resumo {
  background: var(--nevoa);
  border-radius: var(--raio); padding: 14px 12px; margin: 0 -4px 4px;
}
.grade-resumo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.resumo-area {
  background: var(--card); border: 1px solid var(--borda); border-radius: var(--raio);
  box-shadow: var(--sombra); padding: 14px 16px; text-decoration: none; display: block;
  transition: transform .12s, box-shadow .12s;
}
.resumo-area:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(17,17,17,.05), 0 10px 28px rgba(17,17,17,.08); }
.resumo-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.resumo-titulo { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); }
.resumo-numero { font-size: 26px; font-weight: 300; letter-spacing: -.02em; color: var(--grafite); line-height: 1; }
.resumo-legenda { font-size: 11.5px; color: var(--texto-suave); margin-top: 6px; }
.resumo-mini-barra { display: flex; height: 6px; border-radius: 999px; overflow: hidden; background: var(--nevoa); margin-top: 8px; }
.resumo-mini-barra span { display: block; height: 100%; }

/* Cada área ganha um leve acento de cor (borda esquerda + ícone), pra diferenciar
   os 4 cartões num relance sem sair da paleta — mesmas cores de status já usadas
   no resto do app, nunca uma cor nova. */
.resumo-icone {
  width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
  background: var(--nevoa); color: var(--taupe);
}
.resumo-area { border-left: 3px solid var(--borda); }
.resumo-area.cor-azul   { border-left-color: var(--s-em_producao); background: #EFF4FC; }
.resumo-area.cor-azul   .resumo-icone { background: #E7EFFB; color: var(--s-em_producao); }
.resumo-area.cor-ambar  { border-left-color: var(--s-aguardando); background: #FCF6EB; }
.resumo-area.cor-ambar  .resumo-icone { background: #F7EDDC; color: var(--s-aguardando); }
.resumo-area.cor-verde  { border-left-color: var(--s-aprovado); background: #EEF7F1; }
.resumo-area.cor-verde  .resumo-icone { background: #E9F3ED; color: var(--s-aprovado); }
.resumo-area.cor-grafite { border-left-color: var(--taupe); background: var(--nevoa); }
.resumo-area.cor-grafite .resumo-icone { background: #fff; color: var(--grafite); }
.resumo-area.cor-pessoas { border-left-color: var(--s-pessoas); background: #F4F1FB; }
.resumo-area.cor-pessoas .resumo-icone { background: #EEE9FA; color: var(--s-pessoas); }
.resumo-area.resumo-atencao { border-left-color: var(--s-atrasado); background: #F7EDED; }
.resumo-area.resumo-atencao .resumo-icone { background: #F4E6E6; color: var(--s-atrasado); }
.resumo-area.resumo-atencao .resumo-titulo { color: var(--s-atrasado); }

@media (min-width: 720px) { .grade-resumo { grid-template-columns: repeat(4, 1fr); } }

/* fluxo das etapas */
.fluxo { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; }
.fluxo-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fluxo-item strong { font-size: 22px; font-weight: 400; color: var(--grafite); }
.fluxo-item .sub { margin: 0; font-size: 11px; }
.fluxo-item .ponto { width: 9px; height: 9px; }

/* previsão financeira */
.financeiro { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.financeiro .sub { display: block; margin: 2px 0 0; }
.fin-valor { font-size: 28px; font-weight: 300; letter-spacing: -.02em; color: var(--grafite); }
.fin-lado { text-align: right; }
.fin-mini { font-size: 18px; font-weight: 500; color: var(--s-aprovado); }

/* agenda do dia */
.agenda-card { display: flex; align-items: center; gap: 12px; }
.agenda-prazo { font-size: 12px; font-weight: 600; color: var(--s-em_producao); white-space: nowrap; }

/* precisa de atenção */
.atencao-card { display: flex; align-items: center; gap: 12px; }
.atencao-corpo { flex: 1; }
.atencao-corpo .sub { margin: 2px 0 0; }
.atencao-seta { color: var(--texto-fraco); font-size: 22px; }
.ponto.grande { width: 12px; height: 12px; }

.ver-todos { align-self: center; font-size: 14px; font-weight: 600; color: var(--texto-suave); padding: 8px; }
.ver-todos:hover { color: var(--grafite); }

/* ---------- ações no topo, botão perigo, editar nome ---------- */

.acoes-topo { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.botao-add.perigo { color: var(--s-atrasado); }
.botao-add.perigo:hover { border-color: var(--s-atrasado); background: #F7EDED; }
/* Mesma marcação de ação destrutiva nos botões pequenos (ex.: excluir post). */
.mini-btn.perigo { color: var(--s-atrasado); }
.mini-btn.perigo:hover { border-color: var(--s-atrasado); background: #F7EDED; }

.editar-nome {
  border: none; background: none; cursor: pointer; color: var(--texto-fraco);
  font-size: 15px; padding: 0 4px; vertical-align: middle;
}
.editar-nome:hover { color: var(--grafite); }

/* ---------- busca ---------- */

.busca {
  width: 100%; padding: 11px 14px; font-family: inherit; font-size: 15px;
  border: 1px solid var(--borda); border-radius: 12px; background: var(--card); color: var(--texto);
  margin-bottom: 4px;
}
.busca:focus { outline: none; border-color: var(--grafite); }

/* ---------- link da pasta (Drive) ---------- */

.link-pasta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-weight: 600; color: var(--grafite); width: 100%; text-align: left;
  font-family: inherit; font-size: 15px; cursor: pointer;
}
.vazio-link { color: var(--texto-suave); border-style: dashed; }

/* ---------- requisitos do item (arquivo / aprovação) ---------- */

.item-linha1 { display: flex; align-items: flex-start; gap: 12px; }
.item { flex-direction: column; align-items: stretch; gap: 0; }
.item-req {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 8px 0 0; padding: 8px 12px; border-radius: 10px;
  background: var(--nevoa); font-size: 13px; color: var(--texto-suave);
}
.item-req a { font-weight: 600; color: var(--grafite); text-decoration: underline; }
.item-req.req-falta { background: #F7EDED; color: #B45555; }
.mini-btn {
  border: 1px solid var(--borda); background: var(--card); color: var(--texto-suave);
  border-radius: 8px; padding: 4px 10px; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  white-space: nowrap;
}
.mini-btn:hover { border-color: var(--greige); color: var(--grafite); }

/* ---------- aviso e alterações (Fase 4) ---------- */

.aviso-alt {
  background: #F7EDED; border: 1px solid #E6CFCF; color: #B45555;
  border-radius: var(--raio); padding: 12px 16px; font-size: 14px; font-weight: 600;
}
.alt-card { display: flex; align-items: center; gap: 12px; }
.alt-corpo { flex: 1; }
.alt-status {
  font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; text-transform: capitalize;
  background: var(--nevoa); color: var(--texto-suave);
}
.alt-status-pendente { background: #F7EDED; color: #B45555; }
.alt-status-aceita { background: #E8EFEA; color: #3F6350; }
.alt-status-recusada { background: var(--nevoa); color: var(--texto-suave); }

/* ---------- checkbox de formulário ---------- */

.campo-caixa {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
  font-size: 14px; color: var(--grafite); cursor: pointer;
}
.campo-caixa input { width: 18px; height: 18px; accent-color: var(--preto); }

/* ---------- sino de notificações ---------- */

.sino {
  position: relative; padding: 4px 6px; border-radius: 8px; color: var(--grafite);
  display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
  font-size: 9px; font-weight: 500; line-height: 1.2;
}
.sino:hover { background: var(--nevoa); }
.sino .icone-svg { width: 20px; height: 20px; }
.sino-rotulo { white-space: nowrap; }
.sino-contador {
  position: absolute; top: 0; right: 2px; min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--s-atrasado); color: #fff; font-size: 10px; font-weight: 700;
  border-radius: 999px; display: flex; align-items: center; justify-content: center;
}
.sino-contador[hidden] { display: none; }

/* ---------- menu inferior fixo ---------- */

body { padding-bottom: 72px; }
.nav-inferior {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; background: var(--card); border-top: 1px solid var(--borda);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  box-shadow: 0 -2px 12px rgba(17,17,17,.05);
}
.nav-inferior a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 10px; font-weight: 500; color: var(--texto-fraco); padding: 6px 0; border-radius: 10px;
}
.nav-inferior a .nav-ico { opacity: .6; position: relative; }
.nav-inferior a .nav-ico .icone-svg { width: 20px; height: 20px; }
.nav-inferior a.ativo { color: var(--preto); }
.nav-inferior a.ativo .nav-ico { opacity: 1; }
.nav-inferior a.nav-alerta .nav-ico::after {
  content: ""; position: absolute; top: -2px; right: -3px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--s-atrasado); border: 1.5px solid var(--card);
}

/* ---------- tiles clicáveis ---------- */

a.tile { text-decoration: none; transition: transform .12s, box-shadow .12s; }
a.tile:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(17,17,17,.05), 0 10px 28px rgba(17,17,17,.08); }

/* ---------- financeiro em grade ---------- */

.fin-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }
.fin-cel { display: flex; flex-direction: column; gap: 2px; }
/* Célula que abre detalhe ao clicar — sem virar botão visualmente, só o
   suficiente pra dar a entender que responde ao toque. */
.fin-cel-botao {
  background: none; border: 0; padding: 0; text-align: left; cursor: pointer;
  font: inherit; color: inherit; border-radius: 8px;
}
.fin-cel-botao:hover { background: var(--nevoa); }
.fin-cel strong { font-size: 20px; font-weight: 400; color: var(--grafite); }
.fin-cel .verde { color: var(--s-aprovado); }
.fin-cel .vermelho { color: var(--s-atrasado); }
.verde { color: var(--s-aprovado); }
.vermelho { color: var(--s-atrasado); }

/* ---------- agenda: ícones e vazio ---------- */

.agenda-ico { width: 26px; height: 26px; display: grid; place-items: center; flex: none; color: var(--taupe); }
.agenda-vazia { text-align: center; color: var(--texto-suave); font-size: 14px; }

/* ---------- fluxo (agora 5 status) ---------- */

.fluxo { grid-template-columns: repeat(5, 1fr); }
.fluxo-item .sub { font-size: 10px; }

/* ---------- parcelas ---------- */

.parcela-card { display: flex; align-items: center; gap: 12px; }
.parcela-paga .item-desc { color: var(--texto-suave); }

/* ---------- topo: ações (busca + sino) ---------- */
.topo-acoes { display: flex; align-items: center; gap: 2px; }

/* ---------- avatar (clientes e equipe) ---------- */
.avatar {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  background: var(--nevoa); color: var(--grafite);
  display: grid; place-items: center; font-weight: 600; font-size: 16px;
}
img.avatar.avatar-foto { object-fit: cover; }
.membro { display: flex; align-items: center; gap: 12px; }
.contatos { font-size: 14px; line-height: 1.9; }
.contatos a { color: var(--grafite); text-decoration: underline; }

/* ---------- dica em formulário ---------- */
.dica { margin: -8px 0 12px; font-size: 12px; color: var(--texto-fraco); }

/* ---------- ações do item + reordenar etapas ---------- */
.item-acoes { display: flex; align-items: center; gap: 4px; }
.reordenar { display: flex; flex-direction: column; gap: 2px; }
.seta {
  border: 1px solid var(--borda); background: var(--card); color: var(--texto-suave);
  border-radius: 6px; width: 22px; height: 18px; font-size: 9px; line-height: 1; cursor: pointer; padding: 0;
}
.seta:hover:not(:disabled) { border-color: var(--greige); color: var(--grafite); }
.seta:disabled { opacity: .3; cursor: default; }

/* ---------- filtros por status ---------- */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-filtro {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--borda); background: var(--card); color: var(--texto-suave);
  border-radius: 999px; padding: 6px 12px; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.chip-filtro:hover { border-color: var(--greige); }
.chip-filtro.ativo { background: var(--preto); color: #fff; border-color: var(--preto); }
.chip-filtro.ativo .ponto { outline: 1px solid #fff; }
.chip-filtro b { font-weight: 600; opacity: .6; font-size: 11px; }
.chip-filtro.ativo b { opacity: .85; }

/* linha de filtros em rolagem horizontal (uma linha só, sem quebrar) */
.filtros-scroll {
  flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none;
}
.filtros-scroll::-webkit-scrollbar { display: none; }
.filtros-scroll .chip-filtro { flex: none; }
.filtro-separador { flex: none; width: 1px; background: var(--borda); margin: 4px 2px; }
.chip-arquivado { color: var(--greige); }
.chip-arquivado.ativo { background: var(--greige); border-color: var(--greige); }

/* ---------- alternador Lista/Agenda ---------- */
.alternador-vista { display: flex; gap: 4px; background: var(--nevoa); border-radius: 10px; padding: 3px; margin: 10px 0 14px; width: fit-content; }
.alt-item { padding: 6px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--texto-suave); text-decoration: none; }
.alt-item.alt-ativo { background: var(--card); color: var(--preto); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* ---------- Agenda de Entregas ---------- */
.semana-agenda { margin-bottom: 16px; }
.semana-cabecalho { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-radius: 10px 10px 0 0; background: var(--nevoa); }
.semana-cabecalho b { font-size: 13px; }
.selo-semana { border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 700; }
.selo-semana-vazia { background: var(--nevoa); color: var(--texto-suave); }
.selo-semana-livre { background: #E4F2E8; color: #2E6B44; }
.selo-semana-cheia { background: #F4E6E6; color: #B45555; }
.linha-entrega { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--borda); font-size: 13px; }
.linha-entrega .datas-entrega { margin-left: auto; color: var(--texto-suave); font-size: 12px; white-space: nowrap; }
.aviso-conflito { padding: 4px 14px 10px; color: #B45555; font-size: 12px; font-weight: 600; }

/* ---------- comentários ---------- */
.coment-lista { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; max-height: 220px; overflow-y: auto; }
.coment { background: var(--nevoa); border-radius: 10px; padding: 8px 12px; font-size: 14px; }

/* ---------- ajustes (equipe) ---------- */
.ajustes { display: flex; flex-direction: column; gap: 10px; }
.ajustes .botao-secundario { width: 100%; }
.perigo-txt { color: var(--s-atrasado); }
.perigo-txt:hover { border-color: var(--s-atrasado); }

/* ========== Área do Cliente / Assistência à Obra ========== */

.banner-cliente {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--grafite); color: #fff; border-radius: 12px;
  padding: 10px 14px; font-size: 13px; margin-bottom: 18px;
}
.banner-cliente .mini-btn { margin-left: auto; background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.banner-cliente .mini-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.modo-cliente .topo-acoes a[href="#/buscar"] { display: none; }
.modo-cliente .topo-acoes a[href="#/marketing"] { display: none; }

.assist-card h3 { margin: 0 0 6px; font-size: 17px; font-weight: 600; color: var(--grafite); }
.assist-card .botao-principal, .assist-card a.botao-principal { margin-top: 12px; display: inline-block; width: auto; padding: 12px 22px; }
.assist-linha { margin: 4px 0 0; font-size: 14px; color: var(--grafite); }

.assist-admin .item-desc { font-weight: 600; }
.assist-saldo { display: flex; align-items: center; justify-content: space-between; }
.assist-saldo .fin-valor { font-size: 30px; }

/* abas do módulo */
.abas { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 4px; }
.aba {
  flex: none; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
  color: var(--texto-suave); background: var(--card); border: 1px solid var(--borda); white-space: nowrap;
}
.aba.ativo { background: var(--preto); color: #fff; border-color: var(--preto); }
.aba-conteudo { display: flex; flex-direction: column; gap: 12px; }

.mini-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mini-grade .card { padding: 14px; }

.fotos-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.foto-thumb { aspect-ratio: 1; background: var(--nevoa); border-radius: 10px; display: grid; place-items: center; font-size: 26px; }

.hist-visita { margin: 8px 0 0; padding-left: 18px; font-size: 12px; color: var(--texto-suave); }
.hist-visita li { margin: 2px 0; }

/* ========== polimento: toast, foco, toque, vazios ========== */

/* toast (aviso elegante) */
.toast {
  position: fixed; left: 50%; bottom: 84px; transform: translate(-50%, 20px);
  background: var(--grafite); color: #fff; padding: 12px 18px; border-radius: 12px;
  font-size: 14px; font-weight: 500; max-width: 90%; text-align: center;
  box-shadow: 0 8px 30px rgba(17,17,17,.25); z-index: 60;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.toast.mostra { opacity: 1; transform: translate(-50%, 0); }
.toast-erro { background: #B45555; }

/* foco visível para navegação por teclado */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, .aba:focus-visible {
  outline: 3px solid #456B82; outline-offset: 2px; border-radius: 8px;
}

/* alvos de toque mais confortáveis no celular */
.mini-btn { min-height: 36px; }
.botao-add { min-height: 38px; }
.chip-x, .item-x { min-width: 34px; min-height: 34px; display: inline-flex; align-items: center; justify-content: center; }
.nav-inferior a { min-height: 52px; justify-content: center; }

/* vazio guiado dentro de seções */
.vazio-dica { color: var(--texto-suave); font-size: 14px; text-align: center; padding: 22px 18px; }
.vazio-dica b { color: var(--grafite); }

/* ambiente: nome editável */
.chip-nome { border: none; background: none; font: inherit; font-weight: 500; color: var(--grafite); cursor: pointer; padding: 0; }
.chip-nome:hover { text-decoration: underline; }

/* links do dashboard */
.dash-links { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }

/* ========== painel de status (modo cliente) ========== */
.painel-status .ps-titulo { margin: 10px 0 14px; font-size: 19px; font-weight: 600; color: var(--grafite); }
.ps-blocos { display: flex; flex-direction: column; gap: 10px; }
.ps-bloco { background: var(--nevoa); border-radius: 12px; padding: 12px 14px; }
.ps-bloco p { margin: 4px 0 0; font-size: 14px; color: var(--grafite); line-height: 1.5; }
.ps-rot { font-size: 12px; font-weight: 700; color: var(--texto-suave); }
.ps-voce { background: #E5ECF0; }
.ps-voce .ps-rot { color: #456B82; }

/* ========== Termo de Aprovação ========== */

.termo-barra {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--nevoa); border: 1px solid var(--borda); border-radius: 12px;
  padding: 10px 14px; font-size: 13px; color: var(--texto-suave); margin-bottom: 16px;
}
.termo-barra .botao-principal { width: auto; padding: 10px 18px; }

.termo {
  background: #fff; border: 1px solid var(--borda); border-radius: 12px;
  padding: 40px; max-width: 780px; margin-inline: auto; color: #111;
}
.termo-cabecalho { display: flex; align-items: center; gap: 18px; border-bottom: 2px solid #111; padding-bottom: 16px; }
.termo-logo { width: 130px; max-width: 40%; }
.termo-timbre { font-size: 11px; color: #555; line-height: 1.6; }
.termo-timbre strong { display: block; font-size: 13px; color: #111; }

.termo-h1 { margin: 24px 0 4px; font-size: 20px; font-weight: 600; text-align: center; }
.termo-local { margin: 0 0 20px; font-size: 13px; color: #333; text-align: center; }
.termo-p { font-size: 13.5px; line-height: 1.7; text-align: justify; margin: 0 0 12px; }

.termo-secao { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: #333; margin: 22px 0 10px; }
.termo-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.termo-tabela th { text-align: left; border-bottom: 1px solid #bbb; padding: 8px 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #555; }
.termo-tabela td { border-bottom: 1px solid #e4e4e4; padding: 9px 10px; vertical-align: top; }
.termo-tabela .td-data { white-space: nowrap; }
.termo-lista { font-size: 13.5px; line-height: 1.7; margin: 0 0 12px; padding-left: 20px; }
.termo-aviso {
  font-size: 12.5px; line-height: 1.6; color: var(--texto-suave); margin: 10px 0 18px;
  padding: 10px 14px; border-left: 2px solid var(--borda); background: var(--nevoa);
}
.termo-vazio { color: #666; font-size: 14px; padding: 20px 0; }

.termo-nota { font-size: 11px; color: #666; line-height: 1.6; margin-top: 24px; }
.termo-assinaturas { display: flex; gap: 40px; margin-top: 48px; }
.termo-assina { flex: 1; text-align: center; }
.termo-assina span { display: block; border-top: 1px solid #111; margin-bottom: 6px; }
.termo-assina p { margin: 0; font-size: 13px; }
.termo-rodape { margin-top: 32px; text-align: center; font-size: 11px; color: #999; }

/* impressão: mostra só o termo (ou o relatório aberto no modal), em página limpa */
@media print {
  .topo, .nav-inferior, .banner-cliente, .naoimprime, #toast { display: none !important; }
  body { padding: 0; background: #fff; }
  .conteudo { padding: 0; max-width: none; }
  .termo { border: none; border-radius: 0; padding: 0; max-width: none; }
  @page { margin: 18mm; }

  /* relatório financeiro impresso a partir do modal */
  .modal-fundo { display: none !important; }
  .modal { position: static !important; background: none !important; padding: 0 !important; }
  .modal-caixa { position: static !important; box-shadow: none !important; border: none !important; max-width: none !important; width: auto !important; }
}
.relatorio-cabecalho { display: none; }
@media print {
  .relatorio-cabecalho { display: block; font-size: 12px; color: #666; margin: 0 0 6px; }
}

/* ========== rosca do fluxo das etapas / resumo financeiro ========== */
.fluxo-rosca { padding: 18px; }
.fluxo-rosca .campo-linha { margin-bottom: 18px; }
.fluxo-rosca-corpo { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.rosca {
  width: 148px; height: 148px; border-radius: 50%; flex: none; display: grid; place-items: center;
  position: relative; box-shadow: 0 0 0 1px var(--borda) inset;
}
.rosca-centro {
  width: 96px; height: 96px; background: var(--card); border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(17,17,17,0.08);
}
.rosca-centro strong { font-size: 22px; font-weight: 600; color: var(--grafite); letter-spacing: -.01em; }
.rosca-centro .sub { margin: 2px 0 0; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.rosca-legenda { flex: 1; min-width: 220px; display: flex; flex-direction: column; }
.rosca-item {
  display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--texto-suave);
  padding: 7px 4px; border-bottom: 1px solid var(--nevoa);
}
.rosca-item:last-child { border-bottom: none; }
.rosca-item:hover { background: var(--nevoa); border-radius: 6px; }
.rosca-item .ponto { width: 10px; height: 10px; flex: none; border-radius: 50%; box-shadow: 0 0 0 3px rgba(17,17,17,0.04); }
.rosca-item span:not(.ponto) { flex: 1; color: var(--grafite); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rosca-item b {
  margin-left: auto; color: var(--grafite); font-weight: 600; text-align: right;
  font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 12.5px;
}

.projeto-arquivado { opacity: .7; }
.projeto-codigo { font-size: 12px; font-weight: 600; color: var(--texto-suave); letter-spacing: .02em; }
.tag-entrega-pendente {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600;
  color: #8F6A2C; background: #F4EEE1; padding: 2px 8px; border-radius: 999px;
}
.tag-entrega-pendente .icone-svg { width: 12px; height: 12px; }

/* ========== equipe do projeto (tela do projeto) ========== */
.equipe-projeto-lista { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.equipe-projeto-item {
  display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--grafite);
  background: var(--nevoa); border: none; border-radius: 999px; padding: 5px 12px 5px 5px; cursor: pointer;
}
.equipe-projeto-item:hover { background: var(--borda); }
.equipe-projeto-item .avatar-mini { margin-left: 0; }

/* ========== entregas (digital / física) ========== */
.entregas-lista { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.entrega-linha { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--grafite); cursor: pointer; }

/* ========== legenda fixa de cores de status (Dashboard) ========== */
.legenda-status {
  display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--texto-suave);
  margin: -4px 0 16px;
}
.legenda-status span { display: inline-flex; align-items: center; gap: 5px; }
.legenda-status i.ponto { width: 8px; height: 8px; }

/* ========== anel de progresso mini (cards de projeto) ========== */
.projeto-linha-meio { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.anel-mini { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; }
.anel-mini-centro {
  width: 32px; height: 32px; background: var(--card); border-radius: 50%;
  display: grid; place-items: center; font-size: 10px; font-weight: 600; color: var(--grafite);
}

/* ========== avatares empilhados (equipe do projeto) ========== */
.avatares-pilha { display: flex; align-items: center; margin-left: 4px; }
.avatar-mini {
  width: 22px; height: 22px; font-size: 10px; border: 2px solid var(--card);
  margin-left: -8px;
}
.avatares-pilha .avatar-mini:first-child { margin-left: 0; }
.avatar-mais { background: var(--greige); color: #fff; }

/* ========== equipe: fileira de avatares clicáveis (painel inicial) ========== */
.equipe-avatares { display: flex; gap: 14px; overflow-x: auto; padding: 2px 2px 6px; -ms-overflow-style: none; scrollbar-width: none; }
.equipe-avatares::-webkit-scrollbar { display: none; }
.equipe-avatar-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: none; padding: 0; cursor: pointer; flex: none; width: 58px;
}
.avatar-grande { width: 52px; height: 52px; font-size: 18px; border: 2px solid var(--card); box-shadow: 0 0 0 1px var(--borda); transition: transform .12s; }
.equipe-avatar-item:hover .avatar-grande { transform: translateY(-2px); }
.avatar-grande.avatar-sobrecarga { box-shadow: 0 0 0 2px var(--s-atrasado); }
.equipe-avatar-nome { font-size: 11px; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 58px; }

/* miniatura da capa do projeto nos cards de "precisa de atenção" — mais visual que um pontinho só */
.atencao-thumb {
  width: 40px; height: 40px; border-radius: 10px; flex: none; background-color: var(--nevoa);
  background-size: cover; background-position: center; display: grid; place-items: center;
}
.atencao-thumb img { width: 18px; height: 18px; opacity: .3; }

/* ========== cobranças vencidas (resumo) ========== */
.cobranca-resumo { display: flex; align-items: center; gap: 12px; border-color: #E6CFCF; background: #F7EDED; }

/* ========== gráfico financeiro (barra proporcional) ========== */
.fin-barra { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--nevoa); margin-bottom: 10px; }
.fin-seg { display: block; height: 100%; }
.fin-seg.fin-verde { background: var(--s-aprovado); }
.fin-seg.fin-cinza { background: var(--greige); }
.fin-seg.fin-vermelho { background: var(--s-atrasado); }
.fin-legenda { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; font-size: 12px; color: var(--texto-suave); }
.fin-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.fin-legenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.fin-legenda i.fin-verde { background: var(--s-aprovado); }
.fin-legenda i.fin-cinza { background: var(--greige); }
.fin-legenda i.fin-vermelho { background: var(--s-atrasado); }

/* ========== gráfico mensal (recebido x despesas) ========== */
.grafico-area { position: relative; }
.grafico-linha-meta {
  position: absolute; left: 0; right: 0; border-top: 2px dashed var(--grafite);
  opacity: .55; z-index: 1; pointer-events: none;
}
.grafico-meses { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; height: 140px; padding-top: 8px; position: relative; z-index: 2; }
.grafico-coluna {
  flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%;
  background: none; border: none; padding: 0; cursor: pointer; border-radius: 8px;
}
.grafico-coluna:hover { background: var(--nevoa); }
.grafico-barras { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 3px; width: 100%; position: relative; }
.grafico-barra { width: 40%; min-height: 2px; border-radius: 3px 3px 0 0; }
.grafico-barra.fin-verde { background: var(--s-aprovado); }
.grafico-barra.fin-vermelho { background: var(--s-atrasado); }
.grafico-tick-meta {
  position: absolute; left: 6%; right: 6%; border-top: 2px dashed var(--grafite);
  opacity: .6; z-index: 3; pointer-events: none;
}

/* ========== gráfico de saldo mensal (lucro pra cima / prejuízo pra baixo) ========== */
.grafico-saldo { display: flex; align-items: stretch; justify-content: space-between; gap: 6px; height: 120px; }
.grafico-coluna-saldo { flex: 1; display: flex; flex-direction: column; align-items: center; }
.grafico-saldo-eixo { flex: 1; width: 100%; position: relative; }
.grafico-saldo-eixo::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; border-top: 1px dashed var(--borda); }
.grafico-saldo-barra { position: absolute; left: 30%; right: 30%; border-radius: 3px; min-height: 2px; }

/* ========== alertas automáticos do financeiro ========== */
.alerta-fin { padding: 12px 14px; border-radius: 12px; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.alerta-fin.alerta-vermelho { background: #F4E6E6; color: #B45555; }
.alerta-fin.alerta-amarelo { background: #F4EEE1; color: #8F6A2C; }

/* ========== barras horizontais de categoria (despesas) ========== */
.cat-barra-linha { display: grid; grid-template-columns: 100px 1fr auto; align-items: center; gap: 10px; }
.cat-barra-nome { font-size: 12px; color: var(--texto-suave); }
.cat-barra-fundo { height: 10px; background: var(--nevoa); border-radius: 999px; overflow: hidden; }
.cat-barra-preenchida { height: 100%; background: var(--s-atrasado); border-radius: 999px; }
.cat-barra-valor { font-size: 12px; font-weight: 600; color: var(--grafite); white-space: nowrap; }
.grafico-rotulo { font-size: 11px; color: var(--texto-suave); margin-top: 6px; text-transform: capitalize; }

/* ========== Menu geral ========== */
.menu-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.menu-item {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--card); border: 1px solid var(--borda); border-radius: var(--raio);
  box-shadow: var(--sombra); padding: 18px; transition: transform .12s, box-shadow .12s;
}
.menu-item:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(17,17,17,.05), 0 10px 28px rgba(17,17,17,.08); }
.menu-ico { color: var(--grafite); }
.menu-ico .icone-svg { width: 26px; height: 26px; }
.menu-nome { font-size: 16px; font-weight: 600; color: var(--grafite); margin-top: 4px; }
.menu-desc { font-size: 12px; color: var(--texto-suave); }

@media (min-width: 720px) { .menu-grade { grid-template-columns: repeat(3, 1fr); } }

/* ========== Marketing ========== */
.mkt-pipe { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.mkt-col { flex: none; width: 210px; background: var(--nevoa); border-radius: 14px; padding: 10px; }
.mkt-col-tit { font-size: 12px; font-weight: 700; color: var(--taupe); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; display: flex; justify-content: space-between; }
.mkt-col-tit span { background: var(--card); border-radius: 999px; padding: 0 8px; color: var(--texto-suave); }
.mkt-vazio { text-align: center; color: var(--texto-fraco); margin: 8px 0; }

.mkt-card { padding: 12px; }
.mkt-card-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.mkt-tipo { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--texto-suave); background: var(--nevoa); border-radius: 6px; padding: 2px 8px; }
.mkt-legenda { font-size: 13px; color: var(--texto-suave); margin: 6px 0 0; white-space: pre-line; max-height: 88px; overflow: hidden; }
.mkt-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: center; }

.mkt-bib { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mkt-media { display: block; text-align: center; }
.mkt-media .sub { display: block; margin-top: 4px; }

/* ===== Grade do feed =====
   Limpa como o feed real do Instagram: só as imagens, gap mínimo, nada de
   tarja por cima. Data e status vivem no Cronograma logo abaixo — aqui o que
   importa é enxergar a composição visual do conjunto. */
.mkt-grade {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  margin-top: 12px; background: var(--card); padding: 2px; border-radius: 4px;
}
.mkt-grade-item {
  /* 4:5 (retrato) — é o formato que o Instagram usa hoje na grade do perfil,
     e o que mais ocupa tela no feed. Diagramar em 1:1 e postar em 4:5 daria
     uma composição diferente da que ela viu aqui. */
  position: relative; aspect-ratio: 4 / 5; overflow: hidden; cursor: pointer;
  background: var(--nevoa); border: 0; padding: 0;
}
.mkt-grade-item[data-mkt-arrastavel] { cursor: grab; }
.mkt-grade-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mkt-grade-vazio {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  padding: 8px; text-align: center; font-size: 11px; line-height: 1.25;
  color: var(--texto-suave); background: var(--nevoa);
}
/* Seleção e estados por dentro (outline), pra não empurrar o layout nem abrir
   fresta entre os quadrados. */
.mkt-grade-sel { outline: 3px solid var(--preto); outline-offset: -3px; }
.mkt-sem-arte { outline: 1px dashed var(--borda); outline-offset: -1px; }
.mkt-arrastando { opacity: .4; }
.mkt-alvo { outline: 3px solid var(--s-em_producao); outline-offset: -3px; }
.mkt-grade-multi { position: absolute; right: 5px; top: 3px; font-size: 13px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
/* Pilar da estratégia: um ponto discreto no canto, sem tapar a imagem. */
.mkt-grade-cat {
  position: absolute; left: 5px; bottom: 5px; width: 8px; height: 8px;
  border-radius: 999px; box-shadow: 0 0 0 1.5px rgba(255,255,255,.9);
}
.mkt-grade-reel { position: absolute; right: 5px; top: 3px; font-size: 12px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
/* Tarjas do que ainda não está pronto — discretas, mas impossíveis de ignorar
   quando se bate o olho na grade inteira procurando buracos. */
.mkt-tarja-rascunho, .mkt-tarja-produzir {
  position: absolute; right: 4px; bottom: 4px; font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; padding: 1px 5px; border-radius: 3px;
}
.mkt-tarja-rascunho { background: rgba(255,255,255,.92); color: var(--s-aguardando); }
.mkt-tarja-produzir { background: var(--s-aguardando); color: #fff; }

.mkt-checklist { display: flex; flex-direction: column; gap: 2px; }
/* Linha do cronograma com pendência de arte: barra lateral âmbar. */
.mkt-crono-pendente { border-left: 3px solid var(--s-aguardando); }

/* Quadrado livre — convida a preencher sem competir com as imagens. */
.mkt-grade-slot {
  display: flex; align-items: center; justify-content: center;
  background: var(--marfim); outline: 1px dashed var(--borda); outline-offset: -1px;
}
.mkt-grade-slot:hover { background: var(--nevoa); }
.mkt-slot-mais { font-size: 22px; font-weight: 300; color: var(--greige); line-height: 1; }

/* Modo reorganizar (toque): o quadrado escolhido fica óbvio, e o número
   mostra a posição atual pra não se perder no meio da troca. */
.mkt-troca-origem { outline: 3px solid var(--s-em_producao); outline-offset: -3px; }
.mkt-troca-origem::after {
  content: ""; position: absolute; inset: 0; background: rgba(44,110,203,.18);
}
.mkt-troca-num {
  position: absolute; left: 5px; top: 5px; min-width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px; background: rgba(255,255,255,.94); color: var(--preto);
  font-size: 11px; font-weight: 700; z-index: 2;
}

/* Carrossel de imagens do post selecionado / do story */
.mkt-carrossel { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.mkt-carrossel-item { position: relative; flex: none; width: 110px; }
.mkt-carrossel-item img { width: 110px; height: 110px; object-fit: cover; border-radius: 8px; display: block; }
.mkt-story-item img { height: 170px; } /* story é vertical */
.mkt-carrossel-item .item-x { position: absolute; right: 2px; top: 2px; background: rgba(255,255,255,.92); border-radius: 999px; }
.mkt-capa-tag {
  position: absolute; left: 4px; bottom: 4px; font-size: 10px; font-weight: 600;
  padding: 1px 6px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--preto);
}
.mkt-virar-capa { position: absolute; left: 2px; bottom: 2px; padding: 0 6px; }

/* ===== Cronograma de Posts (lista abaixo da grade) ===== */
.mkt-crono-linha { padding: 12px; }
.mkt-crono-sel { box-shadow: 0 0 0 2px var(--preto); }
.mkt-crono-topo { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.mkt-crono-pos {
  flex: none; width: 22px; height: 22px; border-radius: 999px; background: var(--nevoa);
  color: var(--texto-suave); font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.mkt-crono-mini { flex: none; width: 46px; height: 46px; border-radius: 8px; object-fit: cover; display: block; }
.mkt-crono-mini-vazia {
  display: flex; align-items: center; justify-content: center;
  background: var(--nevoa); border: 1px dashed var(--borda); color: var(--greige);
}
.mkt-crono-campos { margin-top: 10px; align-items: flex-end; }
.mkt-crono-legenda-ico { flex: none; font-size: 15px; opacity: .8; }
.mkt-crono-publicar { align-self: flex-end; margin-bottom: 2px; }
.mkt-contador-legenda { font-size: 11px; }
.mkt-ponto-cat { display: inline-block; width: 8px; height: 8px; border-radius: 999px; margin-right: 6px; vertical-align: middle; }
.mkt-freq { font-size: 12px; color: var(--texto-suave); display: flex; align-items: center; gap: 6px; }
.mkt-freq input { width: 52px; padding: 4px 6px; text-align: center; }

/* ========== Agenda: calendário do mês ========== */
.cal-grade { margin-bottom: 18px; }
.cal-cabecalho { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 6px; }
.cal-cabecalho span { text-align: center; font-size: 11px; font-weight: 700; color: var(--texto-fraco); text-transform: uppercase; }
.cal-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dia {
  aspect-ratio: 1; border: 1px solid transparent; border-radius: 10px; background: var(--card);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  cursor: pointer; font-family: inherit; padding: 2px;
}
.cal-dia:hover { border-color: var(--borda); }
.cal-num { font-size: 13px; color: var(--grafite); font-weight: 500; }
.cal-fora .cal-num { color: var(--texto-fraco); }
.cal-hoje { background: var(--nevoa); }
.cal-hoje .cal-num { font-weight: 700; }
.cal-sel { background: var(--preto); }
.cal-sel .cal-num { color: #fff; }
.cal-pontos { font-size: 8px; line-height: 1; color: var(--s-em_producao); letter-spacing: 1px; }
.cal-sel .cal-pontos { color: #fff; }

/* ========== Agenda ========== */
.ag-sync { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--nevoa); border: 1px solid var(--borda); border-radius: 12px; padding: 10px 14px; font-size: 12px; color: var(--texto-suave); }
.ag-sync .mini-btn { flex: none; }
.cal-embed-wrap { border: 1px solid var(--borda); border-radius: 12px; overflow: hidden; box-shadow: var(--sombra); }
.cal-embed-wrap iframe { display: block; width: 100%; }
.ag-resumo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ag-resumo > div { background: var(--card); border: 1px solid var(--borda); border-radius: 12px; box-shadow: var(--sombra); padding: 12px 8px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.ag-num { font-size: 20px; font-weight: 400; color: var(--grafite); }
.ag-resumo .sub { margin: 0; font-size: 11px; }
.ag-modos { justify-content: flex-start; }
.ag-nav { display: flex; align-items: center; gap: 10px; }
.ag-periodo { font-weight: 600; color: var(--grafite); flex: 1; }
.ag-grupo { margin-bottom: 6px; }
.ag-dia-tit { margin: 4px 0 8px; font-size: 13px; font-weight: 600; color: var(--taupe); }

.evento-card { display: flex; gap: 14px; }
.evento-hora { flex: none; width: 58px; text-align: center; display: flex; flex-direction: column; gap: 1px; }
.evento-hora strong { font-size: 15px; color: var(--grafite); }
.evento-hora .sub { margin: 0; font-size: 11px; }
.evento-dur { font-size: 10px; background: var(--nevoa); border-radius: 6px; padding: 1px 5px; margin-top: 3px; color: var(--texto-suave); }
.evento-corpo { flex: 1; border-left: 2px solid var(--borda); padding-left: 14px; }
.evento-corpo .sub { margin: 3px 0 0; }
.evento-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.evento-acoes .mini-btn { text-decoration: none; }

.obs-form { display: flex; gap: 8px; margin-bottom: 10px; }
.obs-form input { flex: 1; padding: 11px 14px; font-family: inherit; font-size: 15px; border: 1px solid var(--borda); border-radius: 12px; background: var(--card); color: var(--texto); }
.obs-form input:focus { outline: none; border-color: var(--grafite); }
.obs-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.obs-texto { flex: 1; margin: 0; color: var(--grafite); }
.obs-feita .obs-texto { text-decoration: line-through; color: var(--texto-fraco); }

/* ========== Puzzle IA — assistente de voz ========== */

.voz-fab {
  position: fixed; right: 16px; bottom: 84px; z-index: 45;
  width: 58px; height: 58px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--preto); color: #fff; display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(17,17,17,.35); transition: transform .12s;
}
.voz-fab .icone-svg { width: 24px; height: 24px; }
.voz-fab:hover { transform: scale(1.05); }
.voz-fab:active { transform: scale(.96); }

.voz-painel { position: fixed; inset: 0; z-index: 70; display: none; }
.voz-painel.aberto { display: block; }
.voz-fundo { position: absolute; inset: 0; background: rgba(17,17,17,.45); }
.voz-caixa {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--card); border-radius: 22px 22px 0 0;
  padding: 18px 20px calc(20px + env(safe-area-inset-bottom));
  max-width: 500px; margin-inline: auto; max-height: 82vh; overflow-y: auto;
  box-shadow: 0 -10px 40px rgba(17,17,17,.25); animation: sobe .2s ease;
}
.voz-topo { display: flex; align-items: center; justify-content: space-between; }
.voz-titulo { font-weight: 600; font-size: 16px; color: var(--grafite); display: inline-flex; align-items: center; gap: 6px; }
.voz-chip .icone-svg, .voz-item .icone-svg, .voz-desfazer .icone-svg { vertical-align: -3px; margin-right: 3px; }
.voz-x { border: none; background: none; font-size: 24px; color: var(--texto-fraco); cursor: pointer; }

.voz-ctx { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.voz-chip { background: var(--nevoa); border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 600; color: var(--grafite); }

.voz-transcricao { min-height: 40px; font-size: 16px; color: var(--grafite); margin: 6px 0 4px; line-height: 1.4; }
.voz-transcricao.parcial { color: var(--texto-suave); font-style: italic; }
.voz-resposta { background: var(--nevoa); border-radius: 12px; padding: 12px 14px; font-size: 14px; color: var(--grafite); margin: 8px 0; }

.voz-plano-tit { margin: 10px 0 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--taupe); }
.voz-item { background: #E8EFEA; color: #3F6350; border-radius: 10px; padding: 8px 12px; font-size: 14px; font-weight: 500; margin-bottom: 6px; }

.voz-microzona { display: flex; justify-content: center; margin: 16px 0; }
.voz-mic {
  position: relative; width: 72px; height: 72px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--preto); color: #fff; font-size: 28px;
}
.voz-mic.gravando { background: var(--s-atrasado); }
.voz-mic.gravando .voz-onda {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 3px solid var(--s-atrasado); animation: pulso 1.2s infinite;
}
@keyframes pulso { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.5); opacity: 0; } }

.voz-digitar { display: flex; gap: 8px; margin: 10px 0 4px; }
.voz-digitar input {
  flex: 1; padding: 12px 14px; font-family: inherit; font-size: 16px;
  border: 1px solid var(--borda); border-radius: 12px; background: var(--card); color: var(--texto);
}
.voz-digitar input:focus { outline: none; border-color: var(--grafite); }
.voz-enviar {
  width: 46px; border: none; border-radius: 12px; background: var(--preto); color: #fff;
  font-size: 16px; cursor: pointer; flex: none;
}

.voz-acoes { display: flex; gap: 10px; }
.voz-acoes .botao-principal, .voz-acoes .botao-secundario { flex: 1; }

.voz-desfazer {
  position: fixed; left: 50%; bottom: 90px; transform: translate(-50%, 20px);
  background: var(--grafite); color: #fff; padding: 12px 18px; border-radius: 12px;
  font-size: 14px; z-index: 75; display: flex; align-items: center; gap: 12px;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  box-shadow: 0 8px 30px rgba(17,17,17,.3);
}
.voz-desfazer.mostra { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.voz-desfazer button { background: transparent; border: 1px solid rgba(255,255,255,.5); color: #fff; border-radius: 8px; padding: 6px 12px; font-weight: 600; cursor: pointer; }

.modo-cliente .voz-fab { display: none; }

/* ---------- Área do Cliente — painel inteligente ---------- */
.cliente-cabecalho {
  margin: -20px -20px 24px;
  background: var(--card); border-bottom: 1px solid var(--borda);
  overflow: hidden;
}
.cliente-capa {
  width: 100%; height: 240px; overflow: hidden; background: var(--nevoa);
}
.cliente-capa img {
  width: 100%; height: 100%; object-fit: cover;
}
.cliente-info {
  padding: 24px 20px; background: linear-gradient(135deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,.9) 100%);
}
.cliente-tipo {
  display: inline-block; background: var(--grafite); color: #fff;
  padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 700;
  letter-spacing: .08em; margin: 0 0 8px;
}
.cliente-info h1 {
  margin: 0 0 4px; font-size: 28px; color: var(--preto); font-weight: 700;
}
.cliente-subtitulo {
  margin: 0 0 12px; font-size: 13px; color: var(--texto-suave); font-weight: 500;
}
.cliente-mensagem {
  margin: 0; font-size: 14px; color: var(--grafite); line-height: 1.5;
}
.atalho-arquivos {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  font-size: 13px; font-weight: 600; color: var(--preto); text-decoration: none;
  border: 1px solid var(--borda); border-radius: 8px; padding: 6px 12px;
}
.atalho-arquivos:hover { background: var(--nevoa); }

/* ---------- telas maiores ---------- */

@media (min-width: 720px) {
  .voz-fab { right: calc(50% - 250px + 16px); }
  .ola { font-size: 32px; }
  .modal { align-items: center; }
  .modal-caixa { border-radius: 20px; }
  .tiles { grid-template-columns: repeat(4, 1fr); }
  .fin-grade { grid-template-columns: repeat(4, 1fr); }
  .nav-inferior { max-width: 500px; margin-inline: auto; border-radius: 16px 16px 0 0; border: 1px solid var(--borda); border-bottom: none; }
  .fotos-grade { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Tela "Hoje" (v179) ---- */
.atalhos-hoje { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 4px 0 16px; }
.atalhos-hoje a {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 4px;
  min-height: 56px; justify-content: center; text-decoration: none; color: var(--texto);
  background: var(--card); border: 1px solid var(--borda); border-radius: var(--raio); font-size: 12px; font-weight: 500;
}
.atalhos-hoje a:active { background: var(--greige-claro, #EDEFF1); }
.atalhos-hoje .icone-svg { width: 22px; height: 22px; }
.passos-barra { height: 6px; border-radius: 3px; background: var(--borda); margin: 0 0 10px; overflow: hidden; }
.passos-barra span { display: block; height: 100%; background: var(--grafite, #111); border-radius: 3px; }
.passo-feito { opacity: .55; }
.ver-todos { display: block; text-align: right; font-size: 13px; padding: 8px 4px 0; color: var(--texto-suave); text-decoration: none; }
.rodape-sync { text-align: center; font-size: 12px; color: var(--texto-suave); margin: 24px 0 8px; }
.rodape-sync a { color: inherit; }
.agenda-card .mini-btn { flex: none; min-height: 40px; padding: 0 12px; white-space: nowrap; }
.agenda-card > a.atencao-corpo { flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.menu-grupo { margin: 20px 0 10px; }
.menu-grupo:first-of-type { margin-top: 4px; }

/* ---- Conferência de qualidade (v180) ---- */
.qual-botoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.qual-btn {
  min-height: 44px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--card);
  color: var(--texto); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
}
.qual-btn[disabled] { cursor: default; opacity: .55; }
.qual-btn.ativo.qual-ok { background: #E7F3EC; border-color: #507B64; color: #1F5C38; font-weight: 600; opacity: 1; }
.qual-btn.ativo.qual-corrigir { background: #F4E6E6; border-color: #B45555; color: #B45555; font-weight: 600; opacity: 1; }
.qual-btn.ativo.qual-na { background: #F1EFEC; border-color: var(--greige, #b8b0a6); font-weight: 600; opacity: 1; }
.qual-obs { width: 100%; margin-top: 8px; font: inherit; font-size: 14px; padding: 8px; border: 1px solid var(--borda); border-radius: var(--raio); box-sizing: border-box; }
.qual-obs[hidden] { display: none; }
.resp-botoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.resp-botoes .mini-btn { min-height: 40px; padding: 0 14px; }

/* ---- Funil de clientes (v182) ---- */
.lead-botoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.lead-botoes .mini-btn { min-height: 40px; padding: 0 14px; }

/* ---- Editar modelos e piloto (v183) ---- */
.qm-item { display: flex; align-items: center; gap: 8px; }
.qm-acoes { display: flex; gap: 6px; flex: none; align-items: center; }
.qm-acoes .mini-btn { min-width: 40px; min-height: 40px; padding: 0 8px; }
.qm-acoes .mini-btn[disabled] { opacity: .3; }
.qual-gerenciar { display: flex; flex-direction: column; gap: 8px; }
.qual-gerenciar .botao-secundario { text-align: center; text-decoration: none; }
.qual-remover { display: block; margin-top: 8px; background: none; border: none; color: var(--texto-suave); font-size: 12px; text-decoration: underline; cursor: pointer; padding: 4px 0; }

/* ---------- quadro de números (tela de propostas) ---------- */
.quadro { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.quadro-cel {
  display: flex; flex-direction: column; gap: 2px; min-width: 120px; flex: 1 1 130px; max-width: 230px;
  background: var(--card); border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 14px;
  color: inherit; text-decoration: none;
}
.quadro-cel strong { font-size: 22px; font-weight: 400; color: var(--grafite); font-variant-numeric: tabular-nums; }
.quadro-cel span { font-size: 12px; color: var(--texto-suave); }
.quadro-cel .verde { color: var(--s-aprovado); }
.quadro-cel .vermelho { color: var(--s-atrasado); }
a.quadro-cel:hover { background: var(--nevoa); }
.quadro-menor .quadro-cel strong { font-size: 17px; }

.lista-periodo { margin-top: 14px; }
.lista-periodo > summary { cursor: pointer; margin-bottom: 8px; }
.lista-periodo .pilha { margin-top: 8px; }

/* ---------- faixa de projeção no cabeçalho ---------- */
.topo-projecao {
  display: block; padding: 6px 16px; font-size: 12px; line-height: 1.35; text-align: center;
  color: var(--texto-suave); background: var(--nevoa); border-top: 1px solid var(--borda); text-decoration: none;
}
.topo-projecao b { color: var(--grafite); font-weight: 600; }
.topo-projecao-ok b { color: var(--s-aprovado); }

/* ---------- botões clicáveis do quadro de propostas ---------- */
.quadro-cel-botao { font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.quadro-cel-botao:hover { background: var(--nevoa); }
.quadro-cel-botao:focus-visible { outline: 2px solid var(--grafite); outline-offset: 2px; }
.quadro-cel-botao.ativo { border-color: var(--grafite); box-shadow: 0 0 0 1px var(--grafite) inset; background: var(--nevoa); }
.lista-periodo-sel { margin: 4px 0 12px; }

/* ========== estímulos, missões e cores por tipo de tarefa ========== */
:root { --cor-urg: #B45555; --cor-din: #507B64; --cor-info: #456B82; --cor-ate: #A77D37; --cor-pes: #344E5C; }
.toast-festa { background: linear-gradient(135deg, #1F2428, #507B64); font-weight: 600; font-size: 15px; padding: 14px 20px; box-shadow: 0 10px 34px rgba(63,143,91,.35); }
.toast.mostra.toast-festa { animation: pulo-festa .5s ease; }
@keyframes pulo-festa { 0% { transform: translate(-50%, 20px) scale(.9); } 60% { transform: translate(-50%, -4px) scale(1.04); } 100% { transform: translate(-50%, 0) scale(1); } }

.confete { position: fixed; inset: 0; pointer-events: none; z-index: 70; overflow: hidden; }
.confete span { position: absolute; top: -12px; left: var(--x); width: 8px; height: 12px; border-radius: 2px; opacity: 0;
  animation: cai var(--d) var(--a) ease-in forwards; }
@keyframes cai { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--dx), 100vh) rotate(540deg); } }

.alertas-dia { display: grid; gap: 8px; margin-bottom: 12px; }
.alerta-dia { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid; }
.alerta-dia-amarelo { background: #F4EEE1; border-color: var(--cor-ate); color: #6E5224; }
.alerta-dia-vermelho { background: #F4E6E6; border-color: var(--cor-urg); color: #7A3535; }
.alerta-dia-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: inherit; text-decoration: none; font-size: 14px; }
.alerta-dia-corpo span { font-size: 12px; opacity: .85; }
.alerta-dia-botoes { display: flex; flex-direction: column; gap: 6px; flex: none; }
.alerta-dia-botoes .mini-btn { min-height: 36px; white-space: nowrap; }

.estimulo { margin-bottom: 14px; border-left: 4px solid var(--cor-info); }
.estimulo-ok { border-left-color: var(--cor-din); background: #F1F8F3; }
.chip-seq { font-size: 12px; font-weight: 700; background: #F4EEE1; color: #6E5224; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.barra-estimulo { height: 10px; border-radius: 999px; background: var(--nevoa); overflow: hidden; }
.barra-estimulo i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--cor-info), var(--cor-din)); transition: width .5s ease; }
.missoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.missao { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; font-size: 13px; font-weight: 600; text-decoration: none; border: 1.5px solid; transition: transform .12s; }
.missao:active { transform: scale(.96); }
.missao-marca { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; border-radius: 999px; font-size: 12px; font-weight: 800; color: #fff; }
.missao.pendente { background: #F4EEE1; border-color: var(--cor-ate); color: #6E5224; }
.missao.pendente .missao-marca { background: var(--cor-ate); }
.missao.feita { background: #E8EFEA; border-color: var(--cor-din); color: #3F6350; }
.missao.feita .missao-marca { background: var(--cor-din); }
.mensagem-meta { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--nevoa); font-size: 14px; font-weight: 600; color: var(--grafite); }

.sec .titulo-secao::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 999px; margin-right: 8px; background: var(--cor-sec, var(--greige)); vertical-align: 1px; }
.sec .agenda-card { border-left: 4px solid var(--cor-sec, var(--borda)); }
.sec .agenda-card .mini-btn { background: var(--cor-sec, var(--grafite)); border-color: var(--cor-sec, var(--grafite)); color: #fff; font-weight: 700; }
.sec .contador-secao { background: var(--cor-sec, var(--nevoa)); color: #fff; }
.sec-vermelho { --cor-sec: var(--cor-urg); } .sec-verde { --cor-sec: var(--cor-din); } .sec-azul { --cor-sec: var(--cor-info); }
.sec-ambar { --cor-sec: var(--cor-ate); } .sec-roxo { --cor-sec: var(--cor-pes); } .sec-neutro { --cor-sec: var(--greige); }
.sec-neutro .agenda-card .mini-btn { color: #fff; }
.sec .item-check, .sec .marca-check { width: 26px; height: 26px; }
.sec .marca-check { border-color: var(--cor-sec); border-width: 2.5px; }
.sec .item-check:hover .marca-check { background: color-mix(in srgb, var(--cor-sec) 15%, #fff); }
.sec .item-check input:checked + .marca-check { animation: pop .3s ease; }
.sec .item-check input:checked + .marca-check::after { left: 8px; top: 3px; }
@keyframes pop { 50% { transform: scale(1.3); } }
@media (prefers-reduced-motion: reduce) { .toast.mostra.toast-festa, .sec .item-check input:checked + .marca-check { animation: none; } }

/* ---------- preferências de notificação ---------- */
.pref-notif { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--nevoa); cursor: pointer; position: relative; }
.pref-notif-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.pref-notif-texto span { font-size: 12px; color: var(--texto-suave); }
.pref-notif-chave { position: absolute; right: 0; width: 46px; height: 26px; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.pref-notif-trilho { flex: none; width: 46px; height: 26px; border-radius: 999px; background: var(--borda); position: relative; transition: background .15s; }
.pref-notif-trilho::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s; }
.pref-notif-chave:checked ~ .pref-notif-trilho { background: var(--s-aprovado); }
.pref-notif-chave:checked ~ .pref-notif-trilho::after { transform: translateX(20px); }
.pref-notif-chave:focus-visible ~ .pref-notif-trilho { outline: 2px solid var(--grafite); outline-offset: 2px; }

/* ---------- Agenda (versão de teste) ---------- */
.agt-selo { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: #F4EEE1; color: #6E5224; padding: 3px 8px; border-radius: 999px; vertical-align: middle; margin-left: 6px; }
.agt-semana-topo { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; }
.agt-semana-topo strong { flex: 1; text-align: center; font-size: 14px; }
.agt-faixa { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 16px; }
.agt-dia { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 6px; border-radius: 14px; border: 1.5px solid var(--borda); background: var(--card); font: inherit; cursor: pointer; color: var(--grafite); }
.agt-dia span { font-size: 11px; text-transform: uppercase; color: var(--texto-suave); }
.agt-dia b { font-size: 18px; }
.agt-dia.hoje { border-color: var(--cor-info); }
.agt-dia.ativo { background: var(--grafite); border-color: var(--grafite); color: #fff; }
.agt-dia.ativo span { color: #ddd; }
.agt-pontos { display: flex; gap: 3px; height: 6px; margin-top: 2px; }
.agt-pontos u { display: block; width: 6px; height: 6px; border-radius: 999px; }
.agt-p-azul { background: var(--cor-info); } .agt-p-verde { background: var(--cor-din); } .agt-p-vermelho { background: var(--cor-urg); }
.agt-p-ambar { background: var(--cor-ate); } .agt-p-roxo { background: var(--cor-pes); }
.agt-atrasados { margin-bottom: 14px; }
.agt-atrasado { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; margin-top: 6px; border-radius: 12px; background: #F4E6E6; border-left: 4px solid var(--cor-urg); color: #7A3535; text-decoration: none; font-size: 14px; }
.agt-atrasado span { font-size: 12px; opacity: .85; }
.agt-card { display: flex; gap: 12px; padding: 12px; border-radius: 16px; background: var(--card); border: 1px solid var(--borda); border-left: 5px solid var(--greige); }
.agt-azul { border-left-color: var(--cor-info); } .agt-verde { border-left-color: var(--cor-din); } .agt-vermelho { border-left-color: var(--cor-urg); }
.agt-ambar { border-left-color: var(--cor-ate); } .agt-roxo { border-left-color: var(--cor-pes); }
.agt-cancelado { opacity: .55; } .agt-cancelado .agt-titulo { text-decoration: line-through; }
.agt-hora { flex: none; width: 48px; text-align: center; font-size: 15px; padding-top: 2px; }
.agt-diatodo { font-size: 11px; color: var(--texto-suave); line-height: 1.2; display: block; }
.agt-corpo { flex: 1; min-width: 0; }
.agt-tipo { margin: 0 0 2px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); }
.agt-titulo { display: block; font-size: 15px; font-weight: 600; color: var(--grafite); text-decoration: none; }
.agt-choque { color: var(--cor-urg); text-transform: none; letter-spacing: 0; }
.agt-acoes { margin-top: 8px; display: flex; gap: 6px; }
.agt-ata { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding: 8px 10px; border-radius: 10px; font-size: 13px; font-weight: 600; text-decoration: none; }
.agt-ata-ok { background: #E8EFEA; color: #3F6350; }
.agt-ata-falta { background: #F4EEE1; color: #6E5224; }
.agt-vazio { text-align: center; padding: 22px 12px; border: 1.5px dashed var(--borda); border-radius: 16px; color: var(--texto-suave); }
.agt-erro { color: #7A3535; }

/* ---------- Agenda de teste 2 (semana / mês / orientações) ---------- */
.agt-resumo { margin: 4px 0 12px; padding: 12px 14px; border-radius: 14px; background: var(--nevoa); }
.agt-resumo p { margin: 0; font-size: 15px; font-weight: 600; color: var(--grafite); }
.agt-orient { margin-bottom: 14px; }
.agt-orient-item { display: flex; align-items: center; gap: 10px; padding: 11px 12px; margin-top: 8px; border-radius: 12px; border-left: 5px solid var(--greige); background: var(--card); border-top: 1px solid var(--borda); border-right: 1px solid var(--borda); border-bottom: 1px solid var(--borda); }
.agt-orient-item > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.agt-orient-item span { font-size: 12px; color: var(--texto-suave); }
.agt-orient-item .mini-btn { flex: none; white-space: nowrap; }
.agt-o-azul { border-left-color: var(--cor-info); } .agt-o-ambar { border-left-color: var(--cor-ate); background: #FFFBF2; }
.agt-o-vermelho { border-left-color: var(--cor-urg); background: #FFF6F6; } .agt-o-verde { border-left-color: var(--cor-din); background: #F3FAF5; }
.agt-troca { margin: 4px 0 10px; }
.agt-dia-titulo { margin: 16px 0 6px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-suave); }
.agt-dia-titulo.hoje { color: var(--cor-info); }
.agt-hoje { background: var(--cor-info); color: #fff; padding: 2px 8px; border-radius: 999px; font-size: 10px; letter-spacing: .04em; margin-left: 4px; }
.agt-dia-bloco { display: grid; gap: 6px; }
.agt-livre { margin: 0; padding: 4px 2px; font-size: 13px; color: var(--greige); }
.agt-linha { display: flex; gap: 12px; padding: 11px 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--borda); }
.agt-linha.agt-passou { background: var(--nevoa); }
.agt-nota { display: inline-block; font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 10px; text-decoration: none; }
.agt-nota-ok { background: #E8EFEA; color: #3F6350; }
.agt-mes-cab, .agt-mes { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.agt-mes-cab span { text-align: center; font-size: 11px; text-transform: uppercase; color: var(--texto-suave); padding: 4px 0; }
.agt-mc { position: relative; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 12px; border: 1.5px solid var(--borda); background: var(--card); font: inherit; color: var(--grafite); cursor: pointer; padding: 0; }
.agt-mc.vazio { border: 0; background: transparent; cursor: default; }
.agt-mc b { font-size: 15px; }
.agt-mc i { position: absolute; bottom: 3px; min-width: 16px; height: 16px; border-radius: 999px; background: var(--cor-info); color: #fff; font-size: 10px; font-style: normal; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.agt-mc.hoje { border-color: var(--cor-info); }
.agt-mc.ativo { background: var(--grafite); border-color: var(--grafite); color: #fff; }

.agt-aviso-google { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; padding: 12px 14px; border-radius: 14px; background: #F4EEE1; border: 1px solid var(--cor-ate); color: #6E5224; }
.agt-aviso-google > div { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.agt-aviso-google span { font-size: 12px; }
.agt-aviso-google .mini-btn { flex: none; background: var(--cor-ate); border-color: var(--cor-ate); color: #fff; font-weight: 700; }


/* =====================================================================
   Aparência — paleta Puzzle Flow (referência 05/11/2026)
   ===================================================================== */
body {
  background: var(--marfim) linear-gradient(165deg, #E7E8E7 0%, #F0F1F2 32%, #F5F6F6 62%) fixed;
  color: var(--texto);
}
body::before { /* faixa clara em diagonal no canto, como no concreto da referência */
  content: ""; position: fixed; inset: 0 0 auto auto; width: 62vw; height: 38vh; z-index: -1; pointer-events: none;
  background: linear-gradient(200deg, rgba(255,255,255,.55), rgba(255,255,255,0) 70%);
  clip-path: polygon(30% 0, 100% 0, 100% 100%);
}
.topo { background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom-color: var(--cinza-frio); }
.topo-projecao { background: var(--nevoa); border-top-color: var(--cinza-frio); }
.card, .menu-item { border-color: var(--cinza-frio); box-shadow: 0 1px 2px rgba(23,25,27,.04), 0 8px 22px rgba(52,78,92,.08); }

/* ações = azul-petróleo */
.botao-principal { background: var(--petroleo); }
.botao-principal:hover { background: var(--petroleo-escuro); }
.botao-secundario { color: var(--petroleo); border-color: var(--cinza-frio); }
.botao-secundario:hover { color: var(--petroleo-escuro); border-color: var(--petroleo); }
.botao-add { color: var(--petroleo); border-color: var(--petroleo); }
.mini-btn { border-color: var(--cinza-frio); color: var(--petroleo); }
.mini-btn:hover { border-color: var(--petroleo); color: var(--petroleo-escuro); }
.chip-filtro.ativo { background: var(--petroleo); border-color: var(--petroleo); color: #fff; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--petroleo); outline-offset: 2px; }
input:focus, select:focus, textarea:focus { border-color: var(--petroleo); }

/* menu inferior: aba ativa em pílula petróleo */
.nav-inferior { background: rgba(255,255,255,.96); border-top-color: var(--cinza-frio); }
.nav-inferior a { border-radius: 14px; margin: 0 3px; transition: background .15s, color .15s; }
.nav-inferior a.ativo { background: var(--petroleo); color: #fff; font-weight: 600; }
.nav-inferior a.ativo .nav-ico { opacity: 1; color: #fff; }

/* toast */
.toast { background: var(--preto); }
.toast-festa { background: linear-gradient(135deg, #344E5C, #507B64); box-shadow: 0 10px 34px rgba(52,78,92,.35); }

/* Menu geral: peças compactas, grupo de abertura em destaque */
.menu-grupo { display: flex; align-items: center; gap: 12px; color: var(--grafite); }
.menu-grupo::after { content: ""; flex: 1; height: 1px; background: var(--cinza-frio); }
.menu-grade { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.menu-item { padding: 14px 12px; border-radius: 18px; gap: 6px; min-height: 92px; justify-content: space-between; background: rgba(255,255,255,.92); }
.menu-ico { color: var(--petroleo); }
.menu-ico .icone-svg { width: 24px; height: 24px; }
.menu-nome { font-size: 13px; font-weight: 600; margin-top: 2px; line-height: 1.25; color: var(--preto); }
.menu-desc { display: none; }
.menu-grade-destaque .menu-item { min-height: 128px; padding: 16px 14px; }
.menu-grade-destaque .menu-desc { display: block; font-size: 11.5px; line-height: 1.3; color: var(--texto-suave); }
.menu-grade-destaque .menu-nome { font-size: 15px; }
.menu-item-destaque { background: var(--petroleo); border-color: var(--petroleo); }
.menu-item-destaque .menu-ico, .menu-item-destaque .menu-nome { color: #fff; }
.menu-item-destaque .menu-desc { color: rgba(255,255,255,.82); }
@media (min-width: 560px) { .menu-grade { grid-template-columns: repeat(4, 1fr); } .menu-grade-destaque { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 720px) { .menu-grade { grid-template-columns: repeat(4, 1fr); } }

/* Hoje: missões em lista, com marcador redondo (referência) */
.estimulo { border-left: 4px solid var(--petroleo); }
.estimulo-ok { border-left-color: var(--s-aprovado); background: var(--f-sucesso-fundo); }
.barra-estimulo { height: 8px; background: var(--apoio-3); }
.barra-estimulo i { background: linear-gradient(90deg, var(--petroleo), var(--s-aprovado)); }
.missoes { flex-direction: column; gap: 6px; }
.missao { width: 100%; border: 0; border-radius: 12px; padding: 9px 12px 9px 9px; font-weight: 600; font-size: 14px; }
.missao.pendente { background: var(--f-atencao-fundo); color: #6E5224; }
.missao.feita { background: var(--f-sucesso-fundo); color: #3F6350; }
.missao-marca { min-width: 26px; height: 26px; font-size: 12px; box-sizing: border-box; }
.missao.pendente .missao-marca { background: transparent; color: var(--s-aguardando); border: 2px solid var(--s-aguardando); }
.missao.feita .missao-marca { background: var(--s-aprovado); color: #fff; }
.mensagem-meta { background: var(--f-info-fundo); color: var(--petroleo); }
.chip-seq { background: var(--f-atencao-fundo); color: #6E5224; }

/* alertas e avisos: fundos suaves por estado */
.alerta-dia-amarelo, .agt-aviso-google { background: var(--f-atencao-fundo); border-color: #DCC9A0; color: #6E5224; }
.alerta-dia-vermelho { background: var(--f-alerta-fundo); border-color: #DDB9B9; color: #7A3535; }
.agt-aviso-google .mini-btn { background: var(--s-aguardando); border-color: var(--s-aguardando); color: #fff; }

/* agenda: seleção em petróleo */
.agt-dia.ativo, .agt-mc.ativo { background: var(--petroleo); border-color: var(--petroleo); color: #fff; }
.agt-dia.hoje, .agt-mc.hoje { border-color: var(--petroleo); }
.agt-dia-titulo.hoje { color: var(--petroleo); }
.agt-hoje, .agt-mc i { background: var(--petroleo); }
.agt-orient-item { border-radius: 14px; }
.agt-o-verde { background: var(--f-sucesso-fundo); } .agt-o-ambar { background: var(--f-atencao-fundo); }
.agt-o-vermelho { background: var(--f-alerta-fundo); } .agt-o-azul { background: var(--f-info-fundo); }
.agt-resumo { background: var(--f-info-fundo); }
.agt-resumo p { color: var(--petroleo); }

/* seções coloridas da tela Hoje seguem os estados da paleta */
.sec .agenda-card .mini-btn { color: #fff; }

.sec-neutro { --cor-sec: #66737B; }

/* ---------- Finanças: análise humanizada ---------- */
.fin-analise { margin: 4px 0 16px; }
.fin-recado { display: flex; gap: 10px; padding: 12px 14px; margin-top: 8px; border-radius: 16px; border: 1px solid var(--cinza-frio); border-left-width: 5px; background: var(--card); }
.fin-recado-ico { flex: none; font-size: 18px; line-height: 1.3; }
.fin-recado-corpo { flex: 1; min-width: 0; }
.fin-recado-titulo { margin: 0; font-size: 15px; font-weight: 700; color: var(--preto); }
.fin-recado-texto { margin: 4px 0 0; font-size: 13.5px; color: var(--texto); }
.fin-recado-atitude { margin: 6px 0 0; font-size: 13px; color: var(--petroleo); }
.fin-recado .mini-btn { margin-top: 10px; }
.fin-recado-alerta { border-left-color: var(--s-atrasado); background: var(--f-alerta-fundo); }
.fin-recado-atencao { border-left-color: var(--s-aguardando); background: var(--f-atencao-fundo); }
.fin-recado-info { border-left-color: var(--s-em_producao); background: var(--f-info-fundo); }
.fin-recado-sucesso { border-left-color: var(--s-aprovado); background: var(--f-sucesso-fundo); }
.fin-analise-mais summary { margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--petroleo); cursor: pointer; }

/* ---------- Nota do mês ---------- */
.fin-nota { margin: 4px 0 16px; }
.fin-nota-card { border-left: 5px solid var(--s-em_producao); }
.fin-nota-sucesso { border-left-color: var(--s-aprovado); } .fin-nota-info { border-left-color: var(--s-em_producao); }
.fin-nota-atencao { border-left-color: var(--s-aguardando); } .fin-nota-alerta { border-left-color: var(--s-atrasado); }
.fin-nota-topo { display: flex; align-items: center; gap: 14px; }
.fin-nota-valor { font-size: 40px; font-weight: 700; line-height: 1; color: var(--petroleo); }
.fin-nota-valor small { font-size: 16px; font-weight: 600; color: var(--texto-suave); margin-left: 2px; }
.fin-nota-partes { margin-top: 12px; display: grid; gap: 8px; }
.fin-nota-parte { display: grid; grid-template-columns: 92px 1fr; gap: 4px 10px; align-items: center; font-size: 13px; }
.fin-nota-parte i { height: 8px; border-radius: 999px; background: var(--apoio-3); overflow: hidden; display: block; }
.fin-nota-parte u { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--petroleo), var(--s-aprovado)); }
.fin-nota-parte small { grid-column: 2; color: var(--texto-suave); font-size: 12px; }
.fin-nota-lista { margin: 14px 0 6px; padding-left: 18px; font-size: 13.5px; }
.fin-nota-lista li { margin: 4px 0; }

/* ---------- Saúde da empresa ---------- */
.saude { margin: 0 0 16px; padding: 16px; border-radius: 20px; background: var(--card); border: 1px solid var(--cinza-frio); border-left: 5px solid var(--petroleo); box-shadow: 0 1px 2px rgba(23,25,27,.04), 0 8px 22px rgba(52,78,92,.08); }
.saude-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.saude-chip { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.saude-sucesso { background: var(--f-sucesso-fundo); color: #3F6350; } .saude-atencao { background: var(--f-atencao-fundo); color: #6E5224; } .saude-alerta { background: var(--f-alerta-fundo); color: #7A3535; }
.saude-troca { margin: 0 0 6px; align-items: center; }
.saude-visao { margin: 0 0 6px; font-size: 15px; line-height: 1.5; color: var(--preto); }
.saude-h { margin: 14px 0 4px; font-size: 13px; font-weight: 700; color: var(--petroleo); }
.saude-lista { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.5; }
.saude-lista li { margin: 5px 0; }
.saude-mais summary { margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--petroleo); cursor: pointer; }
.saude-conselho, .saude-pergunta { margin: 0; padding: 10px 12px; border-radius: 12px; font-size: 14px; line-height: 1.5; }
.saude-conselho { background: var(--f-info-fundo); color: var(--preto); }
.saude-pergunta { background: var(--nevoa); font-style: italic; color: var(--texto); }
.saude-comp { margin-top: 14px; padding: 12px; border-radius: 14px; background: var(--f-sucesso-fundo); }
.saude-comp-t { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: #3F6350; }
.saude-comp-txt { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.saude-comp-txt.feito { text-decoration: line-through; color: var(--texto-suave); }

/* ---------- Card de projeto (lista): barra por etapa contratada ---------- */
.projeto-card2 { padding: 16px; background: var(--card) !important; border-left: 4px solid var(--cinza-frio); }
.projeto-card2.farol-vermelho { border-left-color: var(--s-atrasado); }
.projeto-card2.farol-amarelo { border-left-color: var(--s-aguardando); }
.projeto-card2.farol-verde { border-left-color: var(--s-aprovado); }
.proj-linha1 { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.proj-linha1 h3 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 17px; }
.proj-linha1 .projeto-codigo { font-size: 12px; font-weight: 500; color: var(--texto-suave); }
.proj-nome { font-weight: 600; color: var(--preto); }
.proj-chip { flex: none; font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.proj-chip-sucesso { background: var(--f-sucesso-fundo); color: #3F6350; } .proj-chip-atencao { background: var(--f-atencao-fundo); color: #6E5224; }
.proj-chip-alerta { background: var(--f-alerta-fundo); color: #7A3535; } .proj-chip-info { background: var(--f-info-fundo); color: #345A70; }
.proj-chip-neutro { background: var(--nevoa); color: var(--texto-suave); }
.proj-sub { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 6px; font-size: 14px; color: var(--texto-suave); }
.proj-sub b { font-size: 15px; color: var(--preto); }
.proj-barra { display: flex; gap: 4px; margin-top: 8px; }
.proj-seg { flex: 1; height: 7px; border-radius: 999px; background: var(--apoio-3); }
.proj-seg-feita { background: var(--s-aprovado); } .proj-seg-andamento { background: var(--s-em_producao); } .proj-seg-espera { background: var(--s-aguardando); }
.proj-rodape { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--nevoa); font-size: 13px; color: var(--texto-suave); }
.proj-com { display: inline-flex; align-items: center; gap: 8px; }
.proj-av { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px; background: var(--f-info-fundo); color: var(--petroleo); font-style: normal; font-size: 12px; font-weight: 700; }
.proj-ult { display: inline-flex; align-items: center; gap: 6px; }
.proj-ult .icone-svg { width: 15px; height: 15px; }
.proj-aviso { margin: 8px 0 0; font-size: 12px; font-weight: 600; color: var(--s-aguardando); display: flex; align-items: center; gap: 6px; }
.proj-aviso .icone-svg { width: 14px; height: 14px; }

/* ---------- Recados nas telas + acabamento do card de projeto ---------- */
.tela-recados { margin: 4px 0 14px; }
.tela-recados .fin-recado { padding: 10px 12px; margin-top: 6px; }
.tela-recados .fin-recado-titulo { font-size: 14px; }
.tela-recados .fin-recado-texto { font-size: 13px; }
.projeto-card2 { border-left: 1px solid var(--cinza-frio); border-radius: 16px; padding: 16px 16px 14px; }
.proj-barra { gap: 4px; align-items: flex-start; }
.proj-segw { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.proj-segw .proj-seg { width: 100%; }
.proj-segw small { font-size: 10px; font-weight: 700; letter-spacing: .05em; line-height: 12px; min-height: 12px; }
.proj-sigla-andamento { color: var(--s-em_producao); } .proj-sigla-espera { color: var(--s-aguardando); }

/* ====== Primeira impressão: boas-vindas e cartões de projeto ====== */
.boas-vindas { position: relative; overflow: hidden; margin: 14px 16px 10px; padding: 24px 20px 22px; border-radius: 22px; background: linear-gradient(135deg, #FFFFFF, #EDEFF1); border: 1px solid #D8DEE2; }
.boas-arte { position: absolute; inset: 0 0 0 48%; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(52,78,92,.18) 0 7px, rgba(255,255,255,0) 7px 16px), linear-gradient(200deg, rgba(255,255,255,.6), rgba(154,163,170,.16));
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 60%); mask-image: linear-gradient(90deg, transparent 0%, #000 60%); }
.boas-eyebrow { position: relative; margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 2.5px; color: #5F6B73; }
.boas-vindas h1, .boas-vindas #saudacao { position: relative; margin: 2px 0 10px; font-size: 38px; line-height: 1.05; font-weight: 600; color: #17191B; }
.boas-texto { position: relative; max-width: 70%; margin: 0; font-size: 14px; line-height: 1.5; color: #2A3135; }
.cli-card { background: #fff; border: 1px solid #D8DEE2; border-radius: 22px; overflow: hidden; margin-bottom: 16px; cursor: pointer; box-shadow: 0 1px 2px rgba(23,25,27,.04), 0 10px 26px rgba(52,78,92,.09); transition: transform .12s; }
.cli-card:active { transform: scale(.99); }
.cli-card-arte { position: relative; height: 104px; padding: 14px; background: linear-gradient(135deg, #EDEFF1, #DDE4E8); }
.cli-card-arte::before { content: ""; position: absolute; inset: 0 0 0 40%; background: repeating-linear-gradient(90deg, rgba(52,78,92,.20) 0 7px, rgba(255,255,255,0) 7px 16px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%); mask-image: linear-gradient(90deg, transparent, #000 70%); }
.cli-card-arte .chip-projeto { position: relative; background: rgba(255,255,255,.92); }
.cli-card-corpo { padding: 16px 18px 18px; }
.cli-card-corpo h2 { margin: 0; font-size: 21px; color: #17191B; }
.cli-tipo { margin: 2px 0 0; font-size: 13px; color: #5F6B73; }
.cli-dots { list-style: none; display: flex; gap: 5px; margin: 14px 0 8px; padding: 0; }
.cli-dots li { flex: 1; height: 6px; border-radius: 999px; background: #DDE4E8; }
.cli-dots li.feito { background: #507B64; } .cli-dots li.agora { background: #344E5C; }
.cli-momento { margin: 0 0 12px; font-size: 14px; color: #2A3135; }
.cli-abrir { display: inline-block; font-size: 14px; font-weight: 700; color: #344E5C; }
.chip-projeto { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; background: #E8EFEA; color: #3F6350; }
.chip-projeto i { width: 8px; height: 8px; border-radius: 50%; background: #507B64; display: block; }
.chip-projeto.atencao { background: #F4EEE1; color: #6E5224; } .chip-projeto.atencao i { background: #A77D37; }
.chip-projeto.outro { background: #EDEFF1; color: #5F6B73; } .chip-projeto.outro i { background: #9AA3AA; }
#lista-projetos { padding-top: 6px; }
.momentos { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); }
.mom { position: relative; text-align: center; }
.mom::before { content: ""; position: absolute; top: 13px; left: -50%; right: 50%; height: 2px; background: #C9D2D7; z-index: 0; }
.mom:first-child::before { display: none; }
.mom-feito::before, .mom-agora::before { background: #507B64; }
.mom-bola { position: relative; z-index: 1; width: 28px; height: 28px; margin: 0 auto 6px; border-radius: 50%; border: 2px solid #C9D2D7; background: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #9AA3AA; }
.mom-feito .mom-bola { background: #507B64; border-color: #507B64; color: #fff; }
.mom-agora .mom-bola { background: #344E5C; border-color: #344E5C; color: #fff; box-shadow: 0 0 0 4px #E5ECF0; }
.mom-nome { font-size: 11px; color: #5F6B73; }
.mom-agora .mom-nome { color: #17191B; font-weight: 700; }


/* ---- observações positivas e efeitos suaves (cartão da colaboradora e situação dos projetos) ---- */
@keyframes subir-suave { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pulso-suave { 0%, 100% { box-shadow: 0 0 0 0 rgba(69,107,130,.35); } 50% { box-shadow: 0 0 0 8px rgba(69,107,130,0); } }
@keyframes encher-barra { from { width: 0; } }
.sec-verde .card, .situacao-projetos { animation: subir-suave .45s ease both; }
.pulso-suave { animation: pulso-suave 2.2s ease-in-out infinite; }
.observacao-pos { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; background: rgba(80,123,100,.09); color: var(--tinta, #2b2b2b); font-size: 13px; line-height: 1.45; animation: subir-suave .6s ease .15s both; }
.situacao-projetos .barra-estimulo i { animation: encher-barra .9s ease both; }
.pilulas-quem { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.pilula-quem { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: rgba(0,0,0,.05); }
@media (prefers-reduced-motion: reduce) { .sec-verde .card, .situacao-projetos, .observacao-pos, .pulso-suave, .situacao-projetos .barra-estimulo i { animation: none; } }