/* =============================================================
 * Gestão AI › Gestão do Faturamento (Pablo, 30/10/2026: tempo de cada etapa do ciclo do pedido)
 * Desenhado por assets/js/gestao-faturamento-ui.js dentro de #gfatApp (page-gestao-faturamento).
 * Só tokens da pele 2026 (portal-2026.css). Cores fixas por etapa (--gfa-e1…e5), passo próprio no escuro (não é
 * inversão), validadas com o validate_palette.js do dataviz na ordem das etapas (vizinhas na barra empilhada):
 *   E1 Faturar teal #0a9492 / #1ea9a6 · E2 Gerar a guia laranja #eb6834 / #d95926 · E3 Pagamento azul #2a78d6 / #3987e5
 *   E4 Liberar magenta #e87ba4 / #d55181 · E5 Expedir violeta #6250d6 / #9085e9
 *   claro sobre #ffffff: CVD ΔE 12,2 · visão normal ΔE 27,5 · magenta 2,69:1 (abaixo de 3:1: legenda escrita e "ver tabela")
 *   escuro sobre #172120: CVD ΔE 15,5 · visão normal ΔE 19,7 · todas >= 3:1
 * Ciclo total (série única, sem legenda): cinza-ardósia #3d4a46 / #c3cfcb.
 * (Pablo, 30/10/2026: "informações importantes ficam como um subtexto") cores de ESTADO, reservadas para alerta e
 * sempre com ícone + texto (nunca só cor): atenção (laranja) e crítico (vermelho). Texto sobre o fundo do estado
 * com contraste >= 4,5:1 nos dois temas (claro: #8f5300 sobre #fff4e3 = 5,7:1; #b03030 sobre #fdeeee = 5,6:1; o
 * --amber do portal dava 3,1:1 e não serve para texto aqui; escuro: 6,3:1 e 5,4:1).
 * ============================================================= */
:root{
  --gfa-e1:#0a9492; --gfa-e2:#eb6834; --gfa-e3:#2a78d6; --gfa-e4:#e87ba4; --gfa-e5:#6250d6;
  --gfa-total:#3d4a46; --gfa-tip-bg:#05302e; --gfa-tip-ink:#eaf3ef;
  --gfa-atencao-ink:#8f5300; --gfa-atencao-bg:#fff4e3; --gfa-atencao-line:#f0d6a8; --gfa-atencao-fill:#c47a16;
  --gfa-critico-ink:#b03030; --gfa-critico-bg:#fdeeee; --gfa-critico-line:#f0c9c9; --gfa-critico-fill:#c43d3d;
}
:root[data-theme="dark"]{
  --gfa-e1:#1ea9a6; --gfa-e2:#d95926; --gfa-e3:#3987e5; --gfa-e4:#d55181; --gfa-e5:#9085e9;
  --gfa-total:#c3cfcb; --gfa-tip-bg:#0b1b19; --gfa-tip-ink:#e6ecea;
  --gfa-atencao-ink:#f0b454; --gfa-atencao-bg:rgba(240,180,84,.14); --gfa-atencao-line:rgba(240,180,84,.42); --gfa-atencao-fill:#f0b454;
  --gfa-critico-ink:#ff8a8a; --gfa-critico-bg:rgba(255,107,107,.14); --gfa-critico-line:rgba(255,107,107,.45); --gfa-critico-fill:#ff8080;
}

#gfatApp{ min-width:0; }
.gf{ container:gfa / inline-size; display:flex; flex-direction:column; gap:12px; min-width:0; padding:4px 2px 32px; font-family:var(--font-body); color:var(--ink); }
.gf *, #gfaGaveta *{ box-sizing:border-box; }
.gf .gfa-mut, #gfaGaveta .gfa-mut{ color:var(--ink-3); }
.gf svg, #gfaGaveta svg{ flex:none; }
.gf .mono, #gfaGaveta .mono{ font-variant-numeric:tabular-nums; }

/* ---------- barra do painel (filtros; sem cabeçalho de título) ---------- */
.gfa-barra{ display:flex; align-items:center; gap:8px 14px; flex-wrap:wrap; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg,14px); padding:8px 12px; box-shadow:var(--shadow-soft); }
.gfa-grupo{ display:flex; align-items:center; gap:6px; min-width:0; }
.gfa-grupo > small{ font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; }
.gfa-seg{ display:inline-flex; padding:2px; gap:2px; border:1px solid var(--line-2); border-radius:999px; background:var(--bg-2); max-width:100%; overflow-x:auto; scrollbar-width:none; }
.gfa-seg::-webkit-scrollbar{ display:none; }
.gfa-seg button{ flex:none; height:30px; padding:0 12px; border:0; border-radius:999px; background:transparent; color:var(--ink-2); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap; }
.gfa-seg button:hover{ color:var(--ink); background:var(--hover); }
.gfa-seg button[aria-pressed="true"]{ background:var(--panel); color:var(--accent-ink); box-shadow:0 0 0 1px var(--accent), var(--e1); }
.gfa-seg button:focus-visible, .gfa-btn:focus-visible, .gfa-vista:focus-visible, .gfa-link:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.gfa-barra-fim{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.gfa-atual{ font-size:12px; color:var(--ink-3); white-space:nowrap; display:inline-flex; align-items:center; gap:6px; }
.gfa-atual::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.gfa-btn{ height:34px; padding:0 14px; border:1px solid var(--line-2); border-radius:999px; background:var(--panel); color:var(--ink); font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none; }
.gfa-btn:hover{ background:var(--accent-50); border-color:var(--accent-line); color:var(--accent-ink); }
.gfa-btn[disabled]{ opacity:.6; cursor:progress; }
.gfa-btn svg{ width:15px; height:15px; }
.gfa-grupo .gfa-i{ margin:0 -2px 0 -4px; }
.gfa-avisos{ display:flex; flex-direction:column; gap:6px; }
.gfa-avisos:empty{ display:none; }

/* ---------- "i": a explicação longa sai da tela e abre numa dica (Pablo, 30/10/2026) ---------- */
.gfa-i{ all:unset; box-sizing:border-box; display:inline-grid; place-items:center; width:26px; height:26px; margin:-5px 0; border-radius:50%; color:var(--ink-3); cursor:help; flex:none; }
.gfa-i svg{ width:16px; height:16px; }
.gfa-i:hover, .gfa-i[aria-expanded="true"]{ color:var(--accent-ink); background:var(--accent-50); }
.gfa-i:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }

/* ---------- estado: faixa (no topo do cartão) e selo (ao lado do número) — ícone + texto + cor ---------- */
.gfa-faixa{ display:grid; grid-template-columns:16px minmax(0,1fr); gap:8px; align-items:start; padding:8px 10px; border-radius:10px; border:1px solid transparent; font-size:13px; line-height:1.38; color:var(--ink); }
.gfa-faixa > svg{ width:16px; height:16px; margin-top:1px; }
.gfa-faixa-c{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-width:0; }
.gfa-faixa-t{ font-size:14px; font-weight:700; line-height:1.3; }
.gfa-faixa-t b, .gfa-faixa-d b{ font-weight:800; }
.gfa-faixa-d{ color:var(--ink); overflow-wrap:anywhere; }
.gfa-faixa.is-atencao{ background:var(--gfa-atencao-bg); border-color:var(--gfa-atencao-line); }
.gfa-faixa.is-atencao > svg, .gfa-faixa.is-atencao .gfa-faixa-t{ color:var(--gfa-atencao-ink); }
.gfa-faixa.is-critico{ background:var(--gfa-critico-bg); border-color:var(--gfa-critico-line); }
.gfa-faixa.is-critico > svg, .gfa-faixa.is-critico .gfa-faixa-t{ color:var(--gfa-critico-ink); }
.gfa-faixa.is-ok{ background:var(--bg-2); border-color:var(--line-soft); padding:6px 10px; align-items:center; }
.gfa-faixa.is-ok > svg{ color:var(--good); margin-top:0; }
.gfa-faixa.is-ok .gfa-faixa-t{ font-size:13px; font-weight:600; color:var(--ink-2); }
.gfa-faixa-a{ all:unset; display:inline-flex; align-items:center; gap:1px; font-weight:800; color:var(--accent-ink); cursor:pointer; text-decoration:underline; text-underline-offset:2px; white-space:nowrap; }
.gfa-faixa-c > .gfa-faixa-a{ margin-top:2px; font-size:13px; }
.gfa-faixa-a svg{ width:14px; height:14px; }
.gfa-faixa-a:hover{ text-decoration-thickness:2px; }
.gfa-faixa-a:focus-visible, .gfa-garg-ped:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; }
.gfa-selo{ display:inline-flex; align-items:center; gap:4px; padding:2px 8px 2px 6px; border-radius:999px; font-size:12px; font-weight:700; line-height:1.45; white-space:nowrap; }
.gfa-selo svg{ width:13px; height:13px; }
.gfa-selo.is-atencao{ background:var(--gfa-atencao-bg); color:var(--gfa-atencao-ink); }
.gfa-selo.is-critico{ background:var(--gfa-critico-bg); color:var(--gfa-critico-ink); }
.gfa-selo.is-bom{ background:var(--good-soft); color:var(--good); }

/* ---------- números secundários rotulados, lado a lado (com/sem DIFAL, mediana/p90, no prazo/passaram) ---------- */
.gfa-split{ display:flex; flex-wrap:wrap; gap:6px 18px; padding-top:8px; border-top:1px solid var(--line-soft); }
.gfa-split-i{ display:flex; flex-direction:column; min-width:0; }
.gfa-split-i b{ font-size:16px; font-weight:700; line-height:1.25; color:var(--ink); white-space:nowrap; }
.gfa-split-i span{ font-size:12.5px; font-weight:600; line-height:1.3; color:var(--ink-2); }
.gfa-split-i span small{ font-size:12px; font-weight:500; }
.gfa-split-i.is-critico b{ color:var(--gfa-critico-ink); }

/* ---------- meta: número + barra com o alvo escrito ---------- */
.gfa-meta{ position:relative; padding-bottom:18px; }
.gfa-meter{ position:relative; height:8px; border-radius:4px; background:var(--line-soft); }
.gfa-meter b{ position:absolute; left:0; top:0; bottom:0; border-radius:4px; background:var(--ink-deco); }
.gfa-meta.is-atencao .gfa-meter{ background:var(--gfa-atencao-line); } .gfa-meta.is-atencao .gfa-meter b{ background:var(--gfa-atencao-fill); }
.gfa-meta.is-bom .gfa-meter{ background:var(--good-soft); } .gfa-meta.is-bom .gfa-meter b{ background:var(--good); }
.gfa-meter i{ position:absolute; top:-4px; bottom:-4px; width:2px; margin-left:-1px; border-radius:1px; background:var(--ink); }
.gfa-meta-alvo{ position:absolute; left:0; right:0; bottom:0; height:16px; }
.gfa-meta-alvo span{ position:absolute; top:1px; transform:translateX(-62%); font-size:12px; font-weight:700; line-height:1.25; color:var(--ink-2); white-space:nowrap; }

/* ---------- números do período ---------- */
.gfa-kpis{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1.2fr) repeat(4,minmax(0,1fr)); gap:10px; }
.gfa-kpi{ display:flex; flex-direction:column; gap:7px; min-width:0; padding:12px 14px; background:var(--panel); border:1px solid var(--line); border-radius:12px; }
.gfa-kpi-l{ display:flex; align-items:center; gap:4px; font-size:13px; font-weight:700; line-height:1.3; color:var(--ink-2); }
.gfa-kpi-vrow{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 8px; }
.gfa-kpi-v{ font-size:28px; font-weight:800; line-height:1.1; letter-spacing:-.02em; color:var(--ink); }
.gfa-kpi-u{ font-size:14px; font-weight:600; color:var(--ink-2); }
.gfa-kpi-vrow .gfa-selo{ align-self:center; }
.gfa-kpi-c{ font-size:13px; font-weight:500; line-height:1.35; color:var(--ink-2); }
/* (Pablo, 30/10/2026: verificação) as faixas de "Parados agora": a etapa crítica primeiro, depois o mais antigo */
.gfa-kpi-f{ display:flex; flex-direction:column; gap:6px; }
/* "Parados agora" abre a fileira: a cor do estado no número e no friso de cima */
.gfa-kpi--acao.is-critico{ box-shadow:inset 0 3px 0 var(--gfa-critico-fill); }
.gfa-kpi--acao.is-atencao{ box-shadow:inset 0 3px 0 var(--gfa-atencao-fill); }
.gfa-kpi--acao.is-critico .gfa-kpi-v{ color:var(--gfa-critico-ink); }
.gfa-kpi--acao.is-atencao .gfa-kpi-v{ color:var(--gfa-atencao-ink); }
.gfa-kpi.is-atencao:not(.gfa-kpi--acao) .gfa-kpi-v{ color:var(--gfa-atencao-ink); }
.gfa-kpi.is-bom:not(.gfa-kpi--acao) .gfa-kpi-v{ color:var(--good); }

/* ---------- uma faixa por etapa ---------- */
.gfa-etapas{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
/* (Pablo, 30/10/2026) título · estado agora (faixa no topo) · média · mediana/p90 · meta do Faturar (presa embaixo).
   Sem subgrid de propósito: alinhar as médias abria um buraco em todos os cartões quando um só tinha duas faixas. */
.gfa-et{ position:relative; display:flex; flex-direction:column; gap:9px; min-width:0; padding:12px 14px 12px 17px; background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.gfa-et-meta{ margin-top:auto; }
.gfa-et::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--gfa-cor,var(--line-2)); }
.gfa-et > *{ min-width:0; }
.gfa-et-h{ display:flex; align-items:center; gap:6px; min-width:0; }
.gfa-et-k{ flex:none; font-size:12px; font-weight:800; letter-spacing:.04em; line-height:1.4; padding:0 5px; border-radius:5px; background:var(--chip); color:var(--ink-2); }
.gfa-et-t{ flex:none; font-size:14.5px; font-weight:800; color:var(--ink); white-space:nowrap; }
.gfa-et-quem{ min-width:0; font-size:12.5px; font-weight:600; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gfa-et-h .gfa-i{ margin-left:auto; }
.gfa-et-f{ display:flex; flex-direction:column; gap:6px; }
.gfa-et-vrow{ display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 8px; }
.gfa-et-v{ font-size:24px; font-weight:800; line-height:1.15; letter-spacing:-.015em; color:var(--ink); }
.gfa-et-u{ font-size:13px; font-weight:600; color:var(--ink-2); }
.gfa-et-meta{ display:flex; flex-direction:column; gap:6px; }
.gfa-et-meta-l{ font-size:13px; font-weight:600; color:var(--ink-2); }
.gfa-et-meta-l b{ font-size:15px; font-weight:800; color:var(--ink); }
.gfa-et.is-off{ background:var(--bg-2); border-style:dashed; }
.gfa-et.is-off .gfa-et-v{ color:var(--ink-2); font-size:15px; font-weight:700; }

/* ---------- cartões ---------- */
.gfa-linha{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:12px; }
.gfa-card{ min-width:0; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
.gfa-card-h{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px 16px; flex-wrap:wrap; margin-bottom:10px; }
.gfa-card-tt{ display:flex; align-items:center; gap:4px; }
.gf .gfa-card-t{ margin:0; font-size:14px !important; font-weight:700; color:var(--ink) !important; letter-spacing:-.005em; line-height:1.3; }   /* o escuro gerado pinta todo h2 de teal */
.gfa-card-s{ margin-top:2px; font-size:12.5px; color:var(--ink-2); line-height:1.4; }
.gfa-card-a{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.gfa-vista{ border:0; background:none; padding:2px 0; font:inherit; font-size:12px; font-weight:700; color:var(--accent-ink); cursor:pointer; white-space:nowrap; }
.gfa-vista:hover{ text-decoration:underline; }
.gfa-leg{ display:flex; align-items:center; gap:6px 14px; flex-wrap:wrap; font-size:12px; color:var(--ink-2); margin-bottom:10px; }
.gfa-leg span{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.gfa-leg i, .gfa-dot{ display:inline-block; width:10px; height:10px; border-radius:2px; background:var(--gfa-cor); flex:none; }
.gfa-vazio{ padding:24px 12px; text-align:center; font-size:12.5px; color:var(--ink-3); }

/* ---------- gargalo (texto por regras) ---------- */
.gfa-garg{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.gfa-garg li{ display:grid; grid-template-columns:18px minmax(0,1fr); gap:8px; align-items:start; font-size:14px; line-height:1.5; color:var(--ink); }
.gfa-garg li svg{ width:16px; height:16px; margin-top:3px; }
.gfa-garg li b{ font-weight:800; }
.gfa-garg li.is-alerta svg{ color:var(--gfa-atencao-ink); } .gfa-garg li.is-bom svg{ color:var(--good); } .gfa-garg li.is-info svg{ color:var(--ink-3); }
.gfa-garg li .gfa-dot{ margin-right:6px; vertical-align:0; }
/* (Pablo, 30/10/2026) "Agora: …" primeiro, em faixa de atenção */
.gfa-garg li.is-agora{ padding:8px 12px 8px 10px; border-radius:10px; background:var(--gfa-atencao-bg); border:1px solid var(--gfa-atencao-line); }
.gfa-garg li.is-agora svg{ color:var(--gfa-atencao-ink); }
.gfa-garg-agora{ display:inline-block; margin-right:6px; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--gfa-atencao-ink); }
.gfa-garg-ped{ all:unset; cursor:pointer; font-weight:800; color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px; white-space:nowrap; }

/* ---------- barras empilhadas (tempo médio por etapa) ---------- */
.gfa-pilha{ display:flex; flex-direction:column; gap:7px; max-height:372px; overflow-y:auto; padding-right:2px; }
.gfa-pilha-r{ display:grid; grid-template-columns:96px minmax(0,1fr) 92px; align-items:center; gap:10px; font-size:12px; }
.gfa-pilha-r > span{ color:var(--ink-2); font-weight:600; line-height:1.2; }
.gfa-pilha-r > span small{ display:block; font-size:11.5px; font-weight:500; color:var(--ink-2); }
.gfa-pilha-r.is-todo > span{ color:var(--ink); font-weight:800; }
/* (verificação de 30/10/2026) em "Todos", as barras Com DIFAL e Sem DIFAL logo abaixo do período */
.gfa-pilha-r.is-grupo > span{ font-weight:700; color:var(--ink-2); padding-left:10px; border-left:2px solid var(--line-2); }
.gfa-pilha-r > em{ font-style:normal; text-align:right; white-space:nowrap; font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink); }
.gfa-trilho{ position:relative; height:20px; }
.gfa-trilho::before{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--line-soft); }
.gfa-barra-pilha{ position:relative; display:flex; gap:2px; height:100%; min-width:2px; border-radius:0 4px 4px 0; overflow:hidden; }
.gfa-barra-pilha b{ display:block; height:100%; min-width:2px; background:var(--gfa-cor); cursor:default; }
.gfa-barra-pilha b:hover{ filter:brightness(1.08) saturate(1.1); }
.gfa-pilha-r.is-vazio .gfa-trilho{ opacity:.5; }
.gfa-plot{ position:relative; height:240px; }
.gfa-plot [id^="tip-"] td{ border:0 !important; background:none !important; }

/* ---------- tabelas ---------- */
.gfa-tabwrap{ overflow-x:auto; border:1px solid var(--line); border-radius:10px; }
.gfa-tab{ width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums; }
/* bordas com !important: o portal-2026-dark.css (gerado) põe borda em todo td/th do tema escuro */
.gfa-tab th{ position:static; padding:8px 10px; background:var(--bg-2); border:0 !important; border-bottom:1px solid var(--line) !important; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); text-align:left; white-space:nowrap; }
.gfa-tab td{ padding:8px 10px; border:0 !important; border-top:1px solid var(--line-soft) !important; color:var(--ink); vertical-align:top; }
.gfa-tab tbody tr:first-child td{ border-top:0 !important; }
.gfa-tab .r{ text-align:right; white-space:nowrap; } .gfa-tab .c{ text-align:center; }
.gfa-tab td small{ display:block; font-size:12px; color:var(--ink-2); margin-top:1px; }
.gfa-tab tr.gfa-grupo-t td{ background:var(--bg-2); font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-2); padding-top:6px; padding-bottom:6px; }
.gfa-tab--ped tbody tr{ cursor:pointer; }
.gfa-tab--ped tbody tr:hover td{ background:var(--accent-50) !important; }
.gfa-tab--ped tbody tr:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.gfa-tab--ped{ min-width:820px; }
.gfa-cli{ display:block; max-width:230px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.gfa-etq{ display:inline-flex; align-items:center; gap:6px; font-weight:700; white-space:nowrap; }
.gfa-sel{ display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:700; white-space:nowrap; line-height:1.45; background:var(--chip); color:var(--ink-2); }
.gfa-sel svg{ width:12px; height:12px; }
.gfa-sel.is-alerta{ background:var(--gfa-atencao-bg); color:var(--gfa-atencao-ink); }
.gfa-sel.is-ruim{ background:var(--gfa-critico-bg); color:var(--gfa-critico-ink); }
.gfa-sel.is-bom{ background:var(--good-soft); color:var(--good); }
/* (Pablo, 30/10/2026) "Há": o tempo parado legível e, quando crítico, selo com ícone e o porquê escrito */
.gfa-ha{ font-size:14px; font-weight:800; white-space:nowrap; color:var(--ink); }
.gfa-ha.is-critico{ display:inline-flex; align-items:center; gap:4px; padding:1px 8px 1px 6px; border-radius:999px; background:var(--gfa-critico-bg); color:var(--gfa-critico-ink); }
.gfa-ha svg{ width:14px; height:14px; }
.gfa-tab td small.gfa-ha-p{ font-size:12px; font-weight:600; color:var(--gfa-critico-ink); white-space:normal; }
.gfa-pend{ display:flex; flex-wrap:wrap; gap:4px; margin-top:5px; }
.gfa-rot{ font-size:12px; font-weight:600; color:var(--ink-2); }
.gfa-tab--pess td{ font-size:13.5px; }
.gfa-abas{ margin-bottom:10px; }

/* ---------- por pessoa e motivos ---------- */
.gfa-baixo{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:12px; align-items:start; }

/* ---------- dica (barras em HTML) ---------- */
#gfaTip{ position:fixed; z-index:10060; pointer-events:none; opacity:0; transition:opacity .1s; background:var(--gfa-tip-bg); color:var(--gfa-tip-ink); border-radius:10px; padding:8px 11px; font:12px/1.45 var(--font-body); box-shadow:0 12px 28px rgba(8,20,16,.35); max-width:280px; }
#gfaTip b{ display:block; font-size:13px; font-weight:800; font-variant-numeric:tabular-nums; }
#gfaTip span{ opacity:.78; }
#gfaTip.is-info{ max-width:300px; font-size:12.5px; line-height:1.5; }
#gfaTip.is-info span{ opacity:1; }

/* ---------- gaveta do pedido (fundo sólido, nunca og-glass) ---------- */
#gfaGaveta{ position:fixed; inset:0; z-index:10040; display:flex; justify-content:flex-end; }
#gfaGaveta .gfa-gv-fundo{ position:absolute; inset:0; background:rgba(14,35,29,.42); opacity:0; transition:opacity .18s; }
#gfaGaveta .gfa-gv{ position:relative; width:600px; max-width:100%; height:100%; display:flex; flex-direction:column; background:var(--panel); border-left:1px solid var(--line); box-shadow:var(--e3); transform:translateX(24px); opacity:0; transition:transform .2s var(--ease), opacity .2s; outline:none; color:var(--ink); font-family:var(--font-body); }
#gfaGaveta.aberta .gfa-gv-fundo{ opacity:1; }
#gfaGaveta.aberta .gfa-gv{ transform:none; opacity:1; }
#gfaGaveta .gfa-gv-h{ display:flex; align-items:flex-start; gap:12px; padding:16px 18px 13px; border-bottom:1px solid var(--line-soft); }
#gfaGaveta .gfa-gv-over{ font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); }
#gfaGaveta .gfa-gv-t{ margin:1px 0 0; font-size:18px !important; font-weight:800; letter-spacing:-.01em; color:var(--ink) !important; }
#gfaGaveta .gfa-gv-m{ display:flex; align-items:center; gap:6px 10px; flex-wrap:wrap; margin-top:6px; font-size:12px; color:var(--ink-3); }
#gfaGaveta .gfa-gv-x{ margin-left:auto; width:34px; height:34px; flex:none; display:grid; place-items:center; border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--ink-2); cursor:pointer; }
#gfaGaveta .gfa-gv-x:hover{ background:var(--hover); }
#gfaGaveta .gfa-gv-x svg{ width:16px; height:16px; }
#gfaGaveta .gfa-gv-b{ flex:1; overflow:auto; padding:14px 18px 22px; display:flex; flex-direction:column; gap:18px; }
#gfaGaveta .gfa-gv-f{ display:flex; gap:8px; flex-wrap:wrap; padding:12px 18px; border-top:1px solid var(--line-soft); }
#gfaGaveta .gfa-sec-t{ display:flex; align-items:center; gap:8px; margin:0 0 8px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
#gfaGaveta .gfa-gv-etapas{ display:flex; flex-direction:column; gap:6px; }
#gfaGaveta .gfa-gv-et{ display:grid; grid-template-columns:12px minmax(0,1fr) auto; gap:8px; align-items:baseline; font-size:12.5px; padding:6px 0; border-bottom:1px solid var(--line-soft); }
#gfaGaveta .gfa-gv-et .gfa-dot{ align-self:center; }
#gfaGaveta .gfa-gv-et > div small{ display:block; font-size:11px; color:var(--ink-3); }
#gfaGaveta .gfa-gv-et > em{ font-style:normal; font-weight:800; white-space:nowrap; font-variant-numeric:tabular-nums; text-align:right; }
#gfaGaveta .gfa-gv-et > em small{ display:block; font-size:10.5px; font-weight:600; color:var(--ink-3); }
#gfaGaveta .gfa-gv-et.is-off{ color:var(--ink-3); }
#gfaGaveta .gfa-gv-et.is-aberta > em{ color:var(--red); }
/* linha do tempo: data/hora em coluna própria, ponto na cor da etapa */
#gfaGaveta .gfa-tl{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
#gfaGaveta .gfa-tl li{ position:relative; display:grid; grid-template-columns:78px 14px minmax(0,1fr); gap:0 8px; padding:0 0 12px; font-size:12.5px; }
#gfaGaveta .gfa-tl li::before{ content:""; position:absolute; left:calc(78px + 8px + 6px); top:14px; bottom:0; width:2px; background:var(--line-2); }
#gfaGaveta .gfa-tl li:last-child::before{ display:none; }
#gfaGaveta .gfa-tl time{ font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; line-height:1.35; padding-top:1px; }
#gfaGaveta .gfa-tl time b{ display:block; color:var(--ink-2); font-weight:700; }
#gfaGaveta .gfa-tl .gfa-tl-p{ width:10px; height:10px; margin-top:4px; border-radius:50%; background:var(--gfa-cor,var(--ink-deco)); box-shadow:0 0 0 2px var(--panel); position:relative; z-index:1; }
#gfaGaveta .gfa-tl .gfa-tl-c b{ display:block; font-weight:700; color:var(--ink); line-height:1.35; overflow-wrap:anywhere; }
#gfaGaveta .gfa-tl .gfa-tl-c p{ margin:2px 0 0; color:var(--ink-2); white-space:pre-line; overflow-wrap:anywhere; line-height:1.4; }
#gfaGaveta .gfa-tl .gfa-tl-c small{ display:block; margin-top:2px; font-size:11px; color:var(--ink-3); }
#gfaGaveta .gfa-tl li.is-pendencia .gfa-tl-c b{ color:var(--gfa-atencao-ink); }   /* (Pablo, 30/10/2026) o --amber dava 3,4:1 no branco */
#gfaGaveta .gfa-kv{ display:grid; grid-template-columns:1fr 1fr; gap:0 18px; margin:0; font-size:12.5px; }
#gfaGaveta .gfa-kv > div{ display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px solid var(--line-soft); min-width:0; }
#gfaGaveta .gfa-kv dt{ color:var(--ink-3); white-space:nowrap; }
#gfaGaveta .gfa-kv dd{ margin:0; font-weight:600; text-align:right; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
#gfaGaveta .gfa-kv > div.cheia{ grid-column:1 / -1; }
#gfaGaveta .gfa-sinais{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
#gfaGaveta .gfa-sinais li{ display:flex; gap:8px; align-items:flex-start; font-size:12.5px; line-height:1.45; color:var(--ink-2); background:var(--amber-soft); border-radius:8px; padding:6px 10px; }
#gfaGaveta .gfa-sinais li svg{ width:15px; height:15px; margin-top:2px; color:var(--amber); }

/* ---------- larguras (pela largura do painel, não da janela) ---------- */
@container gfa (max-width: 1180px){
  .gfa-kpis{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .gfa-etapas{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@container gfa (max-width: 900px){
  .gfa-linha, .gfa-baixo{ grid-template-columns:minmax(0,1fr); }
}
@container gfa (max-width: 620px){
  .gfa-barra{ padding:8px 10px; }
  .gfa-grupo{ width:100%; justify-content:space-between; }
  .gfa-seg{ flex:1; justify-content:space-between; }
  .gfa-seg button{ flex:1; padding:0 8px; height:36px; }
  .gfa-barra-fim{ margin-left:0; width:100%; justify-content:space-between; flex-wrap:wrap; gap:8px; }
  .gfa-atual{ white-space:normal; min-width:0; flex:1 1 180px; }
  .gfa-btn{ height:40px; }
  .gfa-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .gfa-kpi--acao, .gfa-kpi:last-child{ grid-column:1 / -1; }   /* "Parados agora" na largura toda; o 6º fecha a fileira */
  /* (Pablo, 30/10/2026) as etapas em uma coluna: em duas, a faixa de estado quebrava a cada duas palavras */
  .gfa-etapas{ grid-template-columns:minmax(0,1fr); gap:8px; }
  .gfa-pilha{ max-height:none; overflow:visible; }
  .gfa-abas{ width:100%; }
  .gfa-abas button{ flex:1 1 auto; padding:0 6px; font-size:12px; }
  .gfa-kpi, .gfa-et{ padding:10px 12px; }
  .gfa-et{ padding-left:15px; gap:8px; }
  .gfa-kpi-v{ font-size:24px; } .gfa-et-v{ font-size:21px; }
  .gfa-split{ gap:6px 14px; }
  .gfa-faixa{ padding:7px 8px; gap:6px; }
  .gfa-card{ padding:12px; }
  .gfa-plot{ height:210px; }
  .gfa-pilha-r{ grid-template-columns:minmax(0,1fr) 84px; gap:4px 10px; }
  .gfa-pilha-r > .gfa-trilho{ grid-column:1 / -1; grid-row:2; }
  /* pedidos viram cartões */
  .gfa-tabwrap--ped{ border:0; overflow:visible; }
  .gfa-tab--ped{ min-width:0; }
  .gfa-tab--ped thead{ display:none; }
  .gfa-tab--ped tbody{ display:flex; flex-direction:column; gap:8px; }
  .gfa-tab--ped tbody tr{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px 12px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; }
  .gfa-tab--ped tbody td{ display:flex; flex-direction:column; align-items:flex-start; gap:1px; padding:3px 0; border:0 !important; min-width:0; }
  .gfa-tab--ped tbody td.larga{ align-items:stretch; }
  .gfa-tab--ped tbody td::before{ content:attr(data-l); font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-2); }
  .gfa-tab--ped tbody td.larga{ grid-column:1 / -1; }
  .gfa-tab--ped tbody td.r{ text-align:left; }
  .gfa-tab--ped tbody tr:hover td{ background:none !important; }
  .gfa-cli{ max-width:100%; }
  /* (verificação de 30/10/2026) "Por pessoa": a Mediana sai para o p90 caber em 390 px */
  .gfa-tab--pess .gfa-col-med{ display:none; }
  .gfa-tab--pess th, .gfa-tab--pess td{ padding-left:8px; padding-right:8px; }
  .gfa-tab--pess td.r:last-child{ white-space:normal; }   /* "máx" pode ir para cima do número (número e unidade não se separam) */
}
@media (max-width: 620px){
  #gfaGaveta .gfa-kv{ grid-template-columns:minmax(0,1fr); }
  #gfaGaveta .gfa-gv-b{ padding:12px 14px 20px; }
  #gfaGaveta .gfa-tl li{ grid-template-columns:64px 14px minmax(0,1fr); }
  #gfaGaveta .gfa-tl li::before{ left:calc(64px + 8px + 6px); }
}
@media (prefers-reduced-motion: reduce){
  #gfaGaveta .gfa-gv, #gfaGaveta .gfa-gv-fundo{ transition:none; }
}