/* Estúdio Caeté · Projetos
   Identidade: manual de identidade visual (nov/22) — cores, Svarge e Founders Grotesk.
   Linguagem de interface: superfícies claras, cantos arredondados, sombras suaves e movimento com mola. */
@font-face { font-family: 'Svarge'; src: url('../fontes/Svarge.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Founders'; src: url('../fontes/FoundersGrotesk-Light.otf') format('opentype'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Founders'; src: url('../fontes/FoundersGrotesk-Regular.otf') format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Founders'; src: url('../fontes/FoundersGrotesk-Medium.otf') format('opentype'); font-weight: 500; font-display: swap; }

:root {
  /* Paleta da marca */
  --verde: #17332E;
  --verde-2: #234740;
  --areia: #EFE5D3;
  --bege: #D3B48C;
  --salvia: #5D7C71;
  --laranja: #E29442;
  --vermelho: #B73715;

  /* Superfícies */
  --fundo: #EEE6D8;
  --superficie: #FBF8F2;
  --superficie-2: #F5EFE4;
  --elevada: #FFFDF9;
  --tinta: #17332E;
  --tinta-2: rgba(23, 51, 46, .66);
  --tinta-3: rgba(23, 51, 46, .44);
  --linha: rgba(23, 51, 46, .09);
  --linha-forte: rgba(23, 51, 46, .18);
  --preenchimento: rgba(23, 51, 46, .055);
  --preenchimento-2: rgba(23, 51, 46, .09);

  /* Tons suaves para selos */
  --ok-bg: rgba(93, 124, 113, .14);      --ok: #3F5E53;
  --prox-bg: rgba(211, 180, 140, .32);   --prox: #7A5B33;
  --aten-bg: rgba(226, 148, 66, .18);    --aten: #9A5512;
  --atr-bg: rgba(183, 55, 21, .11);      --atr: #B73715;
  --rev-bg: rgba(23, 51, 46, .07);

  /* Forma */
  --r-xs: 8px; --r-s: 12px; --r-m: 16px; --r-l: 22px; --r-xl: 28px;
  --sombra-1: 0 1px 1px rgba(23, 51, 46, .03), 0 2px 6px rgba(23, 51, 46, .04);
  --sombra-2: 0 1px 2px rgba(23, 51, 46, .04), 0 10px 30px -6px rgba(23, 51, 46, .10);
  --sombra-3: 0 2px 6px rgba(23, 51, 46, .06), 0 30px 70px -12px rgba(23, 51, 46, .28);

  /* Movimento */
  --mola: cubic-bezier(.32, .72, 0, 1);
  --suave: cubic-bezier(.2, .8, .2, 1);
  --sans: 'Founders', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --display: 'Svarge', 'Didot', Georgia, serif;
  --gutter: 40px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--fundo); color: var(--tinta);
  font-family: var(--sans); font-size: 16px; line-height: 1.42; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
body.travado { overflow: hidden; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid rgba(93, 124, 113, .45); outline-offset: 2px; border-radius: 8px; }
::selection { background: rgba(211, 180, 140, .55); }
.oculto { display: none !important; }

/* ---------- Tipografia ---------- */
.display { font-family: var(--display); font-weight: normal; text-transform: uppercase; letter-spacing: .12em; line-height: 1.08; margin: 0; }
.sobretitulo { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-2); margin: 0 0 12px; }
.rotulo { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
.suave { color: var(--tinta-2); }
.fraco { color: var(--tinta-3); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- Topo translúcido ---------- */
.topo {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 28px; padding: 0 var(--gutter); height: 68px;
  background: rgba(238, 230, 216, .72);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--linha);
}
.marca { display: flex; align-items: center; transition: opacity .2s; }
.marca:hover { opacity: .7; }
.marca img { display: block; height: 20px; width: auto; }
.marca .logo-ca { display: none; height: 24px; }
.nav { position: relative; display: flex; gap: 2px; padding: 4px; background: var(--preenchimento); border-radius: 999px; }
.nav a {
  position: relative; z-index: 1; text-decoration: none; font-size: 14px; color: var(--tinta-2);
  padding: 7px 16px; border-radius: 999px; transition: color .25s; white-space: nowrap;
}
.nav a:hover { color: var(--tinta); }
.nav a.ativo { color: var(--tinta); }
.nav-ind {
  position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px;
  background: var(--elevada); box-shadow: var(--sombra-1); transition: transform .45s var(--mola), width .45s var(--mola);
}
.topo-dir { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.icone-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 0; border-radius: 999px;
  background: var(--preenchimento); font-size: 14px; color: var(--tinta); transition: background .2s, transform .15s;
}
.icone-btn:hover { background: var(--preenchimento-2); }
.icone-btn:active { transform: scale(.96); }
.icone-btn svg { width: 17px; height: 17px; }
.usuario { position: relative; }
.usuario select {
  appearance: none; -webkit-appearance: none; height: 36px; border: 0; border-radius: 999px; background: var(--preenchimento);
  padding: 0 34px 0 14px; font-size: 14px; cursor: pointer;
}
.usuario::after { content: ''; position: absolute; right: 14px; top: 14px; width: 6px; height: 6px; border-right: 1.5px solid var(--tinta-2); border-bottom: 1.5px solid var(--tinta-2); transform: rotate(45deg); pointer-events: none; }

.aviso-previa { background: var(--verde); color: var(--areia); font-size: 12px; letter-spacing: .04em; padding: 7px var(--gutter); text-align: center; }
.conteudo { max-width: 1400px; margin: 0 auto; padding: 44px var(--gutter) 120px; }

/* ---------- Entrada de tela ---------- */
@keyframes subir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes surgir { from { opacity: 0; } to { opacity: 1; } }
.entrando > * { animation: subir .6s var(--mola) both; }
.entrando > *:nth-child(2) { animation-delay: .04s; }
.entrando > *:nth-child(3) { animation-delay: .08s; }
.entrando > *:nth-child(4) { animation-delay: .12s; }
.entrando > *:nth-child(n+5) { animation-delay: .16s; }
.entrando .cards > * { animation: subir .6s var(--mola) both; animation-delay: calc(.12s + var(--i, 0) * .045s); }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
  border: 0; border-radius: 999px; background: var(--preenchimento); color: var(--tinta);
  padding: 0 18px; height: 40px; font-size: 14px; font-weight: 500; text-decoration: none;
  transition: background .2s, transform .15s var(--suave), box-shadow .2s, color .2s;
}
.btn:hover { background: var(--preenchimento-2); }
.btn:active { transform: scale(.96); }
.btn.primario { background: var(--verde); color: var(--areia); box-shadow: 0 1px 2px rgba(23, 51, 46, .2), 0 6px 16px -6px rgba(23, 51, 46, .5); }
.btn.primario:hover { background: var(--verde-2); }
.btn.pequeno { height: 32px; padding: 0 14px; font-size: 13px; }
.btn.texto { background: transparent; padding: 0 10px; color: var(--tinta-2); }
.btn.texto:hover { background: var(--preenchimento); color: var(--tinta); }
.btn.perigo { background: var(--atr-bg); color: var(--vermelho); }
.btn.perigo:hover { background: rgba(183, 55, 21, .18); }
.btn.contorno { background: transparent; box-shadow: inset 0 0 0 1px var(--linha-forte); }
.btn.contorno:hover { background: var(--preenchimento); }
.btn svg { width: 15px; height: 15px; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- Selos ---------- */
.selo {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500;
  padding: 4px 10px 4px 9px; border-radius: 999px; white-space: nowrap; line-height: 1.2;
  background: var(--preenchimento); color: var(--tinta-2);
}
.selo::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.selo.ok { background: var(--ok-bg); color: var(--ok); }
.selo.proximo { background: var(--prox-bg); color: var(--prox); }
.selo.atencao { background: var(--aten-bg); color: var(--aten); }
.selo.atrasado { background: var(--atr-bg); color: var(--atr); }
.selo.revisao { background: var(--verde); color: var(--areia); }
.selo.neutro { background: var(--preenchimento); color: var(--tinta-2); }
.selo.sem-ponto::before { display: none; }

/* ---------- Avatar do responsável ---------- */
.chip {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 26px; height: 26px; border-radius: 50%; font-size: 10px; letter-spacing: .04em; font-weight: 500;
  color: var(--verde); background: var(--superficie-2); box-shadow: inset 0 0 0 1px var(--linha-forte);
}
.chip.vazio { color: var(--tinta-3); background: transparent; box-shadow: inset 0 0 0 1px dashed var(--linha-forte); border: 1px dashed var(--linha-forte); box-shadow: none; }

/* ---------- Entrada (login) ---------- */
.sem-sessao .topo, .sem-sessao .aviso-previa { display: none; }
.sem-sessao .conteudo { min-height: 100vh; display: grid; place-items: center; padding-top: 24px; }
.portaria { width: min(420px, 100%); padding: 44px 36px 30px; text-align: center; display: grid; gap: 18px; justify-items: center; }
.portaria-logo { width: 150px; height: auto; margin-bottom: 4px; }
.portaria h1 { font-size: 30px; }
.portaria p { margin: 0; font-size: 15px; line-height: 1.5; }
.portaria .btn { height: 46px; padding: 0 24px; font-size: 15px; margin-top: 6px; }
.portaria .btn.primario svg { background: #fff; border-radius: 50%; padding: 3px; width: 22px; height: 22px; }
.portaria-nota { font-size: 12px !important; margin-top: 8px !important; }
.linha-cfg.membro.inativo { opacity: .55; }
#btn-sair { padding-left: 5px; }

/* ---------- Capa do projeto (foto ou monograma) ---------- */
.capa {
  position: relative; flex: none; display: inline-grid; place-items: center; overflow: hidden;
  background: var(--superficie-2); box-shadow: inset 0 0 0 1px rgba(23, 51, 46, .06);
  font-family: var(--display); letter-spacing: .06em; line-height: 1; vertical-align: middle;
}
.capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.capa.mono { box-shadow: none; padding-left: .06em; }
.capa-btn { border: 0; padding: 0; background: none; border-radius: 22px; margin-bottom: 18px; display: block; transition: transform .3s var(--mola); }
.capa-btn:hover { transform: scale(1.04); }
.capa-btn:active { transform: scale(.97); }

/* Escolha da imagem na janela do projeto */
.escolher-capa { display: flex; align-items: center; gap: 16px; padding: 12px; border-radius: var(--r-m); background: var(--superficie-2); box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow .2s, background .2s; }
.escolher-capa.arrastando { box-shadow: inset 0 0 0 1.5px var(--salvia); background: var(--ok-bg); }
.escolher-capa .txt { flex: 1; font-size: 13px; color: var(--tinta-2); }
.escolher-capa input[type=file] { display: none; }

/* ---------- Cabeçalho de tela ---------- */
.cabecalho { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 36px; }
.cabecalho h1 { font-size: 44px; }

/* ---------- Cartões genéricos ---------- */
.painel { background: var(--superficie); border-radius: var(--r-l); box-shadow: var(--sombra-2); }

/* ---------- Início ---------- */
.indicadores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 44px; }
.indicador { background: var(--superficie); border-radius: var(--r-l); padding: 20px 22px 22px; box-shadow: var(--sombra-1); }
.indicador .valor { font-family: var(--display); font-size: 44px; line-height: 1; margin-top: 14px; }
.indicador.alerta .valor { color: var(--vermelho); }
.indicador .rotulo { display: flex; align-items: center; gap: 8px; }
.indicador.alerta .rotulo::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--vermelho); }

.barra-filtros { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.segmentado { position: relative; display: inline-flex; padding: 3px; border-radius: 12px; background: var(--preenchimento); }
.segmentado button { position: relative; z-index: 1; border: 0; background: none; padding: 7px 16px; font-size: 13px; border-radius: 9px; color: var(--tinta-2); transition: color .25s; white-space: nowrap; }
.segmentado button.ativo { color: var(--tinta); font-weight: 500; }
.segmentado .ind { position: absolute; top: 3px; bottom: 3px; left: 0; border-radius: 9px; background: var(--elevada); box-shadow: var(--sombra-1); transition: transform .45s var(--mola), width .45s var(--mola); }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; margin-bottom: 64px; }
.card {
  position: relative; display: flex; flex-direction: column; gap: 18px; text-decoration: none;
  background: var(--superficie); border-radius: var(--r-l); padding: 22px; min-height: 268px;
  box-shadow: var(--sombra-1); transition: transform .45s var(--mola), box-shadow .45s var(--mola);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sombra-2); }
.card:active { transform: translateY(-1px) scale(.99); }
.card-topo { display: flex; gap: 14px; align-items: center; }
.card-titulo { flex: 1; min-width: 0; }
.card:hover .capa { transform: scale(1.04); }
.card .capa { transition: transform .45s var(--mola); }
.card h3 { font-size: 21px; font-weight: 400; margin: 0; line-height: 1.15; }
.card .cliente { font-size: 14px; color: var(--tinta-2); margin-top: 3px; }
.card .etapa-atual .nome { font-size: 15px; margin: 6px 0 10px; }
.card .rodape { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; font-size: 14px; padding-top: 14px; border-top: 1px solid var(--linha); }
.card .rodape .det { margin-top: 3px; color: var(--tinta-2); }
.card .rodape .det.atrasado { color: var(--vermelho); }
.card.novo {
  align-items: center; justify-content: center; gap: 10px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--linha-forte);
  color: var(--tinta-2); font-size: 15px; border: 0;
}
.card.novo:hover { background: var(--superficie); box-shadow: var(--sombra-2); }
.card.novo .mais { width: 48px; height: 48px; border-radius: 50%; background: var(--preenchimento); display: grid; place-items: center; font-size: 26px; font-weight: 300; transition: transform .45s var(--mola), background .2s; }
.card.novo:hover .mais { transform: rotate(90deg); background: var(--verde); color: var(--areia); }

/* Anel de progresso */
.anel { position: relative; width: 58px; height: 58px; flex: none; }
.anel svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anel circle { fill: none; stroke-width: 4; }
.anel .trilho { stroke: var(--preenchimento-2); }
.anel .valor { stroke: var(--salvia); stroke-linecap: round; transition: stroke-dashoffset 1s var(--mola); }
.anel.atrasado .valor { stroke: var(--vermelho); }
.anel.atencao .valor { stroke: var(--laranja); }
.anel span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.entrando .anel .valor { animation: anel 1.1s var(--mola) both .25s; }
@keyframes anel { from { stroke-dashoffset: var(--total); } }

.segmentos { display: flex; gap: 4px; }
.segmento { flex: 1; height: 6px; border-radius: 999px; background: var(--preenchimento-2); position: relative; overflow: hidden; }
.segmento i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--salvia); transition: width .8s var(--mola); }
.segmento.andamento i { background: var(--verde); }
.segmento.atencao i { background: var(--laranja); }
.segmento.atrasado i { background: var(--vermelho); }
.entrando .segmento i { animation: crescer 1s var(--mola) both .3s; }
@keyframes crescer { from { width: 0; } }
.segmentos-legenda { display: flex; gap: 4px; margin-top: 7px; }
.segmentos-legenda span { flex: 1; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.lista { background: var(--superficie); border-radius: var(--r-l); padding: 8px 8px 10px; box-shadow: var(--sombra-1); }
.lista + .lista { margin-top: 24px; }
.lista-titulo { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 16px 10px; }
.lista-titulo h2 { font-size: 17px; }
.linha-prazo {
  display: grid; grid-template-columns: 56px 30px 1fr auto; gap: 12px; align-items: center;
  padding: 11px 14px; border-radius: var(--r-s); text-decoration: none; font-size: 14px; transition: background .2s;
}
.linha-prazo:hover { background: var(--preenchimento); }
.linha-prazo .d { font-variant-numeric: tabular-nums; color: var(--tinta-2); font-size: 13px; }
.linha-prazo .d.atrasado { color: var(--vermelho); font-weight: 500; }
.linha-prazo .t { min-width: 0; }
.linha-prazo .t span { display: block; font-size: 12px; color: var(--tinta-3); margin-top: 1px; }
.linha-prazo .x { display: flex; gap: 8px; align-items: center; }
.vazio-msg { color: var(--tinta-3); font-size: 14px; padding: 12px 16px 16px; }

/* ---------- Projeto ---------- */
.voltar {
  display: inline-flex; align-items: center; gap: 6px; font-size: 14px; text-decoration: none; color: var(--tinta-2);
  margin-bottom: 22px; padding: 6px 12px 6px 8px; margin-left: -8px; border-radius: 999px; transition: background .2s, color .2s;
}
.voltar:hover { background: var(--preenchimento); color: var(--tinta); }
.proj-topo { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: 18px; margin-bottom: 18px; }
.proj-ficha { padding: 28px; }
.proj-ficha h1 { font-size: 32px; margin-bottom: 4px; }
.ficha-dados { display: grid; grid-template-columns: auto 1fr; gap: 7px 18px; font-size: 14px; margin: 20px 0 22px; }
.ficha-dados dt { color: var(--tinta-3); }
.ficha-dados dd { margin: 0; }
.proj-resumo { padding: 26px 28px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-content: start; }
.proj-resumo .bloco .valor { font-family: var(--display); font-size: 46px; line-height: 1; margin-top: 12px; }
.proj-resumo .bloco .det { font-size: 13px; color: var(--tinta-2); margin-top: 8px; }
.proj-resumo .faixa { grid-column: 1 / -1; border-top: 1px solid var(--linha); padding-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 13px; }

/* Linha do tempo horizontal */
.linha-tempo { overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
.lt-trilho { display: grid; grid-auto-columns: minmax(290px, 1fr); grid-template-rows: auto 52px auto; min-width: 100%; }
.lt-linha { grid-row: 2; grid-column: 1 / -1; position: relative; margin: 0 24px; }
.lt-linha::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--preenchimento-2); }
.lt-linha i { position: absolute; left: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--verde); transition: width 1s var(--mola); }
.entrando .lt-linha i { animation: crescer 1.2s var(--mola) both .2s; }
.lt-cabeca { grid-row: 1; padding: 30px 26px 12px; scroll-snap-align: start; }
.lt-cabeca .n { font-size: 12px; letter-spacing: .18em; color: var(--tinta-3); }
.lt-cabeca h2 { font-family: var(--display); font-weight: normal; text-transform: uppercase; letter-spacing: .09em; font-size: 19px; margin: 6px 0 14px; line-height: 1.2; min-height: 46px; }
.lt-datas { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 13px; }
.lt-datas dt { color: var(--tinta-3); }
.lt-datas dd { margin: 0; font-variant-numeric: tabular-nums; }
.lt-datas .previsto { color: var(--tinta-3); font-style: italic; }
.lt-cabeca .situ { margin-top: 14px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 13px; }
.rev-pontos { display: inline-flex; gap: 4px; align-items: center; margin-left: 2px; }
.rev-pontos i { width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--tinta-3); }
.rev-pontos i.usada { background: var(--verde); box-shadow: none; }
.rev-pontos i.extra { background: var(--laranja); box-shadow: none; }
.lt-no { grid-row: 2; position: relative; z-index: 1; }
.lt-no .bola {
  position: absolute; left: 26px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%;
  background: var(--superficie); box-shadow: inset 0 0 0 2px var(--linha-forte); transition: transform .3s var(--mola);
}
.lt-no .bola svg { position: absolute; inset: 3px; width: 12px; height: 12px; stroke: var(--areia); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.lt-no.concluida .bola, .lt-no.entregue .bola, .lt-no.revisao .bola, .lt-no.reaberta .bola { background: var(--verde); box-shadow: none; }
.lt-no.andamento .bola { background: var(--superficie); box-shadow: inset 0 0 0 5px var(--verde); }
.lt-no.andamento .bola::after, .lt-no.revisao .bola::after, .lt-no.reaberta .bola::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--verde); opacity: 0; animation: halo 2.4s var(--suave) infinite;
}
.lt-no.atrasado .bola { box-shadow: inset 0 0 0 5px var(--vermelho); }
.lt-no.atrasado .bola::after { border-color: var(--vermelho); }
.lt-no.atencao .bola { box-shadow: inset 0 0 0 5px var(--laranja); }
.lt-no.atencao .bola::after { border-color: var(--laranja); }
@keyframes halo { 0% { transform: scale(.7); opacity: .55; } 80%, 100% { transform: scale(1.5); opacity: 0; } }
.lt-hoje { position: absolute; top: 50%; width: 2px; height: 22px; margin-top: -11px; background: var(--vermelho); border-radius: 2px; }
.lt-hoje span {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); font-size: 10px; letter-spacing: .12em; font-weight: 500;
  text-transform: uppercase; color: var(--elevada); background: var(--vermelho); padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}
.lt-corpo { grid-row: 3; padding: 10px 18px 26px; }
.lt-acoes { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 0 8px 16px; min-height: 32px; }
.lt-acoes .aviso { font-size: 13px; color: var(--tinta-3); }

/* Blocos dentro da etapa: fases e rodadas */
.bloco-lista { background: var(--superficie); border-radius: var(--r-m); padding: 6px 14px 10px; box-shadow: var(--sombra-1); }
.bloco-lista + .bloco-lista { margin-top: 12px; }
.bloco-lista.rodada { background: var(--elevada); box-shadow: inset 0 0 0 1.5px var(--verde), var(--sombra-1); }
.bloco-lista.rodada.fechada { box-shadow: var(--sombra-1); background: var(--superficie); }
.bloco-lista.rodada.atrasado { box-shadow: inset 0 0 0 1.5px var(--vermelho), var(--sombra-1); }
.bloco-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0 6px; }
.bloco-cab h3 { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--tinta-2); margin: 0; }
.bloco-cab .cont { font-size: 12px; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.rodada-meta { font-size: 12px; color: var(--tinta-2); padding: 0 0 8px; display: grid; gap: 4px; }
.rodada-meta .motivo { font-style: italic; color: var(--tinta-3); }
.rodada-acoes { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 10px; }
details.recolher > summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 8px 0 6px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--tinta-2);
}
details.recolher > summary::-webkit-details-marker { display: none; }
details.recolher > summary .seta { display: inline-block; vertical-align: 2px; margin-left: 6px; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .3s var(--mola); margin-right: 4px; }
details.recolher[open] > summary .seta { transform: rotate(45deg); }
details.recolher[open] > .itens { animation: surgir .4s var(--suave); }

/* Itens (checklist) */
.itens { list-style: none; margin: 0; padding: 0; position: relative; }
.item { display: flex; align-items: center; gap: 11px; padding: 8px 0; border-top: 1px solid var(--linha); font-size: 14px; border-radius: 10px; transition: background .3s; }
.item:first-child { border-top: 0; }
.check {
  flex: none; width: 22px; height: 22px; border-radius: 50%; border: 0; padding: 0; background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--linha-forte); position: relative; display: grid; place-items: center;
  transition: background .25s var(--suave), box-shadow .25s var(--suave), transform .2s var(--suave);
}
.check:hover { box-shadow: inset 0 0 0 1.5px var(--verde); }
.check:active { transform: scale(.85); }
.check svg { width: 12px; height: 12px; stroke: var(--areia); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset .35s var(--suave) .05s; }
.st-feito .check { background: var(--verde); box-shadow: none; }
.st-feito .check svg { stroke-dashoffset: 0; }
.st-em_andamento .check { background: var(--laranja); box-shadow: none; }
.st-em_andamento .check::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--elevada); }
.st-nao_se_aplica .check { box-shadow: inset 0 0 0 1.5px var(--linha); }
.st-nao_se_aplica .check::after { content: ''; width: 9px; height: 1.5px; background: var(--tinta-3); border-radius: 2px; }
.check.pop { animation: pop .5s var(--mola); }
@keyframes pop { 0% { transform: scale(.7); } 45% { transform: scale(1.18); } 100% { transform: scale(1); } }
.item-nome { flex: 1; min-width: 0; text-align: left; border: 0; background: none; padding: 2px 0; line-height: 1.3; transition: color .3s; }
.item-nome:hover { color: var(--verde-2); text-decoration: underline; text-decoration-color: var(--linha-forte); text-underline-offset: 3px; }
.st-feito .item-nome { color: var(--tinta-3); }
.st-nao_se_aplica .item-nome { color: var(--tinta-3); text-decoration: line-through; text-decoration-color: var(--linha-forte); }
.marca-obs { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--bege); margin-left: 7px; vertical-align: middle; }
.item-meta { display: flex; align-items: center; gap: 8px; flex: none; font-size: 12px; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.item-meta .herdado { opacity: .75; }
.item.atrasado .item-meta .prazo { color: var(--vermelho); font-weight: 500; }
.item.destaque { animation: destaque 2.6s var(--suave); }
@keyframes destaque { 0%, 35% { background: rgba(226, 148, 66, .28); box-shadow: 0 0 0 8px rgba(226, 148, 66, .28); } 100% { background: transparent; box-shadow: 0 0 0 8px transparent; } }
.add-item { display: flex; gap: 6px; margin-top: 4px; border-top: 1px solid var(--linha); }

.add-item input::placeholder { color: var(--tinta-3); }

/* Menu de status */
.menu-status {
  position: fixed; z-index: 65; display: none; min-width: 210px; padding: 6px; border-radius: 16px;
  background: rgba(255, 253, 249, .88); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
  box-shadow: 0 0 0 1px var(--linha), var(--sombra-3);
  opacity: 0; transform: scale(.9); pointer-events: none; transition: opacity .18s var(--suave), transform .35s var(--mola);
}
.menu-status.aberto { opacity: 1; transform: none; pointer-events: auto; }
.menu-status button {
  display: flex; align-items: center; gap: 11px; width: 100%; border: 0; background: none; padding: 8px 10px; border-radius: 10px;
  font-size: 14px; text-align: left; transition: background .15s;
}
.menu-status button:hover, .menu-status button:focus-visible { background: var(--preenchimento); outline: none; }
.menu-status button.atual { font-weight: 500; }
.menu-status button.atual::after { content: ''; width: 9px; height: 5px; margin-left: 2px; border-left: 1.5px solid var(--verde); border-bottom: 1.5px solid var(--verde); transform: rotate(-45deg) translateY(-2px); }
.menu-status .check { pointer-events: none; width: 20px; height: 20px; }
.menu-status .txt { flex: 1; }
.menu-status kbd { font-family: var(--sans); font-size: 11px; color: var(--tinta-3); min-width: 18px; height: 18px; display: inline-grid; place-items: center; border-radius: 5px; background: var(--preenchimento); }
.menu-status button.atual kbd { display: none; }
@media (hover: none) { .menu-status kbd { display: none; } }

/* Alça de arrastar (reordenar) */
.alca {
  flex: none; display: grid; grid-template-columns: repeat(2, 3px); gap: 2px 2px; padding: 6px 3px; margin: 0 -4px 0 -6px;
  cursor: grab; touch-action: none; border-radius: 6px; opacity: 0; transition: opacity .2s, background .2s;
}
.alca i { width: 3px; height: 3px; border-radius: 50%; background: var(--tinta-3); }
.item:hover .alca, .pp-item:hover .alca, .alca:focus-visible { opacity: 1; }
.alca:hover { background: var(--preenchimento); }
.alca:active { cursor: grabbing; }
@media (hover: none) { .alca { opacity: .7; } }
.arrastando { position: relative; z-index: 5; background: var(--elevada) !important; border-radius: 12px; box-shadow: var(--sombra-2); cursor: grabbing; }
.arrastando .alca { opacity: 1; }
body:has(.arrastando) { user-select: none; -webkit-user-select: none; }

/* ---------- Processo padrão ---------- */
.pp-resumo { margin: -16px 0 20px; }
.pp-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; align-items: start; }
.entrando .pp-grade > * { animation: subir .6s var(--mola) both; animation-delay: calc(.08s + var(--i, 0) * .05s); }
.pp-etapa { padding: 22px 20px 20px; }
.pp-etapa-cab { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.pp-etapa-cab .n { font-size: 12px; letter-spacing: .18em; color: var(--tinta-3); }
.pp-grade input:not([type=number]):not([name]) { box-shadow: none; background: transparent; border-radius: 8px; padding: 5px 8px; margin-left: -8px; }
.pp-grade input:not([type=number]):not([name]):hover { background: var(--preenchimento); }
.pp-grade input:not([type=number]):not([name]):focus { background: var(--elevada); box-shadow: inset 0 0 0 1.5px var(--salvia); }
.pp-grade input.pp-nome-etapa { font-size: 19px; letter-spacing: .09em; flex: 1; }
.pp-prazos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; }
.pp-prazos label { display: grid; gap: 5px; font-size: 11px; color: var(--tinta-3); }
.pp-prazos input { padding: 7px 9px; font-size: 14px; }
.pp-fase { background: var(--superficie-2); border-radius: var(--r-m); padding: 6px 12px 8px; }
.pp-fase + .pp-fase { margin-top: 10px; }
.pp-fase-cab { display: flex; align-items: center; gap: 6px; }
.pp-grade .pp-fase-cab input { flex: 1; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; color: var(--tinta-2); }
.pp-fase-cab .cont { font-size: 12px; color: var(--tinta-3); }
.pp-itens { list-style: none; margin: 4px 0 0; padding: 0; position: relative; }
.pp-item { display: flex; align-items: center; gap: 8px; padding: 1px 0; border-top: 1px solid var(--linha); }
.pp-item:first-child { border-top: 0; }
.pp-grade .pp-item input { flex: 1; font-size: 14px; }
.pp-x { flex: none; width: 26px; height: 26px; border: 0; border-radius: 50%; background: none; color: var(--tinta-3); font-size: 12px; opacity: 0; transition: opacity .2s, background .2s, color .2s; }
.pp-item:hover .pp-x, .pp-x:focus-visible { opacity: 1; }
.pp-x:hover { background: var(--atr-bg); color: var(--vermelho); }
@media (hover: none) { .pp-x { opacity: .6; } }
.link-cfg { text-decoration: none; transition: background .2s; }
.link-cfg:hover { background: var(--elevada); }

/* ---------- Pendências ---------- */
.pessoas { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 30px; }
.pessoa {
  display: inline-flex; align-items: center; gap: 9px; border: 0; background: var(--superficie); padding: 5px 14px 5px 5px;
  font-size: 14px; border-radius: 999px; box-shadow: var(--sombra-1); transition: background .25s, color .25s, transform .15s;
}
.pessoa:active { transform: scale(.96); }
.pessoa.ativo { background: var(--verde); color: var(--areia); }
.pessoa.ativo .chip { background: var(--areia); }
.pessoa .qtd { font-size: 12px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--preenchimento); display: inline-grid; place-items: center; }
.pessoa.ativo .qtd { background: rgba(239, 229, 211, .2); }
.grupo { margin-bottom: 22px; padding: 8px 10px 10px; }
.grupo h2 { font-size: 17px; padding: 14px 10px 10px; margin: 0; display: flex; justify-content: space-between; align-items: baseline; }
.grupo.atrasados h2 { color: var(--vermelho); }
.pend {
  display: grid; grid-template-columns: 22px 1fr 190px 160px; gap: 16px; align-items: center; padding: 12px 10px;
  border-radius: var(--r-s); font-size: 14px; cursor: pointer; transition: background .2s;
}
.pend:hover { background: var(--preenchimento); }
.pend + .pend { box-shadow: 0 -1px 0 var(--linha); }
.pend:hover + .pend { box-shadow: none; }
.pend .nome { font-size: 15px; }
.pend .onde { font-size: 12px; color: var(--tinta-3); margin-top: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pend .onde .capa { font-size: 7px !important; }
.pend .quando { font-size: 13px; font-variant-numeric: tabular-nums; }
.pend .quando span { display: block; font-size: 12px; color: var(--tinta-3); }
.pend.atrasado .quando, .pend.atrasado .quando span { color: var(--vermelho); }
.pend .ir { font-size: 12px; color: var(--tinta-3); opacity: 0; transition: opacity .2s, transform .3s var(--mola); transform: translateX(-4px); }
.pend:hover .ir { opacity: 1; transform: none; }
.sel-status {
  appearance: none; -webkit-appearance: none; border: 0; border-radius: 10px; background: var(--preenchimento); padding: 7px 28px 7px 12px; font-size: 13px; width: 100%; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--tinta-2) 50%), linear-gradient(135deg, var(--tinta-2) 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 11px) 52%; background-size: 4px 4px; background-repeat: no-repeat;
}

/* ---------- Configurações (listas agrupadas) ---------- */
.secao { display: grid; grid-template-columns: 260px 1fr; gap: 36px; padding: 10px 0 34px; }
.secao > header h2 { font-size: 17px; margin-bottom: 10px; }
.secao > header p { font-size: 14px; color: var(--tinta-2); margin: 0; }
.grupo-cfg { background: var(--superficie); border-radius: var(--r-l); box-shadow: var(--sombra-1); overflow: hidden; }
.grupo-cfg + .grupo-cfg { margin-top: 16px; }
.linha-cfg { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; min-height: 56px; }
.linha-cfg + .linha-cfg { box-shadow: 0 -1px 0 var(--linha); }
.linha-cfg .txt { min-width: 0; }
.linha-cfg .txt small { display: block; color: var(--tinta-3); font-size: 13px; margin-top: 2px; }
.linha-cfg input[type=number] { width: 76px; text-align: right; }
.linha-cfg input[type=date] { width: 160px; }
.campos { display: grid; gap: 16px; }
.campo { display: grid; gap: 7px; }
.campo > span { font-size: 13px; color: var(--tinta-2); font-weight: 500; }
.campo small { font-size: 12px; color: var(--tinta-3); }
input:not([type=checkbox]):not([type=radio]), select, textarea {
  border: 0; border-radius: var(--r-s); background: var(--elevada); padding: 10px 12px; font-size: 15px; width: 100%;
  box-shadow: inset 0 0 0 1px var(--linha-forte); transition: box-shadow .2s;
}
input:focus, select:focus, textarea:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--salvia), 0 0 0 4px rgba(93, 124, 113, .16); }
textarea { min-height: 96px; resize: vertical; }
/* Campos "limpos" (sem caixa) — precisam vir depois da regra geral de inputs */
.add-item input[name] { flex: 1; border-radius: 0; box-shadow: none; background: transparent; padding: 10px 0 4px; font-size: 14px; }
.add-item input[name]:focus { box-shadow: none; }
.gaveta input.nome-item { font-size: 22px; border-radius: 10px; box-shadow: none; background: transparent; padding: 4px 8px; margin-left: -8px; width: calc(100% + 8px); }
.gaveta input.nome-item:hover { background: var(--preenchimento); }
.gaveta input.nome-item:focus { background: var(--elevada); box-shadow: inset 0 0 0 1.5px var(--salvia); }
.linha-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }

/* Interruptor estilo iOS */
.interruptor { position: relative; width: 46px; height: 28px; flex: none; }
.interruptor input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; z-index: 1; }
.interruptor i { position: absolute; inset: 0; border-radius: 999px; background: var(--preenchimento-2); transition: background .3s var(--suave); }
.interruptor i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); transition: transform .4s var(--mola); }
.interruptor input:checked + i { background: var(--salvia); }
.interruptor input:checked + i::after { transform: translateX(18px); }

.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th { text-align: left; font-weight: 500; font-size: 12px; color: var(--tinta-3); padding: 12px 12px 8px 0; }
.tabela td { padding: 10px 12px 10px 0; border-top: 1px solid var(--linha); vertical-align: middle; }
.tabela td:first-child, .tabela th:first-child { padding-left: 20px; }
.tabela td.num, .tabela th.num { text-align: right; }
.tabela td:last-child, .tabela th:last-child { padding-right: 20px; }
.tabela input[type=number] { width: 70px; text-align: right; padding: 7px 9px; }
.tabela tfoot td { color: var(--tinta-2); }
.tabela-modal td:first-child, .tabela-modal th:first-child { padding-left: 0; }
.tabela-modal td:last-child, .tabela-modal th:last-child { padding-right: 0; }

/* ---------- Calculadora ---------- */
.calc-bloco { background: var(--superficie-2); border-radius: var(--r-m); padding: 18px; }
.calc-bloco + .calc-bloco { margin-top: 14px; }
.calc-bloco h3 { font-size: 15px; font-weight: 500; margin: 0 0 4px; }
.calc-bloco p { font-size: 13px; color: var(--tinta-2); margin: 0 0 14px; }
.calc-frase { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 15px; }
.calc-frase input[type=date] { width: 168px; }
.calc-frase input[type=number] { width: 80px; text-align: right; }
.calc-resultado { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linha); }
.calc-resultado .grande { font-family: var(--display); font-size: 26px; letter-spacing: .05em; }
.calc-resultado .det { font-size: 13px; color: var(--tinta-2); margin-top: 6px; }

/* ---------- Gaveta (detalhe do item) ---------- */
.veu { position: fixed; inset: 0; z-index: 40; background: rgba(23, 51, 46, .22); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .35s var(--suave); }
.veu.aberto { opacity: 1; pointer-events: auto; }
.gaveta {
  position: fixed; top: 12px; right: 12px; bottom: 12px; width: min(440px, calc(100% - 24px)); z-index: 50;
  background: var(--superficie); border-radius: var(--r-xl); box-shadow: var(--sombra-3);
  transform: translateX(calc(100% + 24px)); transition: transform .55s var(--mola); display: flex; flex-direction: column; overflow: hidden;
}
.gaveta:not(.aberta) { visibility: hidden; box-shadow: none; transition: transform .55s var(--mola), visibility 0s .55s, box-shadow 0s .55s; }
.gaveta.aberta { transform: none; }
.gaveta header { padding: 22px 22px 16px 26px; display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; border-bottom: 1px solid var(--linha); }
.gaveta .corpo { padding: 20px 26px 30px; overflow-y: auto; display: grid; gap: 18px; align-content: start; }

.fechar { flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--preenchimento); display: grid; place-items: center; font-size: 18px; line-height: 1; color: var(--tinta-2); transition: background .2s, transform .15s; }
.fechar:hover { background: var(--preenchimento-2); }
.fechar:active { transform: scale(.9); }
.status-opcoes { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); padding: 3px; border-radius: 12px; background: var(--preenchimento); }
.status-opcoes button { position: relative; z-index: 1; border: 0; background: transparent; padding: 9px 4px; font-size: 12px; line-height: 1.15; border-radius: 9px; color: var(--tinta-2); transition: color .25s; }
.status-opcoes button.ativo { color: var(--tinta); font-weight: 500; }
.status-opcoes .ind { position: absolute; top: 3px; bottom: 3px; left: 0; border-radius: 9px; background: var(--elevada); box-shadow: var(--sombra-1); transition: transform .45s var(--mola), width .45s var(--mola); }
.com-botao { display: flex; gap: 8px; align-items: center; }
.com-botao input { flex: 1; }
.meta-atualizacao { font-size: 12px; color: var(--tinta-3); border-top: 1px solid var(--linha); padding-top: 14px; }

/* ---------- Janela (modal) ---------- */
.modal {
  position: fixed; left: 50%; top: 50%; width: min(600px, calc(100% - 32px)); max-height: calc(100% - 48px); overflow-y: auto; z-index: 60;
  background: var(--superficie); border-radius: var(--r-xl); box-shadow: var(--sombra-3); padding: 30px;
  opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.94); transition: opacity .25s var(--suave), transform .5s var(--mola);
}
.modal.largo { width: min(760px, calc(100% - 32px)); }
.modal.aberto { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.modal h2 { font-size: 22px; margin-bottom: 8px; }
.modal .intro { color: var(--tinta-2); font-size: 14px; margin: 0 0 22px; }
.modal .rodape-modal { display: flex; justify-content: flex-end; gap: 8px; margin-top: 26px; flex-wrap: wrap; }
.modal .rodape-modal .esq { margin-right: auto; }
.aviso-caixa { background: var(--aten-bg); color: var(--aten); border-radius: var(--r-s); padding: 10px 14px; font-size: 13px; }
.aviso-caixa.ok { background: var(--ok-bg); color: var(--ok); }
.previa-prazos { background: var(--superficie-2); border-radius: var(--r-m); padding: 6px 16px 14px; }
.previa-prazos .total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; border-top: 1px solid var(--linha); margin-top: 4px; font-size: 14px; }
.previa-prazos .total strong { font-family: var(--display); font-weight: normal; font-size: 20px; letter-spacing: .05em; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 70; transform: translate(-50%, 24px) scale(.96);
  background: rgba(23, 51, 46, .92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: var(--areia);
  padding: 12px 20px; border-radius: 999px; font-size: 14px; box-shadow: var(--sombra-3);
  opacity: 0; transition: opacity .3s var(--suave), transform .5s var(--mola); pointer-events: none; white-space: nowrap;
}
.toast.visivel { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* ---------- Telas menores ---------- */
@media (max-width: 1100px) {
  :root { --gutter: 24px; }
  .proj-topo { grid-template-columns: 1fr; }
  .colunas { grid-template-columns: 1fr; }
  .secao { grid-template-columns: 1fr; gap: 14px; }
  .indicadores { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  :root { --gutter: 16px; }
  .topo { height: auto; flex-wrap: wrap; gap: 10px 12px; padding-top: 10px; padding-bottom: 10px; }
  .marca .logo-sec { display: none; }
  .marca .logo-ca { display: block; }
  .nav { order: 3; flex-basis: 100%; justify-content: space-between; }
  .nav a { flex: 1; text-align: center; padding: 7px 8px; font-size: 13px; }
  .icone-btn .txt { display: none; }
  .icone-btn { padding: 0 10px; }
  .conteudo { padding-top: 26px; }
  .cabecalho { margin-bottom: 26px; }
  .cabecalho h1 { font-size: 32px; }
  .indicadores { gap: 10px; }
  .indicador { padding: 16px; }
  .indicador .valor { font-size: 34px; }
  .proj-resumo { grid-template-columns: 1fr 1fr; padding: 20px; }
  .proj-resumo .bloco .valor { font-size: 34px; }
  .proj-ficha { padding: 22px; }
  /* Linha do tempo vertical */
  .lt-trilho { display: block; position: relative; padding-left: 30px; }
  .lt-trilho::before { content: ''; position: absolute; left: 14px; top: 30px; bottom: 30px; width: 2px; border-radius: 2px; background: var(--preenchimento-2); }
  .lt-linha { display: none; }
  .lt-no { position: absolute; left: 0; width: 30px; height: 0; margin-top: 40px; }
  .lt-no .bola { left: 6px; }
  .lt-hoje { display: none; }
  .lt-cabeca { padding: 30px 8px 10px 10px; }
  .lt-cabeca h2 { min-height: 0; }
  .lt-corpo { padding: 6px 0 18px 0; }
  .barra-filtros .segmentado { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .segmentado button { padding: 7px 11px; }
  .pend { grid-template-columns: 22px 1fr; gap: 6px 12px; }
  .pend .quando, .pend .sel-status { grid-column: 2; }
  .pend .ir { display: none; }
  /* Gaveta e janelas viram folhas inferiores */
  .gaveta { top: auto; left: 0; right: 0; bottom: 0; width: 100%; height: 90vh; border-radius: var(--r-xl) var(--r-xl) 0 0; transform: translateY(100%); }
  .gaveta::before { content: ''; position: absolute; top: 7px; left: 50%; width: 38px; height: 5px; margin-left: -19px; border-radius: 3px; background: var(--linha-forte); }
  .modal, .modal.largo { top: auto; bottom: 0; left: 0; width: 100%; max-height: 92vh; border-radius: var(--r-xl) var(--r-xl) 0 0; transform: translateY(100%); padding: 26px 18px 30px; }
  .modal.aberto { transform: none; }
  .tabela td:first-child, .tabela th:first-child { padding-left: 14px; }
  .tabela td:last-child, .tabela th:last-child { padding-right: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}