/* ============================================================================
   LINHA · Faturamento SUS (#view-faturamento-sus) e do Transporte (#view-faturamento)
   Esqueleto no modelo global; aqui só o que é destes painéis.
   ============================================================================ */

/* ---------------------------------------------------------------- Faturamento SUS */
.fs-comp{ flex-direction:row; align-items:center; gap:var(--l-e2) }
.fs-comp label{ font-size:var(--l-t-peq); color:var(--l-texto-3) }
.fs-comp input{ width:auto }
.fs-bloco{ display:flex; flex-direction:column }
.fs-bloco > .l-tab{ border-top:0 }
.fs-valor{ white-space:nowrap; font-variant-numeric:tabular-nums }

/* aviso em faixa: etiqueta, frase e a ação que resolve */
.fs-aviso{ display:flex; align-items:center; gap:var(--l-e3); flex-wrap:wrap; padding:var(--l-e3) var(--l-e4); border-radius:var(--l-raio-2); background:var(--l-atencao-fundo) }
.fs-aviso-txt{ flex:1; min-width:220px; font-size:var(--l-t-peq); color:var(--l-texto) }

.fs-duas{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:var(--l-e5); align-items:start }
.fs-tres{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--l-e3) }
.fs-prazos{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:var(--l-e3) }
.fs-prazo{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--l-e2); padding:var(--l-e3); border:1px solid var(--l-fio); border-radius:var(--l-raio-2) }
.fs-prazo > div{ min-width:0 }
.fs-conf{ display:flex; flex-direction:column; gap:var(--l-e2); margin-top:var(--l-e2) }

/* contrato: números em linha e a tabela de procedimentos */
.fs-nums{ gap:var(--l-e2) var(--l-e8) }
.fs-num b{ font-size:26px }
.fs-semcota{ display:flex; flex-direction:column; gap:4px; flex:1; min-width:220px }
.fs-apagado{ color:var(--l-texto-3) }
.fs-qtd{ width:96px; text-align:right }
.fs-confirma{ display:flex; justify-content:flex-end; gap:4px }
.fs-procs-barra{ margin:0 }
.fs-contratos{ flex-wrap:wrap }

@media (max-width:1100px){
  .fs-duas, .fs-tres{ grid-template-columns:1fr }
}
.fs-rank{ padding:var(--l-e4) var(--l-e5) }
.fs-bloco > .au-empty{ padding:var(--l-e6) var(--l-e5) }

/* ---------------------------------------------------------------- Faturamento do Transporte */
.fat-panel{ display:none }
.fat-panel.active{ display:flex; flex-direction:column; gap:var(--l-e5) }
.fat-metrics:empty{ display:none }
.fat-flash{ padding:var(--l-e3) var(--l-e4); border-radius:var(--l-raio-2); background:var(--l-info-fundo); font-size:var(--l-t-peq) }
.fat-flash.error, .fat-flash.is-error{ background:var(--l-erro-fundo); color:var(--l-erro) }
.fat-flash.success, .fat-flash.is-success{ background:var(--l-ok-fundo) }
.l-secao.fat-sub{ font-size:var(--l-t-mini); color:var(--l-texto-3) }
.fat-total td{ font-weight:600; background:var(--l-sup-2) }

/* telas internas ainda no markup antigo: card vira bloco, tabela vira tabela da Linha */
.fat-panel > .card, .fat .card{ display:flex; flex-direction:column; gap:var(--l-e3); padding:var(--l-e5); background:var(--l-sup); border:1px solid var(--l-borda); border-radius:var(--l-raio-3) }
.fat-caption{ font-size:var(--l-t-peq); color:var(--l-texto-3) }
.fat-acomp{ display:flex; flex-direction:column; gap:var(--l-e3) }
.fat-trip-check{ accent-color:var(--l-marca) }

/* modais da guia e da demanda */
.fat-modal{ width:min(860px, 100%) }
.fat-modal-largo{ width:min(1180px, 100%) }
.fat-trip-geral{ grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)) }
.fat-trechos{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--l-e4); margin:var(--l-e4) 0 }
.fat-trecho{ display:flex; flex-direction:column; gap:var(--l-e3); margin:0; padding:var(--l-e4); border:1px solid var(--l-borda); border-radius:var(--l-raio-3); background:var(--l-sup-2) }
.fat-trecho legend{ padding:0 6px; font-weight:600; color:var(--l-marca-tinta) }
.fat-parada{ display:flex; gap:var(--l-e2); align-items:center }
.fat-parada-nome{ flex:1; min-width:0 }
.fat-parada-n{ width:22px; color:var(--l-texto-3); font-variant-numeric:tabular-nums }
.fat-parada + .fat-parada{ margin-top:6px }
.fat-paradas{ display:flex; flex-direction:column; gap:4px; margin-top:var(--l-e2) }
@media (max-width:1100px){ .fat-trechos{ grid-template-columns:1fr } }
.fat-cadastros{ display:flex; align-items:center; gap:var(--l-e4); flex-wrap:wrap }
.fat-destino{ max-width:280px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.fat-guias td small{ display:block }

/* Produção / BPA */
.bpa{ display:flex; flex-direction:column; gap:var(--l-e5) }
.bpa .l-barra, .bpa .l-resumo{ margin:0 }
.bpa-erro b, .bpa-erro{ color:var(--l-erro) }
.bpa-val small{ display:block; margin-top:2px; font-size:var(--l-t-mini) }
.bpa .l-bloco-cab{ flex-wrap:wrap; gap:var(--l-e3) }
.bpa-resumo{ display:flex; align-items:center; gap:var(--l-e2) } .bpa-resumo .l-resumo{ flex:1 }

/* áreas do backoffice (Contratos, Produção, Auditoria, Tramitação) */
.fat-area{ display:flex; flex-direction:column; gap:var(--l-e5) }
.fat-area > .l-barra, .fat-area > .l-resumo{ margin:0 }
.fat-area .l-barra .l-resumo{ margin:0 }
.l-tab :is(th, td).fat-dir{ text-align:right }
.fat-neg, .fat-neg b{ color:var(--l-erro) }
.fat-off td{ color:var(--l-texto-3) }
.fat-pad{ padding:var(--l-e3) var(--l-e5); margin:0 }
tr[data-fat-action]{ cursor:pointer }
tr[data-fat-action]:hover{ background:var(--l-sup-2) }
/* uso da cota: trilho fino, passa do limite em vermelho */
.fat-uso{ display:inline-block; width:80px; height:6px; border-radius:3px; background:var(--l-sup-3); vertical-align:middle; overflow:hidden }
.fat-uso i{ display:block; height:100%; width:var(--w); background:var(--l-marca); border-radius:3px }
.fat-uso.is-acima i{ background:var(--l-erro) }
/* acompanhamento: procedimento fixo à esquerda, meses clicáveis */
.fat-acomp-tab .fat-fixa{ position:sticky; left:0; z-index:1; background:var(--l-sup); min-width:220px }
.fat-acomp-tab thead .fat-fixa{ background:var(--l-sup-2) }
.fat-mes{ cursor:pointer }
.fat-mes:hover{ background:var(--l-marca-suave) }
.fat-vazio{ color:var(--l-texto-3) }
/* quadro do Kanban, só leitura */
.fat-kb{ display:grid; grid-template-columns:repeat(4, minmax(200px, 1fr)); gap:var(--l-e3); padding:var(--l-e4); overflow-x:auto }
.fat-kb-col{ display:flex; flex-direction:column; gap:var(--l-e2); min-width:0 }
.fat-kb-cab{ display:flex; justify-content:space-between; align-items:center; margin:0; padding:0 2px }
.fat-kb-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--l-e2) }
.fat-kb-card{ display:flex; flex-direction:column; gap:2px; padding:var(--l-e3); border:1px solid var(--l-fio); border-radius:var(--l-raio-2); background:var(--l-sup) }
.fat-kb-card b{ font-weight:500 }
.fat-kb-card small{ font-size:var(--l-t-peq); color:var(--l-texto-3) }
/* modais do transporte */
.fat-cnh{ width:140px }
.fat-locais{ list-style:none; margin:var(--l-e3) 0 0; padding:0; max-height:240px; overflow:auto }
.fat-locais li{ display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-bottom:1px solid var(--l-fio) }
.fat-docs{ max-height:320px; overflow:auto }
.fat-backoffice .l-cab{ display:none }

/* ================================================================ painel: mês a mês e tipo de veículo (01/10) */
.fat-mensal .l-bloco-cab{ align-items:flex-start; flex-wrap:wrap; gap:var(--l-e4) }
.fat-mensal-dest{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; text-align:right }
.fat-mensal-dest > b{ font-size:26px; line-height:1.1; font-variant-numeric:tabular-nums; color:var(--l-texto) }
.fat-mensal-dest > span:not(.l-mini):not(.fat-var){ font-size:var(--l-t-peq); color:var(--l-texto-2) }
.fat-var{ font-size:var(--l-t-mini); font-weight:600; padding:2px 8px; border-radius:999px; background:var(--l-sup-3); color:var(--l-texto-2) }
/* para quem paga, gasto que sobe pede atenção; o que desce é alívio */
.fat-var.is-sobe{ background:var(--l-atencao-fundo); color:var(--l-atencao) }
.fat-var.is-desce{ background:var(--l-ok-fundo); color:var(--l-ok) }
.fat-veic{ display:grid; grid-template-columns:minmax(260px, 1fr) minmax(0, 1.5fr); gap:var(--l-e5); align-items:center; padding:0 var(--l-e5) var(--l-e5) }
@media (max-width:900px){ .fat-veic{ grid-template-columns:1fr } }