/* =========================================================================
   app.css
   ========================================================================= */

:root {
  /* Paleta Ventriloc. A página lê acromática; o acento é pontuação. */
  --tinta:        #202020;   /* Graphite */
  --tinta-media:  #4d4d4d;   /* Steel */
  /* Carrega dado, então precisa de 4,5:1. O pior caso NÃO é --fundo: é
     --acento-fraco, que é a chapa da linha de fase, do indicador em destaque e
     da faixa-ok, e que fica mais escura que --fundo em acentos escuros.
     Recalculado por medição em tema.js contra o mais escuro dos três. */
  --tinta-fraca:  #4d4d4d;
  --fundo:        #efefef;   /* Ash — superfície dominante de seção */
  --papel:        #ffffff;   /* Canvas White */
  --fog:          #f5f5f5;   /* container aninhado */
  --chapa-quente: #ebe6dd;   /* Ivory — o "papel" dos blocos em destaque */
  --linha:        #e8e8e8;   /* Mist */
  --linha-forte:  #d0d0d0;
  /* Ember Orange. Estes valores são só o estado inicial: Tema.aplicar()
     reescreve a família inteira por contraste medido. O acento CRU tem
     2,89:1 sobre branco — nunca serve de texto. Para texto vale
     --acento-legivel; para sinal não-textual, --acento-sinal. */
  --acento:        #ff682c;
  --acento-escuro: #e65e28;
  --acento-fraco:  #fff0ea;
  --acento-medio:  #ffe1d5;
  --acento-borda:  #cc5323;
  --acento-tinta:  #b3491f;
  --alerta:       #a4341f;
  --alerta-fraco: #fbeae6;
  --atencao:      #816729;   /* Brass */
  --atencao-fraco:#fdf3dd;
  /* Verde semântico: NÃO é o acento e não vira laranja — "bom" e "atenção"
     precisam se distinguir da marca. Derivado por medição em tema.js. */
  --ok:           #4a5b24;
  /* Cor do texto sobre o acento — recalculada por contraste em tema.js. */
  --acento-texto: #ffffff;
  /* Acento seguro para TEXTO (4,5:1). Recalculado por medição em tema.js. */
  --acento-legivel: #b3491f;
  /* Acento com 3:1 garantido: preenchimentos e marcadores não-textuais. */
  --acento-sinal: #e65e28;

  /* Tipografia — todos os tamanhos derivam destas duas medidas. */
  --fonte-corpo:   -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-titulos: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tam-base:   14px;
  --tam-titulo: 18px;
  --tam-menor:  max(11px, calc(var(--tam-base) * .93));
  --tam-mini:   max(11px, calc(var(--tam-base) * .90));
  --tam-micro:  max(10px, calc(var(--tam-base) * .86));
  --tam-rotulo: max(10px, calc(var(--tam-base) * .79));
  --tam-nano:   max(9px,  calc(var(--tam-base) * .72));

  --r: 8px;
  /* SEM sombra em lugar nenhum: profundidade vem de cor de superfície.
     O token fica para que qualquer uso remanescente resolva em none. */
  --sombra: none;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font: var(--tam-base)/1.5 var(--fonte-corpo);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .indicador-valor, .cenario-titulo, .cenario-num, .rodape-nome {
  font-family: var(--fonte-titulos);
}

/* ------------------------------- topo ---------------------------------- */

.topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 20px 28px;
  background: var(--papel);
  border-bottom: 1px solid var(--linha);
}

.topo-titulo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* Logo do escritório. Sem imagem, vira um alvo tracejado que leva às
   Configurações — o espaço fica reservado em vez de sumir. */
.logo-topo {
  display: flex; align-items: center; justify-content: center;
  height: 40px; min-width: 40px; max-width: 200px;
  padding: 0; border: 0; background: none;
  border-radius: 4px; cursor: pointer;
  flex: none;
}
.logo-topo img { display: block; height: 100%; width: auto; max-width: 200px; object-fit: contain; }
.logo-topo.vazio-logo {
  width: 46px;
  border: 1px dashed var(--linha-forte);
  color: var(--tinta-fraca);
  font-size: var(--tam-nano);
  text-transform: uppercase; letter-spacing: .06em;
}
.logo-topo.vazio-logo:hover { border-color: var(--acento-sinal); color: var(--acento-legivel); background: var(--acento-fraco); }
/* Título em peso 400 e -0.02em de tracking é a assinatura da direção; parece
   "fraco demais" de propósito. Os 500/600 do corpo continuam valendo — eles
   estão na fonte de CORPO, não na de título. */
.topo h1 { margin: 0; font-size: var(--tam-titulo); font-weight: 400; letter-spacing: -.02em; }
.topo-projeto { color: var(--tinta-fraca); font-size: var(--tam-menor); }
/* `flex-wrap` obrigatório: os quatro botões formam uma linha indivisível de
   436px, e sem quebrar era ELA — não as tabelas — que fazia a página inteira
   rolar na horizontal em telas de 375px, em todas as abas, inclusive nas que
   não têm tabela nenhuma. */
.topo-acoes { display: flex; flex-wrap: wrap; gap: 8px; }

/* Botões: preenchidos em musgo claro por padrão, não apenas contornados —
   num app cheio de tabela e campo, o contorno fino desaparecia. */
.btn {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--acento-borda);
  border-radius: var(--r);
  background: var(--acento-fraco);
  color: var(--acento-tinta);
  font: inherit; font-family: var(--fonte-corpo); font-size: var(--tam-menor); font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition: background .12s, border-color .12s, box-shadow .12s, transform .06s;
}
/* Sem sombra: o feedback de hover é chapa + contorno em --acento-sinal, que
   tem 3:1 garantido contra o fundo em QUALQUER acento. */
.btn:hover {
  background: var(--acento-medio);
  border-color: var(--acento-sinal);
}
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn:focus-visible { outline: 2px solid var(--acento-legivel); outline-offset: 2px; }
/* Todo elemento focável do app compartilha o mesmo anel legível. */
.aba:focus-visible, .remover:focus-visible, .link-projeto:focus-visible,
.cenario:focus-visible, .logo-topo:focus-visible, .amostra:focus-visible,
input[type="range"]:focus-visible {
  outline: 2px solid var(--acento-legivel); outline-offset: 2px;
}

.btn-primario {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--acento-texto);
}
/* No pior acento o escurecimento do hover é ZERO (o laço de Tema.aplicar para
   em t=0 quando o texto não aguenta mais) e o feedback ficava por conta da
   sombra — que a direção nova proíbe. O anel INTERNO em --acento-texto resolve
   sem profundidade: é a única cor já aferida em 4,5:1 contra --acento E contra
   --acento-escuro, então aparece nos dois extremos. */
.btn-primario:hover {
  background: var(--acento-escuro);
  border-color: var(--acento-escuro);
  box-shadow: inset 0 0 0 2px var(--acento-texto);
}

/* Ação destrutiva: discreta, mas com contorno próprio. Sem a borda de
   alerta ela desaparecia dentro das faixas coloridas — justamente onde fica
   o botão que apaga horas de planejamento. */
.btn-perigo {
  background: var(--papel);
  border-color: var(--alerta);
  color: var(--alerta);
}
.btn-perigo:hover {
  background: var(--alerta);
  border-color: var(--alerta);
  color: #fff;
}

.btn-mini { padding: 4px 10px; font-size: var(--tam-micro); }

/* O rótulo do Desfazer varia muito ("remover fase" x "aplicar mix a todo o
   planejamento"). Sem teto, o cabeçalho quebrava linha e a página inteira
   pulava 50px sob o cursor — exatamente no instante em que a pessoa procura
   o botão. Teto + reticências; o texto completo fica no title. */
#btn-desfazer {
  max-width: 190px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ------------------------------- abas ---------------------------------- */

.abas {
  display: flex; gap: 2px;
  padding: 0 28px;
  background: var(--papel);
  border-bottom: 1px solid var(--linha);
  overflow-x: auto;
}
.aba {
  padding: 10px 16px;
  border: 0; border-bottom: 2px solid transparent;
  background: none;
  color: var(--tinta-media);
  font: inherit; font-size: var(--tam-menor); font-weight: 500;
  cursor: pointer; white-space: nowrap;
}
.aba:hover { color: var(--tinta); }
.aba.ativa { color: var(--acento-legivel); border-bottom-color: var(--acento-sinal); font-weight: 600; }
/* Empurra Configurações para a ponta direita da mesma linha. */
.aba-direita { margin-left: auto; }

/* A referência é "comfortable" e este app é uma ferramenta densa. O espaço
   editorial fica no CHROME e nos documentos; as grades (.gantt, tabela de
   fases, custos diretos, planejamento de horas) mantêm a densidade delas —
   aplicar padding de 40px ali destrói a ferramenta. */
main { padding: 28px; max-width: 1600px; margin: 0 auto; }
.painel { display: none; }
.painel.ativo { display: block; }

/* ------------------------------- rodapé -------------------------------- */

.rodape {
  margin: 8px auto 0;
  padding: 26px 28px 34px;
  max-width: 1600px;
  border-top: 1px solid var(--linha);
  color: var(--tinta-media);
  font-size: var(--tam-micro);
  display: flex; align-items: baseline; gap: 8px 16px; flex-wrap: wrap;
}
.rodape-nome {
  font-size: var(--tam-menor); font-weight: 400;
  color: var(--tinta); letter-spacing: -.02em;
}
.rodape-contatos { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rodape-sep { color: var(--linha-forte); }
.rodape a { color: var(--acento-legivel); text-decoration: none; border-bottom: 1px solid var(--acento-borda); }
.rodape a:hover { color: var(--acento-legivel); border-bottom-color: var(--acento-sinal); }

/* --------------------------- configurações ------------------------------ */

.amostras { display: flex; gap: 8px; flex-wrap: wrap; }
.amostra {
  position: relative;
  width: 74px; height: 46px;
  border: 2px solid transparent;
  border-radius: var(--r);
  cursor: pointer; padding: 0;
  box-shadow: inset 0 0 0 1px var(--linha-forte);
  transition: transform .08s, border-color .1s;
}
.amostra:hover { transform: translateY(-1px); }
.amostra.ativa { border-color: var(--tinta); }
.amostra span {
  position: absolute; left: 0; right: 0; bottom: -17px;
  font-size: var(--tam-nano);
  color: var(--tinta-media); text-align: center;
}
.amostras { margin-bottom: 20px; }

input[type="color"] {
  width: 100%; height: 34px; padding: 2px;
  border: 1px solid var(--linha-forte); border-radius: 4px;
  background: var(--papel); cursor: pointer;
}

.previa {
  margin-top: 20px;
  border: 1px solid var(--linha);
  border-radius: var(--r);
  overflow: hidden;
}
.previa-titulo {
  padding: 6px 14px;
  background: var(--fundo); border-bottom: 1px solid var(--linha);
  font-size: var(--tam-rotulo); font-weight: 650;
  text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-media);
}
.previa-corpo { padding: 16px; }
.previa-corpo h3 { margin: 0 0 6px; font-size: var(--tam-titulo); font-weight: 400; letter-spacing: -.02em; }
.previa-corpo p { margin: 0 0 12px; font-size: var(--tam-menor); color: var(--tinta-media); max-width: 70ch; }
.previa-botoes { display: flex; gap: 8px; flex-wrap: wrap; }
.previa-botoes .btn { cursor: default; }

.logo-area { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.logo-previa {
  display: flex; align-items: center; justify-content: center;
  min-width: 180px; height: 90px; padding: 10px;
  border: 1px solid var(--linha); border-radius: var(--r);
  background: var(--fundo);
}
.logo-previa img { max-height: 100%; max-width: 240px; object-fit: contain; }
.logo-previa.vazio-logo {
  border-style: dashed; color: var(--tinta-fraca);
  font-size: var(--tam-micro);
}

/* ------------------------ barra do projeto ativo ------------------------ */

.barra-projeto {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 28px;
  background: var(--fundo);
  border-bottom: 1px solid var(--linha);
}
.barra-projeto.focada { background: var(--acento-fraco); border-bottom-color: var(--acento-borda); }
.barra-rotulo {
  font-size: var(--tam-rotulo); font-weight: 650;
  text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-media);
}
.barra-projeto select { width: auto; min-width: 230px; max-width: 340px; }
.abas-projeto { display: flex; gap: 2px; flex-wrap: wrap; }
.abas-projeto .aba { padding: 6px 12px; border-bottom-width: 2px; }
.barra-resumo {
  margin-left: auto; display: flex; align-items: center; gap: 6px;
  font-size: var(--tam-micro); font-variant-numeric: tabular-nums;
}
.barra-resumo > span { white-space: nowrap; }

/* ------------------------------- selos --------------------------------- */

.selo {
  display: inline-block; padding: 1px 8px; border-radius: 20px;
  font-size: var(--tam-micro); font-weight: 650;
  text-transform: uppercase; letter-spacing: .03em;
  border: 1px solid;
}
.st-proposta  { background: var(--atencao-fraco); border-color: #ecd9a6; color: #6b4c0d; }
.st-ativo     { background: var(--acento-fraco);  border-color: var(--acento-borda); color: var(--acento-tinta); }
.st-pausado   { background: var(--fundo); border-color: var(--linha-forte); color: var(--tinta-media); }
.st-concluido { background: #f2ede2; border-color: #d8ccae; color: #6b551f; }
.st-cancelado { background: var(--alerta-fraco); border-color: #f0cdc5; color: #7d2717; }

.link-projeto {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--acento-legivel);
  text-align: left;
}
.link-projeto:hover { text-decoration: underline; }
tr.linha-ativa > td { background: var(--acento-fraco); }

.lista-projetos { margin: 0; padding-left: 18px; font-size: var(--tam-menor); }
.lista-projetos li { margin-bottom: 3px; }

/* --------------------------- carga da equipe ---------------------------- */

.gantt.carga td.mes { text-align: right; padding: 4px 6px; }
.carga-pct { font-size: var(--tam-nano); color: var(--tinta-media); line-height: 1.1; }
/* Rampa fixa, com luminância estritamente decrescente: em escala de cinza
   e em daltonismo a ordem continua legível. Não deriva do acento justamente
   para que trocar a cor da marca não embaralhe a leitura de ocupação. */
/* Degraus separados o bastante para se distinguirem em escala de cinza:
   a fronteira 70-85% x 85-100% é a que mais decide, e antes estava a 1,08:1. */
td.c-livre   { background: #f5f5f5; }
td.c-ok      { background: #e4ecd2; }
td.c-cheio   { background: #f2d489; }
td.c-estouro { background: #e8a795; }
td.c-estouro, td.c-estouro .carga-pct { color: var(--alerta); font-weight: 650; }

.legenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: var(--tam-micro); color: var(--tinta-media); }
.legenda span { display: flex; align-items: center; gap: 6px; }
.cx { width: 13px; height: 13px; border-radius: 3px; border: 1px solid var(--linha-forte); display: inline-block; }
.cx.livre { background: #f5f5f5; }
.cx.ok { background: #e4ecd2; }
.cx.cheio { background: #f2d489; }
.cx.estouro { background: #e8a795; }

/* (a regra de `.apertado` mora junto com a de `.excesso`, depois de `.fora`) */

/* ------------------------------ clientes -------------------------------- */

/* A lista é a tela; a ficha é o detalhe de quem foi clicado. Dez clientes
   cadastrados eram setenta campos de formulário empilhados numa tela em que o
   que se faz quase sempre é procurar um nome. */
.linha-cliente .link-projeto { font-weight: 600; }
.seta-ficha {
  display: inline-block; width: 10px;
  color: var(--tinta-fraca); font-size: var(--tam-micro);
}
.ficha-cliente > td {
  background: var(--acento-fraco);
  padding: 16px 14px 18px;
  border-bottom: 2px solid var(--acento-borda);
}

/* ---------------------------- modelos (templates) ----------------------- */

/* Linha de custo direto cujo markup não paga o próprio imposto. */
tr.linha-atencao > td { background: var(--atencao-fraco); }

.tpl-grade { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.tpl-card {
  border: 1px solid var(--tinta-fraca); border-radius: var(--r);
  padding: 12px 14px; background: var(--fundo);
}
.tpl-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tpl-nome { font-weight: 650; font-size: var(--tam-menor); }
.tpl-desc { margin-bottom: 10px; font-size: var(--tam-micro); }
.tpl-card table { font-size: var(--tam-micro); }
.tpl-card th, .tpl-card td { padding: 3px 5px; }

/* ------------------------------ cartões -------------------------------- */

.cartao {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--r);
  margin-bottom: 28px;
  overflow: hidden;
}
.cartao-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 16px 24px;
  border-bottom: 1px solid var(--linha);
  background: var(--fundo);
}
.cartao-topo h2 { margin: 0; font-size: var(--tam-titulo); font-weight: 400; letter-spacing: -.02em; }
.cartao-corpo { padding: 24px; }
.cartao-corpo.sem-preenchimento { padding: 0; }

.dica {
  margin: 0 0 14px;
  color: var(--tinta-media);
  font-size: var(--tam-mini);
  max-width: 78ch;
}
.dica code { background: var(--fundo); padding: 1px 4px; border-radius: 3px; font-size: var(--tam-micro); }

/* ------------------------------ tabelas -------------------------------- */

.tabela-rolagem { overflow-x: auto; }

table { border-collapse: collapse; width: 100%; font-size: var(--tam-menor); }
th, td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--linha); }
thead th {
  background: var(--fundo);
  font-size: var(--tam-rotulo); font-weight: 650;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--tinta-media);
  white-space: nowrap;
  position: sticky; top: 0; z-index: 2;
}
tbody tr:hover { background: var(--fog); }
tbody tr:last-child td { border-bottom: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.col-acao { width: 1%; white-space: nowrap; }
.linha-total td { font-weight: 650; background: var(--fundo); border-top: 2px solid var(--linha-forte); }
.derivado { color: var(--tinta-media); font-variant-numeric: tabular-nums; }
.sutil { color: var(--tinta-fraca); font-size: var(--tam-micro); }

/* ------------------------------ campos --------------------------------- */

label.campo { display: block; margin-bottom: 4px; font-size: var(--tam-micro); font-weight: 600; color: var(--tinta-media); }

/* :where() contribui ZERO para a especificidade — sem ele, esta regra
   valeria (0,5,1) e atropelaria `td input`, `.gantt input.hora`, `.tpl-nome`
   e todas as demais, transformando as tabelas editáveis em caixas brancas. */
input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"])),
select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--linha-forte);
  border-radius: 4px;
  background: var(--papel);
  color: var(--tinta);
  font: inherit; font-family: var(--fonte-corpo); font-size: var(--tam-menor);
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--acento-legivel); outline-offset: 1px;
}
input:focus, select:focus { border-color: var(--acento-sinal); }
input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; }

td input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"])),
td select {
  border-color: transparent; background: transparent; padding: 4px 6px;
}
td input:hover, td select:hover { border-color: var(--linha-forte); background: var(--papel); }
td input:focus, td select:focus { background: var(--papel); }

.grade { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

.remover {
  border: 0; background: none; cursor: pointer;
  color: var(--tinta-fraca); font-size: calc(var(--tam-base) + 2px); line-height: 1;
  padding: 2px 6px; border-radius: 4px;
  min-width: 28px; min-height: 28px;
  transition: color .1s, background .1s;
}
/* Reordenar, espalhar, distribuir: ações comuns, em musgo. */
.remover:hover { color: var(--acento-legivel); background: var(--acento-fraco); }
/* Só o que apaga fica vermelho. */
.remover[data-acao^="del"]:hover,
.remover[data-acao="limpar-fase"]:hover {
  color: var(--alerta); background: var(--alerta-fraco);
}

/* Alternadores (checkbox dentro de .btn): o estado desligado precisa ler
   como desligado, não como um botão musgo qualquer. */
.btn.alternador {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: var(--papel); border-color: var(--linha-forte); color: var(--tinta-media);
}
.btn.alternador input { width: auto; margin: 0; }
.btn.alternador:hover { background: var(--fundo); border-color: var(--tinta-fraca); }
.btn.alternador.ligado {
  background: var(--acento); border-color: var(--acento); color: var(--acento-texto);
}
.btn.alternador.ligado:hover { background: var(--acento-escuro); border-color: var(--acento-escuro); }
.btn.alternador input { accent-color: var(--acento-texto); }
.btn.alternador:not(.ligado) input { accent-color: var(--acento); }

/* ------------------------- capacidade da equipe ------------------------- */

.cap-colunas {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.cap-bloco { background: var(--fog); border-radius: var(--r); padding: 16px 18px; }
.cap-topo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}
.cap-rotulo { font-weight: 600; }

/* Uma régua só: as três fatias são frações da MESMA capacidade. Barras
   separadas por recorte fariam o olho comparar comprimentos que não têm
   denominador comum. */
.cap-barra {
  display: flex; height: 10px; border-radius: 5px; overflow: hidden;
  background: var(--linha); margin-bottom: 12px;
}
.cap-barra > i { display: block; height: 100%; }
.cap-barra.estourou { outline: 2px solid var(--alerta); outline-offset: 1px; }

.cap-barra .cap-contratada { background: var(--acento-sinal); }
/* Proposta vai HACHURADA: não está vendida. Pintá-la como o contratado faria
   a agenda parecer mais cheia do que está — e é decisão de venda que se toma
   olhando esta barra. */
.cap-barra .cap-proposta {
  background: repeating-linear-gradient(45deg,
    var(--acento-medio) 0 4px, var(--papel) 4px 8px);
}

.cap-ponto {
  display: inline-block; width: 8px; height: 8px; border-radius: 2px;
  margin-right: 6px; vertical-align: baseline;
}
.cap-ponto.cap-contratada { background: var(--acento-sinal); }
.cap-ponto.cap-proposta {
  background: var(--acento-medio); border: 1px solid var(--acento-borda);
}
.cap-ponto.cap-livre { background: var(--linha); border: 1px solid var(--linha-forte); }

.cap-tabela { width: 100%; border-collapse: collapse; font-size: var(--tam-menor); }
.cap-tabela td { padding: 3px 0; border: 0; }
.cap-tabela tfoot td {
  border-top: 1px solid var(--linha-forte); padding-top: 6px;
  font-weight: 600;
}

/* ---------------------------- indicadores ------------------------------ */

.indicadores {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
/* Widget de dados: raio 20px fixo, e não --r. O slider do usuário governa
   cartão, campo e botão — a forma de pílula do indicador é da direção, não
   da escala, e some se o raio for a 0. */
.indicador {
  padding: 18px 20px;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 20px;
}
.indicador-rotulo {
  font-size: var(--tam-rotulo); font-weight: 650; text-transform: uppercase;
  letter-spacing: .04em; color: var(--tinta-media); margin-bottom: 4px;
}
.indicador-valor { font-size: calc(var(--tam-titulo) + 4px); font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.indicador-nota { font-size: var(--tam-micro); color: var(--tinta-fraca); margin-top: 2px; }
.indicador.destaque { background: var(--acento-fraco); border-color: var(--acento-borda); }
.indicador.ruim { background: var(--alerta-fraco); border-color: #f0cdc5; }
.indicador.ruim .indicador-valor { color: var(--alerta); }
.indicador.boa .indicador-valor { color: var(--ok); }

/* --------------------- cartões de cenário (aba 0) ---------------------- */

.cenarios {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.cenario {
  display: flex; flex-direction: column;
  text-align: left; gap: 8px;
  padding: 16px 18px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--r);
  background: var(--papel);
  font: inherit; color: inherit;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.cenario:hover { border-color: var(--acento-sinal); background: var(--fog); }
.cenario.ativo {
  border-color: var(--acento-sinal); border-width: 2px;
  padding: 15px 17px;
  background: var(--acento-fraco);
}

.cenario-tag {
  font-size: var(--tam-nano); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--tinta-fraca);
}
.cenario.ativo .cenario-tag { color: var(--acento-legivel); }

.cenario-titulo { font-size: var(--tam-titulo); font-weight: 400; letter-spacing: -.02em; }
.cenario-texto { margin: 0; font-size: var(--tam-menor); color: var(--tinta-media); }
.cenario-texto strong { color: var(--tinta); }

.cenario-fluxo {
  font-size: var(--tam-micro); font-weight: 600;
  color: var(--tinta-fraca);
  padding: 6px 10px; border-radius: 4px;
  background: var(--fundo);
  font-variant-numeric: tabular-nums;
}
.cenario.ativo .cenario-fluxo { background: var(--acento-medio); color: var(--acento-tinta); }

.cenario-resultado {
  margin-top: auto; padding-top: 10px;
  border-top: 1px solid var(--linha);
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.cenario.ativo .cenario-resultado { border-top-color: var(--acento-borda); }
.cenario-num {
  font-size: calc(var(--tam-titulo) + 6px); font-weight: 400;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.cenario.ativo .cenario-num { color: var(--acento-legivel); }
.cenario-nota { font-size: var(--tam-micro); color: var(--tinta-fraca); }

/* ------------------------------ avisos --------------------------------- */

.faixa {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 14px 18px; margin-bottom: 16px;
  border-radius: var(--r); font-size: var(--tam-menor);
  border: 1px solid;
}
.faixa-alerta   { background: var(--alerta-fraco);  border-color: #f0cdc5; color: #7d2717; }
.faixa-atencao  { background: var(--atencao-fraco); border-color: #ecd9a6; color: #6b4c0d; }
.faixa-ok       { background: var(--acento-fraco);  border-color: var(--acento-borda); color: var(--acento-tinta); }
.faixa strong { font-weight: 650; }
.faixa ul { margin: 4px 0 0; padding-left: 18px; }

.valor-ruim { color: var(--alerta); font-weight: 600; }
.valor-bom  { color: var(--ok); font-weight: 600; }
.valor-atencao { color: var(--atencao); font-weight: 600; }

/* -------------------------- gantt / plano ------------------------------ */

.gantt { font-size: var(--tam-mini); }
.gantt th, .gantt td { padding: 4px 6px; border: 1px solid var(--linha); }
.gantt th.mes { text-align: center; min-width: 62px; font-size: var(--tam-nano); }
.gantt td.mes { padding: 0; }
.gantt .col-nome { min-width: 210px; position: sticky; left: 0; background: var(--papel); z-index: 1; }
.gantt thead .col-nome { z-index: 3; background: var(--fundo); }
.gantt tr.fase > td { background: var(--acento-fraco); font-weight: 650; }
.gantt tr.fase > td.col-nome { background: var(--acento-fraco); }
.gantt tr.totais > td { background: #e8e8e8; font-weight: 650; }
/* As faixas de ocupação precisam vencer o cinza dos totais: é justamente na
   linha "Escritório" que o estouro geral aparece. */
.gantt tr.totais > td.c-livre   { background: #f5f5f5; }
.gantt tr.totais > td.c-ok      { background: #e4ecd2; }
.gantt tr.totais > td.c-cheio   { background: #f2d489; }
.gantt tr.totais > td.c-estouro { background: #e8a795; }
.gantt tr.totais > td.col-nome { background: #e8e8e8; }

/* --------------------- barra contínua e mês corrente -------------------

   A fase era desenhada célula a célula: cinco caixinhas com borda, que o olho
   lê como cinco coisas e não como uma etapa com começo e fim. As bordas
   internas somem e só as pontas ficam marcadas. */

/* A chapa continua clara — o número de horas é escrito por cima dela e precisa
   continuar legível. Quem delimita a barra é o CONTORNO, que é como se mede
   elemento não-textual: a chapa dava 1,19:1 contra a célula vizinha e a etapa
   sumia em acentos claros, mas o traço de topo e base em `--acento-sinal` tem
   3:1 garantido e desenha a forma inteira, não só as duas pontas. */
.gantt tr.fase > td.mes.barra {
  background: var(--acento-medio);
  border-top-color: var(--acento-sinal);
  border-bottom-color: var(--acento-sinal);
}
.gantt tr.fase > td.mes.barra:not(.barra-ini) { border-left-color: transparent; }
.gantt tr.fase > td.mes.barra:not(.barra-fim) { border-right-color: transparent; }
.gantt tr.fase > td.mes.barra-ini { border-left: 2px solid var(--acento-sinal); }
.gantt tr.fase > td.mes.barra-fim { border-right: 2px solid var(--acento-sinal); }

/* Marco de data fixa: o losango é o símbolo universal de marco em cronograma,
   e aqui ele diz "esta data não anda". Paralela ganha ponta tracejada — o
   início dela não é o fim de ninguém. */
/* `z-index: 2` vence a coluna de nomes, que é `sticky` com fundo opaco e
   `z-index: 1`: sem isso, 4 dos 7px do losango ficavam por baixo dela na fase
   que começa no primeiro mês — e qualquer losango sumia ao rolar na horizontal. */
.gantt tr.fase > td.mes.marco { position: relative; z-index: 2; }
.gantt tr.fase > td.mes.marco::before {
  content: ""; position: absolute; left: -4px; top: 50%;
  width: 7px; height: 7px; transform: translateY(-50%) rotate(45deg);
  background: var(--acento-sinal);
}
.gantt tr.fase > td.mes.paralela { border-left-style: dashed; }

/* O nome da fase é o que identifica a linha, e virou o campo mais estreito da
   tabela quando "Depende de" e "Folga" entraram: 81px de input para 208px de
   conteúdo, e 51px no tamanho de fonte máximo. A tabela já rola dentro de
   `.tabela-rolagem` — melhor rolar do que picotar o nome. */
.tabela-fases td:first-child input[type="text"] { min-width: 190px; }
.tabela-fases select[data-campo="dependeDe"] { min-width: 150px; }
.sinal-marco {
  display: inline-block; width: 7px; height: 7px; transform: rotate(45deg);
  background: var(--acento-sinal); vertical-align: middle;
}

/* A coluna do mês corrente. Fundo não serve — as células já carregam a cor da
   ocupação e um fundo apagaria o sinal de estouro. E BORDA também não serve:
   a borda esquerda é disputada pela barra contínua, que a torna transparente
   nas células do meio da fase (0,4,3 contra 0,3,2). A linha do hoje sumia
   exatamente em cima das barras, que é onde ela mais importa, e ainda ocupava
   2px de layout sem desenhar nada. `box-shadow` não disputa com ninguém e não
   mexe no fluxo. */
.gantt th.mes.hoje, .gantt td.mes.hoje {
  box-shadow: inset 2px 0 0 var(--acento-sinal);
}
.gantt th.mes.hoje { color: var(--acento-legivel); }
.marca-hoje {
  font-size: var(--tam-nano); font-weight: 650; text-transform: uppercase;
  letter-spacing: .06em; color: var(--acento-legivel);
}
/* Mês que já passou: a capacidade dali não está mais à venda. Chapa, não
   `opacity` — a opacidade se aplicava ao conteúdo inteiro e derrubava o campo
   editável de horas de 6,04:1 para 3,26:1, reprovando em AA num campo que a
   pessoa usa. */
.gantt th.mes.passado { color: var(--tinta-fraca); }
.gantt td.mes.passado:not(.barra):not(.c-ok):not(.c-cheio):not(.c-estouro) {
  background: #e8e8e8;
}

/* Célula do gantt: slider por cima, leitura numérica editável por baixo. */
.gantt .cel {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 1px; padding: 4px 5px 3px;
}
.gantt th.mes { min-width: 92px; }

.gantt input.hora {
  width: 100%;
  border: 0; background: transparent;
  padding: 0 2px; text-align: center;
  font: inherit; font-size: var(--tam-micro);
  font-variant-numeric: tabular-nums;
  border-radius: 3px;
  color: var(--tinta-media);
  -moz-appearance: textfield;
}
.gantt input.hora::-webkit-outer-spin-button,
.gantt input.hora::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gantt input.hora:hover { background: #e8e8e8; color: var(--tinta); }
.gantt input.hora:focus {
  background: #fff; color: var(--tinta);
  /* Célula mais navegada do app: o anel precisa ser inequívoco. */
  outline: 2px solid var(--acento-legivel); outline-offset: -1px;
}

/* ------------------------------ sliders -------------------------------- */

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 16px; margin: 0;
  background: transparent; cursor: pointer;
}
input[type="range"]:disabled { cursor: not-allowed; opacity: .45; }

input[type="range"]::-webkit-slider-runnable-track {
  height: 5px; border-radius: 3px;
  background: var(--linha-forte);
}
input[type="range"]::-moz-range-track {
  height: 5px; border-radius: 3px;
  background: var(--linha-forte);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 13px; margin-top: -4px;
  border-radius: 50%;
  background: var(--acento-sinal);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--linha-forte);
}
input[type="range"]::-moz-range-thumb {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--acento-sinal);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--linha-forte);
}
input[type="range"]:hover::-webkit-slider-thumb { background: var(--acento-escuro); transform: scale(1.12); }
input[type="range"]:hover::-moz-range-thumb { background: var(--acento-escuro); }


/* Cartão do mix: slider mais largo e confortável. */
.tabela-mix td.cel-slider { padding: 6px 12px 6px 10px; }
.tabela-mix input[type="range"] { height: 20px; }
.tabela-mix input[type="range"]::-webkit-slider-thumb { width: 16px; height: 16px; margin-top: -5px; }
.tabela-mix input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; }

.gantt td.mes.fora { background: #f5f5f5; }
.gantt td.mes.fora input[type="range"]::-webkit-slider-thumb { background: var(--tinta-fraca); }
.gantt td.mes.fora input[type="range"]::-moz-range-thumb { background: var(--tinta-fraca); }
.gantt td.mes.cheio { background: var(--acento-fraco); }
/* `.gantt td.mes.excesso` e não `.gantt td.excesso`: com uma classe a menos a
   regra perdia para `.gantt td.mes.fora`, declarada logo acima. O resultado era
   que o aviso de estouro NÃO pintava a célula fora do intervalo da fase — que
   aceita valor, como o próprio LEIA-ME diz. Só o número ficava vermelho. */
.gantt td.mes.excesso { background: var(--alerta-fraco); }
.gantt td.mes.apertado { background: var(--atencao-fraco); }
.gantt td.excesso input.hora { color: var(--alerta); font-weight: 650; }
.gantt td.excesso input[type="range"]::-webkit-slider-thumb { background: var(--alerta); }
.gantt td.excesso input[type="range"]::-moz-range-thumb { background: var(--alerta); }

.barra-fase {
  display: flex; align-items: center; gap: 8px;
}
.barra-fase-nome { font-weight: 650; }

.linha-acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }

.vazio { padding: 24px; text-align: center; color: var(--tinta-fraca); font-size: var(--tam-menor); }

.medidor { height: 5px; background: var(--linha); border-radius: 3px; overflow: hidden; min-width: 60px; }
.medidor > span { display: block; height: 100%; background: var(--acento-sinal); }
.medidor.ruim > span { background: var(--alerta); }

.aviso-salvo {
  position: fixed; bottom: 16px; right: 16px;
  padding: 6px 12px; border-radius: 20px;
  background: var(--tinta); color: #fff;
  font-size: var(--tam-micro); opacity: .88;
  pointer-events: none;
}
/* Estado da sincronização. Offline e conflito NÃO somem sozinhos e não são
   cinza: o usuário precisa saber que o que ele está vendo pode não estar
   gravado em lugar nenhum além deste navegador. */
.aviso-salvo.sync-offline { background: var(--atencao); opacity: 1; }
.aviso-salvo.sync-conflito { background: var(--alerta); opacity: 1; }

/* =============================== proposta ================================
   O documento é mostrado na tela com a mesma diagramação que sai no papel:
   folha branca, largura de A4 útil. O que se vê é o PDF.
   ========================================================================= */

.proposta {
  max-width: 178mm;
  margin: 0 auto;
  padding: 16mm 14mm;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--r);
  color: var(--tinta);
  font-size: var(--tam-menor);
  line-height: 1.55;
}

.prop-topo {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 20px; padding-bottom: 18px; margin-bottom: 32px;
  border-bottom: 2px solid var(--acento-sinal);
}
.prop-marca { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.prop-marca img { height: 46px; width: auto; max-width: 220px; object-fit: contain; }
.prop-escritorio {
  font-family: var(--fonte-titulos);
  /* heading-lg da escala: 40/1.2 no tamanho padrão, e acompanha o slider de
     tamanho do usuário. O display de 66px da referência não cabe no A4 útil
     de 178mm sem empurrar o quadro de etapas para a página seguinte. */
  font-size: calc(var(--tam-titulo) + 22px); line-height: 1.2;
  font-weight: 400; letter-spacing: -.02em;
}
.prop-id { text-align: right; font-size: var(--tam-micro); color: var(--tinta-media); }
.prop-tipo {
  font-weight: 650; color: var(--acento-legivel);
  text-transform: uppercase; letter-spacing: .06em;
  font-size: var(--tam-rotulo); margin-bottom: 3px;
}

.prop-bloco { margin-bottom: 32px; break-inside: avoid; }
/* O acento é PONTUAÇÃO: fica no filete sob o título, não no texto dele. Uma
   página inteira de títulos laranja é o oposto da referência — e --acento-cru
   nunca serviria como texto de qualquer forma. */
.proposta h2 {
  font-size: var(--tam-menor); font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--tinta);
  margin: 0 0 12px; padding-bottom: 6px;
  border-bottom: 1px solid var(--acento-borda);
}

/* Chapa quente (Ivory) para o bloco que o cliente procura primeiro, com o
   raio assimétrico 6px 0 0 — a assinatura da direção. Fora da caixa do
   documento: o padding negativo mantém o texto alinhado à coluna. */
.prop-chapa {
  background: var(--chapa-quente);
  border-radius: 6px 0 0;
  padding: 20px 22px;
  margin-left: -22px; margin-right: -22px;
}
@media (max-width: 560px) { .prop-chapa { margin-left: -10px; margin-right: -10px; } }
.prop-texto { margin: 0 0 10px; text-align: justify; }
.prop-nota { margin: 8px 0 0; font-size: var(--tam-micro); color: var(--tinta-media); }

.prop-dados { width: 100%; }
.prop-dados th {
  width: 130px; text-align: left; font-weight: 600;
  color: var(--tinta-media); padding: 3px 12px 3px 0;
  border: 0; text-transform: none; letter-spacing: 0;
  font-size: var(--tam-menor); background: none; position: static;
}
.prop-dados td { padding: 3px 0; border: 0; }

.prop-tabela { width: 100%; border-collapse: collapse; }
.prop-tabela th, .prop-tabela td {
  padding: 7px 8px; border-bottom: 1px solid var(--linha);
  font-size: var(--tam-menor); background: none;
  position: static; text-transform: none; letter-spacing: 0;
}
.prop-tabela thead th {
  border-bottom: 1px solid var(--linha-forte);
  font-size: var(--tam-micro); font-weight: 650;
  color: var(--tinta-media); text-align: left;
}
.prop-tabela thead th.num, .prop-tabela td.num, .prop-tabela tfoot th.num { text-align: right; }
.prop-tabela tfoot th {
  border-top: 2px solid var(--linha-forte); border-bottom: 0;
  font-weight: 650; text-align: left; padding-top: 8px;
}

.prop-rolagem { overflow-x: auto; }
.prop-crono { width: 100%; border-collapse: collapse; table-layout: fixed; }
.prop-crono th {
  font-size: var(--tam-nano); font-weight: 600;
  color: var(--tinta-media); text-align: center;
  padding: 3px 1px; border: 0; background: none;
  position: static; text-transform: none; letter-spacing: 0;
  line-height: 1.15;
}
/* A largura tem de vir do CABEÇALHO. Sob `table-layout: fixed` só a primeira
   linha define coluna, e a primeira linha é o `<thead>` — cujo primeiro `<th>`
   é vazio. Declarada no `tbody th`, a regra era inerte: as 13 colunas ficavam
   com 43px cada e "Acompanhamento de Obra", que precisa de 102px, saía picotado
   no documento que vai ao cliente. */
.prop-crono thead th:first-child { width: 34%; }
.prop-crono tbody th {
  text-align: left; font-weight: 500;
  color: var(--tinta); padding-right: 10px;
  font-size: var(--tam-micro);
}
.prop-crono td {
  border: 1px solid var(--linha);
  height: 17px; padding: 0;
}
.prop-crono td.ativo { background: var(--acento-sinal); border-color: var(--acento-sinal); }

.prop-erro {
  margin: 10px 0 0; padding: 8px 12px;
  border: 1px solid var(--alerta); border-left-width: 4px;
  border-radius: 4px;
  background: var(--alerta-fraco); color: #7d2717;
  font-size: var(--tam-micro);
}
.prop-registro { font-size: var(--tam-micro); color: var(--tinta-media); margin-top: 2px; }
.prop-lista { margin: 0 0 10px; padding-left: 20px; }
.prop-lista li { margin-bottom: 3px; }
.prop-validade { margin: 14px 0 0; }
.prop-local { margin: 18px 0 0; }

.prop-assinaturas {
  display: flex; gap: 40px; margin-top: 40px;
  break-inside: avoid; text-align: center;
  font-size: var(--tam-micro); color: var(--tinta-media);
}
.prop-assinaturas > div { flex: 1; }
.prop-linha { border-top: 1px solid var(--tinta-media); margin-bottom: 5px; }

textarea {
  width: 100%; padding: 6px 8px;
  border: 1px solid var(--linha-forte); border-radius: 4px;
  background: var(--papel); color: var(--tinta);
  font: inherit; font-family: var(--fonte-corpo); font-size: var(--tam-menor);
  resize: vertical;
}
textarea:focus { border-color: var(--acento-sinal); }
input[type="date"] {
  width: 100%; padding: 6px 8px;
  border: 1px solid var(--linha-forte); border-radius: 4px;
  background: var(--papel); color: var(--tinta);
  font: inherit; font-family: var(--fonte-corpo); font-size: var(--tam-menor);
}

/* Em tela estreita o documento continua sendo um documento — mas 14mm de
   margem de cada lado num viewport de 375px deixa 269px de área útil, e a
   tabela de etapas, que tem largura própria, empurrava a PÁGINA para 425px.
   A diagramação de impressão não muda: só a folga da tela encolhe. */
@media (max-width: 560px) {
  .proposta { padding: 10mm 5mm; }
  .prop-tabela, .prop-dados { font-size: var(--tam-micro); }
}

@media print {
  @page { size: A4; margin: 14mm 12mm; }
  /* Na impressão vale a diagramação cheia, independente da largura da tela. */
  .proposta { padding: 16mm 14mm; }

  .topo-acoes, .abas, .aviso-salvo, .nao-imprime { display: none !important; }
  .painel { display: none !important; }
  .painel.ativo { display: block !important; }
  body { background: #fff; }
  main { padding: 0; max-width: none; }
  .cartao { box-shadow: none; break-inside: avoid; }
  /* Logo e contatos saem no papel: é o documento que vai ao cliente. */
  .logo-topo.vazio-logo { display: none; }
  .rodape { break-inside: avoid; border-top: 1px solid #ccc; }
  .rodape a { border-bottom: 0; color: inherit; }

  /* A proposta imprime como documento autônomo: sem o cabeçalho do app,
     que tem o seu próprio timbre, e sem moldura de cartão. */
  body[data-aba="proposta"] .topo,
  body[data-aba="proposta"] .rodape { display: none !important; }
  .proposta {
    max-width: none; margin: 0; padding: 0;
    border: 0; border-radius: 0; box-shadow: none;
  }
  .prop-bloco { break-inside: avoid; }
  .prop-crono td.ativo, .prop-chapa,
  .prop-topo, .proposta h2 {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}