/* ==========================================================================
   Triunfo Bridge — design system (brandbook Triunfo Logística)
   Servido em /marca/triunfo-ds.css. Toda tela nova importa este arquivo e usa
   só os tokens daqui: nenhuma cor solta no código da tela.
   Marca: vermelho #DA202C · texto #2F2F2F · preto #0E0E10 · cinza #8A8C91 · branco · fundo #EAEAEA
   Segue a skill triunfo-design-system: sem gradientes, sem azul/verde/amarelo fora do semáforo,
   cartões brancos (cantos 8 px, sombra discreta) sobre fundo #EAEAEA.
   Títulos DIN (Barlow Semi Condensed quando a DIN não está instalada),
   texto Poppins, números e códigos IBM Plex Mono.
   Fontes: <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Poppins:wght@400;500;600&display=swap">
   ========================================================================== */
:root {
  /* marca */
  --tb-red: #DA202C; --tb-red-deep: #B3161F; --tb-red-soft: #FCE8E9;
  --tb-black: #0E0E10; --tb-gray: #8A8C91; --tb-white: #FFFFFF;
  /* superfícies e texto (tema claro) */
  --tb-bg: #EAEAEA; --tb-surface: #FFFFFF; --tb-surface-2: #F6F6F6; --tb-sunken: #F0F0F0;
  --tb-ink: #2F2F2F; --tb-ink-soft: #636363; --tb-ink-mute: #8A8C91;
  --tb-line: #DEDEDE; --tb-line-strong: #C9C9CB;
  --tb-accent: var(--tb-red); --tb-accent-ink: #FFFFFF; --tb-link: #B3161F;
  /* faixa escura (cabeçalhos) — igual nos dois temas */
  --tb-band: #0E0E10; --tb-band-2: #1A1A1D; --tb-band-ink: #FFFFFF; --tb-band-soft: rgba(255,255,255,.72); --tb-band-line: rgba(255,255,255,.14);
  /* áreas da Central (só no ícone e no filete do card) */
  --tb-area-operacoes: #DA202C; --tb-area-financeiro: #0E0E10; --tb-area-diretoria: #8E1B22; --tb-area-pessoas: #6B6D73;
  /* estados (semânticos, separados do vermelho da marca) */
  --tb-ok: #1B7A4E; --tb-ok-bg: #E6F3EC; --tb-warn: #A86514; --tb-warn-bg: #FBF0DF;
  --tb-bad: #C2202B; --tb-bad-bg: #FCE7E8; --tb-info: #2F2F2F; --tb-info-bg: #F0F0F0; /* sem azul: aviso informativo é grafite (brandbook) */
  /* tipografia */
  --tb-f-display: 'DIN', 'DIN Pro', 'D-DIN', 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  --tb-f-body: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --tb-f-mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  /* escala de tipo (px) — só estes tamanhos */
  --tb-t-xs: 11px; --tb-t-sm: 12.5px; --tb-t-md: 14px; --tb-t-lg: 16px; --tb-t-xl: 20px; --tb-t-2xl: 26px; --tb-t-3xl: 36px; --tb-t-4xl: 48px;
  /* espaçamento (4 px) */
  --tb-s1: 4px; --tb-s2: 8px; --tb-s3: 12px; --tb-s4: 16px; --tb-s5: 20px; --tb-s6: 24px; --tb-s8: 32px; --tb-s10: 40px; --tb-s12: 48px;
  /* cantos e sombras — só estes */
  --tb-r-sm: 4px; --tb-r-md: 8px; --tb-r-lg: 8px; /* cantos levemente arredondados: 8 px (design system Triunfo) */ --tb-r-pill: 999px;
  --tb-shadow-1: 0 1px 2px rgba(47,47,47,.08), 0 2px 8px -4px rgba(47,47,47,.14);
  --tb-shadow-2: 0 2px 4px rgba(47,47,47,.08), 0 10px 22px -12px rgba(47,47,47,.28);
  /* dataviz (paleta monocromática, ordem fixa, máx. 4 séries) */
  --tb-chart-1: #DA202C; --tb-chart-2: #2F2F2F; --tb-chart-3: #F2A4A9; --tb-chart-4: #636363;
  --tb-seq-1: #FBE3E5; --tb-seq-2: #F2A4A9; --tb-seq-3: #E5606A; --tb-seq-4: #DA202C; --tb-grade: #EAEAEA;
  --tb-focus: 0 0 0 3px color-mix(in srgb, var(--tb-red) 35%, transparent);
  --tb-ease: cubic-bezier(.2,.7,.2,1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --tb-bg: #0B0B0D; --tb-surface: #151518; --tb-surface-2: #1B1B1F; --tb-sunken: #101012;
    --tb-ink: #F1F1F2; --tb-ink-soft: #A9AAAF; --tb-ink-mute: #7C7E84;
    --tb-line: #2A2A2F; --tb-line-strong: #3A3A40;
    --tb-accent: #E5343F; --tb-link: #FF7A82; --tb-red-soft: #2E1416;
    --tb-area-financeiro: #4A4B51; --tb-area-diretoria: #C2414A; --tb-area-pessoas: #9A9CA2;
    --tb-ok: #5CC995; --tb-ok-bg: #12261C; --tb-warn: #E7A64B; --tb-warn-bg: #2B2112;
    --tb-bad: #FF6B73; --tb-bad-bg: #2E1416; --tb-info: #D6D6D8; --tb-info-bg: #202024;
    --tb-shadow-1: 0 1px 2px rgba(0,0,0,.5), 0 6px 16px -10px rgba(0,0,0,.9);
    --tb-shadow-2: 0 2px 4px rgba(0,0,0,.5), 0 18px 36px -18px rgba(0,0,0,.95);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --tb-bg: #0B0B0D; --tb-surface: #151518; --tb-surface-2: #1B1B1F; --tb-sunken: #101012;
  --tb-ink: #F1F1F2; --tb-ink-soft: #A9AAAF; --tb-ink-mute: #7C7E84;
  --tb-line: #2A2A2F; --tb-line-strong: #3A3A40;
  --tb-accent: #E5343F; --tb-link: #FF7A82; --tb-red-soft: #2E1416;
  --tb-area-financeiro: #4A4B51; --tb-area-diretoria: #C2414A; --tb-area-pessoas: #9A9CA2;
  --tb-ok: #5CC995; --tb-ok-bg: #12261C; --tb-warn: #E7A64B; --tb-warn-bg: #2B2112;
  --tb-bad: #FF6B73; --tb-bad-bg: #2E1416; --tb-info: #D6D6D8; --tb-info-bg: #202024;
  --tb-shadow-1: 0 1px 2px rgba(0,0,0,.5), 0 6px 16px -10px rgba(0,0,0,.9);
  --tb-shadow-2: 0 2px 4px rgba(0,0,0,.5), 0 18px 36px -18px rgba(0,0,0,.95);
}

/* ---------- nomes do design system Triunfo (skill triunfo-design-system) apontando para os tokens do Bridge ---------- */
:root {
  --trl-vermelho: var(--tb-red); --trl-texto: var(--tb-ink); --trl-cinza: var(--tb-gray); --trl-branco: #FFFFFF;
  --trl-fundo: var(--tb-bg); --trl-superficie: var(--tb-surface); --trl-linha: var(--tb-line);
  --trl-radius: var(--tb-r-md); --trl-shadow: var(--tb-shadow-1);
  --trl-chart-1: var(--tb-chart-1); --trl-chart-2: var(--tb-chart-2); --trl-chart-3: var(--tb-chart-3); --trl-chart-4: var(--tb-chart-4);
  --trl-seq-1: var(--tb-seq-1); --trl-seq-2: var(--tb-seq-2); --trl-seq-3: var(--tb-seq-3); --trl-seq-4: var(--tb-seq-4);
  --trl-status-ok: var(--tb-ok); --trl-status-atencao: var(--tb-warn); --trl-status-critico: var(--tb-bad);
}

/* ---------- base (só dentro de .tb, para não mexer em telas antigas que importarem o arquivo) ---------- */
.tb, .tb *, .tb *::before, .tb *::after { box-sizing: border-box; }
body.tb { margin: 0; background: var(--tb-bg); color: var(--tb-ink); font: 400 var(--tb-t-md)/1.5 var(--tb-f-body); -webkit-text-size-adjust: 100%; overflow-x: clip; }
.tb a { color: var(--tb-link); text-underline-offset: 3px; }
.tb :focus-visible { outline: 2px solid var(--tb-red); outline-offset: 2px; }
.tb .num, .tb .mono { font-family: var(--tb-f-mono); font-variant-numeric: tabular-nums; }
.tb [hidden] { display: none !important; }

/* ---------- tipografia ---------- */
.tb-display { font: 700 var(--tb-t-4xl)/.95 var(--tb-f-display); text-transform: uppercase; letter-spacing: .005em; margin: 0; text-wrap: balance; }
.tb-h1 { font: 700 var(--tb-t-3xl)/1 var(--tb-f-display); text-transform: uppercase; margin: 0; text-wrap: balance; }
.tb-h2 { font: 700 var(--tb-t-2xl)/1.05 var(--tb-f-display); text-transform: uppercase; margin: 0; letter-spacing: .01em; }
.tb-h3 { font: 700 var(--tb-t-lg)/1.15 var(--tb-f-display); text-transform: uppercase; margin: 0; letter-spacing: .04em; }
.tb-eyebrow { display: inline-flex; align-items: center; gap: 9px; font: 600 var(--tb-t-xs)/1 var(--tb-f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--tb-ink-soft); }
.tb-eyebrow::before { content: ""; width: 22px; height: 3px; background: var(--tb-red); border-radius: 2px; }
.tb-muted { color: var(--tb-ink-soft); }
.tb-wordmark { font: 700 var(--tb-t-xl)/1 var(--tb-f-display); text-transform: uppercase; letter-spacing: .04em; }
.tb-wordmark b { color: var(--tb-red); font-weight: inherit; }

/* ---------- cabeçalho padrão de trabalho ---------- */
.tb-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--tb-band); color: var(--tb-band-ink); border-bottom: 3px solid var(--tb-red); }
.tb-header-in { max-width: 1440px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 14px; min-height: 56px; }
.tb-header .tb-voltar { display: inline-flex; align-items: center; gap: 8px; color: var(--tb-band-ink); text-decoration: none; font: 600 var(--tb-t-sm) var(--tb-f-body); padding: 6px 10px 6px 6px; border-radius: var(--tb-r-md); border: 1px solid var(--tb-band-line); }
.tb-header .tb-voltar img { width: 22px; height: 22px; }
.tb-header .tb-voltar:hover { border-color: var(--tb-red); }
.tb-header-titulo { display: flex; flex-direction: column; min-width: 0; }
.tb-header-titulo small { font: 600 10.5px var(--tb-f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--tb-band-soft); }
.tb-header-titulo strong { font: 700 var(--tb-t-xl)/1.05 var(--tb-f-display); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-header-acoes { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; font-size: var(--tb-t-sm); color: var(--tb-band-soft); }
@media (max-width: 720px) { .tb-header-in { padding: 8px 12px; gap: 10px; } .tb-header .tb-voltar span { display: none; } .tb-header-titulo strong { font-size: var(--tb-t-lg); } }

/* ---------- botões ---------- */
.tb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 var(--tb-t-md)/1 var(--tb-f-body); padding: 11px 18px; border-radius: var(--tb-r-md); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background-color .15s, border-color .15s, color .15s; min-height: 42px; }
.tb-btn-primario { background: var(--tb-red); color: #fff; }
.tb-btn-primario:hover { background: var(--tb-red-deep); }
.tb-btn-secundario { background: var(--tb-surface); color: var(--tb-ink); border-color: var(--tb-line-strong); }
.tb-btn-secundario:hover { border-color: var(--tb-ink); }
.tb-btn-perigo { background: var(--tb-bad-bg); color: var(--tb-bad); border-color: color-mix(in srgb, var(--tb-bad) 30%, transparent); }
.tb-btn-fantasma { background: transparent; color: var(--tb-ink-soft); }
.tb-btn-fantasma:hover { color: var(--tb-ink); background: var(--tb-surface-2); }
.tb-btn-icone { padding: 0; width: 38px; min-height: 38px; }
.tb-btn[disabled] { opacity: .55; cursor: not-allowed; }
.tb-btn-sm { padding: 7px 12px; min-height: 32px; font-size: var(--tb-t-sm); }

/* ---------- campos ---------- */
.tb-campo { display: flex; flex-direction: column; gap: 6px; }
.tb-rotulo { font: 600 var(--tb-t-xs)/1.2 var(--tb-f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--tb-ink-soft); }
.tb-input, .tb-select { width: 100%; font: 400 15px/1.3 var(--tb-f-body); color: var(--tb-ink); background: var(--tb-surface); border: 1px solid var(--tb-line-strong); border-radius: var(--tb-r-md); padding: 11px 13px; min-height: 44px; transition: border-color .15s, box-shadow .15s; }
.tb-input:hover, .tb-select:hover { border-color: var(--tb-ink-mute); }
.tb-input:focus, .tb-select:focus { outline: none; border-color: var(--tb-red); box-shadow: var(--tb-focus); }

/* ---------- chips / filtros e abas ---------- */
.tb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tb-chip { font: 500 var(--tb-t-sm)/1 var(--tb-f-body); padding: 7px 12px; border-radius: var(--tb-r-pill); border: 1px solid var(--tb-line-strong); background: var(--tb-surface); color: var(--tb-ink-soft); cursor: pointer; }
.tb-chip[aria-pressed="true"] { background: var(--tb-ink); border-color: var(--tb-ink); color: var(--tb-bg); }
.tb-abas { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--tb-line); }
.tb-abas::-webkit-scrollbar { display: none; }
.tb-aba { border: 0; background: none; cursor: pointer; padding: 12px 14px 10px; font: 500 var(--tb-t-md) var(--tb-f-body); color: var(--tb-ink-soft); border-bottom: 3px solid transparent; white-space: nowrap; }
.tb-aba[aria-pressed="true"], .tb-aba[aria-selected="true"] { color: var(--tb-ink); font-weight: 600; border-bottom-color: var(--tb-red); }

/* ---------- cartões e KPIs ---------- */
.tb-card { background: var(--tb-surface); border: 1px solid var(--tb-line); border-radius: var(--tb-r-lg); box-shadow: var(--tb-shadow-1); }
.tb-card-cab { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--tb-line); }
.tb-card-cab h3 { margin: 0; font: 700 var(--tb-t-lg)/1.1 var(--tb-f-display); text-transform: uppercase; letter-spacing: .04em; }
.tb-card-fonte { padding: 8px 16px; border-top: 1px solid var(--tb-line); font-size: var(--tb-t-xs); color: var(--tb-ink-mute); }
.tb-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--tb-s3); }
.tb-kpi { background: var(--tb-surface); border: 1px solid var(--tb-line); border-radius: var(--tb-r-md); padding: 12px 14px; box-shadow: var(--tb-shadow-1); }
.tb-kpi span { display: block; font: 600 var(--tb-t-xs) var(--tb-f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--tb-ink-soft); }
.tb-kpi b { display: block; font: 700 30px/1.1 var(--tb-f-display); color: var(--tb-ink); font-variant-numeric: tabular-nums; }
.tb-kpi small { font-size: var(--tb-t-xs); color: var(--tb-ink-mute); }

/* ---------- tabela ---------- */
.tb-tabela-caixa { overflow-x: auto; border: 1px solid var(--tb-line); border-radius: var(--tb-r-md); background: var(--tb-surface); }
.tb-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.tb-tabela th { position: sticky; top: 0; background: var(--tb-band); color: var(--tb-band-ink); text-align: left; font: 600 var(--tb-t-xs) var(--tb-f-body); letter-spacing: .06em; text-transform: uppercase; padding: 9px 10px; border-bottom: 3px solid var(--tb-red); white-space: nowrap; }
.tb-tabela td { padding: 8px 10px; border-bottom: 1px solid var(--tb-line); vertical-align: top; }
.tb-tabela td.num { text-align: right; }
.tb-tabela tbody tr:hover { background: var(--tb-surface-2); }

/* ---------- selos, avisos e estados ---------- */
.tb-selo { display: inline-flex; align-items: center; gap: 5px; font: 600 10.5px/1 var(--tb-f-body); letter-spacing: .06em; text-transform: uppercase; padding: 4px 7px; border-radius: var(--tb-r-sm); background: var(--tb-sunken); color: var(--tb-ink-soft); }
.tb-selo-novo { background: var(--tb-red); color: #fff; }
.tb-selo-ok { background: var(--tb-ok-bg); color: var(--tb-ok); }
.tb-selo-alerta { background: var(--tb-warn-bg); color: var(--tb-warn); }
.tb-selo-erro { background: var(--tb-bad-bg); color: var(--tb-bad); }
/* semáforo: glifo sempre junto da cor (● no alvo · ◐ em risco · ▲ fora da meta) */
.tb-selo-ok::before { content: "●"; } .tb-selo-alerta::before { content: "◐"; } .tb-selo-erro::before { content: "▲"; font-size: .9em; }
.tb-aviso-alerta { background: var(--tb-warn-bg); color: var(--tb-warn); border-color: color-mix(in srgb, var(--tb-warn) 25%, transparent); }
.tb-aviso-info { border-color: var(--tb-line); }
.tb-aviso { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--tb-r-md); font-size: var(--tb-t-sm); border: 1px solid transparent; }
.tb-aviso-erro { background: var(--tb-bad-bg); color: var(--tb-bad); border-color: color-mix(in srgb, var(--tb-bad) 25%, transparent); }
.tb-aviso-ok { background: var(--tb-ok-bg); color: var(--tb-ok); border-color: color-mix(in srgb, var(--tb-ok) 25%, transparent); }
.tb-aviso-info { background: var(--tb-info-bg); color: var(--tb-info); border-left: 3px solid var(--tb-ink-mute); }
.tb-vazio { padding: var(--tb-s8) var(--tb-s4); text-align: center; color: var(--tb-ink-soft); }
.tb-carregando { display: inline-flex; align-items: center; gap: 8px; color: var(--tb-ink-soft); }
.tb-carregando::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--tb-line-strong); border-top-color: var(--tb-red); animation: tb-gira .8s linear infinite; }
@keyframes tb-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tb-carregando::before { animation: none; } .tb *, .tb *::before { transition: none !important; } }