/* planejamento.css — Linha do tempo, Cronograma do dia e Documentos (/app). */

/* ── Cronograma: o roteiro ── */
.roteiro { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.roteiro-item {
  position: relative; display: grid; grid-template-columns: 86px minmax(0, 1fr) auto; gap: var(--esp-4); align-items: start;
  padding: var(--esp-4) 0; border-bottom: 1px solid var(--borda);
}
.roteiro-item:last-child { border-bottom: 0; }
.roteiro-item.destaque .roteiro-hora strong { color: var(--p-500); }
.roteiro-item.destaque { background: linear-gradient(90deg, var(--p-100), transparent 70%); border-radius: var(--raio-sm); padding-left: var(--esp-3); }
.roteiro-hora { display: grid; gap: 2px; font-variant-numeric: tabular-nums; }
.roteiro-hora strong { font-family: var(--fonte-display); font-size: 22px; line-height: 1; }
.roteiro-hora small { font-size: 12px; color: var(--texto-muted); }
.roteiro-corpo strong { font-size: var(--texto-md); }
.roteiro-corpo .caption { margin-top: 4px; line-height: 1.6; }
.roteiro-corpo .caption .material-symbols-outlined { font-size: 15px; vertical-align: -3px; }
.roteiro-corpo p { margin: 6px 0 0; font-size: var(--texto-sm); color: var(--texto-soft); line-height: 1.55; }
.roteiro .pro-vazio { list-style: none; }
.roteiro-modelo { display: flex; flex-wrap: wrap; gap: var(--esp-3); align-items: flex-end; justify-content: center; margin-top: var(--esp-3); }
.roteiro-modelo .campo { margin: 0; display: grid; gap: 4px; text-align: left; }
.roteiro-link { display: flex; gap: var(--esp-2); margin-top: var(--esp-3); }
.roteiro-link .input { flex: 1; min-width: 0; font-size: 12px; }

/* Página pública do cronograma (e impressão) */
body.roteiro-publico { margin: 0; background: var(--fundo, #faf7f4); color: var(--texto); font-family: var(--fonte-ui); }
.roteiro-folha { max-width: 760px; margin: 0 auto; padding: clamp(24px, 6vw, 64px) var(--esp-5); }
.roteiro-folha header { text-align: center; margin-bottom: var(--esp-8); }
.roteiro-folha h1 { margin: var(--esp-2) 0; font-family: var(--fonte-display); color: var(--p-500); font-size: clamp(30px, 6vw, 46px); }
.roteiro-folha header p { margin: 0 0 var(--esp-4); color: var(--texto-soft); line-height: 1.6; }
.roteiro-sobre { font-size: 12px !important; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ouro-500) !important; }
.roteiro-folha footer { margin-top: var(--esp-8); text-align: center; font-size: 12px; color: var(--texto-muted); }
.roteiro-folha .roteiro { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-md); padding: var(--esp-2) var(--esp-6); }
.roteiro-folha .roteiro-item { grid-template-columns: 86px minmax(0, 1fr); }
.roteiro-folha #carregando { display: grid; place-items: center; min-height: 50vh; }
.roteiro-folha #indisponivel { text-align: center; padding: var(--esp-16) 0; }

/* ── Linha do tempo ── */
.linha-tempo { list-style: none; margin: 0; padding: 0 0 0 28px; position: relative; display: grid; gap: var(--esp-2); }
.linha-tempo::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--p-200), var(--ouro-300)); border-radius: 2px; }
.linha-mes { margin: var(--esp-5) 0 var(--esp-1) -28px; padding-left: 28px; font-family: var(--fonte-display); font-size: 19px; color: var(--p-500); }
.linha-mes::first-letter { text-transform: uppercase; }
.linha-mes:first-child { margin-top: 0; }
.linha-mes.final { display: flex; align-items: center; gap: var(--esp-2); color: var(--p-600); text-transform: none; }
.linha-mes.final .material-symbols-outlined { color: var(--p-500); }
.linha-hoje { position: relative; margin: var(--esp-3) 0 var(--esp-3) -28px; padding-left: 28px; }
.linha-hoje::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed var(--ouro-500); }
.linha-hoje span { position: relative; display: inline-block; padding: 2px 12px; border-radius: 99px; background: var(--ouro-500); color: #fff; font-size: 12px; font-weight: 700; }
.linha-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--esp-3); align-items: center; padding: var(--esp-3) var(--esp-4); border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--superficie); }
.linha-item.tarefa { background: var(--superficie-2); }
.linha-item.atrasado { border-color: color-mix(in srgb, var(--p-500) 35%, transparent); background: var(--p-100); }
.linha-item.feito { opacity: .8; }
.linha-ponto { position: absolute; left: -28px; top: 50%; transform: translate(0, -50%); width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--superficie); }
.linha-ponto .material-symbols-outlined { font-size: 20px; color: var(--texto-muted); }
.linha-item.marco .linha-ponto .material-symbols-outlined { color: var(--ouro-500); }
.linha-item.feito .linha-ponto .material-symbols-outlined { color: #1B6E32; }
.linha-item.atrasado .linha-ponto .material-symbols-outlined { color: var(--p-500); }
.linha-topo { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; justify-content: space-between; }
.linha-corpo .caption { margin: 4px 0 0; line-height: 1.5; }
/* "Próximo passo" é um título, não um número: menor e sem passar por baixo do ícone. */
.pro-kpis .kpi-texto .kpi-valor { font-size: 17px; line-height: 1.3; padding-right: 30px; overflow-wrap: normal; }

/* ── Documentos ── */
.documentos-pasta-envio { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); margin-bottom: var(--esp-3); font-size: var(--texto-sm); color: var(--texto-soft); }
.documentos-pasta-envio .select { min-height: 38px; }
.documentos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--esp-3); margin-top: var(--esp-4); }
.documento { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--esp-3); align-items: center; padding: var(--esp-4); }
.documento-icone { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--raio-sm); background: var(--p-100); color: var(--p-500); }
.documento-corpo { display: grid; gap: 2px; min-width: 0; }
.documento-corpo strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#da-plataforma { margin-top: var(--esp-4); }

@media (max-width: 640px) {
  .roteiro-item { grid-template-columns: 64px minmax(0, 1fr); }
  .roteiro-item .pro-foto-acoes { grid-column: 1 / -1; justify-content: flex-end; }
  .roteiro-hora strong { font-size: 18px; }
  .linha-item { grid-template-columns: 1fr; }
}

/* Impressão: só o roteiro, sem menus nem botões */
@media print {
  .area-topo, .area-lateral, .area-veu, .area-saudacao-acoes, .nao-imprimir, .pro-foto-acoes, .toast-container { display: none !important; }
  body.area .app-conteudo { padding: 0 !important; }
  body.area .app-main { padding: 0 !important; }
  .grade-12 { display: block !important; }
  .bloco { box-shadow: none !important; border: 0 !important; }
  .roteiro-item { break-inside: avoid; }
  body, body.roteiro-publico { background: #fff !important; }
}