/* Mapa de voo + bloco de Dinheiro do Início e do Modo painel (18/09/2026).
   Mesmas regras do estilo.css: dedo antes de mouse (44px), número primeiro,
   cores da marca BRN. A cor de cada cartão é a da caixa da vida dele. */

/* ================================================================ mapa de voo */
.voo { display: flex; flex-direction: column; gap: 14px; }
/* A régua (nome, indicadores e filtros) gruda no alto; os cartões rolam por
   baixo dela (21/09/2026, pedido do Bruno). */
.voo-fixo { position: sticky; top: 28px; z-index: 26; display: flex; flex-direction: column; gap: 12px;
  padding: 10px 0 12px; margin: -10px 0 0; background: var(--fundo); }
/* Tapa a fresta entre a barrinha da hora e a régua: sem isto, os cartões
   apareciam correndo por trás ao rolar (21/09/2026, pedido do Bruno). */
.voo-fixo::before { content: ""; position: absolute; left: 0; right: 0; top: -32px; height: 32px;
  background: var(--fundo); }
.voo-fixo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--linha); opacity: .7; }
.voo-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.voo-cab h1 { margin: 0; }
.voo-cab .sub { margin: 4px 0 0; }
.voo-vistas { display: flex; background: var(--painel); border-radius: 14px; padding: 4px; gap: 2px; }
.voo-vistas button { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border: 0;
  border-radius: 11px; background: none; color: var(--fraco); font-size: 14px; font-weight: 500; }
.voo-vistas button .ic { width: 18px; height: 18px; }
.voo-vistas button.ativo { background: var(--painel2); color: var(--texto); box-shadow: 0 1px 0 var(--linha-forte) inset; }
.voo-vistas button.ativo .ic { color: var(--marca); }

/* Criar é ferramenta, não conteúdo: fica fixa no alto e não rola com o quadro
   (21/09/2026, pedido do Bruno). */
/* 7 indicadores desde 21/09 (entrou o "comece por"): a linha se ajusta sozinha
   em vez de espremer seis colunas fixas. */
.voo-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; }
.vn { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 10px 14px; border: 0;
  border-radius: 14px; background: var(--painel); text-align: left; transition: background .15s, transform .1s;
  min-height: 84px; }
.vn:active { transform: scale(.97); }
.vn b { font-family: var(--redonda); font-size: 30px; line-height: 1.1; color: var(--tom); font-variant-numeric: tabular-nums; }
.vn span { font-size: 12.5px; color: var(--fraco); }
/* O recado que antes era uma fileira de avisos do Tião agora mora aqui embaixo
   do número (21/09/2026, pedido do Bruno: "os indicadores é que têm de me
   falar sobre isso"). */
.vn i { font-style: normal; font-size: 11px; line-height: 1.25; color: var(--apagado); margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vn.aceso { background: linear-gradient(180deg, color-mix(in srgb, var(--tom) 14%, transparent), transparent 70%), var(--painel); }
.vn.aceso i { color: var(--tom); }
.vn.comece { background: linear-gradient(180deg, color-mix(in srgb, var(--ok) 16%, transparent), transparent 70%), var(--painel); }
.vn.todas { background: var(--painel); }
/* Na vista Projetos os indicadores são leitura, não filtro: não têm o toque. */
.vn.leitura { cursor: default; }
.vn.leitura:active { transform: none; }
.voo-nums .vn-acao { display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 2px; padding: 10px 14px; border: 1px dashed var(--linha-forte); border-radius: 14px; background: none;
  color: var(--marca); min-height: 84px; }
.voo-nums .vn-acao .ic { width: 22px; height: 22px; }
.voo-nums .vn-acao b { font-size: 14px; font-weight: 650; }
.voo-nums .vn-acao i { font-style: normal; font-size: 11px; color: var(--apagado); }
.voo-nums .vn-acao:hover { background: var(--marca-fraca); }
/* indicador cujo valor é um nome, não um número */
.vn.texto b { font-size: 17px; line-height: 1.25; font-family: inherit; font-weight: 700;
  overflow-wrap: anywhere; }
.vn.todas b { color: var(--texto); }
.vn.todas b { color: var(--texto); }
.vn.ativo { background: var(--painel2); box-shadow: 0 0 0 2px var(--tom) inset; }

/* Criar cartão: um + colado no ordenar, dentro da etapa. O formulário do topo
   saiu para caber mais cartão na tela (21/09/2026). */
.vq-mais { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border: 0; border-radius: 8px;
  background: none; color: var(--apagado); transition: background .12s, color .12s, transform .1s; }
.vq-mais .ic { width: 17px; height: 17px; }
.vq-mais:hover { background: var(--marca-fraca); color: var(--marca); }
.vq-mais:active { transform: scale(.92); }
.vq-ordem { margin-left: auto; }

.voo-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vf { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 13px; border: 0; border-radius: 19px;
  background: var(--painel); color: var(--fraco); font-size: 13.5px; }
.vf i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.vf em { font-style: normal; color: var(--apagado); font-size: 12px; }
.vf.ativo { background: var(--texto); color: var(--tinta); }
.vf.ativo em { color: var(--tinta); opacity: .6; }
.vf .ic { width: 16px; height: 16px; }
.vf.limpar { color: var(--marca); }
.vf-sel { height: 38px; border-radius: 19px; border: 0; background: var(--painel); color: var(--fraco); padding: 0 12px; font-size: 13.5px; }
.vf-busca { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border-radius: 19px;
  background: var(--painel); color: var(--apagado); margin-left: auto; }
.vf-busca .ic { width: 16px; height: 16px; }
.vf-busca input { border: 0; background: none; outline: none; width: 150px; font-size: 14px; color: var(--texto); }

/* cabeçalho de projeto */
.voo-proj { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 18%, transparent), transparent 70%), var(--painel);
  border-radius: 18px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; border-left: 4px solid var(--c); }
.vpr-topo { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.vpr-topo small { text-transform: uppercase; letter-spacing: .08em; font-size: 11.5px; color: var(--apagado); font-weight: 600; }
.vpr-topo h2 { margin: 2px 0 2px; font-size: 22px; letter-spacing: -.01em; }
.vpr-topo span { color: var(--fraco); font-size: 13.5px; }
.vpr-passo { display: flex; align-items: center; gap: 10px; }
.vpr-passo span { font-size: 13px; color: var(--apagado); white-space: nowrap; }
.vpr-passo input { flex: 1; height: 42px; border-radius: 11px; border: 1px solid var(--linha-forte); background: var(--fundo2); padding: 0 12px; }
.vpr-notas { display: flex; flex-wrap: wrap; gap: 6px; }
.vpr-notas span { font-size: 12.5px; padding: 4px 10px; border-radius: 10px; background: var(--fundo2); color: var(--fraco); }
.vpr-notas .decisao { color: var(--azul-claro); }

/* quadro */
.voo-quadro { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
.vq { background: var(--fundo2); border-radius: 18px; padding: 10px 8px 8px; min-height: 180px; transition: box-shadow .12s, background .12s; }
.vq.alvo { background: var(--painel); box-shadow: 0 0 0 2px var(--marca) inset; }
/* O nome da etapa manda na coluna: grande, firme, com a conta em pastilha.
   Logo abaixo, o seletor que ordena ESTA etapa (21/09/2026, pedido do Bruno). */
.vq header { display: flex; flex-direction: column; gap: 7px; padding: 6px 10px 12px; }
.vq-nome { display: flex; align-items: center; gap: 9px; }
.vq-nome b { font-size: 18px; font-weight: 700; letter-spacing: -.015em; line-height: 1.15; color: var(--texto); }
.vq-nome em { font-style: normal; font-family: var(--redonda); min-width: 24px; height: 21px; padding: 0 7px;
  border-radius: 11px; background: var(--painel2); color: var(--fraco); font-size: 12.5px; font-weight: 700;
  display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
.vq header small { color: var(--apagado); font-size: 12px; line-height: 1.35; margin-top: -3px; }
.vq[data-col="fazendo"] .vq-nome b { color: var(--marca); }
.vq[data-col="fazendo"] .vq-nome em { background: var(--marca-fraca); color: var(--marca); }
.vq.vq-ideias .vq-nome b { color: var(--aviso); }
/* A ordem da etapa é um ícone só, encostado na direita do nome; ao clicar,
   abre a lista (21/09/2026, pedido do Bruno: "assim fica discreto"). */
.vq-ordem { position: relative; margin-left: auto; flex: none; }
.vq-ordem-bt { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 8px;
  background: none; color: var(--apagado); transition: background .12s, color .12s; }
.vq-ordem-bt .ic { width: 15px; height: 15px; }
.vq-ordem-bt:hover { background: var(--painel2); color: var(--texto); }
.vq-ordem.marcada .vq-ordem-bt { color: var(--marca); }
.vq-ordem.marcada .vq-ordem-bt::after { content: ""; position: absolute; top: 3px; right: 3px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--marca); }
.vq-ordem.aberto .vq-ordem-bt { background: var(--painel2); color: var(--texto); }
.vq-veu { position: fixed; inset: 0; z-index: 35; }
.vq-menu { position: absolute; top: 32px; right: 0; z-index: 36; width: 252px; padding: 6px;
  background: var(--painel); border: 1px solid var(--linha); border-radius: 13px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45); display: flex; flex-direction: column; gap: 1px; }
.vq-menu h5 { margin: 4px 8px 6px; font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--apagado); }
.vq-menu button { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; min-height: 34px; padding: 6px 9px; border: 0; border-radius: 9px; background: none;
  color: var(--fraco); font-size: 13px; text-align: left; line-height: 1.3; }
.vq-menu button:hover { background: var(--painel2); color: var(--texto); }
.vq-menu button.ativo { color: var(--marca); font-weight: 600; }
.vq-menu button .ic { width: 15px; height: 15px; flex: none; }
.vq-lista { display: flex; flex-direction: column; gap: 8px; max-height: calc(100dvh - 150px); overflow-y: auto;
  overscroll-behavior: contain; scrollbar-width: thin; padding-right: 2px; }
.voo-colcel { display: none; }
.vq-vazio { color: var(--apagado); font-size: 13px; text-align: center; padding: 22px 10px; border: 1.5px dashed var(--linha-forte);
  border-radius: 14px; margin: 0; }

.vc { position: relative; display: flex; gap: 8px; align-items: flex-start; background: var(--painel);
  border-radius: 14px; padding: 10px 10px 10px 8px; border-left: 4px solid var(--c);
  transition: transform .18s, opacity .18s, background .12s; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none; cursor: grab; }
.vc:hover { background: var(--painel2); }
.vc.atras { box-shadow: 0 0 0 1px rgba(220, 100, 78, .45) inset; }
.vc.atras::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  border-radius: 3px 0 0 3px; background: var(--alerta); }
.vc.e-hoje { box-shadow: 0 0 0 1px color-mix(in srgb, var(--aviso) 55%, transparent) inset; }
.vc.e-hoje::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  border-radius: 3px 0 0 3px; background: var(--aviso); }
.vc.feita { opacity: .55; }
.vc.feita b { text-decoration: line-through; text-decoration-color: var(--apagado); }
.vc.saindo { transform: translateX(14px); opacity: 0; }
.vc-ok { flex: none; width: 30px; height: 30px; margin-top: -2px; border-radius: 50%; border: 2px solid var(--linha-forte);
  background: none; display: grid; place-items: center; color: transparent; transition: all .15s; }
.vc-ok .ic { width: 16px; height: 16px; }
.vc-ok:hover { border-color: var(--ok); color: var(--ok); }
.vc.feita .vc-ok { background: var(--ok); border-color: var(--ok); color: var(--tinta); }
.vc-corpo { flex: 1; min-width: 0; cursor: pointer; }
.vc-corpo b { display: block; font-weight: 550; font-size: 14.5px; line-height: 1.35; overflow-wrap: anywhere; }
/* A bandeirinha sozinha não dizia nada (21/09/2026, o Bruno: "não entendi o que
   é a bandeirinha"). Agora ela é etiqueta escrita: bandeira + "alta". */
.vc-alta { display: inline-flex; align-items: center; gap: 3px; vertical-align: 1px; margin-right: 5px;
  padding: 1px 6px 1px 4px; border-radius: 6px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .02em; text-transform: uppercase; color: var(--alerta);
  background: color-mix(in srgb, var(--alerta) 14%, transparent); }
.vc-alta .ic { width: 12px; height: 12px; }
.vc-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 5px; font-size: 12px; color: var(--apagado); }
.vc-meta:empty { display: none; }
.vc-meta > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.vp { color: var(--fraco); }
.vp.atras { color: var(--alerta); font-weight: 600; }
.vp.hoje { color: var(--aviso); font-weight: 600; }
/* Vence hoje e venceu são os dois que mandam no dia: etiqueta cheia, não texto
   solto no meio dos outros dados (21/09/2026). */
.vp.forte { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 650; line-height: 1.5; }
.vp.forte .ic { width: 13px; height: 13px; }
.vp.atras.forte { background: color-mix(in srgb, var(--alerta) 20%, transparent); color: var(--alerta); }
.vp.hoje.forte { background: color-mix(in srgb, var(--aviso) 22%, transparent); color: var(--aviso); }
.vp.amanha { color: var(--texto); }
.vp.velha { color: #b99a5f; }
/* O número do card — tarefa 142, subtarefa 142.1. Discreto, mas sempre à vista. */
.vc-num { display: inline-block; margin-right: 5px; font-weight: 600; font-size: 11px;
  color: var(--apagado); font-variant-numeric: tabular-nums; }
.vsb-num { font-size: 11px; color: var(--apagado); font-variant-numeric: tabular-nums;
  margin-right: 4px; }
.vs-num { display: block; font-size: 12px; color: var(--apagado); margin-bottom: 4px;
  font-variant-numeric: tabular-nums; }
.vc-check { display: inline-flex; align-items: center; gap: 3px; }
.vc-check .ic { width: 13px; height: 13px; }
.vc-check.ok { color: var(--ok); }
.vc-origem { opacity: .3; }
.vc-fantasma { position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none; box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  background: var(--painel2); cursor: grabbing; }

/* lista */
.voo-lista { display: flex; flex-direction: column; gap: 18px; }
.voo-lista section { display: flex; flex-direction: column; gap: 8px; }
.voo-lista h3 { margin: 0 0 2px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--apagado); font-weight: 600; }
.voo-lista h3 em { font-style: normal; margin-left: 8px; color: var(--fraco); }

/* projetos */
.voo-projs { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.vpj { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 16px; border: 0; border-radius: 18px;
  background: var(--painel); border-top: 4px solid var(--c); transition: transform .1s, background .12s; }
.vpj:hover { background: var(--painel2); }
.vpj:active { transform: scale(.98); }
.vpj-topo { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.vpj-topo b { font-size: 17px; }
.vpj small { color: var(--apagado); font-size: 12.5px; }
.vpj-barra { height: 6px; background: var(--fundo2); border-radius: 4px; overflow: hidden; margin-top: 4px; }
.vpj-barra i { display: block; height: 100%; background: var(--ok); border-radius: 4px; }
.vpj-nums { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--fraco); }
.vpj-nums b { color: var(--texto); font-family: var(--redonda); }
.vpj-nums .velho b { color: var(--aviso); }
.vpj p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.35; color: var(--fraco); }
.vpj p i { color: var(--apagado); }
.vpj.sem { border-top-color: var(--apagado); justify-content: center; }

/* ideias */
.voo-nova.ideia > .ic { color: var(--aviso); }
.voo-nova.ideia button { background: var(--painel2); color: var(--texto); }
.voo-ideias { display: flex; flex-direction: column; gap: 8px; }
.vi { display: flex; align-items: center; gap: 8px; background: var(--painel); border-radius: 14px; padding: 8px 8px 8px 14px; }
.vi > span { flex: 1; min-width: 0; font-size: 14.5px; }
.vi small { display: block; color: var(--apagado); font-size: 12px; }
.vi button { height: 38px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--painel2); display: inline-flex;
  align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.vi button .ic { width: 16px; height: 16px; }
.so-ic { width: 40px; height: 40px; padding: 0 !important; justify-content: center; border: 0; border-radius: 10px;
  background: none; display: grid; place-items: center; color: var(--apagado); }

/* leitura */
.voo-leit { display: flex; flex-direction: column; gap: 14px; }
.vl-frases { background: var(--painel); border-radius: 18px; padding: 14px 18px; border-left: 4px solid var(--marca); }
.vl-frases p { margin: 4px 0; font-size: 15px; line-height: 1.45; }
.vl-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.vl-nums div { background: var(--painel); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.vl-nums b { font-family: var(--redonda); font-size: 34px; line-height: 1; color: var(--marca); }
.vl-nums b small { font-size: 16px; color: var(--apagado); margin-left: 2px; }
.vl-nums span { font-size: 12.5px; color: var(--fraco); line-height: 1.35; }
.vl-bloco { background: var(--painel); border-radius: 18px; padding: 14px 16px; }
.vl-bloco h3 { margin: 0 0 12px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--apagado);
  font-weight: 600; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.vl-bloco h3 span { text-transform: none; letter-spacing: 0; display: inline-flex; gap: 6px; align-items: center; font-weight: 500; }
.vl-bloco h3 i, .vl-par i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
i.f { background: var(--ok); }
i.c { background: var(--azul-claro); opacity: .55; }
.vl-sem { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; align-items: end; }
.vl-sem > div { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.vl-par { height: 120px; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.vl-par i { width: 40%; min-height: 2px; height: 0; border-radius: 4px 4px 0 0; }
.vl-sem small { font-size: 10.5px; color: var(--apagado); }
.vl-area { display: grid; grid-template-columns: 140px 1fr 70px; align-items: center; gap: 10px; padding: 5px 0; font-size: 13.5px; }
.vl-area > span { display: flex; align-items: center; gap: 8px; }
.vl-area > span::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none; }
.vl-area > div { display: flex; height: 12px; border-radius: 6px; background: var(--fundo2); overflow: hidden; }
.vl-area i.f { background: var(--c); height: 100%; }
.vl-area i.v { background: var(--c); opacity: .35; height: 100%; }
.vl-area em { font-style: normal; color: var(--fraco); font-family: var(--redonda); text-align: right; }
.vl-emp { display: flex; gap: 12px; padding: 8px 4px; cursor: pointer; border-radius: 10px; }
.vl-emp:hover { background: var(--painel2); }
.vl-emp b { font-family: var(--redonda); color: var(--aviso); min-width: 30px; }

/* a ficha da tarefa */
#voo-folha { position: fixed; inset: 0; z-index: 120; pointer-events: none; }
#voo-folha.aberta { pointer-events: auto; }
.vs-veu { position: absolute; inset: 0; background: rgba(5, 10, 15, .55); opacity: 0; transition: opacity .2s; }
#voo-folha.aberta .vs-veu { opacity: 1; }
/* O cartao abre suspenso no meio da tela, ocupando ~70% (21/09/2026, pedido do
   Bruno: "nao quero ver os cartoes a direita da tela"). Dentro dele, duas
   colunas como no Trello: a obra a esquerda, as propriedades a direita. */
.vs { position: absolute; top: 50%; left: 50%; width: min(70vw, 1060px); max-height: 88vh;
  background: var(--fundo); border: 1px solid var(--linha); border-radius: 22px; overflow-y: auto;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .5);
  padding: max(20px, env(safe-area-inset-top)) 24px max(22px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 16px;
  transform: translate(-50%, -50%) scale(.96); opacity: 0;
  transition: transform .18s ease-out, opacity .18s ease-out;
  border-top: 5px solid var(--c); }
#voo-folha.aberta .vs { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.vs-grade { display: grid; grid-template-columns: 1fr minmax(260px, 320px); gap: 22px; align-items: start; }
.vs-corpo { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.vs-lado { display: flex; flex-direction: column; gap: 12px; min-width: 0;
  background: var(--fundo2); border-radius: 16px; padding: 14px; }
.vs-lado .vs-linha { grid-template-columns: 1fr; gap: 5px; }
.vs-lado .vs-linha > span { padding-top: 0; font-weight: 600; }
.vs-topo { display: flex; gap: 8px; align-items: flex-start; }
.vs-titulo { flex: 1; font-size: 20px; font-weight: 650; line-height: 1.3; border: 0; background: none; resize: none;
  outline: none; padding: 6px 0; border-bottom: 1px solid transparent; }
.vs-titulo:focus { border-bottom-color: var(--marca); }
.vs-sit { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--painel); border-radius: 14px; padding: 4px; gap: 3px; }
.vs-sit button { height: 42px; border: 0; border-radius: 11px; background: none; color: var(--fraco); font-weight: 550; }
.vs-sit button.ativo { background: var(--marca); color: #1a0f08; }
.vs-linha { display: grid; grid-template-columns: 70px 1fr; gap: 10px; align-items: start; }
.vs-linha > span { font-size: 13px; color: var(--apagado); padding-top: 11px; }
.vs-prazo, .vs-areas, .vs-proj { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.vs-prazo input, .vs-proj input { height: 40px; border-radius: 10px; border: 1px solid var(--linha-forte); background: var(--painel);
  padding: 0 10px; color-scheme: dark; }
.vs-proj input { flex: 1; min-width: 160px; }
.vs-prazo button, .vs-areas button, .vs-proj button { height: 36px; padding: 0 11px; border: 0; border-radius: 10px;
  background: var(--painel); color: var(--fraco); font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.vs-areas button i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.vs-areas button.ativo { background: color-mix(in srgb, var(--c) 30%, var(--painel)); color: var(--texto); box-shadow: 0 0 0 1.5px var(--c) inset; }
.vs-proj button .ic { width: 15px; height: 15px; }
.vs-proj button.alta { color: var(--alerta); box-shadow: 0 0 0 1.5px var(--alerta) inset; }
.vs-check { background: var(--painel); border-radius: 14px; padding: 10px 12px; }
.vs-check h4 { margin: 2px 2px 6px; font-size: 13px; color: var(--apagado); text-transform: uppercase; letter-spacing: .07em; }
.vs-check h4 em { font-style: normal; color: var(--ok); }
.vs-check label { display: flex; align-items: flex-start; gap: 10px; padding: 7px 2px; font-size: 14.5px; cursor: pointer; }
.vs-check label input { width: 20px; height: 20px; accent-color: var(--ok); margin: 1px 0 0; flex: none; }
.vs-check label.feito span { color: var(--apagado); text-decoration: line-through; }
.vs-check form input { width: 100%; height: 40px; border: 0; border-top: 1px solid var(--linha); background: none; outline: none; margin-top: 4px; }
.vs-notas { border-radius: 14px; border: 1px solid var(--linha-forte); background: var(--painel); padding: 10px 12px; resize: vertical;
  font-size: 14.5px; line-height: 1.45; min-height: 80px; }
.vs-pe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: auto; padding-top: 6px; }
.vs-pe small { flex-basis: 100%; color: var(--apagado); font-size: 12.5px; }
.vs-apagar { height: 46px; padding: 0 14px; border: 0; border-radius: 12px; background: none; color: var(--apagado);
  display: inline-flex; align-items: center; gap: 6px; }
.vs-feito { margin-left: auto; height: 46px; padding: 0 22px; border: 0; border-radius: 12px; background: var(--ok);
  color: var(--tinta); font-weight: 650; display: inline-flex; align-items: center; gap: 8px; }

/* ================================================================ dinheiro no Início */
.inicio { grid-template-areas: "saud saud" "kpis lado" "din lado" "fav lado"; grid-template-rows: auto auto auto 1fr; }
.din { grid-area: din; display: flex; flex-direction: column; gap: 12px; }
.din h2.secao { margin: 4px 0 0; }
.din-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.din-num { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: var(--raio); background: var(--painel);
  color: var(--texto); min-width: 0; }
.din-num:hover { background: var(--painel2); }
.din-num span { font-size: 13px; color: var(--fraco); }
.din-num b { font-family: var(--redonda); font-size: 30px; line-height: 1.15; color: var(--tom); font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.din-num small { font-size: 12.5px; color: var(--apagado); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.din-ins { display: flex; flex-direction: column; gap: 4px; background: var(--painel); border-radius: var(--raio); padding: 10px 16px; }
.din-ins p, .q-din-ins p { margin: 0; display: flex; gap: 10px; align-items: baseline; font-size: 14px; line-height: 1.4; }
.din-ins i, .q-din-ins i { width: 8px; height: 8px; border-radius: 50%; background: var(--tom); flex: none; transform: translateY(-1px); }
.din-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 12px; }
.din-contas { display: flex; flex-direction: column; gap: 8px; }
.dc { background: var(--painel); border-radius: 14px; padding: 10px 14px; border-left: 4px solid var(--tom); }
.dc-topo { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--fraco); }
.dc-topo b { font-family: var(--redonda); font-size: 18px; color: var(--texto); }
.dc-linha { display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; font-size: 13.5px; padding: 3px 0; }
.dc-linha em { font-style: normal; color: var(--apagado); font-variant-numeric: tabular-nums; }
.dc-linha span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc small { display: block; color: var(--apagado); font-size: 12.5px; margin-top: 2px; }
.din-fontes { background: var(--painel); border-radius: 14px; padding: 12px 14px 10px; }
.din-fontes h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--apagado); font-weight: 600; }
.df { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; align-items: end; }
.df-col { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.df-tot { font-size: 11.5px; color: var(--fraco); font-variant-numeric: tabular-nums; white-space: nowrap; }
.df-pilha { width: 70%; max-width: 44px; display: flex; flex-direction: column-reverse; border-radius: 6px 6px 2px 2px; overflow: hidden; }
.df-pilha i { display: block; width: 100%; min-height: 0; }
.df-pilha i.aporte, .df-leg i.aporte { background: repeating-linear-gradient(135deg, var(--c) 0 3px, color-mix(in srgb, var(--c) 35%, transparent) 3px 6px); }
.df-mes { font-size: 12px; color: var(--apagado); }
.df-leg { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: 12px; color: var(--fraco); }
.df-leg span { display: inline-flex; align-items: center; gap: 5px; }
.df-leg i { width: 10px; height: 10px; border-radius: 3px; }

/* ================================================================ dinheiro no Modo painel */
.quadro { grid-template-rows: auto auto minmax(0, 1fr) auto auto; gap: 16px; }
.q-num { font-size: 52px; }
.q-din { display: grid; grid-template-columns: 1.35fr 1fr 1.25fr 1fr; gap: 14px; }
.q-din > div { background: var(--painel); border-radius: 20px; padding: 12px 16px; min-width: 0; overflow: hidden; }
.q-din-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
.q-din-nums div, .q-din-contas div { display: flex; flex-direction: column; min-width: 0; }
.q-din-nums span, .q-din-contas span { font-size: 13px; color: var(--fraco); }
.q-din-nums b { font-family: var(--redonda); font-size: 30px; line-height: 1.1; color: var(--tom); font-variant-numeric: tabular-nums; white-space: nowrap; }
.q-din-nums small, .q-din-contas small { font-size: 12px; color: var(--apagado); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-din-contas { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; }
.q-din-contas div { border-left: 4px solid var(--linha-forte); padding-left: 10px; }
.q-din-contas div.ruim { border-left-color: var(--alerta); }
.q-din-contas div.ruim b { color: var(--alerta); }
.q-din-contas div.meio { border-left-color: var(--aviso); }
.q-din-contas b { font-family: var(--redonda); font-size: 20px; line-height: 1.15; }
.q-din-fontes .df-leg { font-size: 11px; margin-top: 4px; }
.q-din-ins { display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.q-din-ins p { font-size: 14.5px; }

/* ================================================================ tamanhos */
@media (max-width: 1000px) {
  .q-din { grid-template-columns: 1.3fr 1fr 1.2fr; }
  .q-din-ins { display: none !important; }
}
@media (max-width: 900px) {
  .voo-quadro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .voo-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .inicio { grid-template-areas: "saud" "kpis" "din" "lado" "fav"; grid-template-rows: none; }
}
@media (max-width: 800px) {
  .din-grade { grid-template-columns: 1fr; }
  .vl-nums { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .voo-vistas { width: 100%; overflow-x: auto; }
  .voo-vistas button { flex: 1; padding: 0 8px; justify-content: center; }
  .voo-vistas button span { display: none; }
  .voo-quadro { grid-template-columns: 1fr; }
  .voo-colcel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; background: var(--painel); border-radius: 14px; padding: 4px; }
  .voo-colcel button { height: 40px; border: 0; border-radius: 11px; background: none; color: var(--fraco); font-size: 13px; font-weight: 550; }
  .voo-colcel button em { font-style: normal; color: var(--apagado); margin-left: 3px; }
  .voo-colcel button.ativo { background: var(--painel2); color: var(--texto); }
  .vq:not(.cel) { display: none; }
  .vq header { display: flex; }
  .vq-lista { max-height: none; }
  .voo-fixo { top: 24px; padding-bottom: 8px; }
  .voo-fixo::before { top: -28px; height: 28px; }
  .voo-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .vn { padding: 8px 10px; min-height: 0; }
  .vn i { -webkit-line-clamp: 1; }
  .vn b { font-size: 24px; }
  .voo-filtros { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  .voo-filtros::-webkit-scrollbar { display: none; }
  .voo-filtros > * { flex: none; }
  .vf-busca { margin-left: 0; }
  .vf-busca input { width: 110px !important; }
  .vs { width: 100%; left: 0; top: 6vh; bottom: 0; max-height: none; border-radius: 22px 22px 0 0;
    transform: translateY(104%); opacity: 1; border-left: 0; padding-left: 18px; padding-right: 18px; }
  #voo-folha.aberta .vs { transform: none; opacity: 1; }
  .vs-grade { grid-template-columns: 1fr; gap: 16px; }
  .vs-linha { grid-template-columns: 1fr; gap: 4px; }
  .vs-linha > span { padding-top: 0; }
  .vl-area { grid-template-columns: 100px 1fr 56px; }
  .din-nums { grid-template-columns: 1fr 1fr; }
  .din-num b { font-size: 24px; }
  .q-din { grid-template-columns: 1fr; }
}

/* ================================================================ pulso (obrigatório, em fila) */
#pulso { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 16px; }
.p-veu { position: absolute; inset: 0; background: rgba(5, 10, 15, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .25s; }
#pulso.aberto .p-veu { opacity: 1; }
body.pulso-trava { overflow: hidden; }
.p-cartao { position: relative; width: min(500px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto;
  background: var(--painel2); border: 1px solid var(--linha-forte); border-radius: 24px; padding: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55); display: flex; flex-direction: column; gap: 12px;
  transform: translateY(24px) scale(.98); opacity: 0; transition: transform .25s ease-out, opacity .25s; }
#pulso.aberto .p-cartao { transform: none; opacity: 1; }
.p-cartao.enviando { opacity: .6; pointer-events: none; }
.p-cartao.sacode { animation: sacode .45s; }
@keyframes sacode { 0%, 100% { transform: none; } 20% { transform: translateX(-12px); } 40% { transform: translateX(10px); }
  60% { transform: translateX(-7px); } 80% { transform: translateX(4px); } }
.p-cartao header small { display: block; font-size: 12px; color: var(--marca); font-weight: 600; letter-spacing: .02em; }
.p-cartao header b { display: block; font-size: 21px; line-height: 1.3; margin-top: 4px; }
.p-fila { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.p-fila::-webkit-scrollbar { display: none; }
.p-fila button { flex: none; height: 32px; padding: 0 11px; border: 1px dashed var(--aviso); border-radius: 16px; background: none;
  color: var(--aviso); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.p-fila button.atual { background: var(--aviso); color: var(--tinta); border-style: solid; font-weight: 650; }
.p-ops { display: flex; flex-direction: column; gap: 7px; }
.p-op { display: flex; gap: 6px; }
.p-sim { flex: 1; min-height: 54px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: 1px; padding: 8px 14px; border: 0; border-radius: 14px; background: var(--painel); text-align: left;
  font-size: 15.5px; font-weight: 550; line-height: 1.3; transition: background .12s, transform .08s; }
.p-sim:hover { background: var(--fundo2); }
.p-sim:active { transform: scale(.98); }
.p-sim small { font-size: 12px; color: var(--apagado); font-weight: 400; }
.p-op.descanso .p-sim { color: var(--azul-claro); }
.p-op.compromisso .p-sim { box-shadow: 3px 0 0 var(--marca) inset; }
.p-op.whatsapp .p-sim { box-shadow: 3px 0 0 var(--ok) inset; }
.p-fim { width: 66px; flex: none; border: 0; border-radius: 14px; background: var(--painel); color: var(--ok);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.p-fim small { font-size: 10.5px; color: var(--apagado); }
.p-outra { display: flex; gap: 6px; }
.p-outra input { flex: 1; min-width: 0; height: 48px; border-radius: 12px; border: 1px solid var(--linha-forte); background: var(--fundo); padding: 0 12px; font-size: 16px; }
.p-outra button { height: 48px; padding: 0 18px; border: 0; border-radius: 12px; background: var(--marca); color: #1a0f08; font-weight: 650; }
.p-cartao footer { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.p-cartao footer > button { border: 0; background: none; color: var(--fraco); font-size: 14px; padding: 8px 2px; text-decoration: underline;
  text-decoration-color: var(--linha-forte); text-underline-offset: 3px; }
.p-todas { flex-basis: 100%; display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--fraco); }

/* a hora dividida e os passos (caixa da vida, projeto, rotina) — 21/09/2026 */
.p-mais { width: 46px; flex: none; border: 1px dashed var(--linha-forte); border-radius: 14px; background: none;
  color: var(--fraco); font-size: 22px; line-height: 1; font-weight: 300; }
.p-mais:active { transform: scale(.95); }
.p-mais.posto { border-style: solid; border-color: var(--marca); color: var(--marca); }
.p-mais.posto svg { width: 18px; height: 18px; }
.p-caixa { font-style: normal; display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 8px;
  background: var(--fundo2); color: var(--fraco); font-size: 11px; }
.p-rotina { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; width: 100%;
  border: 1px dashed var(--linha-forte); border-radius: 14px; background: none; color: var(--fraco); font-size: 14.5px; }
.p-rotina svg { width: 17px; height: 17px; }
.p-rotina:active { transform: scale(.99); }
.p-cesta { border: 1px solid var(--marca); border-radius: 16px; padding: 11px 12px; display: flex; flex-direction: column; gap: 8px; }
.p-cesta > small { font-size: 12.5px; color: var(--marca); font-weight: 600; }
.p-cesta > em { font-style: normal; font-size: 11.5px; color: var(--apagado); }
.p-cesta .p-chips span { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 6px 0 11px;
  border-radius: 16px; background: var(--fundo2); font-size: 13px; }
.p-cesta .p-chips span b { cursor: pointer; color: var(--fraco); font-weight: 400; font-size: 15px; padding: 0 4px; }
.p-achadas { display: flex; flex-direction: column; gap: 6px; }
.p-achadas > small { font-size: 11.5px; color: var(--apagado); text-transform: uppercase; letter-spacing: .04em; }
.p-passo { display: flex; flex-direction: column; gap: 10px; }
.p-passo > b { font-size: 16px; line-height: 1.3; }
.p-passo > small { font-size: 13px; color: var(--fraco); margin-top: -6px; }
.p-eixo em { font-style: normal; display: block; font-size: 11.5px; color: var(--apagado); text-transform: uppercase;
  letter-spacing: .04em; margin-bottom: 5px; }
.p-eixo + .p-eixo { margin-top: 4px; }
.p-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.p-chips button { min-height: 40px; padding: 5px 13px; border: 0; border-radius: 12px; background: var(--painel);
  font-size: 14.5px; font-weight: 550; text-align: left; box-shadow: 3px 0 0 var(--c, transparent) inset; }
.p-chips button i { font-style: normal; display: block; font-size: 11px; color: var(--apagado); font-weight: 400; }
.p-chips button.sug { background: var(--fundo2); outline: 1px solid var(--marca); }
.p-chips button.nao { color: var(--fraco); border: 1px dashed var(--linha-forte); background: none; }
.p-chips button.novo { display: inline-flex; align-items: center; gap: 6px; color: var(--marca);
  border: 1px dashed var(--marca); background: none; }
.p-chips button.novo svg { width: 15px; height: 15px; }
.p-chips button:active { transform: scale(.97); }
/* Procurar projeto dentro do pulso (22/09/2026): a lista da caixa é o atalho,
   a busca acha qualquer um, e "novo projeto" e "sem projeto" ficam sempre à
   vista — a hora nunca fica sem saída. */
.p-busca { width: 100%; min-height: 42px; border-radius: 12px; border: 1px solid var(--linha-forte);
  background: var(--fundo2); color: var(--texto); padding: 0 12px; font-size: 15px; }
.p-busca:focus { outline: 2px solid var(--marca); outline-offset: -1px; }
.p-vazio { font-size: 13.5px; color: var(--fraco); padding: 6px 2px; }
.p-mais-proj { align-self: flex-start; border: 0; background: none; color: var(--marca); font-size: 13.5px;
  padding: 2px; text-decoration: underline; text-underline-offset: 3px; }

.p-voltar { align-self: flex-start; border: 0; background: none; color: var(--fraco); font-size: 14px; padding: 6px 2px;
  text-decoration: underline; text-decoration-color: var(--linha-forte); text-underline-offset: 3px; }
.p-cesta .p-pronto { min-height: 46px; border: 0; border-radius: 12px; background: var(--marca); color: #1a0f08; font-weight: 650; }

body.em-quadro .p-cartao { width: min(560px, 100%); }
body.em-quadro .p-cartao header b { font-size: 24px; }

/* horas do dia (pulso) na visão Dia */
.voo-horas { background: var(--painel); border-radius: 18px; padding: 12px 14px 14px; margin-bottom: 14px; }
.voo-horas header { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: baseline; margin-bottom: 10px; }
.voo-horas header b { font-size: 15px; }
.voo-horas header span { font-size: 13px; color: var(--fraco); }
.voo-horas header i { font-style: normal; color: var(--aviso); }
.vh-linha { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; }
.vh { min-height: 64px; border-radius: 10px; background: var(--fundo2); padding: 6px 6px; display: flex; flex-direction: column;
  gap: 3px; border: 0; text-align: left; min-width: 0; overflow: hidden; }
.vh em { font-style: normal; font-size: 11px; color: var(--apagado); font-variant-numeric: tabular-nums; }
.vh span { font-size: 11px; line-height: 1.25; color: var(--fraco); display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.vh.feita { background: color-mix(in srgb, var(--c) 22%, var(--fundo2)); box-shadow: 0 3px 0 var(--c) inset; }
.vh.feita span { color: var(--texto); }
.vh i { font-style: normal; font-size: 10px; color: var(--apagado); }
.vh.dividida { background: linear-gradient(135deg, color-mix(in srgb, var(--c) 24%, var(--fundo2)) 0 50%,
  color-mix(in srgb, var(--c2, var(--c)) 24%, var(--fundo2)) 50% 100%); }
.vh.buraco { border: 1.5px dashed var(--aviso); background: none; cursor: pointer; }
.vh.buraco span { color: var(--aviso); }
.vh.agora { box-shadow: 0 0 0 1.5px var(--marca) inset; }
.voo-prod { margin-top: 18px; }
@media (max-width: 900px) { .vh-linha { grid-template-columns: repeat(7, minmax(0, 1fr)); } }

/* cartão de crédito como meio (tela Dinheiro) */
.item.cc { display: flex !important; flex-direction: column; gap: 10px; align-items: stretch; }
.cc-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cc-topo b { font-weight: 650; }
.cc-meio { font-size: 11.5px; color: var(--azul-claro); background: rgba(143, 180, 214, .12); padding: 3px 9px; border-radius: 10px; }
.cc-fatura { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.cc-fatura div { display: flex; flex-direction: column; }
.cc-fatura small { font-size: 12px; color: var(--apagado); }
.cc-fatura b { font-family: var(--redonda); font-size: 24px; line-height: 1.15; }
.cc-fatura span { font-size: 12.5px; color: var(--fraco); }
.cc-limite > div { height: 8px; border-radius: 5px; background: var(--fundo2); overflow: hidden; }
.cc-limite i { display: block; height: 100%; background: var(--aviso); }
.cc-limite span { display: block; font-size: 12.5px; color: var(--fraco); margin-top: 4px; }
.cc-limite span b { color: var(--ok); }
.cc-dica { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.4; color: var(--fraco);
  background: var(--fundo2); border-radius: 10px; padding: 8px 10px; }
.cc-dica .ic { width: 16px; height: 16px; color: var(--marca); margin-top: 2px; }
.cc-dica b { color: var(--texto); }
.cc-prox { display: flex; gap: 6px; flex-wrap: wrap; }
.cc-prox span { display: flex; flex-direction: column; font-size: 13px; background: var(--fundo2); border-radius: 8px; padding: 4px 9px; font-variant-numeric: tabular-nums; }
.cc-prox small { font-size: 11px; color: var(--apagado); }
.cc-compras summary { cursor: pointer; font-size: 13px; color: var(--marca); padding: 2px 0; }
.cc-compras > div { display: grid; grid-template-columns: 42px 1fr auto; gap: 8px; font-size: 13px; padding: 5px 0; border-top: 1px solid var(--linha); }
.cc-compras em { font-style: normal; color: var(--apagado); font-variant-numeric: tabular-nums; }
.cc-compras small { display: block; font-size: 11.5px; color: var(--apagado); }

/* ================================================================ pessoas (ranking) */
.gente { display: flex; flex-direction: column; gap: 14px; }
.gente-busca { margin-left: 0; width: 100%; max-width: 420px; }
.gente-busca input { width: 100% !important; }
.gente-lista { display: flex; flex-direction: column; gap: 6px; }
.gp { display: grid; grid-template-columns: 38px minmax(0, 1fr) 84px 60px 90px; align-items: center; gap: 10px;
  padding: 10px 14px; border: 0; border-radius: 14px; background: var(--painel); text-align: left; transition: background .12s; }
.gp:hover { background: var(--painel2); }
.gp-pos { font-style: normal; font-family: var(--redonda); font-size: 20px; color: var(--marca); text-align: center; }
.gp-nome { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.gp-nome b { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.gp-nome small { flex-basis: 100%; font-size: 12.5px; color: var(--apagado); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-rel { font-size: 11px; color: var(--azul-claro); background: rgba(143, 180, 214, .12); padding: 1px 8px; border-radius: 8px; }
.gp-num { display: flex; flex-direction: column; align-items: flex-end; }
.gp-num b { font-family: var(--redonda); font-size: 17px; }
.gp-num small { font-size: 11px; color: var(--apagado); }
.gp-quando { font-size: 12.5px; color: var(--fraco); text-align: right; }
.gp-quando.velho { color: var(--aviso); }
.gente-antiga { background: var(--painel); border-radius: 14px; padding: 10px 14px; }
.gente-antiga summary { cursor: pointer; color: var(--fraco); font-size: 14px; }
.gente-antiga .sub { display: none; }
.gf-pos { color: var(--marca); font-weight: 600; font-size: 12px; }
.gf-nome { margin: 2px 0; font-size: 22px; letter-spacing: -.01em; }
.gf-sub { color: var(--fraco); font-size: 13.5px; }
.gf-alerta { display: flex; gap: 8px; align-items: center; background: rgba(220, 100, 78, .12); color: #f0a58f; border-radius: 12px; padding: 10px 12px; font-size: 14px; }
.gf-alerta .ic { width: 18px; height: 18px; }
.gf-dados { display: flex; flex-direction: column; gap: 4px; }
.gf-dados > a, .gf-dados > div { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--painel); color: var(--texto); font-size: 14.5px; }
.gf-dados .ic { width: 18px; height: 18px; color: var(--marca); }
.gf-dados small { display: block; font-size: 12px; color: var(--apagado); }
.gf-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.gf-nums div { background: var(--painel); border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; }
.gf-nums b { font-family: var(--redonda); font-size: 20px; }
.gf-nums small { font-size: 11px; color: var(--apagado); line-height: 1.2; }
.gf-resumo button { width: 100%; height: 44px; border: 1px dashed var(--linha-forte); border-radius: 12px; background: none; color: var(--marca);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 550; }
.gf-resumo p { margin: 0; background: var(--painel); border-left: 4px solid var(--marca); border-radius: 12px; padding: 10px 12px; font-size: 14px; line-height: 1.5; }
.gf-tarefa { padding: 7px 2px; font-size: 14px; cursor: pointer; border-top: 1px solid var(--linha); }
.gf-msgs h4 { margin: 4px 2px 8px; font-size: 13px; color: var(--apagado); text-transform: uppercase; letter-spacing: .07em; }
.gf-msgs > div { max-width: 88%; background: var(--painel); border-radius: 12px 12px 12px 4px; padding: 7px 10px; margin-bottom: 6px; font-size: 13.5px; line-height: 1.4; }
.gf-msgs > div.eu { margin-left: auto; background: rgba(95, 174, 132, .16); border-radius: 12px 12px 4px 12px; }
.gf-msgs small { display: block; font-size: 10.5px; color: var(--apagado); margin-top: 2px; text-align: right; }
@media (max-width: 700px) {
  .gp { grid-template-columns: 30px minmax(0, 1fr) 64px; }
  .gp .gp-num:nth-of-type(2), .gp-quando { display: none; }
  .gf-nums { grid-template-columns: repeat(2, 1fr); }
}

/* pulso: continuidade e a pausa de 1 minuto */
.p-sim.continua { box-shadow: 3px 0 0 var(--marca) inset; background: linear-gradient(90deg, var(--marca-fraca), transparent 70%), var(--painel); }
.p-guia p { margin: 0; display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; color: var(--fraco); }
.p-guia p .ic { color: var(--azul-claro); width: 18px; height: 18px; margin-top: 2px; flex: none; }
.p-guia p b { color: var(--texto); }
.p-respira { display: flex; align-items: center; gap: 16px; margin-top: 12px; background: var(--painel); border-radius: 16px; padding: 12px 14px; }
.p-bola { width: 108px; height: 108px; flex: none; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle, rgba(143, 180, 214, .35), rgba(143, 180, 214, .08)); border: 2px solid rgba(143, 180, 214, .5);
  transform: scale(.78); transition: transform 4s ease-in-out; text-align: center; }
.p-bola span { font-size: 14px; font-weight: 650; line-height: 1.2; padding: 0 6px; }
.p-bola em { font-style: normal; font-size: 11px; color: var(--fraco); margin-top: 2px; }
.p-bola.enche, .p-bola.cheia { transform: scale(1); }
.p-bola.esvazia, .p-bola.vazia { transform: scale(.78); }
.p-respira button { flex: 1; height: 48px; border: 0; border-radius: 12px; background: var(--azul-claro); color: var(--tinta); font-weight: 650; }
.p-respira button:disabled { opacity: .55; }
.p-pergunta { display: flex; flex-direction: column; gap: 6px; }
.p-pergunta > span { font-size: 14px; font-weight: 600; }
.p-bts { display: flex; flex-wrap: wrap; gap: 6px; }
.p-bts button { height: 42px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--painel); color: var(--fraco); font-size: 14px; }
.p-bts button.ativo { background: var(--ok); color: var(--tinta); font-weight: 650; }
.p-pronto { height: 52px; border: 0; border-radius: 14px; background: var(--marca); color: #1a0f08; font-weight: 700; font-size: 15.5px; }
.p-pronto:disabled { background: var(--painel); color: var(--apagado); font-weight: 500; }
.vl-be { margin: 12px 0 0; font-size: 13.5px; color: var(--fraco); }
.vl-be b { color: var(--azul-claro); }

/* pulso: o Tião falando em primeira pessoa */
.p-tiao { display: flex; gap: 12px; align-items: flex-start; }
.p-tiao img { width: 46px; height: 46px; border-radius: 14px; flex: none; background: var(--painel); object-fit: cover; }
.p-tiao > div { flex: 1; min-width: 0; }
.p-tiao small { display: block; font-size: 12px; color: var(--marca); font-weight: 650; letter-spacing: .02em; }
.p-tiao p { margin: 4px 0 0; font-size: 17.5px; line-height: 1.38; font-weight: 600; color: var(--texto);
  background: var(--painel); border-radius: 4px 16px 16px 16px; padding: 10px 13px; }
body.em-quadro .p-tiao p { font-size: 20px; }
.p-dito { font-size: 13.5px; color: var(--ok); background: rgba(95, 174, 132, .1); border-radius: 12px; padding: 8px 12px; line-height: 1.4; }
#pulso-toast { position: fixed; z-index: 310; left: 50%; bottom: 28px; width: min(460px, calc(100vw - 32px));
  transform: translate(-50%, 30px); opacity: 0; pointer-events: none; transition: transform .25s, opacity .25s;
  background: var(--painel2); border: 1px solid var(--linha-forte); border-radius: 18px; padding: 12px 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .45); }
#pulso-toast.aberto { transform: translate(-50%, 0); opacity: 1; }
#pulso-toast .p-tiao p { font-size: 15px; font-weight: 550; }
@media (max-width: 700px) { #pulso-toast { bottom: calc(96px + env(safe-area-inset-bottom)); } }

/* ================================================================ widgets do Modo painel */
.quadro { grid-template-rows: auto auto minmax(0, 1fr) auto auto auto; gap: 14px; }
.qw { background: var(--painel); border-radius: 20px; padding: 10px 14px 12px; min-width: 0; overflow: hidden; display: flex; flex-direction: column; }
.qw-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.qw-cab h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--apagado); font-weight: 600; }
.qw-cab h2 .ic { width: 17px; height: 17px; }
.qw-bt { width: 34px; height: 34px; flex: none; border: 0; border-radius: 10px; background: var(--fundo2); color: var(--apagado);
  display: grid; place-items: center; opacity: .75; transition: opacity .15s, color .15s; }
.qw-bt:hover { opacity: 1; color: var(--texto); }
.qw-bt .ic { width: 16px; height: 16px; }
.qw-corpo { min-height: 0; }
.qw-oculto { display: none; font-size: 13px; color: var(--apagado); padding: 2px 0; }
.qw-oculto .ic { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; }
.qw.min .qw-corpo { display: none; }
.qw.min .qw-oculto { display: block; }
.qw.min { padding-bottom: 8px; }
/* os blocos que já tinham fundo próprio: o widget empresta o fundo */
.qw-kpis, .qw-din { background: transparent; padding: 0; }
.qw-kpis .qw-cab, .qw-din .qw-cab { padding: 0 4px; }
.qw-kpis.min, .qw-din.min { background: var(--painel); padding: 10px 14px 8px; }
.qw.q-col { padding: 12px 8px 10px; }
.qw.q-col .qw-cab { padding: 0 6px; }
.q-col h2 { font-size: 13px; }
.q-discreto { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border: 0; border-radius: 21px;
  background: var(--painel); color: var(--fraco); font-size: 14px; margin-left: 12px; }
.q-discreto .ic { width: 18px; height: 18px; }
.q-discreto.ativo { background: var(--marca-fraca); color: #eaa57e; }
/* horas do dia no painel */
.qh-linha { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; }
.qh { min-height: 46px; border-radius: 9px; background: var(--fundo2); padding: 4px 5px; display: flex; flex-direction: column; gap: 1px;
  border: 0; text-align: left; min-width: 0; overflow: hidden; color: var(--texto); }
.qh em { font-style: normal; font-size: 11px; color: var(--apagado); }
.qh span { font-size: 10.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qh.feita { background: color-mix(in srgb, var(--c) 24%, var(--fundo2)); box-shadow: 0 3px 0 var(--c) inset; }
.qh.buraco { border: 1.5px dashed var(--aviso); background: none; cursor: pointer; }
.qh.buraco span { color: var(--aviso); }
.qh.agora { box-shadow: 0 0 0 1.5px var(--marca) inset; }
.qh-resumo { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin-top: 8px; font-size: 13.5px; color: var(--fraco); }
.qh-resumo b { color: var(--texto); font-family: var(--redonda); }
.qh-resumo .ok { color: var(--ok); }
.qh-resumo button { margin-left: auto; height: 34px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--aviso); color: var(--tinta); font-weight: 650; }
.din h2.secao .din-ocultar { margin-left: auto; margin-right: 14px; cursor: pointer; }
@media (max-width: 1000px) { .q-discreto span { display: none; } }
@media (max-width: 700px) { .qh-linha { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.din.min > *:not(h2) { display: none; }
.din.min h2.secao { color: var(--apagado); }
.p-como { margin-top: 8px !important; font-size: 13.5px !important; }
.p-como .ic { color: var(--marca) !important; }
/* painel: colunas nunca espremidas; se não couber, o painel rola */
.quadro { overflow-y: auto; }
.q-colunas { min-height: 230px; }
.quadro .q-kpi { padding: 12px 18px; }
.quadro .q-num { font-size: 46px; }
.qh { min-height: 40px; }
/* painel: altura livre, cada faixa com o tamanho dela (sem sobrepor) */
.quadro { height: auto; min-height: 100dvh; grid-template-rows: auto auto minmax(230px, auto) auto auto auto; }
.q-colunas .qw.q-col { max-height: 320px; }

/* ====================================================== Canteiro (21/09/2026)
   Ideias como etapa do quadro, a estrutura eixo › área › projeto e o seletor
   de área que toda tarefa passa a exigir. */

.voo-falta { color: var(--aviso); font-weight: 650; }

/* --- filtros: o eixo vem antes da área --- */
.vf.eixo { font-weight: 650; }
.vf-risco { width: 1px; align-self: stretch; background: var(--linha); margin: 2px 4px; }

/* --- coluna de ideias --- */
.vq.vq-ideias { background: color-mix(in srgb, var(--aviso) 7%, var(--fundo2)); }
.vq.vq-ideias header small { color: var(--aviso); }
.vq-nova { display: flex; align-items: center; gap: 6px; padding: 0 8px 8px; }
.vq-nova .ic { color: var(--aviso); flex: none; }
.vq-nova input { flex: 1; min-width: 0; height: 34px; border: 1px solid var(--linha); border-radius: 9px;
  background: var(--fundo); color: var(--texto); padding: 0 10px; font-size: 13.5px; }
.vq-nova button { flex: none; width: 34px; height: 34px; border: 0; border-radius: 9px;
  background: var(--aviso); color: var(--tinta); display: grid; place-items: center; cursor: pointer; }

/* o card de ideia empilha: texto em cima, decisão embaixo (o .vc normal é
   linha, por causa do botão de concluir, que a ideia não tem) */
.vc.ideia { flex-direction: column; align-items: stretch; gap: 8px;
  border-left-style: dashed; border-left-width: 4px; padding: 10px 10px 10px 8px; }
.vc.ideia .vc-corpo { cursor: pointer; width: 100%; }
.vc.ideia .vc-corpo b { display: block; }
.vc-ideia-acoes { display: flex; gap: 4px; padding: 0; }
.vc-ideia-acoes button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
  height: 30px; border: 1px solid var(--linha); border-radius: 8px; background: var(--fundo);
  color: var(--fraco); font-size: 12px; cursor: pointer; }
.vc-ideia-acoes button:hover { border-color: var(--marca); color: var(--marca); }
.vc-ideia-acoes .descartar:hover { border-color: var(--alerta); color: var(--alerta); }
.vc-ideia-acoes .ic { width: 15px; height: 15px; }

/* --- Projetos: eixo › área › projeto --- */
.voo-arvore { display: flex; flex-direction: column; gap: 26px; }
.va-eixo > header { display: flex; align-items: baseline; gap: 12px; padding-bottom: 8px;
  border-bottom: 2px solid color-mix(in srgb, var(--c) 45%, transparent); margin-bottom: 14px; }
.va-eixo > header h2 { margin: 0; font-size: 20px; }
.va-eixo > header em { font-style: normal; font-size: 13px; color: var(--fraco); }
.va-eixo.orfaos > header { border-color: var(--aviso); }
.va-area { margin-bottom: 18px; }
.va-area h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 15px; }
.va-area h3 i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none; }
.va-area h3 em { font-style: normal; font-size: 12.5px; color: var(--fraco); font-weight: 400; }
.va-area .calmo { margin: 0 0 6px 17px; font-size: 13px; }


/* --- atividades do projeto: a mesma tarefa em forma de lista (21/09/2026) ---
   Minimalista de propósito: uma linha por atividade, colunas alinhadas
   (começou · corrido · tempo apontado · prazo) e a bolinha da esquerda fecha
   sem sair do projeto. */
.vat-bloco { display: flex; flex-direction: column; }
.vat-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 10px; }
.vat-cab h3 { margin: 0; font-size: 16px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.vat-cab h3 em { font-style: normal; font-size: 12.5px; color: var(--fraco); font-weight: 400; }
.vat-atras { color: var(--alerta); }
.vat-ferr { display: flex; align-items: center; gap: 8px; }
.vat-sel { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px;
  border: 1px solid var(--linha); border-radius: 9px; background: var(--fundo2); color: var(--fraco); }
.vat-sel .ic { width: 15px; height: 15px; }
.vat-sel select { border: 0; background: none; color: var(--texto); font: inherit; font-size: 13px;
  cursor: pointer; outline: none; }
.vat-ver { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  border: 1px solid var(--linha); border-radius: 9px; background: var(--fundo2); color: var(--fraco);
  cursor: pointer; font-size: 13px; }
.vat-ver.ativo { border-color: var(--marca); color: var(--marca); }
.vat-ver .ic { width: 15px; height: 15px; }
.vat-reg { display: grid; grid-template-columns: 1fr 72px 56px 64px 132px; gap: 10px;
  padding: 0 12px 6px 42px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--apagado); border-bottom: 1px solid var(--linha); }
.vat-reg span:not(:first-child) { text-align: right; }
.vat-grupo { padding-top: 4px; }
.vat-grupo h4 { display: flex; align-items: center; gap: 8px; margin: 16px 0 4px; font-size: 13px;
  font-weight: 600; color: var(--texto); }
.vat-grupo h4 i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
.vat-grupo h4 em { font-style: normal; font-size: 11.5px; color: var(--apagado); font-weight: 400; }
.vat { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 8px;
  padding: 7px 12px 7px 8px; border-radius: 9px; border-bottom: 1px solid var(--linha);
  transition: background .12s, opacity .18s, transform .18s; }
.vat:hover { background: var(--fundo2); }
.vat.saindo { opacity: 0; transform: translateX(14px); }
.vat-ok { width: 20px; height: 20px; margin-left: 4px; border: 1.6px solid var(--linha-forte);
  border-radius: 50%; background: none; color: transparent; cursor: pointer; display: flex;
  align-items: center; justify-content: center; flex: none; padding: 0; }
.vat-ok .ic { width: 12px; height: 12px; }
.vat-ok:hover { border-color: var(--marca); color: var(--marca); }
.vat.ok .vat-ok { background: var(--marca); border-color: var(--marca); color: #fff; }
.vat-txt { display: flex; align-items: center; gap: 8px; min-width: 0; cursor: pointer; }
.vat-txt b { font-weight: 500; font-size: 14px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; min-width: 0; }
.vat.ok .vat-txt b, .vat.off .vat-txt b { color: var(--apagado); }
.vat.off .vat-txt b { text-decoration: line-through; }
.vat-num { color: var(--apagado); font-size: 11.5px; font-variant-numeric: tabular-nums; flex: none; }
.vat-alta { color: var(--alerta); display: flex; flex: none; }
.vat-alta .ic { width: 13px; height: 13px; }
.vat-sub, .vat-quem { display: inline-flex; align-items: center; gap: 4px; flex: none; height: 19px;
  padding: 0 7px; border-radius: 6px; background: var(--fundo2); color: var(--fraco); font-size: 11px; }
.vat-sub .ic { width: 12px; height: 12px; }
.vat-sub.cheio { color: var(--marca); }
.vat-cols { display: grid; grid-template-columns: 72px 56px 64px 132px; gap: 10px; align-items: center;
  font-size: 11.5px; color: var(--apagado); font-variant-numeric: tabular-nums; }
.vat-cols > span { text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vat-h.tem { color: var(--fraco); font-weight: 600; }
.vat-dur.velha { color: var(--aviso); }
.vat-fim { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.vat-fim .ic { width: 12px; height: 12px; }
.vat.ok .vat-fim { color: var(--marca); }
.vat-sd { font-style: normal; color: var(--apagado); opacity: .7; }
.vat .vp { font-size: 11px; height: 20px; }
.vpj-desde { display: block; margin-top: 6px; font-size: 11px; color: var(--apagado); }
.vpd-nums div.ruim b { color: var(--alerta); }
@media (max-width: 720px) {
  .vat-reg { display: none; }
  .vat { grid-template-columns: 26px 1fr; row-gap: 2px; }
  .vat-cols { grid-column: 2; grid-template-columns: repeat(4, auto); justify-content: start; gap: 8px; }
  .vat-cols > span { text-align: left; }
}

/* --- detalhe do projeto: histórico, não oficina --- */
.vpd { display: flex; flex-direction: column; gap: 18px; }
.vpd-voltar { align-self: flex-start; display: flex; align-items: center; gap: 6px; height: 32px;
  padding: 0 12px; border: 1px solid var(--linha); border-radius: 9px; background: var(--fundo2);
  color: var(--fraco); cursor: pointer; font-size: 13px; }
.vpd > header h2 { margin: 0 0 6px; font-size: 24px; }
.vpd > header p { margin: 6px 0 0; color: var(--fraco); font-size: 14px; max-width: 70ch; }
.vpd-passo { display: flex; align-items: center; gap: 6px; color: var(--marca) !important; }
.vpd-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.vpd-tags span { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px;
  border-radius: 7px; background: var(--fundo2); color: var(--fraco); font-size: 12px; }
.vpd-area i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.vpd-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.vpd-nums div { background: var(--fundo2); border-radius: var(--raio); padding: 12px 14px; }
.vpd-nums b { display: block; font-family: var(--redonda); font-size: 26px; line-height: 1.1; }
.vpd-nums span { font-size: 12px; color: var(--fraco); }
.vpd-periodo { margin: 0; font-size: 13px; color: var(--fraco); }
.vpd-ritmo { display: flex; align-items: flex-end; gap: 6px; height: 108px; padding: 10px 12px;
  background: var(--fundo2); border-radius: var(--raio); overflow-x: auto; position: relative; }
.vpd-ritmo > div { display: flex; align-items: flex-end; gap: 2px; height: 72px; flex: none; position: relative; }
.vpd-ritmo i { display: block; width: 9px; border-radius: 3px 3px 0 0; min-height: 2px; }
.vpd-ritmo .cri { background: color-mix(in srgb, var(--c) 30%, transparent); }
.vpd-ritmo .fei { background: var(--c); }
.vpd-ritmo span { position: absolute; bottom: -16px; left: 0; font-size: 10px; color: var(--apagado); }
.vpd-ritmo small { position: absolute; top: 8px; right: 12px; font-size: 11px; color: var(--apagado); }
.vpd-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.vpd-colunas h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 15px; }
.vpd-colunas h3 em, .vpd-colunas h4 em { font-style: normal; font-size: 12px; color: var(--apagado); }
.vpd-colunas h4 { margin: 16px 0 8px; font-size: 13.5px; color: var(--fraco); }
.vpd-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.vpd-hist li { display: flex; gap: 10px; align-items: baseline; padding: 7px 10px; border-radius: 8px;
  background: var(--fundo2); font-size: 13.5px; }
.vpd-hist li span { flex: 1; min-width: 0; }
.vpd-hist li em { font-style: normal; font-size: 11.5px; color: var(--apagado); flex: none; }
.vpd-hist.off li span { text-decoration: line-through; color: var(--apagado); }
.vpd-linha h3 { margin: 0 0 10px; font-size: 15px; }
.vpd-linha > div { display: flex; gap: 12px; padding: 6px 0; border-left: 2px solid var(--linha);
  padding-left: 14px; margin-left: 6px; font-size: 13.5px; }
.vpd-linha em { font-style: normal; color: var(--apagado); font-size: 12px; flex: none; width: 40px; }
@media (max-width: 800px) { .vpd-colunas { grid-template-columns: 1fr; } }

/* --- escolher a área: dois toques --- */
#voo-area { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  opacity: 0; transition: opacity .18s; }
#voo-area.aberto { opacity: 1; }
.vsa-veu { position: absolute; inset: 0; background: color-mix(in srgb, var(--tinta) 55%, transparent);
  backdrop-filter: blur(2px); }
.vsa { position: relative; width: min(560px, calc(100vw - 32px)); max-height: 86dvh; overflow-y: auto;
  background: var(--fundo); border: 1px solid var(--linha-forte); border-radius: 18px; padding: 22px 22px 18px;
  box-shadow: 0 24px 60px color-mix(in srgb, var(--tinta) 35%, transparent); }
.vsa h3 { margin: 0 0 4px; font-size: 19px; }
.vsa-item { margin: 0 0 18px; color: var(--fraco); font-size: 14px; }
.vsa-eixo { margin-bottom: 16px; }
.vsa-eixo h4 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; font-size: 14px; color: var(--c); }
.vsa-eixo h4 small { color: var(--apagado); font-weight: 400; font-size: 12px; }
.vsa-areas { display: flex; flex-wrap: wrap; gap: 7px; }
.vsa-areas button { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px;
  border: 1px solid var(--linha); border-radius: 11px; background: var(--fundo2); color: var(--texto);
  font-size: 14px; cursor: pointer; }
.vsa-areas button:hover, .vsa-areas button.ativo { border-color: var(--c); background: color-mix(in srgb, var(--c) 14%, var(--fundo2)); }
.vsa-areas button i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none; }
.vsa-cancelar { width: 100%; height: 40px; margin-top: 6px; border: 0; border-radius: 11px;
  background: var(--fundo2); color: var(--fraco); cursor: pointer; }

/* --- pôr a tarefa na agenda (ou tirar) --- */
.vs-agenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vs-agenda input[type=time] { height: 34px; border: 1px solid var(--linha); border-radius: 9px;
  background: var(--fundo); color: var(--texto); padding: 0 8px; }
.vs-agenda button { height: 34px; padding: 0 12px; border: 1px solid var(--linha); border-radius: 9px;
  background: var(--fundo2); color: var(--fraco); cursor: pointer; font-size: 13px;
  display: inline-flex; align-items: center; gap: 6px; }
.vs-agenda button.por { border-color: var(--marca); color: var(--marca); }
.vs-agenda button .ic { width: 15px; height: 15px; }
.vs-agenda small { color: var(--apagado); font-size: 12px; }
.vs-naagenda { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px;
  border-radius: 9px; background: color-mix(in srgb, var(--ok) 16%, var(--fundo2)); color: var(--ok); font-size: 13px; }
.vs-naagenda .ic { width: 15px; height: 15px; }

/* --- filtros em lista: eixo › área › projeto --- */
.vfl { display: inline-flex; align-items: center; gap: 7px; }
.vfl > span { font-size: 12px; color: var(--apagado); }
.vfl select, .vf-sel { height: 34px; border: 1px solid var(--linha); border-radius: 9px;
  background: var(--fundo2); color: var(--texto); padding: 0 8px; font-size: 13.5px; max-width: 220px; }
.vf-flag { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--fraco); cursor: pointer; }

/* --- a coluna das descartadas --- */
.vq[data-col="cancelada"] { opacity: .72; }
.vq[data-col="cancelada"] .vc b { text-decoration: line-through; }

/* --- subtarefas dentro da tarefa --- */
.vs-sub { margin-top: 4px; }
.vs-sub h4 { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; font-size: 13.5px; color: var(--fraco); }
.vs-sub h4 .ic { width: 16px; height: 16px; }
.vs-sub h4 em { font-style: normal; color: var(--apagado); font-size: 12px; }
.vsb { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.vsb-ok { flex: none; width: 28px; height: 28px; border: 0; border-radius: 8px; background: none;
  color: var(--apagado); display: grid; place-items: center; cursor: pointer; }
.vsb.feita .vsb-ok { color: var(--ok); }
.vsb input { flex: 1; min-width: 0; height: 32px; border: 1px solid transparent; border-radius: 8px;
  background: var(--fundo2); color: var(--texto); padding: 0 9px; font-size: 13.5px; }
.vsb input:focus { border-color: var(--linha-forte); outline: none; }
.vsb.feita input { text-decoration: line-through; color: var(--apagado); }
.vsb-x { flex: none; width: 26px; height: 26px; border: 0; border-radius: 7px; background: none;
  color: var(--apagado); display: grid; place-items: center; cursor: pointer; opacity: 0; }
.vsb:hover .vsb-x { opacity: 1; }
.vsb-x:hover { color: var(--alerta); }
.vsb-nova { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.vsb-nova .ic { color: var(--apagado); flex: none; width: 16px; height: 16px; margin-left: 6px; }
.vsb-nova input { flex: 1; min-width: 0; height: 32px; border: 1px dashed var(--linha); border-radius: 8px;
  background: none; color: var(--texto); padding: 0 9px; font-size: 13.5px; }

/* --- escolher a frente de obra ao começar uma tarefa --- */
#voo-proj { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  opacity: 0; transition: opacity .18s; }
#voo-proj.aberto { opacity: 1; }
.vsa-nota { margin: -8px 0 16px; font-size: 13.5px; color: var(--fraco); }
.vsa-novo { display: flex; align-items: center; gap: 7px; margin: 14px 0 6px; }
.vsa-novo .ic { color: var(--apagado); flex: none; width: 16px; height: 16px; }
.vsa-novo input { flex: 1; min-width: 0; height: 38px; border: 1px dashed var(--linha-forte);
  border-radius: 11px; background: none; color: var(--texto); padding: 0 12px; font-size: 14px; }
.vsa-novo button { flex: none; height: 38px; padding: 0 16px; border: 0; border-radius: 11px;
  background: var(--marca); color: #fff; cursor: pointer; font-size: 14px; }
.vsa-outros { margin-top: 12px; }
.vsa-outros summary { cursor: pointer; font-size: 13px; color: var(--fraco); margin-bottom: 8px; }

/* --- Parametrizações --- */
.par-eixo { margin-bottom: 28px; }
.par-eixo > header { display: flex; align-items: baseline; gap: 12px; padding-bottom: 8px;
  border-bottom: 2px solid color-mix(in srgb, var(--c) 45%, transparent); margin-bottom: 14px; }
.par-eixo > header h2 { margin: 0; font-size: 19px; }
.par-eixo > header small { color: var(--fraco); font-size: 13px; flex: 1; }
.par-eixo > header button { display: inline-flex; align-items: center; gap: 6px; height: 32px;
  padding: 0 12px; border: 1px solid var(--linha); border-radius: 9px; background: var(--fundo2);
  color: var(--texto); cursor: pointer; font-size: 13px; }
.par-eixo > header button .ic { width: 15px; height: 15px; }
.par-lista { display: flex; flex-direction: column; gap: 7px; }
.par-a { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: var(--raio);
  background: var(--fundo2); border-left: 4px solid var(--c); }
.par-a > i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
.par-a-nome { flex: 1; min-width: 0; }
.par-a-nome b { display: block; font-size: 15px; }
.par-a-nome small { color: var(--fraco); font-size: 12.5px; }
.par-a > button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px;
  border: 1px solid var(--linha); border-radius: 8px; background: var(--fundo); color: var(--fraco);
  cursor: pointer; font-size: 12.5px; }
.par-a > button .ic { width: 14px; height: 14px; }
.par-form { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--raio);
  background: var(--fundo2); border-left: 4px solid var(--c); margin-bottom: 7px; }
.par-linha { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.par-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--apagado); }
.par-form label.cresce { flex: 1; min-width: 200px; }
.par-form input[type=text], .par-form input:not([type]), .par-form input[type=number], .par-form select {
  height: 36px; border: 1px solid var(--linha); border-radius: 9px; background: var(--fundo);
  color: var(--texto); padding: 0 10px; font-size: 14px; }
.par-form input[type=number] { width: 90px; }
.par-check { flex-direction: row !important; align-items: center; gap: 7px !important;
  font-size: 13px !important; color: var(--fraco) !important; cursor: pointer; }
.par-cores { display: flex; flex-wrap: wrap; gap: 6px; }
.par-cor { width: 26px; height: 26px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; }
.par-cor.ativo { border-color: var(--texto); }
.par-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.par-acoes button { height: 36px; padding: 0 16px; border: 1px solid var(--linha); border-radius: 9px;
  background: var(--fundo); color: var(--fraco); cursor: pointer; font-size: 14px; }
.par-acoes .par-ok { border: 0; background: var(--marca); color: #fff; font-weight: 600; }
.par-acoes .par-apagar { margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  border-color: transparent; color: var(--apagado); }
.par-acoes .par-apagar:hover { color: var(--alerta); border-color: var(--alerta); }
.par-acoes .par-apagar .ic { width: 15px; height: 15px; }
.par-nota { display: flex; align-items: flex-start; gap: 8px; margin-top: 26px; font-size: 13px;
  color: var(--fraco); }
.par-nota .ic { width: 16px; height: 16px; flex: none; margin-top: 1px; }

/* ---------------------------------- ordenação dentro da etapa (21/09/2026)
   Quando a etapa é ordenada por projeto ou por área, ela se parte em blocos
   com título e conta; nas outras ordens continua uma pilha só. */
.vq-grupo { display: flex; flex-direction: column; gap: 8px; }
.vq-grupo + .vq-grupo { margin-top: 12px; }
.vq-grupo h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 2px; padding: 0 2px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--fraco); }
.vq-grupo h4 i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; }
.vq-grupo h4 em { font-style: normal; font-weight: 600; color: var(--apagado);
  font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* ------------------------------- o cartão novo, com todos os campos (21/09/2026)
   O campo de uma linha continua para o que é rápido; "cartão completo" abre a
   mesma ficha suspensa, só que em branco, com eixo, área, projeto, descrição,
   data de entrega, prioridade e as subtarefas já listadas. */
.voo-nova-mais { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 38px;
  padding: 0 12px; border: 1px solid var(--linha-forte); border-radius: 10px; background: var(--fundo);
  color: var(--fraco); font-size: 13px; font-weight: 550; cursor: pointer; white-space: nowrap; }
.voo-nova-mais:hover { border-color: var(--marca); color: var(--marca); }
.voo-nova-mais .ic { width: 15px; height: 15px; }

.vs-novo .vs-num { color: var(--marca); font-weight: 650; }
.vs-lado select, .vs-lado input[type="date"], .vs-lado input[list] {
  width: 100%; height: 36px; border: 1px solid var(--linha); border-radius: 9px;
  background: var(--fundo); color: var(--texto); padding: 0 10px; font-size: 13.5px; }
.vs-lado input[type="date"] { color-scheme: dark; }
/* a descrição e o próximo passo estavam com a cara crua do navegador: agora
   seguem o mesmo traço escuro do resto da folha (22/09/2026) */
.vs-lado .vs-linha > textarea, .vs-lado .vs-linha > input[type="text"],
.vs-lado .vs-linha > input:not([type]) {
  width: 100%; border: 1px solid var(--linha); border-radius: 9px; background: var(--fundo);
  color: var(--texto); padding: 9px 10px; font-size: 13.5px; line-height: 1.45; resize: vertical; }
.vs-lado .vs-linha > input:not([type]) { height: 36px; padding: 0 10px; }
.vs-lado .vs-linha > textarea:focus, .vs-lado .vs-linha > input:focus,
.vs-lado select:focus, .vs-lado input[type="date"]:focus { outline: none; border-color: var(--marca); }
.vs-lado .vs-linha > textarea::placeholder, .vs-lado .vs-linha > input::placeholder { color: var(--apagado); }
.vs-linha > span i { font-style: normal; font-weight: 400; color: var(--apagado); font-size: 11.5px; }
.vn-regra { margin: -2px 0 2px; font-size: 12px; color: var(--fraco); line-height: 1.4; }
.vn-regra b { color: var(--texto); }
.vn-pri { display: flex; gap: 6px; }
.vn-pri button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  height: 34px; border: 1px solid var(--linha); border-radius: 9px; background: var(--fundo);
  color: var(--fraco); font-size: 13px; cursor: pointer; }
.vn-pri button.ativo { border-color: var(--marca); color: var(--marca); font-weight: 600; }
.vn-pri button.alta.ativo { border-color: var(--alerta); color: var(--alerta);
  background: color-mix(in srgb, var(--alerta) 10%, transparent); }
.vn-pri .ic { width: 14px; height: 14px; }
.vn-campo { display: flex; flex-direction: column; gap: 6px; }
.vn-campo > span { font-size: 13px; color: var(--apagado); font-weight: 600; }
.vn-campo > span i { font-style: normal; font-weight: 400; font-size: 11.5px; }
.vn-campo textarea { border: 1px solid var(--linha); border-radius: 12px; background: var(--fundo2);
  color: var(--texto); padding: 10px 12px; font: inherit; font-size: 14px; resize: vertical; }
.vn-vazio { margin: 0 0 4px; font-size: 12.5px; color: var(--apagado); }
@media (max-width: 760px) { .voo-nova-mais span { display: none; } }

/* ------------------------------ o projeto no cartão (21/09/2026)
   "Projeto na prática é o conjunto de tarefas agrupadas; toda tarefa está
   dentro de algum projeto." Entao ele ganha linha propria, logo abaixo do
   titulo, na cor da area — e quem nao tem projeto aparece marcado. */
.vc-proj { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; margin-top: 6px;
  padding: 2px 9px 2px 7px; border-radius: 8px; font-size: 12px; line-height: 1.5;
  color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.vc-proj .ic { width: 13px; height: 13px; flex: none; }
.vc-proj b { font-weight: 650; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-proj.falta { color: var(--aviso); background: color-mix(in srgb, var(--aviso) 13%, transparent); }
.vc.feita .vc-proj { opacity: .7; }
.vc-area { display: inline-flex; align-items: center; gap: 5px; }
.vc-area i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; }
.vc.ideia .vc-proj { margin-top: 0; }


/* ------------------------------------------- ficha do projeto (22/09/2026)
   O projeto virou coisa que se edita e se encerra na própria tela: descrição,
   área, data prevista de entrega e o botão que fecha a frente de obra. */
.vpd-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vpd-topo .vpd-voltar { align-self: center; }
.vpd-acoes { display: flex; gap: 8px; margin-left: auto; }
.vpd-bt { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  border: 1px solid var(--linha); border-radius: 9px; background: var(--fundo2);
  color: var(--fraco); cursor: pointer; font-size: 13px; }
.vpd-bt:hover { color: var(--texto); border-color: var(--linha-forte); }
.vpd-bt .ic { width: 15px; height: 15px; }
.vpd-bt.fim:hover { color: var(--ok); border-color: var(--ok); }
.vpd > header.fechado h2 { color: var(--fraco); text-decoration: line-through;
  text-decoration-color: var(--linha-forte); }
.vpd-tags .vpd-fim { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.vpd-tags .vpd-prazo { cursor: default; }
.vpd-tags .vpd-prazo.falta { cursor: pointer; border: 1px dashed var(--linha-forte);
  background: none; color: var(--apagado); }
.vpd-tags .vpd-prazo.atras { background: color-mix(in srgb, var(--alerta) 16%, transparent); color: var(--alerta); }
.vpd-tags .vpd-prazo.hoje { background: color-mix(in srgb, var(--aviso) 18%, transparent); color: var(--aviso); }
.vpd-tags .ic { width: 13px; height: 13px; }
.vpd-desc { white-space: pre-line; }
.vpd-desc.vazia { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  color: var(--apagado) !important; font-style: italic; }
.vpd-desc.vazia:hover { color: var(--marca) !important; }
.vpd-desc.vazia .ic { width: 14px; height: 14px; }
.vs-encerrar { margin-top: 10px; align-self: flex-end; display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 16px; border: 1px solid var(--linha); border-radius: 11px;
  background: none; color: var(--fraco); cursor: pointer; font-size: 13.5px; }
.vs-encerrar:hover { border-color: var(--alerta); color: var(--alerta); }
.vs-encerrar .ic { width: 16px; height: 16px; }

/* a prateleira do que já acabou */
.va-eixo.fechados > header { border-color: var(--linha); }
.va-eixo.fechados > header h2 { color: var(--fraco); }
.va-abrir { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 28px;
  padding: 0 11px; border: 1px solid var(--linha); border-radius: 8px; background: var(--fundo2);
  color: var(--fraco); cursor: pointer; font-size: 12.5px; }
.va-abrir .ic { width: 14px; height: 14px; }
.vpj.fechado { opacity: .72; border-top-color: var(--linha-forte); }
.vpj.fechado:hover { opacity: 1; }
.vpj-topo .vp.fim { display: inline-flex; align-items: center; gap: 4px; color: var(--ok); font-size: 11.5px; }
.vpj-topo .vp.fim .ic { width: 12px; height: 12px; }
.vpj-entrega { display: block; margin-top: 2px; font-size: 11.5px; color: var(--apagado); }

/* histórico do projeto (22/09/2026) */
.vpd-linha h3 em { font-style: normal; font-size: 12.5px; color: var(--apagado); font-weight: 400; margin-left: 8px; }
.vpd-linha > .vtl { display: grid; grid-template-columns: 74px 1fr; gap: 10px; padding: 7px 2px;
  border-top: 1px solid var(--linha); font-size: 13.5px; }
.vpd-linha > .vtl:first-of-type { border-top: 0; }
.vtl em { font-style: normal; color: var(--apagado); font-size: 12.5px; }
.vtl span i { font-style: normal; display: inline-block; margin-right: 8px; padding: 1px 7px;
  border-radius: 6px; background: var(--fundo2); color: var(--fraco); font-size: 11.5px; }
.vtl.tarefa span i { color: var(--ok); }
.vtl.decisao span i { color: var(--marca); }
.vtl.projeto span i { color: var(--aviso); }
@media (max-width: 640px) { .vpd-linha > .vtl { grid-template-columns: 1fr; gap: 2px; } }