/* EquipInFlow — layout, páginas, formulários e modais do aplicativo. */

.eif-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
.eif-tabs::-webkit-scrollbar { display: none; }
.eif-tab { white-space: nowrap; flex: none; }
.hs > * { min-width: 0; }
.eif-avatar-c { background: var(--member-c); }
.eif-avatar-d { background: var(--member-d); }
.eif-btn-sm { height: 30px; padding: 0 var(--space-3); font-size: 13px; }
.eif-btn-perigo { color: var(--risk); }
.eif-btn-perigo:hover { background: var(--risk-soft); }
.eif-btn:disabled { opacity: .55; cursor: default; }

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-sans); font-size: 14px; line-height: 20px; background: var(--surface); color: var(--ink); }
a { color: var(--flow); }
code { font-family: var(--font-mono); font-size: 12px; background: var(--surface-sunken); padding: 1px 5px; border-radius: var(--radius-sm); }
h1, h2, h3, h4 { margin: 0; }
button { font: inherit; }
[hidden] { display: none !important; }
.muted { color: var(--ink-muted); font-size: 12px; line-height: 16px; }
.num { font-variant-numeric: tabular-nums; }

/* ===== Layout ===== */
.app-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.barra-lateral { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--surface-raised); border-right: 1px solid var(--line); padding: var(--space-6) var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); }
.marca { font-size: 20px; line-height: 28px; font-weight: 600; margin: 0 var(--space-2) var(--space-6); color: var(--ink); text-decoration: none; }
.marca span { color: var(--flow); }
.nav-item { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); font-size: 14px; line-height: 20px; padding: var(--space-2); border-radius: var(--radius-md); color: var(--ink-muted); text-decoration: none; }
.nav-item:hover { background: var(--surface-sunken); color: var(--ink); }
.nav-item.ativo { background: var(--flow-soft); color: var(--flow); font-weight: 600; }
.nav-item:focus-visible, .nav-proj:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.nav-alerta { font-size: 12px; line-height: 20px; padding: 0 6px; border-radius: var(--radius-full); background: var(--risk-soft); color: var(--risk); font-weight: 600; }
.nav-sec { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-muted); margin: var(--space-6) var(--space-2) var(--space-2); }
.nav-proj { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; line-height: 18px; padding: 6px var(--space-2); border-radius: var(--radius-md); color: var(--ink); text-decoration: none; }
.nav-proj:hover { background: var(--surface-sunken); }
.nav-proj.ativo { background: var(--surface-sunken); font-weight: 600; }
.nav-dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--flow); flex: none; }
.nav-dot.risk { background: var(--risk); }
.nav-dot.done { background: var(--done); }
.nav-dot.pausado { background: var(--ink-muted); }
.nav-rodape { margin-top: auto; padding-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.nav-eu { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; padding: var(--space-2); }
.nav-eu > span:last-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.botao-icone { font: inherit; font-size: 12px; border: 1px solid var(--line); background: var(--surface-raised); color: var(--ink-muted); border-radius: var(--radius-md); padding: 4px 8px; cursor: pointer; }
.botao-icone:hover { color: var(--ink); }
.conteudo { min-width: 0; }
.pagina { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-6); max-width: 1440px; }
.pagina-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; }
.titulo-pagina { font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -.01em; }
.subtitulo { font-size: 14px; line-height: 20px; color: var(--ink-muted); margin: 2px 0 0; }
.trilha { font-size: 13px; line-height: 18px; color: var(--ink-muted); margin-bottom: var(--space-1); }
.trilha a { text-decoration: none; }
.acoes { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.carregando { padding: var(--space-8); color: var(--ink-muted); }

@media (max-width: 900px) {
  .app-layout { grid-template-columns: minmax(0, 1fr); }
  .barra-lateral { position: sticky; top: 0; z-index: 10; height: auto; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: var(--space-1); padding: var(--space-2) var(--space-3); align-items: center; border-right: 0; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
  .marca { margin: 0 var(--space-3) 0 var(--space-1); font-size: 17px; flex: none; }
  .nav-item { flex: none; white-space: nowrap; padding: 6px 10px; font-size: 13px; }
  .nav-sec, .nav-proj { display: none; }
  .nav-rodape { margin: 0; padding: 0; flex-direction: row; align-items: center; flex: none; gap: var(--space-1); }
  .nav-rodape .acoes { flex-wrap: nowrap; }
  .nav-eu { padding: 0 var(--space-1); }
  .nav-eu > span:last-child { display: none; }
  .pagina { padding: var(--space-4); gap: var(--space-4); }
}

/* ===== Blocos e grades ===== */
.bloco { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.bloco-topo { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.h2 { font-size: 15px; line-height: 22px; font-weight: 600; }
.link-acao { font: inherit; font-size: 13px; color: var(--flow); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; }
.link-acao:hover { text-decoration: underline; }
.vazio { font-size: 13px; color: var(--ink-muted); text-align: center; padding: var(--space-4) var(--space-2); border: 1px dashed var(--line); border-radius: var(--radius-md); }
.grade-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-3); }
.grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
.grade-lado { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-6); align-items: start; }
.coluna-lado { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
@media (max-width: 1280px) { .grade-lado { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1100px) { .grade-2 { grid-template-columns: minmax(0, 1fr) !important; } }
.linha-lista { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; border-top: 1px solid var(--line); font-size: 13px; line-height: 18px; }
.linha-lista:first-of-type { border-top: 0; }
.cliente-tag { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--pulse); }

/* ===== Quadro de tarefas ===== */
.eif-code { white-space: nowrap; flex: none; }
.eif-task-projeto { min-width: 0; }
.quadro { display: grid; grid-template-columns: repeat(4, minmax(200px, 1fr)); gap: var(--space-3); overflow-x: auto; padding-bottom: var(--space-2); }
.coluna { background: var(--surface-sunken); border-radius: var(--radius-lg); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-3); min-height: 320px; transition: box-shadow .12s; }
.coluna.arrastando-sobre { box-shadow: inset 0 0 0 2px var(--flow); }
.coluna-topo { display: flex; justify-content: space-between; font-size: 13px; line-height: 18px; font-weight: 600; padding: 0 var(--space-1); }
.coluna-topo span:last-child { color: var(--ink-muted); font-weight: 400; }
.eif-task { cursor: pointer; }
.eif-task:hover { border-color: var(--ink-muted); }
.eif-task:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.eif-task[draggable="true"] { cursor: grab; }
.eif-task.arrastando { opacity: .5; }
.botao-adicionar { font: inherit; font-size: 13px; color: var(--ink-muted); background: transparent; border: 1px dashed var(--line); border-radius: var(--radius-md); padding: var(--space-2); text-align: left; cursor: pointer; }
.botao-adicionar:hover { color: var(--flow); border-color: var(--flow); }
.selo-bloqueada { font-size: 11px; font-weight: 600; color: var(--risk); }

/* ===== Tabelas ===== */
.tabela-wrap { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow-x: auto; background: var(--surface-raised); }
table.tabela { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 18px; }
.tabela th { text-align: left; font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-muted); background: var(--surface-sunken); padding: var(--space-2) var(--space-4); white-space: nowrap; }
.tabela td { padding: var(--space-2) var(--space-4); border-top: 1px solid var(--line); vertical-align: middle; }
.tabela .dir { text-align: right; font-variant-numeric: tabular-nums; }
.tabela tr.clicavel { cursor: pointer; }
.tabela tr.clicavel:hover td { background: var(--surface-sunken); }
.tabela tr.selecionada td { background: var(--flow-soft); }
.tabela tr.total td { font-weight: 600; background: var(--surface-sunken); }

/* ===== Formulários ===== */
.formulario { display: flex; flex-direction: column; gap: var(--space-3); }
.formulario label, .campo { display: flex; flex-direction: column; gap: var(--space-1); font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-muted); }
.entrada, .formulario input:not([type=checkbox]):not([type=file]), .formulario select, .formulario textarea { font: inherit; font-size: 14px; font-weight: 400; color: var(--ink); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 0 var(--space-3); height: 36px; width: 100%; }
.formulario textarea, textarea.entrada { height: auto; min-height: 88px; padding: var(--space-2) var(--space-3); line-height: 20px; resize: vertical; }
.entrada:focus, .formulario input:focus, .formulario select:focus, .formulario textarea:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: transparent; }
.linha-check { flex-direction: row !important; align-items: center; gap: var(--space-2) !important; font-size: 13px !important; color: var(--ink) !important; font-weight: 400 !important; }
.campos-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.campos-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
@media (max-width: 640px) { .campos-2, .campos-3 { grid-template-columns: minmax(0, 1fr); } }
.escolha-membros { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.formulario .escolha-membro, .escolha-membro { position: relative; display: inline-flex; flex-direction: row; align-items: center; gap: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-full); padding: 3px 10px 3px 3px; cursor: pointer; font-size: 13px; color: var(--ink); background: var(--surface-raised); font-weight: 400; }
.escolha-membro.marcado { border-color: var(--flow); background: var(--flow-soft); }
.escolha-membro input { position: absolute; opacity: 0; pointer-events: none; }
.escolha-membro:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; }
.ajuda { font-size: 12px; line-height: 16px; color: var(--ink-muted); font-weight: 400; }
.entrada-unidade { display: flex; align-items: center; gap: var(--space-2); }
.entrada-unidade span { font-size: 13px; color: var(--ink-muted); white-space: nowrap; }

/* ===== Modal e avisos ===== */
.modal-fundo { position: fixed; inset: 0; background: rgba(10, 16, 14, .45); display: flex; align-items: flex-start; justify-content: center; padding: 6vh var(--space-4) var(--space-4); z-index: 50; overflow-y: auto; }
.modal { background: var(--surface-raised); color: var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); width: 100%; max-width: 560px; display: flex; flex-direction: column; }
.modal.largo { max-width: 860px; }
.modal-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--line); }
.modal-cab h2 { font-size: 18px; line-height: 26px; font-weight: 600; }
.modal-fechar { font: inherit; font-size: 20px; line-height: 20px; border: 0; background: none; color: var(--ink-muted); cursor: pointer; padding: 4px 8px; border-radius: var(--radius-md); }
.modal-fechar:hover { background: var(--surface-sunken); color: var(--ink); }
.modal-corpo { padding: var(--space-4) var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.modal-rodape { display: flex; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) var(--space-6); border-top: 1px solid var(--line); flex-wrap: wrap; }
.modal-rodape .acoes { margin-left: auto; }
.avisos { position: fixed; right: var(--space-4); bottom: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); z-index: 60; max-width: min(380px, calc(100vw - 32px)); }
.aviso-flutuante { background: var(--ink); color: var(--surface); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); font-size: 13px; line-height: 18px; }
.aviso-flutuante.erro { background: var(--risk); color: #fff; }

/* ===== Login e instalador ===== */
.tela-simples { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.cartao-simples { width: 100%; max-width: 440px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); }
.cartao-simples h2 { font-size: 18px; line-height: 26px; }
.cartao-simples .marca { margin: 0; }
.aviso { background: var(--review-soft); color: var(--review); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: 13px; line-height: 20px; margin: 0; }
.aviso-risco { background: var(--risk-soft); color: var(--risk); }
code.chave { display: block; margin: var(--space-2) 0; padding: var(--space-2); word-break: break-all; user-select: all; }

/* ===== Detalhe da tarefa ===== */
.tarefa-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.secao-tit { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-muted); }
.comentario { display: flex; gap: var(--space-2); font-size: 13px; line-height: 18px; padding: var(--space-2) 0; border-top: 1px solid var(--line); }
.comentario:first-child { border-top: 0; }
.comentario-texto { white-space: pre-wrap; }
.nova-linha { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.nova-linha .entrada { flex: 1 1 220px; min-width: 0; }
.nova-linha select.entrada { flex: 1 1 130px; width: auto !important; }
.texto-livre { white-space: pre-wrap; font-size: 14px; line-height: 22px; margin: 0; }

/* ===== Guias ===== */
.guias { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: var(--space-4); align-items: start; }
@media (max-width: 900px) { .guias { grid-template-columns: minmax(0, 1fr); } }
.guias-lista { display: flex; flex-direction: column; gap: var(--space-2); }
.leitor { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.leitor-topo { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.leitor-titulo { font-size: 20px; line-height: 28px; font-weight: 600; }
.leitor-meta { display: flex; align-items: center; gap: var(--space-2); font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.leitor h4 { font-size: 15px; line-height: 22px; font-weight: 600; margin: var(--space-2) 0 0; }
.leitor p { margin: 0; font-size: 14px; line-height: 22px; }
.leitor ul { margin: 0; padding-left: var(--space-6); font-size: 14px; line-height: 22px; }
.passos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); counter-reset: passo; }
.passos li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: 14px; line-height: 22px; counter-increment: passo; }
.passos li::before { content: counter(passo); flex: none; width: 22px; height: 22px; border-radius: var(--radius-full); background: var(--flow-soft); color: var(--flow); font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.codigo { margin: 0; font-family: var(--font-mono); font-size: 12px; line-height: 20px; background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); white-space: pre; overflow-x: auto; color: var(--ink); }
.dica { background: var(--review-soft); color: var(--review); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: 13px; line-height: 20px; }
.util { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: var(--space-3); font-size: 13px; color: var(--ink-muted); }

/* ===== Central ===== */
.vencs { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--space-3); }
.eif-venc { cursor: pointer; }
.central-corpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 300px; gap: var(--space-4); align-items: start; }
@media (max-width: 1200px) { .central-corpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 800px) { .central-corpo { grid-template-columns: minmax(0, 1fr); } }
.log { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-2) 0; border-top: 1px solid var(--line); font-size: 13px; line-height: 18px; }
.log:first-of-type { border-top: 0; }
.regras { background: var(--surface-sunken); border: 0; }
.regras ul { margin: 0; padding-left: var(--space-4); font-size: 13px; line-height: 20px; }

/* ===== Modo foco ===== */
.foco { min-height: 100vh; display: flex; flex-direction: column; }
.foco-barra { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-6); background: var(--ink); color: var(--surface); flex-wrap: wrap; position: sticky; top: 0; z-index: 5; }
.foco-marca { display: flex; align-items: center; gap: var(--space-3); font-size: 14px; font-weight: 600; }
.foco-pill { font-size: 12px; line-height: 20px; font-weight: 600; padding: 0 var(--space-2); border-radius: var(--radius-full); background: var(--surface); color: var(--ink); }
.foco-meio { display: flex; align-items: center; gap: var(--space-4); font-size: 13px; }
.relogio { font-family: var(--font-mono); font-size: 16px; font-weight: 600; letter-spacing: .02em; }
.foco-btn { font: inherit; font-size: 13px; font-weight: 600; height: 32px; padding: 0 var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--surface); background: transparent; color: var(--surface); cursor: pointer; }
.foco-btn:focus-visible { outline: 2px solid var(--surface); outline-offset: 2px; }
.foco-conteudo { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-6); padding: var(--space-8); max-width: 1180px; margin: 0 auto; width: 100%; }
@media (max-width: 900px) { .foco-conteudo { grid-template-columns: minmax(0, 1fr); padding: var(--space-4); } }
.foco-principal { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.foco-titulo { font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -.01em; margin-top: var(--space-1); }
.bolinha { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--done); display: inline-block; }
.retido { background: var(--surface-sunken); border: 0; }
.retido-num { font-size: 24px; line-height: 28px; font-weight: 600; }
.foco-saida { max-width: 680px; margin: 8vh auto; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); }
.foco-saida h1 { font-size: 28px; line-height: 36px; }

/* ===== Horas ===== */
.hcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); }
.hcards > * { min-width: 0; }
.hs { display: grid; grid-template-columns: 150px minmax(0, 1fr) 180px; gap: var(--space-3); align-items: center; font-size: 13px; line-height: 18px; }
.hs-rot { color: var(--ink-muted); }
.hs-rot.atual { color: var(--ink); font-weight: 600; }
.hs-trilha { display: flex; gap: 2px; height: 14px; }
.hs-trilha > div:first-child { border-radius: 4px 0 0 4px; }
.hs-trilha > div:last-child { border-radius: 0 4px 4px 0; }
.hs-trilha > div:only-child { border-radius: 4px; }
.hs-num { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.legenda { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: 12px; color: var(--ink-muted); }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-left: var(--space-2); }
.fundo-a { background: var(--member-a); }
.fundo-b { background: var(--member-b); }
.fundo-c { background: var(--member-c); }
.fundo-d { background: var(--member-d); }

/* ===== Custos ===== */
.mes-nav { display: inline-flex; align-items: center; gap: var(--space-2); }
.mes-nome { font-size: 15px; font-weight: 600; min-width: 160px; text-align: center; }
.seta { font: inherit; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); cursor: pointer; }
.seta:disabled { opacity: .45; cursor: default; }
.grafico { position: relative; height: 210px; margin: 24px 0 0 56px; border-bottom: 1px solid var(--ink-muted); }
.grade-linha { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line); }
.grade-linha span { position: absolute; left: -56px; top: -8px; width: 50px; text-align: right; font-size: 11px; line-height: 16px; color: var(--ink-muted); }
.barras { position: absolute; inset: 0; display: flex; justify-content: space-around; align-items: flex-end; }
.barra-col { position: relative; width: 14%; height: 100%; display: flex; align-items: flex-end; justify-content: center; cursor: pointer; background: none; border: 0; padding: 0; }
.barra { position: relative; width: 60%; background: var(--ink-muted); border-radius: 4px 4px 0 0; min-height: 2px; }
.barra-col.sel .barra { background: var(--flow); }
.barra-col:hover .barra, .barra-col:focus-visible .barra { filter: brightness(1.15); }
.barra-col:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.barra-valor { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--ink); }
.dica-grafico { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--surface); font-size: 12px; line-height: 16px; padding: var(--space-2); border-radius: var(--radius-md); white-space: nowrap; z-index: 3; pointer-events: none; text-align: left; }
.eixo { display: flex; justify-content: space-around; margin-left: 56px; font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.eixo span { width: 14%; text-align: center; }
.eixo .sel { color: var(--ink); font-weight: 600; }
.cat { display: grid; grid-template-columns: 150px minmax(0, 1fr) 90px 40px; gap: var(--space-3); align-items: center; font-size: 13px; line-height: 18px; }
.cat-trilha { height: 10px; border-radius: 4px; background: var(--surface-sunken); overflow: hidden; }
.cat-barra { height: 100%; background: var(--flow); border-radius: 4px; }
.preco-grade { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--space-4); align-items: start; }
@media (max-width: 1000px) { .preco-grade { grid-template-columns: minmax(0, 1fr); } }
.precos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.precos .eif-preco, .hrow .eif-horas { min-width: 0; }
.hrow { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--space-3); }
@media (max-width: 760px) { .precos, .hrow { grid-template-columns: minmax(0, 1fr); } }
.derivado { display: flex; justify-content: space-between; font-size: 13px; line-height: 18px; padding-top: var(--space-2); border-top: 1px solid var(--line); }
.faixa { position: relative; height: 64px; margin: var(--space-4) var(--space-4) var(--space-6); }
.zona { position: absolute; top: 20px; height: 16px; }
.z-risk { background: var(--risk-soft); border-radius: 4px 0 0 4px; }
.z-review { background: var(--review-soft); }
.z-flow { background: var(--flow-soft); }
.z-done { background: var(--done-soft); border-radius: 0 4px 4px 0; }
.marca-faixa { position: absolute; top: 14px; height: 28px; width: 2px; margin-left: -1px; background: var(--ink-muted); }
.marca-rot { position: absolute; top: 44px; transform: translateX(-50%); font-size: 11px; line-height: 14px; text-align: center; color: var(--ink-muted); white-space: nowrap; }
.proposta { position: absolute; top: 18px; width: 14px; height: 14px; margin-left: -7px; transform: rotate(45deg); background: var(--flow); border: 2px solid var(--surface-raised); border-radius: 2px; }
.proposta-rot { position: absolute; top: -2px; transform: translateX(-50%); font-size: 12px; font-weight: 600; color: var(--flow); white-space: nowrap; }
.passos-calc { margin: 0; padding-left: var(--space-6); font-size: 13px; line-height: 22px; }
.nota { font-size: 12px; line-height: 18px; color: var(--ink-muted); margin: 0; }

/* ===== Apresentação (cronograma para o cliente) ===== */
.apresentacao { padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-6); max-width: 1280px; margin: 0 auto; }
.apresentacao-faixa { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--ink-muted); border-bottom: 1px solid var(--line); padding-bottom: var(--space-4); gap: var(--space-3); flex-wrap: wrap; }
.eyebrow { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; color: var(--flow); margin: 0 0 var(--space-1); }
.apresentacao-titulo { font-size: 36px; line-height: 44px; font-weight: 600; letter-spacing: -.015em; }
.kpi { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.kpi > .eif-prazo, .kpi > .eif-badge, .eif-stat .eif-badge { align-self: flex-start; }
.kpi-rot { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-muted); }
.kpi-val { font-size: 22px; line-height: 28px; font-weight: 600; }
.losango { width: 10px; height: 10px; transform: rotate(45deg); background: var(--ink); border-radius: 2px; margin-left: 3px; display: inline-block; }
.losango.feito { background: var(--done); }
.gantt-rolagem { overflow-x: auto; }
.gantt-rolagem .eif-gantt { min-width: 900px; }
.eif-gantt.editavel .eif-gantt-bar, .eif-gantt.editavel .eif-gantt-label { cursor: pointer; }
/* ===== Celular (fica no fim para valer sobre as regras base) ===== */
@media (max-width: 640px) {
  .grade-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eif-stat { min-width: 0; padding: var(--space-3); }
  .titulo-pagina, .foco-titulo { font-size: 24px; line-height: 30px; }
  .apresentacao-titulo { font-size: 28px; line-height: 34px; }
  .apresentacao { padding: var(--space-4); }
  .pagina-cab .acoes { width: 100%; }
  .modal-corpo, .modal-cab, .modal-rodape { padding-left: var(--space-4); padding-right: var(--space-4); }
  .modal-fundo { padding: var(--space-2); }
  .hs { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .hs-num { text-align: left; }
  .cat { grid-template-columns: 110px minmax(0, 1fr) 80px; }
  .cat > :last-child { display: none; }
}

@media print {
  .barra-lateral, .nao-imprimir { display: none !important; }
  .app-layout { display: block; }
  body { background: #fff; }
  .apresentacao { padding: 0; }
}