/* Componentes que só a plataforma de gestão tem. Carregado DEPOIS de estilo.css,
   que traz a identidade, a porta de entrada, a barra com as abas e os blocos
   comuns (cartão, pílula, tabela, portão, marco, risco). Aqui ficam as quatro
   telas próprias: mapa dos espaços, mural, kanban e perfil. */

/* A regra herdada zera a margem de todo h3; nas colunas do cartão de projeto há
   VÁRIOS (Rubricas, Metas, Linha do tempo, Riscos, Anotação), e sem isto eles
   colam no bloco anterior. */
.cols h3:not(:first-child){margin-top:22px}

/* ============================== rubricas e metas ============================== */
table.rub td.k small{font-weight:400}
table.rub thead th{padding-bottom:6px}
/* O alvo da meta é frase ("≥ 100 trabalhos/ano, piso do edital"), não número
   curto: com `nowrap` ele sozinho empurrava a tabela para 1382px. */
table.met td.alvo{white-space:normal;color:var(--mata)}
table.met td:first-child{width:42%}
table.met td.alvo{width:33%}
/* "realizado" é o único campo editável da tabela: largura própria para o input
   não empurrar o alvo. */
table.met td.real{width:180px;color:var(--mata)}
.marco input:not(:disabled){cursor:pointer}
/* a fonte do marco pode ser nome de arquivo sem espaço ("Resultado_FINAL_01___
   Chamada_09_2026___Feiras.pdf"): sem quebra, a aba rolava de lado no celular */
.marco .fonte{overflow-wrap:anywhere}
.marco label{cursor:default}
.risco.g-baixa{border-left-color:var(--line)}
.fontes b,.lacunas b{font-weight:600}

/* ================================ lançamentos ================================ */
#form-despesa{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
  gap:9px;align-items:end;margin:14px 0 18px;padding:14px;border-radius:12px;
  background:var(--verde-nevoa);border:1px solid var(--line)}
#form-despesa label{display:flex;flex-direction:column;gap:4px;font-size:11px;
  color:var(--mist);font-family:var(--mono);letter-spacing:.05em;text-transform:uppercase}
#form-despesa input,#form-despesa select{font:inherit;font-size:14px;padding:8px 10px;
  border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--mata)}
#d-lancar{font:inherit;font-size:14px;font-weight:700;padding:9px 16px;border:0;
  border-radius:8px;background:var(--verde);color:#fff;cursor:pointer}
#d-lancar:hover{background:var(--verde-forte)}
table.desp td.v{text-align:right;font-family:var(--mono);color:var(--mata);white-space:nowrap}
table.desp th.dir{text-align:right}
.apagar{border:0;background:none;color:var(--mist);font-size:1.1rem;cursor:pointer;
  line-height:1;padding:0 5px}
.apagar:hover{color:var(--erro)}

/* ---- 28/09: editar lançamento, detalhe ao lado da rubrica, previsto x executado ---- */
/* O mesmo formulário lança e edita; em edição ele fica azul-aguarda, com a
   linha do que está aberto no alto e o Cancelar ao lado do Salvar. */
#form-despesa label.largo{grid-column:span 2}
#form-despesa.editando{background:var(--wait-soft);border-color:var(--wait);box-shadow:0 0 0 1px var(--wait)}
.form-modo{grid-column:1/-1;font-size:13.5px;color:var(--mata);line-height:1.5}
/* a sigla na cor do projeto passa 4,5:1 sobre branco, mas não sobre o azul
   do modo edição (4,3 no laranja e no ciano): vai num fundo branco */
.form-modo .proj-tag{vertical-align:-1px;background:var(--card);padding:1px 7px;border-radius:6px}
.d-botoes{display:flex;gap:8px;align-items:flex-end;grid-column:span 2}
#d-lancar:disabled{opacity:.6;cursor:wait}
#d-cancelar{font:inherit;font-size:14px;font-weight:600;padding:9px 14px;border-radius:8px;cursor:pointer;
  border:1px solid var(--line);background:var(--card);color:var(--mata)}
#d-cancelar:hover{border-color:var(--wait);color:var(--wait)}
/* Larguras na 1ª linha (thead): com table-layout:fixed é ela que manda. */
table.desp th.c-data{width:114px}
table.desp td.mono{white-space:nowrap}
table.desp th.c-proj{width:136px}
table.desp th.c-rub{width:17%}
table.desp th.c-sit{width:128px}
table.desp th.c-valor{width:112px}
table.desp th.c-acao{width:78px}
table.desp td small{display:block;font-size:11.5px;color:var(--mist);margin-top:3px;line-height:1.35}
table.desp small.det{color:var(--mata-80);font-weight:600;font-size:12px}
table.desp small.nota-antiga{font-style:italic}
table.desp small.editado{font-family:var(--mono);font-size:10.5px}
table.desp small.lida{font-family:var(--mono);font-size:10px;letter-spacing:.02em}
/* nº da nota, link do documento e o que falta para a prestação de contas (28/09) */
table.desp .comprova{display:flex;flex-wrap:wrap;gap:4px 8px;margin-top:6px;font-size:12px;line-height:1.4}
table.desp .comprova .nf{font-family:var(--mono);color:var(--mata-80);overflow-wrap:anywhere}
table.desp .comprova a.doc{color:var(--verde);font-weight:600}
table.desp .falta{font-family:var(--mono);font-size:10.5px;color:var(--warn);border:1px dashed var(--warn);
  border-radius:4px;padding:0 5px;white-space:nowrap}
table.desp tr[data-cor] td:first-child{box-shadow:inset 4px 0 0 var(--pc);padding-left:12px}
table.desp tr.editando td{background:#EEF3FB}
td.acoes{white-space:nowrap;text-align:right}
.editar{font:inherit;font-size:13px;line-height:1;padding:4px 7px;border-radius:7px;cursor:pointer;
  border:1px solid var(--line);background:var(--card);color:var(--mata-80);vertical-align:middle}
.editar:hover{border-color:var(--verde);color:var(--verde)}
select.sel-cor[data-cor]{border-left:5px solid var(--pc)}

/* Barra da rubrica: executado cheio, previsto hachurado por cima, na cor do
   projeto. Nunca passa de 100% na tela; quando o plano não cabe, o contorno
   âmbar e o aviso do bloco dizem quanto. */
.leg-barra{font-size:12.5px;color:var(--mist);margin:-4px 0 12px;display:flex;flex-wrap:wrap;
  align-items:center;gap:4px 8px;line-height:1.5}
.sw-ex,.sw-pv{display:inline-block;width:22px;height:9px;border-radius:99px;flex:0 0 auto}
.sw-ex{background:var(--mata-80)}
.sw-pv{background:repeating-linear-gradient(135deg,var(--mata-80) 0 2px,#E4EBE8 2px 5px)}
.bar.dupla{display:flex;height:9px;background:#E4EBE8}
.bar.dupla i{flex:0 0 auto;border-radius:0}
.bar.dupla .bar-ex{background:var(--pc,var(--verde))}
.bar.dupla .bar-pv{background:repeating-linear-gradient(135deg,var(--pc,var(--verde)) 0 2px,transparent 2px 5px)}
.bar.dupla.passa{outline:2px solid var(--warn);outline-offset:1px}
td.v.previsto{color:var(--wait);font-weight:600}
td.k small.passa{color:var(--warn);font-weight:600}
.aviso-passa{margin:12px 0 6px;padding:10px 13px;border-radius:10px;background:var(--warn-soft);
  color:var(--warn);font-size:13.5px;line-height:1.5;border-left:4px solid var(--warn)}
.aviso-passa b{font-weight:700}
/* a lista do aviso de executado sem termo, com o atalho "✎ marcar previsto" */
.aviso-itens{margin:8px 0 2px;padding-left:18px;color:var(--mata)}
.aviso-itens li{margin:5px 0;line-height:1.45}
.aviso-itens i{color:var(--warn)}
.aviso-itens .editar{margin-left:4px;font-size:12.5px;padding:3px 8px}
/* o placar diz quanto do executado não tem situação gravada: contorno de "confira" */
.tot.confira{border-color:var(--warn);box-shadow:inset 0 0 0 1px var(--warn)}
.tot.confira .s{color:var(--warn)}
#d-cancelar:disabled{opacity:.5;cursor:wait}
.aviso-passa.erro{background:#F8E1E1;color:var(--erro);border-left-color:var(--erro)}
.valor .d.prev{color:var(--wait);font-weight:600;font-family:var(--mono);font-size:12.5px;max-width:none}
.valor .d.conf{color:var(--warn);font-weight:600;font-family:var(--mono);font-size:12.5px;max-width:none}
table.rub th.c-k{width:27%}
table.rub th.c-b{width:auto}             /* a barra fica com o que sobra */
table.rub th.c-v{width:20%}
table.rub.rub6 th.c-k{width:30%}
table.rub.rub6 th.c-v{width:13%}
/* Colunas de número (correção de 28/09): o título vai à direita, como o valor,
   e cada coluna tem 10 px de vão à esquerda. Com o título à esquerda e o valor
   à direita, o "—" do executado encostava no "R$ 141.550" do previsto e a linha
   se lia "— R$ 141.550", um previsto negativo; no Financeiro cada valor ficava
   debaixo do título seguinte. No celular (≤ 600 px) a tabela vira bloco e o
   rótulo vem antes de cada valor: isto não vale lá.
   Entre 901 e ~1300 px o cartão de Projetos tem duas colunas e a tabela fica
   com 370–500 px: "R$ 141.550" não cabe numa linha. O valor pode quebrar SÓ no
   espaço depois do "R$" (overflow-wrap:normal: nunca no meio do número), e
   continua à direita, debaixo do título. */
@media (min-width:601px){
  table.rub th.c-v{text-align:right;padding-right:8px;padding-left:10px}
  table.rub td.v{padding-left:10px;font-variant-numeric:tabular-nums;white-space:normal;overflow-wrap:normal}
}
/* sub-linha por detalhe dentro da rubrica */
table.rub tr.sub-det td{padding-top:3px;padding-bottom:3px;font-size:12.5px;color:var(--mata-80);
  border-bottom:1px dashed var(--line)}
table.rub tr.sub-det td.k{padding-left:14px}
table.rub tr.sub-det td.k::before{content:"\2013\00a0";color:var(--mist)}
table.rub tr.sub-det td.v.usado,table.rub tr.sub-det td.v.previsto{font-weight:500}
.sub-n{font-family:var(--mono);font-size:10.5px;color:var(--mist);margin-left:6px}

/* ============================ cor por projeto (28/09) ============================ */
/* A cor chega por --pc/--pc-claro/--pc-texto, que a regra [data-cor="<id>"]
   (escrita pelo app em #cores-projetos a partir do dados.js) dá a quem carrega o
   atributo. É faixa, borda e bolinha ao lado da sigla — nunca fundo de pílula,
   que continua sendo de situação. Sem projeto ("a semana toda"), cinza neutro. */
.proj-tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-size:12.5px;
  font-weight:700;line-height:1.25;color:var(--pc-texto,var(--mata-80));white-space:nowrap}
.proj-bola{display:inline-block;flex:0 0 auto;width:10px;height:10px;border-radius:50%;
  background:var(--pc,#B5C4BD)}
.proj-tag.neutra{color:var(--mist);font-weight:600}
.proj-tag.neutra .proj-bola{background:transparent;box-shadow:inset 0 0 0 2px #B5C4BD}
.proj h2 .proj-bola,.quadro-t .proj-bola{width:12px;height:12px;margin-right:8px;vertical-align:1px}
.proj-marca{margin-bottom:7px}
/* O lado do título encolhe (a linha do edital quebra) para o valor ficar à
   direita: com o edital longo do PAINTER Juvan, o saldo caía para baixo do título. */
.proj .cab>div:first-child{flex:1 1 360px;min-width:0}
.proj-marca .proj-tag{font-size:13.5px}
.proj.com-cor{border-left:6px solid var(--pc,var(--line))}
.cal-p .proj-bola,.risco em .proj-bola{width:8px;height:8px;margin-right:4px}
/* a legenda do Planejamento: discreta, uma linha de marcas com a contagem */
.legenda-cor{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin:-4px 0 14px}
.leg-item{display:inline-flex;align-items:center;gap:6px}
.leg-n{font-family:var(--mono);font-size:10.5px;color:var(--mist)}

/* ============================== mapa em pixel art ============================== */
.mapa-topo{display:flex;gap:12px 22px;justify-content:flex-end;align-items:center;
  flex-wrap:wrap;margin-bottom:12px}
.mapa-ir{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.ir-b{font:inherit;font-size:12.5px;padding:6px 11px;border-radius:99px;cursor:pointer;
  border:1px solid var(--line);background:var(--card);color:var(--mata-80)}
.ir-b:hover{border-color:var(--verde);color:var(--verde)}
.mapa-caixa{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
/* Sem largura em CSS: quem define o tamanho é o `redimensionar()` do espacos.js,
   que pergunta ao canvas quanto vale 100% e casa o buffer com os pixels da tela.
   O `minmax(0,1fr)` acima é o que torna essa pergunta honesta: com `1fr` puro a
   coluna crescia até a largura do próprio canvas e a medida realimentava a si
   mesma. */
#mapa-tela{display:block;max-width:100%;border-radius:12px;
  border:1px solid var(--line);background:#1B2420;touch-action:none;
  image-rendering:pixelated;image-rendering:crisp-edges}
#mapa-tela:focus{outline:2px solid var(--verde);outline-offset:2px}
.mapa-ficha{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:15px;min-height:260px;font-size:14px}
/* `overflow-wrap:anywhere` no título, na ficha vazia e nas pílulas: o nome do
   equipamento é texto livre de até 60 caracteres, e sem espaço ele alargava o
   documento para 741 px no iPhone (390) e 1635 px a 1280 — medido em 14/09. */
.ficha-vazia{color:var(--mist);font-style:italic;line-height:1.5;overflow-wrap:anywhere}
.ficha-esp{border-left:3px solid var(--verde);padding-left:10px;margin-bottom:12px}
.ficha-sit{font-size:12.5px;color:var(--warn);margin-top:3px;line-height:1.4}
.ficha-t{font-family:var(--display);font-size:1.05rem;margin:0 0 8px;color:var(--mata);line-height:1.3;
  overflow-wrap:anywhere}
.mapa-ficha .pill{overflow-wrap:anywhere;white-space:normal;max-width:100%}
.ficha-v{font-family:var(--mono);font-size:1.3rem;font-weight:600;color:var(--mata);margin:12px 0 0}
.ficha-aviso{font-size:13px;color:var(--warn);line-height:1.5;margin:10px 0 0;
  padding:9px 11px;background:var(--warn-soft);border-radius:8px}
.ficha-resumo{font-size:13px;color:var(--mata-80);line-height:1.5;margin:12px 0 0;
  padding-top:11px;border-top:1px solid var(--line)}
.mapa-legenda{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.ir-falta{font-family:var(--mono);font-size:10px;background:var(--warn-soft);color:var(--warn);
  border-radius:99px;padding:1px 5px;margin-left:5px;font-weight:700}
#b-montar.on{background:var(--verde);color:#fff;border-color:var(--verde)}
/* Incluir e Montar quebram de linha JUNTOS: soltos na barra, o Montar ia sozinho
   para a segunda linha quando os cinco "Ir para" enchiam a primeira. */
.mapa-botoes{display:flex;gap:8px;flex:0 0 auto}
.ficha-acoes{margin-top:12px;display:flex;gap:8px}

/* ---- Incluir / Editar equipamento (14/09): um diálogo com a cara dos cartões ---- */
/* `margin:auto` de volta: o reset global (`*{margin:0}`) apaga o que centra o
   <dialog> na camada de cima, e ele ia parar colado no canto. */
dialog#dlg-equip{margin:auto;border:1px solid var(--line);border-radius:14px;background:var(--card);
  color:var(--mata);padding:0;width:min(560px,calc(100vw - 32px));
  max-height:calc(100vh - 32px);overflow:auto;
  box-shadow:0 18px 48px rgba(22,40,31,.22),0 1px 2px var(--shadow)}
dialog#dlg-equip::backdrop{background:rgba(22,40,31,.55)}
#form-equip{padding:20px 22px}
.dlg-t{font-family:var(--display);font-size:1.15rem;font-weight:800;color:var(--mata);
  margin:0 0 14px;line-height:1.25}
.eq-grade{display:grid;grid-template-columns:1fr 1fr;gap:11px 14px}
.eq-grade label{display:flex;flex-direction:column;gap:4px;min-width:0}
.eq-grade label span{font-size:11px;color:var(--mist);font-family:var(--mono);
  letter-spacing:.05em;text-transform:uppercase}
.eq-grade .eq-larga{grid-column:1/-1}
.eq-grade input,.eq-grade select{font:inherit;font-size:14px;padding:8px 10px;width:100%;min-width:0;
  border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--mata)}
.eq-grade input:focus,.eq-grade select:focus{outline:2px solid var(--verde);outline-offset:1px;
  border-color:var(--verde)}
/* No Editar, espaço e tipo ficam travados: mudar de lugar é no Montar. */
.eq-grade select:disabled{background:var(--paper);color:var(--mist);opacity:1}
.eq-dica{font-size:12.5px;color:var(--mist);line-height:1.5;margin:12px 0 0}
/* o motivo de não ter incluído, dentro do diálogo (role=alert); `hidden` esconde */
.eq-erro{font-size:13px;color:var(--warn);background:var(--warn-soft);border-radius:8px;
  padding:9px 11px;margin:12px 0 0;line-height:1.5;overflow-wrap:anywhere}
.eq-botoes{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.eq-botoes .pri{background:var(--verde);color:#fff;border-color:var(--verde);font-weight:700}
.eq-botoes .pri:hover{background:var(--verde-forte);border-color:var(--verde-forte);color:#fff}

/* ---- v4 (17/09): "dentro de <tenda>" no Incluir, e o crédito do boneco LPC ---- */
/* A marcação é uma linha só, com a cara de campo: o `.eq-grade label span`
   (rótulo em mono maiúsculo) não vale aqui — é frase, não rótulo. */
.eq-grade .eq-check{flex-direction:row;align-items:center;gap:9px;padding:9px 11px;
  border-radius:8px;background:var(--verde-nevoa);border:1px solid var(--line);cursor:pointer}
.eq-grade .eq-check input{width:auto;min-height:0;margin:0;accent-color:var(--verde);flex:0 0 auto}
.eq-grade .eq-check .eq-check-t{font-family:inherit;font-size:13.5px;color:var(--mata);
  letter-spacing:0;text-transform:none;line-height:1.4;overflow-wrap:anywhere}
.mapa-credito{margin-top:14px;font-family:var(--mono);font-size:11.5px;color:var(--mist);line-height:1.55}
.eq-grade .eq-nota{grid-column:1 / -1;margin:0;font-size:12.5px;color:var(--mata-80);line-height:1.45}
.ficha-sem-preco{border-left:3px solid var(--amber,#C9A35C);padding-left:10px}
.mapa-credito a{color:var(--mist)}
.ficha-acoes #f-girar{margin-left:0}

/* ---- zoom do mapa: − ⛶ +, a mesma pílula do laboratório da INPACTAS Central ---- */
.mapa-zoom{display:inline-flex;flex:0 0 auto;border:1px solid var(--line);background:var(--card);
  border-radius:99px;overflow:hidden;box-shadow:0 1px 2px var(--shadow)}
.mapa-zoom button{font:inherit;font-size:15px;font-weight:800;line-height:1;color:var(--verde-forte);
  border:0;background:transparent;min-width:38px;height:31px;padding:0 12px;cursor:pointer;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.mapa-zoom button+button{border-left:1px solid var(--line)}
.mapa-zoom button:hover:not(:disabled){background:var(--verde-nevoa)}
.mapa-zoom button:focus-visible{outline:2px solid var(--verde);outline-offset:-3px;border-radius:99px}
.mapa-zoom button[aria-pressed="true"]{background:var(--verde-suave);color:var(--verde)}
.mapa-zoom button:disabled{color:var(--mist);opacity:.45;cursor:default}
/* No dedo, 40 px de altura no mínimo — e o Montar acompanha, senão a barra fica
   com dois botões de alturas diferentes lado a lado. */
@media (max-width:600px),(pointer:coarse){
  .mapa-zoom button{height:40px;min-width:46px;font-size:17px}
  .mapa-topo #b-montar,.mapa-topo #b-incluir{min-height:40px}
  /* o diálogo em uma coluna, campos e botões com 40 px para o dedo, e rolando
     por dentro quando a tela é mais baixa que ele */
  .eq-grade{grid-template-columns:1fr}
  .eq-grade input,.eq-grade select{min-height:40px}
  .eq-botoes button{min-height:40px;flex:1 1 auto}
  #form-equip{padding:16px}
}

/* ---- modo montar: a paleta do que se pode instalar em cada espaço ---- */
.paleta{margin-top:14px;padding:14px 16px;border-radius:12px;background:var(--verde-nevoa);
  border:1px solid var(--line);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px 20px}
.pal-grupo{min-width:0}
.pal-t{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--mist);font-weight:600;margin-bottom:7px}
.pal-itens{display:flex;flex-wrap:wrap;gap:6px}
.pal-b{font:inherit;text-align:left;cursor:pointer;padding:7px 10px;border-radius:9px;
  border:1px solid var(--line);background:var(--card);color:var(--mata);
  display:flex;flex-direction:column;gap:1px;min-width:118px}
.pal-b:hover{border-color:var(--verde)}
.pal-b.on{border-color:var(--verde);background:var(--verde-suave);box-shadow:0 0 0 1px var(--verde)}
.pal-n{font-size:13px;line-height:1.25}
.pal-v{font-family:var(--mono);font-size:10.5px;color:var(--mist)}
.pal-b.on .pal-v{color:var(--verde-forte)}

.acao-item{margin-top:10px;padding:10px 14px;border-radius:10px;background:var(--card);
  border:1px solid var(--verde);display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.acao-n{font-size:14px;font-weight:600;flex:1 1 auto;overflow-wrap:anywhere}

/* ---- botões virtuais: quem abre no celular não tem setas nem tecla E ---- */
.controles{display:none;margin-top:14px;align-items:center;
  justify-content:space-between;gap:20px;user-select:none;-webkit-user-select:none}
.dpad{display:grid;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(3,52px);gap:4px}
.dp{font:inherit;font-size:19px;line-height:1;border:1px solid var(--line);
  background:var(--card);color:var(--verde-forte);border-radius:12px;cursor:pointer;
  touch-action:none;-webkit-tap-highlight-color:transparent}
.dp:active,.dp.press{background:var(--verde-suave);border-color:var(--verde)}
.dp.cima{grid-area:1/2} .dp.esq{grid-area:2/1} .dp.dir{grid-area:2/3} .dp.baixo{grid-area:3/2}
.acao{font:inherit;font-family:var(--display);font-size:24px;font-weight:800;
  width:78px;height:78px;border-radius:50%;cursor:pointer;touch-action:none;
  border:0;background:var(--verde);color:#fff;-webkit-tap-highlight-color:transparent}
.acao:active,.acao.press{background:var(--verde-forte)}
/* Aparecem quando a entrada principal é o dedo, e não o mouse. */
@media (hover:none) and (pointer:coarse){.controles{display:flex}}

/* =================================== mural =================================== */
#form-mural{padding:16px 18px}
.mural-linha{display:flex;gap:9px;align-items:center;margin-top:10px;flex-wrap:wrap}
.mural-linha select{font:inherit;font-size:13.5px;padding:7px 9px;border-radius:8px;
  border:1px solid var(--line);background:var(--card);color:var(--mata);flex:1 1 190px}
.recado-card{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:14px 17px;margin-bottom:10px;box-shadow:0 1px 2px var(--shadow)}
.recado-card.meu{border-left:3px solid var(--verde)}
.recado-cab{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:6px}
.recado-quem{font-weight:700;font-size:14px;color:var(--mata)}
.recado-quando{font-family:var(--mono);font-size:11px;color:var(--mist)}
.recado-t{font-size:14.5px;line-height:1.55;color:var(--mata);white-space:pre-wrap;
  overflow-wrap:anywhere}
.recado-pe{display:flex;align-items:center;gap:10px;margin-top:9px}

/* ================================== kanban ================================== */
#form-kanban{padding:16px 18px}
.kan-linha{display:flex;gap:9px;align-items:center;margin-top:10px;flex-wrap:wrap}
.kan-linha select,.kan-linha input{font:inherit;font-size:13.5px;padding:7px 9px;
  border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--mata);
  flex:1 1 140px;width:auto;max-width:none}
.kanban{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:start}
.coluna{background:var(--verde-nevoa);border:1px solid var(--line);border-radius:12px;
  padding:11px;min-height:130px}
.coluna.alvo{border-color:var(--verde);background:var(--verde-suave)}
.coluna-t{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--mist);font-weight:600;display:flex;justify-content:space-between;
  align-items:center;margin-bottom:9px}
.coluna-n{font-family:var(--mono);font-size:10.5px;color:var(--mist)}
.tarefa{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:10px 11px;margin-bottom:8px;cursor:grab;box-shadow:0 1px 2px var(--shadow)}
.tarefa:active{cursor:grabbing}
.tarefa.arrastando{opacity:.45}
/* 28/09: a faixa da esquerda é a cor do PROJETO (fundo claro dela no cartão);
   "a semana toda" fica cinza. O atraso saiu da faixa para a pílula âmbar do
   prazo e um contorno âmbar. */
.tarefa{border-left:5px solid #C9D5CF}
.tarefa.com-cor{border-left-color:var(--pc);background:var(--pc-claro)}
.tarefa.atrasada{box-shadow:0 0 0 1px var(--warn),0 1px 2px var(--shadow)}
.tarefa.editando{cursor:default;box-shadow:0 0 0 2px var(--pc,var(--verde))}
.tarefa-t{font-size:14px;line-height:1.4;color:var(--mata);overflow-wrap:anywhere;white-space:pre-line}
.tarefa-edicao{display:flex;flex-direction:column;gap:8px}
.tarefa-edita{width:100%;font:inherit;font-size:14px;line-height:1.45;padding:8px 10px;border-radius:8px;
  border:1px solid var(--line);background:var(--card);color:var(--mata);resize:vertical}
.tarefa-edita:focus{outline:2px solid var(--pc,var(--verde));outline-offset:1px}
.tarefa-edita-pe{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tarefa-edita-pe .pri{background:var(--verde);color:#fff;border-color:var(--verde);font-weight:700}
.tarefa-edita-pe .pri:hover{background:var(--verde-forte);color:#fff}
.tarefa-dica{font-family:var(--mono);font-size:10.5px;color:var(--mist)}
/* outra pessoa gravou a descrição enquanto esta edição estava aberta (28/09) */
.tarefa-conflito{font-size:12.5px;line-height:1.45;padding:7px 9px;border-radius:8px;background:var(--warn-soft);
  color:var(--warn);border-left:3px solid var(--warn);overflow-wrap:anywhere}
.tarefa-conflito q{color:var(--mata);font-style:italic}
.tarefa-m{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px;align-items:center}
.tarefa-pe{display:flex;gap:4px;margin-top:8px;align-items:center}
.mover{font:inherit;font-size:14px;line-height:1;padding:3px 9px;border-radius:7px;
  cursor:pointer;border:1px solid var(--line);background:var(--card);color:var(--mata-80)}
.mover:hover{border-color:var(--verde);color:var(--verde)}
.mover:disabled{opacity:.3;cursor:default}
.mover.risca{margin-left:auto;border:0;color:var(--mist);font-size:15px;background:transparent}
.mover.risca:hover{color:var(--erro)}

/* ================================== equipe ================================== */
.equipe-total{font-family:var(--mono);font-size:11.5px;color:var(--mist);margin-top:8px}
.quadros{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;align-items:start}
.quadro{background:var(--verde-nevoa);border:1px solid var(--line);border-radius:12px;padding:13px 14px}
.quadro.com-cor{border-left:5px solid var(--pc);background:var(--pc-claro)}
.quadro-t>span:first-child{display:inline-flex;align-items:center}
.quadro-cab{margin-bottom:10px}
.quadro-t{font-family:var(--display);font-size:1.02rem;font-weight:800;color:var(--mata);
  display:flex;justify-content:space-between;align-items:center;gap:8px}
.quadro-n{font-family:var(--mono);font-size:10.5px;color:var(--mist);font-weight:600}
.quadro-coord{font-size:12.5px;color:var(--mata-80);line-height:1.4;margin-top:3px}
.quadro-lista{display:flex;flex-direction:column;gap:7px}
.membro{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:9px 11px;
  display:flex;justify-content:space-between;align-items:center;gap:10px;box-shadow:0 1px 2px var(--shadow)}
.membro-n{font-size:14px;font-weight:700;color:var(--mata);overflow-wrap:anywhere}
.membro-f{font-size:12.5px;color:var(--mata-80);margin-top:2px;overflow-wrap:anywhere}
.membro-pe{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.membro-pe .mover.risca{margin-left:0}
.equipe-linha{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.equipe-linha input{flex:1 1 120px;width:auto;max-width:none;font-size:13.5px}
.equipe-linha button{flex:0 0 auto}
@media (max-width:640px){.quadros{grid-template-columns:1fr}}

/* ================================== perfil ================================== */
.eu{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.eu-avatar{width:62px;height:62px;border-radius:50%;background:var(--grad);color:#fff;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  font-family:var(--display);font-size:25px;font-weight:800}
.eu-n{font-family:var(--display);font-size:1.25rem;font-weight:800;color:var(--mata)}
.eu-o{font-size:14px;color:var(--mata-80);line-height:1.45;margin-top:3px}
.eu-e{font-family:var(--mono);font-size:12px;color:var(--mist);margin-top:5px;
  overflow-wrap:anywhere}
.time{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin-top:4px}
.time-card{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:13px 15px;box-shadow:0 1px 2px var(--shadow)}
.time-card.sou-eu{border-color:var(--verde);box-shadow:0 0 0 1px var(--verde)}
.time-n{font-family:var(--display);font-size:1rem;font-weight:700;color:var(--mata)}
.time-p{margin:6px 0}
.time-o{font-size:13px;color:var(--mata-80);line-height:1.45}
.time-e{font-family:var(--mono);font-size:11.5px;color:var(--mist);margin-top:7px;
  overflow-wrap:anywhere}
#s-nova{max-width:280px;margin-bottom:10px}
#s-trocar{display:block}

@media (max-width:980px){
  .kanban{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .mapa-topo{justify-content:flex-start}
  .mapa-ir{justify-content:flex-start}
  /* No celular os botões têm de ficar COLADOS no mapa. Empilhando a grade na
     ordem natural, a ficha de 260 px entra no meio e empurra o direcional para
     fora da tela — quem joga não alcança o que está vendo. `display:contents`
     dissolve a caixa, e a coluna do painel reordena canvas, botões e ficha. */
  #p-espacos.on{display:flex;flex-direction:column}
  .mapa-caixa{display:contents}
  #p-espacos .cab{order:1}
  .mapa-topo{order:2}
  #mapa-tela{order:3}
  .controles{order:4;margin-top:12px}
  /* Rodada 1 (17/09): TODO filho do painel precisa de `order` — sem ele o filho
     fica em 0 e vai para o TOPO da aba. Era o que acontecia com as fotos (desde a
     v3) e com o crédito do LPC (v4): apareciam antes do título e do mapa. A
     barra do Montar e a paleta ficam coladas no canvas; o crédito é rodapé. */
  .acao-item{order:5}
  .paleta{order:6}
  .mapa-ficha{order:7;margin-top:14px;min-height:0}
  .mapa-legenda{order:8}
  .mapa-fotos{order:9}
  .mapa-credito{order:10}
}
@media (max-width:600px){
  .kanban{grid-template-columns:1fr}
  /* Empilhadas, quatro colunas vazias de 130 px viram meia tela de nada. */
  .coluna{min-height:0}
  .marco .fonte{margin-left:24px}
  .controles{justify-content:space-around}

  /* Tabela de cinco colunas em 340 px vira uma letra por linha: medido no
     iPhone, "Custeio (total, sem divisão por rubrica)" saía com uma palavra em
     cada linha ao lado de três colunas de número. No celular cada linha vira um
     bloco, e o rótulo da coluna volta como prefixo de cada valor — a tabela
     continua sendo tabela para leitor de tela, só deixa de ser grade. */
  table.rub,table.met,table.desp,
  table.rub tbody,table.rub tfoot,table.met tbody,table.desp tbody{display:block}
  table.rub thead,table.met thead,table.desp thead{display:none}
  table.rub tr,table.met tr,table.desp tr{display:block;padding:11px 0;
    border-bottom:1px solid var(--line)}
  table.rub td,table.met td,table.desp td,
  table.rub td.k,table.met td:first-child,table.met td.alvo,table.met td.real,
  table.desp td.v,table.rub tfoot td{display:block;width:auto;border:0;
    padding:2px 0;text-align:left;white-space:normal}
  table.rub td.k,table.desp td:first-child{font-weight:600}
  table.rub tfoot tr{border-bottom:0;border-top:2px solid var(--mata)}
  table.rub td.b{padding:5px 0 3px}
  td[data-r]::before{content:attr(data-r) ": ";font-family:var(--mono);
    font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mist)}
  input.mini{max-width:none}
  /* 28/09: no cartão do lançamento a faixa do projeto vai na borda do bloco;
     sub-linha de detalhe sem as células vazias; alvos de dedo com 40 px */
  table.desp tr[data-cor]{border-left:4px solid var(--pc);padding-left:10px}
  table.desp tr[data-cor] td:first-child{box-shadow:none;padding-left:0}
  table.desp td.acoes{text-align:left;padding-top:6px}
  table.desp .editar,table.desp .apagar{min-height:40px;min-width:44px;font-size:16px}
  .aviso-itens .editar{min-height:38px;padding:6px 11px;margin:4px 0 0}
  /* o valor do cabeçalho do projeto cai para baixo do título: alinhado à
     esquerda, como bloco, e não numa coluna estreita alinhada à direita */
  .proj .valor{text-align:left;flex:1 1 100%}
  .proj .valor .d{max-width:none}
  table.rub tr.sub-det{padding:4px 0 6px 12px;border-bottom:1px dashed var(--line)}
  table.rub tr.sub-det td{border-bottom:0}
  table.rub tr.sub-det td:empty{display:none}
  .d-botoes button{min-height:40px;flex:1 1 auto}
  .tarefa-pe .mover,.tarefa-edita-pe button{min-height:38px;min-width:40px}
  .legenda-cor{gap:8px 14px}
}

/* ====================== fotos reais dos espaços (15/09/2026) ====================== */
.mapa-fotos{margin-top:18px;display:grid;gap:14px}
.fotos-esp{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.fotos-t{font-size:13.5px;color:var(--mata);margin-bottom:8px;line-height:1.45;overflow-wrap:anywhere}
.fotos-m{color:var(--mist);font-family:var(--mono);font-size:12px}
.fotos-fila{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.foto img{height:96px;width:auto;border-radius:8px;border:1px solid var(--line);display:block}
.foto:hover img{border-color:var(--verde)}
.fotos-vazio{color:var(--mist);font-style:italic;font-size:13px}
.fotos-fonte{font-size:12px;color:var(--mist);line-height:1.5}

/* A cena atual acompanha a viagem pelo pad ou pela barra. */
.ir-b.on{background:var(--verde);color:#fff;border-color:var(--verde)}
#b-montar:disabled{opacity:.5;cursor:not-allowed}