/* horatecnica.css :: Hora Técnica em abas (js/horatecnica.js). Prefixo htc-.
   As classes ht-* (ht-expl, ht-final, ht-result) vêm do app.css e continuam valendo. */

.htc-sem-mb { margin-bottom: 0; }

/* blocos de custos: cabeçalho com a seta que recolhe, o título, o total do mês e o botão de adicionar.
   htc-cab, htc-cab-tit e htc-cab-tot valem também no cabeçalho da equipe (comprasModule.htHTML, aba Equipe). */
.htc-cab { flex-wrap: wrap; row-gap: 8px; }
.htc-cab-tit { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; min-width: 0; }
.htc-seta { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; flex-shrink: 0;
  background: transparent; border: 1px solid rgba(255,255,255,.35); border-radius: var(--r-sm); color: var(--on-dark); cursor: pointer; }
.htc-seta:hover { background: rgba(255,255,255,.1); }
.htc-seta:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.htc-seta .av-ic { width: 16px; height: 16px; transition: transform .15s ease; }
.htc-seta[aria-expanded="false"] .av-ic { transform: rotate(-90deg); }
.htc-cab-tot { font-size: 12px; color: var(--on-dark-soft); overflow-wrap: anywhere; }
.htc-cab-tot strong { font-size: 15px; font-weight: 700; color: var(--on-dark); font-variant-numeric: tabular-nums; }
.htc-lista[hidden] { display: none; }

/* blocos de custos: frase curta entre o título e a tabela */
.htc-bloco-dica { margin: 0; padding: 12px var(--sp5) 4px; font-size: 13px; line-height: 1.5; color: var(--body); }

/* subtítulos dentro do Parâmetro de capacidade */
.htc-sub { font-family: var(--font-ui); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--navy-700);
  margin: 18px 0 10px; padding-top: 14px; border-top: 1px solid var(--border); }
.htc-sub:first-of-type { margin-top: 4px; padding-top: 0; border-top: 0; }

/* capacidade da equipe: dois números lidos da aba Equipe */
.htc-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px; margin-bottom: 12px; }
.htc-num { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: var(--bg-zebra); border: 1px solid var(--border);
  border-left: 4px solid var(--navy-700); border-radius: var(--r-md); min-width: 0; }
.htc-num-rot { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .11em; color: var(--muted); }
.htc-num-val { font-size: 20px; font-weight: 700; color: var(--navy-800); font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
.htc-num-sub { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.htc-alerta { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r-md); background: var(--orange-light); border: 1px solid var(--orange-border);
  color: #7A3A0C; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
/* aviso da Folha contada duas vezes (Custos, Equipe e Base de cálculo) */
.htc-folha p { margin: 0 0 8px; }
.htc-folha p:last-child { margin-bottom: 0; }
.ht-folha-wrap:not(:empty) { padding: 14px 20px 0; }
.ht-folha-wrap .htc-alerta { margin-bottom: 0; }
/* tabela da equipe: cabe em 1366 px sem rolar de lado (o cabeçalho quebra em duas linhas e as células ficam mais justas);
   no celular continua rolando dentro do cartão */
table.dt.dt-equipe th { white-space: normal; line-height: 1.3; vertical-align: bottom; padding: 10px 8px; }
table.dt.dt-equipe td { padding: 10px 8px; }
/* o cargo leva a sobra da largura (o nome inteiro aparece no campo) e o salário fica do tamanho do valor */
table.dt.dt-equipe th:first-child { width: 24%; }
table.dt.dt-equipe td:first-child input { width: 100%; }
table.dt.dt-equipe td:nth-child(2) .ig { width: 128px; }

/* quadro de resultados dos custos (mesmos ids do cfgModule) */
.htc-result-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); gap: 24px; }
.htc-result-val { font-size: 22px; overflow-wrap: break-word; }
.htc-overhead { margin: 16px 0 8px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.htc-overhead strong { font-size: 16px; color: var(--orange); font-variant-numeric: tabular-nums; }

/* hora usada nos honorários: a escolha da origem ocupa a linha (o texto das opções é longo) */
.htc-fonte-fg { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); max-width: 840px; }
.htc-fonte-fg select { width: 100%; }

/* hora usada nos honorários: de onde vem, conta por conta */
.htc-origem { margin: 14px 0 8px; font-size: 13.5px; line-height: 1.5; color: var(--body); }
.htc-origem strong { color: var(--ink); }
.htc-conta { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: 12px; }
.htc-conta-l { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 16px; flex-wrap: wrap; padding: 8px 12px;
  border-bottom: 1px solid var(--border); font-size: 13px; color: var(--body); }
.htc-conta-l:last-child { border-bottom: 0; }
.htc-conta-l > span { min-width: 0; overflow-wrap: anywhere; }
.htc-conta-l > strong { color: var(--navy-800); font-variant-numeric: tabular-nums; text-align: right; margin-left: auto; overflow-wrap: anywhere; }
.htc-conta-tot { background: var(--bg-zebra); font-weight: 700; color: var(--ink); }
.htc-conta-tot > strong { color: var(--orange); font-size: 15px; }

/* horas por m² e por complexidade */
.htc-m2 { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r-md); }
.htc-m2-l { display: grid; grid-template-columns: minmax(130px, 1.3fr) minmax(130px, 1fr) repeat(4, minmax(80px, .8fr)); gap: 10px; align-items: center;
  padding: 10px 12px; border-bottom: 1px solid var(--border); }
.htc-m2-l:last-child { border-bottom: 0; }
.htc-m2-cab { background: var(--bg-zebra); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); line-height: 1.35; }
.htc-m2-tipo { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; font-weight: 700; color: var(--ink); min-width: 0; }
.htc-m2-tipo small { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.htc-m2-in { min-width: 0; }
.htc-m2-c { font-size: 13px; color: var(--body); font-variant-numeric: tabular-nums; }
.htc-m2-c strong { font-weight: 700; color: var(--navy-800); }
.htc-m2-v { white-space: nowrap; }
.htc-passos { margin: 14px 0 0; padding-left: 20px; font-size: 13px; line-height: 1.55; color: var(--body); }
.htc-passos li + li { margin-top: 4px; }

.htc-acoes { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 760px) {
  .htc-m2-cab { display: none; }
  .htc-m2-l { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .htc-m2-tipo { grid-column: 1 / 3; }
  .htc-m2-in { grid-column: 3 / 5; }
  .htc-m2-c { display: flex; flex-direction: column; gap: 1px; font-size: 12px; }
  .htc-m2-c::before { content: attr(data-l); font-size: 10px; font-weight: 700; letter-spacing: .03em; color: var(--muted); line-height: 1.3; }
}
@media (max-width: 480px) {
  .htc-m2-l { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .htc-m2-tipo, .htc-m2-in { grid-column: 1 / -1; }
  .htc-acoes { width: 100%; }
}