/* ============================================================================
   KIT — o padrao visual do DISPARADOR_2 (desktop e celular), numa fonte so.
   Regra: tela nova usa SO classes k-*. Tela antiga migra quando for mexida.
   Tudo por token (--color-*, --radius-*, --fs-*, --sp-*): trocar o estilo do app
   = trocar token ou regra AQUI, nunca cor/px solto no CSS de um modulo.
   Documentacao e exemplos: docs/FRONTEND.md. Carregado por ULTIMO em toda pagina
   (style.css importa; paginas com CSS proprio linkam de novo no fim do <head>).
   ============================================================================ */

/* ── Tokens que faltavam (base.css tem cores, raios e sombras) ─────────────── */
:root {
    --fs-xs: .6875rem;   /* 11px: eyebrow, legenda, rotulo de coluna */
    --fs-sm: .75rem;     /* 12px: chip, meta, texto secundario */
    --fs-md: .8125rem;   /* 13px: corpo denso (tabela, lista, campo) */
    --fs-base: .875rem;  /* 14px: corpo, botao, aba */
    --fs-lg: 1rem;       /* 16px: titulo de card */
    --fs-xl: 1.25rem;    /* 20px: titulo de pagina, numero medio */
    --fs-2xl: 1.75rem;   /* 28px: numero de KPI */
    --fs-3xl: 2.125rem;  /* 34px: numero heroi */
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
    --radius-pill: 999px;
    --toque: 44px;
    --pagina-max: 1440px;
    --k-acento-suave: color-mix(in oklab, var(--color-primary), transparent 86%);
    --k-borda-acento: color-mix(in oklab, var(--color-primary), var(--color-border) 55%);
}

/* As pecas nao dependem do reset global: caixa com borda e padding dentro da largura. */
[class^="k-"], [class*=" k-"], [class^="k-"] *, [class*=" k-"] * { box-sizing: border-box; }

/* ── Pagina e topo ─────────────────────────────────────────────────────────── */
.k-pagina { max-width: var(--pagina-max); margin: 0 auto; width: 100%; min-width: 0; }
.k-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3) var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.k-topo-id { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.k-topo h1 { margin: 0; font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.01em; color: var(--color-text); line-height: 1.2; }
.k-topo-sub { font-size: var(--fs-md); color: var(--color-text-muted); }
.k-topo-acoes { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.k-topo-selos { display: flex; gap: var(--sp-1) var(--sp-2); flex-wrap: wrap; align-items: center; }

/* ── Rotulo pequeno em caixa alta (eyebrow / rotulo de KPI / cabecalho de coluna) */
.k-rotulo { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.k-rotulo--acento { color: var(--color-primary); }

/* ── Abas nivel 1: do modulo (sublinhado dentro de uma faixa; rola de lado, nunca quebra) */
.k-abas { display: flex; align-items: stretch; gap: 2px; padding: 0 12px; margin-bottom: 18px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; position: relative; }
.k-abas::-webkit-scrollbar { display: none; }
/* ha aba escondida a direita: degrade na borda (o JS liga .k-abas--mais; ver kit.js) */
.k-abas::after { content: ""; position: sticky; right: -12px; flex: 0 0 36px; margin-left: -36px; align-self: stretch; pointer-events: none; background: linear-gradient(90deg, transparent, var(--color-surface) 80%); opacity: 0; transition: opacity .15s; }
.k-abas.k-abas--mais::after { opacity: 1; }
.k-aba { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; min-height: 46px; padding: 2px 12px 0; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--color-text-muted); font: inherit; font-size: var(--fs-base); font-weight: 600; white-space: nowrap; cursor: pointer; transition: color .12s, border-color .12s; -webkit-tap-highlight-color: transparent; }
.k-aba svg { width: 16px; height: 16px; flex: none; }
@media (hover: hover) { .k-aba:hover { color: var(--color-text); } }
.k-aba.ativa, .k-aba[aria-selected="true"] { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.k-aba-n { font-size: var(--fs-xs); font-weight: 700; padding: 1px 7px; border-radius: var(--radius-pill); background: var(--color-neutral-light); color: var(--color-text-muted); }
.k-aba.ativa .k-aba-n { background: var(--k-acento-suave); color: var(--color-primary); }

/* ── Abas nivel 2: dentro da aba (controle segmentado) ─────────────────────── */
.k-seg { display: inline-flex; gap: 4px; padding: 4px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.k-seg::-webkit-scrollbar { display: none; }
.k-seg--cheio { display: flex; }
.k-seg--cheio .k-seg-btn { flex: 1; justify-content: center; }
.k-seg-btn { appearance: none; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--color-text-muted); font: inherit; font-size: var(--fs-md); font-weight: 600; white-space: nowrap; cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
@media (hover: hover) { .k-seg-btn:hover { color: var(--color-text); background: var(--color-neutral-light); } }
.k-seg-btn.ativa, .k-seg-btn[aria-selected="true"] { background: var(--k-acento-suave); color: var(--color-primary); border-color: var(--color-primary); }

/* ── Abas nivel 3: secoes de uma tela (sublinhado; no celular fica presa no topo) */
.k-secoes { display: flex; gap: 2px; border-bottom: 1px solid var(--color-border); overflow-x: auto; scrollbar-width: none; margin-bottom: var(--sp-3); }
.k-secoes::-webkit-scrollbar { display: none; }
.k-secoes button { flex: 0 0 auto; min-height: 40px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; color: var(--color-text-muted); font: inherit; font-size: var(--fs-md); font-weight: 600; white-space: nowrap; cursor: pointer; }
.k-secoes button.ativa, .k-secoes button[aria-selected="true"] { color: var(--color-primary); border-bottom-color: var(--color-primary); }
@media (hover: hover) { .k-secoes button:hover { color: var(--color-text); } }

/* ── Botoes ────────────────────────────────────────────────────────────────── */
.k-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--radius-sm); background: var(--color-primary); color: var(--color-on-primary); font: inherit; font-size: var(--fs-base); font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s, color .15s; -webkit-tap-highlight-color: transparent; }
.k-btn svg { width: 16px; height: 16px; flex: none; }
@media (hover: hover) { .k-btn:hover { background: var(--color-primary-hover); } }
.k-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.k-btn[disabled], .k-btn[aria-disabled="true"] { opacity: .5; cursor: default; pointer-events: none; }
.k-btn--sec { background: transparent; color: var(--color-text); border-color: color-mix(in oklab, var(--color-text), transparent 70%); }
@media (hover: hover) { .k-btn--sec:hover { background: var(--color-neutral-light); border-color: color-mix(in oklab, var(--color-text), transparent 45%); } }
.k-btn--fantasma { background: transparent; color: var(--color-text-muted); }
@media (hover: hover) { .k-btn--fantasma:hover { background: var(--color-neutral-light); color: var(--color-text); } }
.k-btn--perigo { background: transparent; color: var(--color-danger); border-color: color-mix(in oklab, var(--color-danger), transparent 40%); }
@media (hover: hover) { .k-btn--perigo:hover { background: color-mix(in oklab, var(--color-danger), transparent 92%); } }
.k-btn--perigo-cheio { background: var(--color-danger); color: #fff; }
.k-btn--peq { min-height: 32px; padding: 0 12px; font-size: var(--fs-md); border-radius: 7px; }
.k-btn--icone { padding: 0; width: 38px; }
.k-btn--icone.k-btn--peq { width: 32px; }
.k-btn--cheio { width: 100%; }
.k-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.k-acoes--fim { justify-content: flex-end; }

/* ── Campos e filtros ──────────────────────────────────────────────────────── */
.k-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.k-campo > span, .k-campo > label { font-size: var(--fs-sm); font-weight: 600; color: var(--color-text-muted); }
.k-input { width: 100%; min-height: 38px; padding: 8px 11px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-input-bg, var(--color-surface)); color: var(--color-text); font: inherit; font-size: var(--fs-md); transition: border-color .15s, box-shadow .15s; }
textarea.k-input { min-height: 88px; line-height: 1.5; resize: vertical; }
.k-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--k-acento-suave); }
.k-input[readonly] { color: var(--color-text-muted); }
.k-input[disabled] { opacity: .55; }
select.k-input { padding-right: 30px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; appearance: none; }
.k-ajuda { font-size: var(--fs-sm); color: var(--color-text-muted); }
.k-erro { font-size: var(--fs-sm); color: var(--color-danger); }
.k-form { display: grid; gap: var(--sp-4); }
.k-form--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k-form--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.k-form .k-largo { grid-column: 1 / -1; }
.k-filtros { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: var(--sp-4); }
.k-filtros .k-campo { flex: 0 1 180px; }
.k-filtros .k-campo--busca { flex: 1 1 220px; }
.k-filtros .k-btn { margin-left: auto; }
.k-filtros--card { padding: 12px 14px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }

/* ── Interruptor (texto a direita, chave a esquerda) ───────────────────────── */
.k-switch { display: flex; align-items: center; gap: 12px; min-height: 36px; cursor: pointer; user-select: none; }
.k-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.k-switch-tk { position: relative; flex: none; width: 38px; height: 22px; border-radius: var(--radius-pill); background: var(--color-neutral-light); border: 1px solid var(--color-border); transition: background .15s, border-color .15s; }
.k-switch-tk::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--color-text-muted); transition: left .15s, background .15s; }
.k-switch input:checked + .k-switch-tk { background: var(--color-primary); border-color: var(--color-primary); }
.k-switch input:checked + .k-switch-tk::after { left: 18px; background: var(--color-on-primary); }
.k-switch input:focus-visible + .k-switch-tk { box-shadow: 0 0 0 3px var(--k-acento-suave); }
.k-switch-tx { min-width: 0; display: flex; flex-direction: column; }
.k-switch-tx b { font-size: var(--fs-md); font-weight: 600; color: var(--color-text); }
.k-switch-tx small { font-size: var(--fs-sm); color: var(--color-text-muted); }
.k-switch + .k-switch { border-top: 1px solid var(--color-border); }
.k-switches .k-switch { padding: 10px 0; }

/* ── Interruptor so com CSS no proprio checkbox: <input type="checkbox" class="k-sw" id="..."> ──
   Para opcao liga/desliga em markup antigo sem mexer no JS (id e .checked iguais). O <label> que o
   envolve vira linha de interruptor: texto a direita, 36-44px de toque. */
input[type="checkbox"].k-sw { appearance: none; -webkit-appearance: none; position: relative; width: 38px; height: 22px; margin: 0; flex: none; vertical-align: middle; border-radius: var(--radius-pill); background: var(--color-neutral-light); border: 1px solid var(--color-border); cursor: pointer; transition: background .15s, border-color .15s; }
input[type="checkbox"].k-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--color-text-muted); transition: left .15s, background .15s; }
input[type="checkbox"].k-sw:checked { background: var(--color-primary); border-color: var(--color-primary); }
input[type="checkbox"].k-sw:checked::after { left: 18px; background: var(--color-on-primary); }
input[type="checkbox"].k-sw:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--k-acento-suave); }
input[type="checkbox"].k-sw:disabled { opacity: .5; cursor: default; }
label:has(> input.k-sw) { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; font-size: var(--fs-md); font-weight: 600; color: var(--color-text); cursor: pointer; user-select: none; }
label:has(> input.k-sw) > span, label:has(> input.k-sw) > b { font-weight: 600; }
@media (pointer: coarse) { label:has(> input.k-sw) { min-height: var(--toque); } }

.k-marcar { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font-size: var(--fs-md); cursor: pointer; }
.k-marcar input { width: 16px; height: 16px; accent-color: var(--color-primary); margin: 0; }

/* ── Cards e grades ────────────────────────────────────────────────────────── */
.k-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 18px 20px; box-shadow: var(--shadow-sm); min-width: 0; }
.k-card + .k-card, .k-grade + .k-card, .k-card + .k-grade, .k-grade + .k-grade { margin-top: var(--sp-4); }
.k-card--sub { background: var(--color-surface-2); border-radius: var(--radius-md); padding: 14px 16px; box-shadow: none; }
.k-card--chao { background: var(--color-neutral-light); border: 0; border-radius: 10px; padding: 12px 14px; box-shadow: none; }
.k-card--clique { cursor: pointer; transition: border-color .15s; }
@media (hover: hover) { .k-card--clique:hover { border-color: var(--k-borda-acento); } }
.k-card-h { display: flex; align-items: baseline; gap: 6px 10px; flex-wrap: wrap; margin-bottom: 14px; }
.k-card-t { font-size: var(--fs-lg); font-weight: 650; color: var(--color-text); letter-spacing: -.01em; }
.k-card-s { font-size: var(--fs-sm); color: var(--color-text-muted); }
.k-card-a { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.k-card-h--linha { padding-bottom: 12px; border-bottom: 1px solid var(--color-border); }
.k-grade { display: grid; gap: var(--sp-4); align-items: stretch; }
.k-grade--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k-grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.k-grade--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.k-grade--auto { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.k-grade > .k-largo { grid-column: 1 / -1; }
.k-sep { height: 1px; background: var(--color-border); margin: var(--sp-4) 0; }

/* ── KPI (numero com rotulo; o heroi e o KPI com --grande) ─────────────────── */
.k-kpi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.k-kpi-n { font-size: var(--fs-2xl); font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--color-text); margin-top: 6px; }
.k-kpi--grande .k-kpi-n { font-size: var(--fs-3xl); color: var(--color-primary); }
.k-kpi-n.ok { color: var(--color-success); } .k-kpi-n.erro { color: var(--color-danger); } .k-kpi-n.aviso { color: var(--color-warning-strong, var(--color-warning)); }
.k-kpi-d { font-size: var(--fs-sm); color: var(--color-text-muted); }
.k-kpi-d b { color: var(--color-text); font-weight: 650; }
.k-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
.k-kpis .k-kpi { background: var(--color-neutral-light); border-radius: 10px; padding: 12px 14px; }
.k-kpis .k-kpi-n { font-size: var(--fs-xl); }

/* ── Medidor / barra de progresso (segmentos com --c) ──────────────────────── */
.k-medidor { display: flex; gap: 2px; height: 8px; border-radius: 4px; background: var(--color-neutral-light); overflow: hidden; margin-top: 10px; }
.k-medidor--fino { height: 5px; margin-top: 6px; }
.k-medidor i { display: block; height: 100%; border-radius: 3px; background: var(--c, var(--color-primary)); transition: width .35s ease; }
.k-legenda { display: flex; gap: 6px 14px; flex-wrap: wrap; margin-top: 10px; }
.k-legenda span { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--color-text-muted); white-space: nowrap; }
.k-legenda span::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--c, var(--color-primary)); flex: none; }
.k-legenda b { color: var(--color-text); font-variant-numeric: tabular-nums; }

/* ── Passos (trilha: rotulo | numero | %) e ranking (nome | barra | valor) ──── */
.k-passo { display: grid; grid-template-columns: minmax(0, 1fr) 92px 58px; align-items: center; gap: 10px; padding: 10px 0; }
.k-passo + .k-passo { border-top: 1px solid var(--color-border); }
.k-passo-l { font-size: var(--fs-base); color: var(--color-text); min-width: 0; }
.k-passo-l small { display: block; font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: 2px; }
.k-passo-n { text-align: right; font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-text); }
.k-passo-p { text-align: right; font-size: var(--fs-sm); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.k-passo .k-medidor { grid-column: 1 / -1; margin-top: 0; }
.k-rank { display: grid; grid-template-columns: 170px minmax(0, 1fr) 96px 56px; gap: 14px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--color-border); }
.k-rank:last-child { border-bottom: 0; }
.k-rank-k { font-size: var(--fs-md); color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-rank .k-medidor { margin-top: 0; height: 10px; border-radius: 6px; }
.k-rank-v { text-align: right; font-size: .9rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.k-rank-p { text-align: right; font-size: var(--fs-sm); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

/* ── Chips de estado (ponto + texto) e tags ────────────────────────────────── */
.k-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: 650; line-height: 1.5; white-space: nowrap; background: var(--color-neutral-light); color: var(--color-text-muted); border: 1px solid transparent; }
.k-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.k-chip--ok { background: color-mix(in oklab, var(--color-success), transparent 86%); color: var(--color-success-strong, var(--color-success)); }
.k-chip--erro { background: color-mix(in oklab, var(--color-danger), transparent 86%); color: var(--color-danger); }
.k-chip--aviso { background: color-mix(in oklab, var(--color-warning), transparent 84%); color: var(--color-warning-strong, var(--color-warning)); }
.k-chip--info { background: color-mix(in oklab, var(--color-info), transparent 86%); color: var(--color-info); }
.k-chip--acento { background: var(--k-acento-suave); color: var(--color-primary); }
.k-chip--roxo { background: color-mix(in oklab, var(--color-accent2), transparent 86%); color: var(--color-accent2); }
.k-chip--contorno { background: transparent; border-color: currentColor; }
.k-chip--sem-ponto::before { display: none; }
.k-tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; background: var(--color-neutral-light); color: var(--color-text-muted); white-space: nowrap; }
.k-tag--acento { background: var(--k-acento-suave); color: var(--color-primary); }
.k-ponto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--color-text-muted)); flex: none; }
.k-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
/* chip de escolha (filtro multiplo): marcado tem visto, nao so cor */
.k-chip-opc { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: var(--fs-md); font-weight: 600; cursor: pointer; }
.k-chip-opc.ativa { border-color: var(--color-primary); background: var(--k-acento-suave); color: var(--color-primary); }
.k-chip-opc.ativa::before { content: ""; width: 10px; height: 6px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(-45deg); }

/* ── Tabela ────────────────────────────────────────────────────────────────── */
.k-tabela-wrap { width: 100%; max-width: 100%; overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.k-card > .k-tabela-wrap { border: 0; border-radius: 0; margin: 0 -20px -18px; width: auto; }
.k-card > .k-tabela-wrap:first-child { margin-top: -18px; }
.k-tabela { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.k-tabela th { text-align: left; padding: 10px 12px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-muted); background: var(--color-neutral-light); border-bottom: 1px solid var(--color-border); white-space: nowrap; }
.k-tabela td { padding: 9px 12px; border-bottom: 1px solid var(--color-border); vertical-align: middle; font-variant-numeric: tabular-nums; }
.k-tabela tbody tr:last-child td { border-bottom: 0; }
.k-tabela .n { text-align: right; }
.k-tabela .mono { font-family: ui-monospace, Consolas, monospace; font-size: var(--fs-sm); }
.k-tabela--zebra tbody tr:nth-child(even) td { background: color-mix(in oklab, var(--color-neutral-light), transparent 50%); }
@media (hover: hover) { .k-tabela--clique tbody tr:hover td { background: var(--k-acento-suave); cursor: pointer; } }
.k-tabela tr.erro td { background: var(--color-danger-light); }

/* ── Lista de linhas (feed): referencia | titulo + sub | fim ───────────────── */
.k-lista { display: flex; flex-direction: column; gap: 8px; }
.k-linha { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 14px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); min-width: 0; }
.k-lista--chao .k-linha { background: var(--color-neutral-light); border-color: transparent; }
.k-linha--clique { cursor: pointer; transition: border-color .15s; }
@media (hover: hover) { .k-linha--clique:hover { border-color: var(--k-borda-acento); } }
.k-linha-ref { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--k-acento-suave); color: var(--color-primary); font-weight: 750; font-size: var(--fs-md); flex: none; }
.k-linha-ref.erro { background: var(--color-danger-light); color: var(--color-danger); }
.k-linha-ref.neutro { background: var(--color-neutral-light); color: var(--color-text-muted); }
.k-linha-t { font-size: var(--fs-base); font-weight: 650; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-linha-s { font-size: var(--fs-sm); color: var(--color-text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-linha-fim { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; text-align: right; }
.k-linha-fim time, .k-linha-fim .k-hora { font-size: var(--fs-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
/* linha compacta (dentro de card): sem moldura, so separador */
.k-lista--plana { gap: 0; }
.k-lista--plana .k-linha { border: 0; border-top: 1px solid var(--color-border); border-radius: 0; padding: 10px 0; background: transparent; }
.k-lista--plana .k-linha:first-child { border-top: 0; }

/* ── Paginacao (unica) ─────────────────────────────────────────────────────── */
.k-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.k-pager span { font-size: var(--fs-sm); font-weight: 600; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.k-pager button { width: 40px; height: 36px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.k-pager button:disabled { opacity: .35; cursor: default; }
.k-pager--centro { justify-content: center; gap: 14px; }

/* ── Barra de acoes (salvar) presa embaixo da area ─────────────────────────── */
.k-barra { position: sticky; bottom: 8px; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: var(--sp-4); padding: 8px 8px 8px 14px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: 0 6px 20px rgba(15, 23, 42, .12); }
.k-barra-estado { font-size: var(--fs-md); color: var(--color-text-muted); }
.k-barra--suja .k-barra-estado { color: var(--color-warning-strong, var(--color-warning)); font-weight: 650; }

/* ── Caixas de aviso (sem faixa lateral: borda inteira tingida) ────────────── */
.k-aviso { display: flex; align-items: flex-start; gap: 10px; padding: 10px 13px; border-radius: 10px; font-size: var(--fs-md); line-height: 1.45; border: 1px solid color-mix(in oklab, var(--color-info), transparent 55%); background: color-mix(in oklab, var(--color-info), transparent 90%); color: var(--color-text); }
.k-aviso--atencao { border-color: color-mix(in oklab, var(--color-warning), transparent 55%); background: color-mix(in oklab, var(--color-warning), transparent 90%); }
.k-aviso--erro { border-color: color-mix(in oklab, var(--color-danger), transparent 55%); background: color-mix(in oklab, var(--color-danger), transparent 90%); }
.k-aviso--ok { border-color: color-mix(in oklab, var(--color-success), transparent 55%); background: color-mix(in oklab, var(--color-success), transparent 90%); }
.k-aviso svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }

/* ── Modal (desktop: centro; celular: folha de baixo) ──────────────────────── */
.k-modal { position: fixed; inset: 0; z-index: 1000; display: none; }
.k-modal.aberto, .k-modal:not([hidden]).aberto { display: block; }
.k-modal-fundo { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); cursor: pointer; }
.k-modal-caixa { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100% - 32px)); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.k-modal--largo .k-modal-caixa { width: min(940px, calc(100% - 32px)); }
.k-modal-h { flex: none; display: flex; align-items: center; gap: 10px; padding: 14px 10px 12px 20px; border-bottom: 1px solid var(--color-border); }
.k-modal-h h2 { margin: 0; font-size: var(--fs-lg); font-weight: 700; flex: 1; min-width: 0; }
.k-modal-x { width: var(--toque); height: var(--toque); display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--color-text-muted); cursor: pointer; }
.k-modal-x svg { width: 18px; height: 18px; }
@media (hover: hover) { .k-modal-x:hover { background: var(--color-neutral-light); color: var(--color-text); } }
.k-modal-b { overflow-y: auto; overscroll-behavior: contain; padding: 16px 20px; }
.k-modal-f { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; padding: 12px 20px; border-top: 1px solid var(--color-border); }
.k-modal-grip { display: none; }

/* ── Vazio, carregando, esqueleto ──────────────────────────────────────────── */
.k-vazio { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 28px 16px; text-align: center; color: var(--color-text-muted); font-size: var(--fs-md); }
.k-vazio b { color: var(--color-text); font-size: var(--fs-base); }
.k-vazio svg { width: 28px; height: 28px; opacity: .6; margin-bottom: 4px; }
.k-spin { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: k-spin .8s linear infinite; vertical-align: middle; }
.k-carregando { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-md); color: var(--color-text-muted); }
@keyframes k-spin { to { transform: rotate(360deg); } }
.k-sk { display: block; height: 10px; border-radius: 6px; background: var(--color-border); color: transparent; animation: k-sk 1.5s ease-in-out infinite; }
.k-sk--n { height: 24px; width: 46%; border-radius: 7px; }
.k-sk--l { height: 9px; width: 70%; }
@keyframes k-sk { 0%, 100% { opacity: .45; } 50% { opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .k-sk, .k-spin { animation: none; } .k-medidor i { transition: none; } }

/* ── Icone inline (SVG stroke 2, currentColor) ─────────────────────────────── */
.k-ico { width: 16px; height: 16px; flex: none; vertical-align: -3px; }
.k-ico--18 { width: 18px; height: 18px; }

/* ── Utilitarios minimos ───────────────────────────────────────────────────── */
.k-mudo { color: var(--color-text-muted); }
.k-num { font-variant-numeric: tabular-nums; }
.k-corta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.k-dir { margin-left: auto; }
.k-oculto { display: none !important; }
.k-fora { display: none !important; }   /* linha/item filtrado: fora da vista e da paginacao */

/* ============================================================================
   CELULAR (ate 600px) e TOQUE
   ============================================================================ */
@media (max-width: 1100px) {
    .k-grade--3, .k-grade--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .k-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .k-form--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .k-pagina { padding: 0; }
    .k-topo { margin-bottom: var(--sp-3); gap: 8px; }
    .k-topo h1 { font-size: 1.05rem; }
    .k-abas { padding: 8px 10px; margin-bottom: 12px; }
    .k-grade--2, .k-grade--3, .k-grade--4, .k-form--2, .k-form--3 { grid-template-columns: minmax(0, 1fr); }
    .k-grade { gap: 10px; }
    .k-card { padding: 12px 14px; border-radius: 14px; }
    .k-card > .k-tabela-wrap { margin: 0 -14px -12px; }
    .k-card-h { margin-bottom: 10px; }
    .k-kpis { gap: 8px; }
    .k-kpis .k-kpi { padding: 10px 12px; }
    .k-kpi-n { font-size: 1.35rem; }
    .k-kpi--grande .k-kpi-n { font-size: 1.7rem; }
    /* seções presas no topo (um bloco por vez; o JS troca .ativa e esconde o resto) */
    .k-secoes { position: sticky; top: 0; z-index: 30; background: var(--color-bg); margin: 0 0 10px; }
    .k-secoes button { flex: 1 0 auto; min-height: var(--toque); }
    .k-seg--cheio .k-seg-btn, .k-seg .k-seg-btn { min-height: 38px; }
    /* filtros: duas colunas; o botao de buscar ocupa a linha */
    .k-filtros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: end; }
    .k-filtros .k-campo, .k-filtros .k-campo--busca { flex: none; }
    .k-filtros .k-campo--busca, .k-filtros > .k-btn, .k-filtros .k-largo, .k-filtros > .k-seg, .k-filtros > .k-chips, .k-filtros > .k-dir { grid-column: 1 / -1; margin-left: 0; }
    .k-filtros > .k-seg { display: flex; }
    .k-filtros > .k-seg .k-seg-btn { flex: 1; justify-content: center; }
    .k-filtros .k-btn { margin: 0; width: 100%; }
    .k-rank { grid-template-columns: 110px minmax(0, 1fr) 70px; gap: 10px; }
    .k-rank-p { display: none; }
    .k-passo { grid-template-columns: minmax(0, 1fr) 72px 40px; gap: 8px; padding: 8px 0; }
    .k-linha { padding: 10px 12px; gap: 10px; }
    .k-linha-fim { flex-direction: column; align-items: flex-end; gap: 2px; }
    /* modal vira folha de baixo */
    .k-modal-caixa { left: 0; right: 0; top: auto; bottom: 0; transform: none; width: 100%; max-height: 90dvh; border-radius: 18px 18px 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom, 0px); animation: k-sobe .2s ease-out; }
    .k-modal-grip { display: block; width: 40px; height: 4px; margin: 8px auto 0; border-radius: 2px; background: var(--color-border); }
    .k-modal-h { padding: 6px 6px 10px 16px; }
    .k-modal-b { padding: 12px 16px; }
    .k-modal-f { padding: 10px 16px; position: sticky; bottom: 0; background: var(--color-surface); }
    .k-modal-f .k-btn { flex: 1; }
    @keyframes k-sobe { from { transform: translateY(40px); } }
    .k-barra { bottom: 8px; border-radius: 14px; flex-wrap: wrap; padding: 10px 12px; }
    .k-barra-estado { flex: 1 1 100%; }
    .k-barra .k-acoes { width: 100%; flex-wrap: nowrap; }
    .k-barra .k-acoes .k-btn { flex: 1; min-height: var(--toque); }
    .k-pager button { width: var(--toque); height: 40px; }
    /* tabela que nao cabe: rola dentro da moldura (nunca a pagina) */
    .k-tabela th, .k-tabela td { padding: 8px 10px; }
    /* tabela em cartoes: o JS escreve data-label em cada td e a tabela leva .k-tabela--cartoes */
    .k-tabela--cartoes thead { display: none; }
    .k-tabela--cartoes, .k-tabela--cartoes tbody { display: block; }
    .k-tabela--cartoes tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; padding: 10px 12px; border-bottom: 1px solid var(--color-border); }
    .k-tabela--cartoes td { display: block; padding: 0; border: 0; min-width: 0; overflow-wrap: anywhere; text-align: left; }
    .k-tabela--cartoes td[data-label]::before { content: attr(data-label); display: block; font-size: var(--fs-xs); letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-muted); }
    .k-tabela--cartoes td.k-largo { grid-column: 1 / -1; font-weight: 650; }
    .k-tabela--cartoes td.k-largo::before { display: none; }
    /* coluna de acao (Detalhe, Acoes, Ver): so o botao, sem rotulo */
    .k-tabela--cartoes td[data-label=""]::before, .k-tabela--cartoes td[data-label="Detalhe"]::before, .k-tabela--cartoes td[data-label="Detalhes"]::before,
    .k-tabela--cartoes td[data-label="Ações"]::before, .k-tabela--cartoes td[data-label="Ação"]::before, .k-tabela--cartoes td[data-label="Ver"]::before { display: none; }
    .k-tabela--cartoes td[data-label="Detalhe"], .k-tabela--cartoes td[data-label="Detalhes"], .k-tabela--cartoes td[data-label="Ações"], .k-tabela--cartoes td[data-label=""] { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
    .k-tabela--cartoes td { font-size: var(--fs-md); line-height: 1.3; }
    /* cartao com muitos campos: recolhido mostra titulo, 2 campos e a acao; o toque abre o resto */
    .k-tabela--cartoes-acc > tbody > tr { position: relative; padding-right: 36px; cursor: pointer; }
    .k-tabela--cartoes-acc > tbody > tr::after { content: ""; position: absolute; right: 16px; top: 16px; width: 8px; height: 8px; border-right: 2px solid var(--color-text-muted); border-bottom: 2px solid var(--color-text-muted); transform: rotate(45deg); transition: transform .15s; }
    .k-tabela--cartoes-acc > tbody > tr.aberto::after { transform: rotate(-135deg); }
    .k-tabela--cartoes-acc > tbody > tr:not(.aberto) > td:not(.cel-resumo) { display: none; }
    .k-tabela--cartoes tr { padding: 10px 12px 12px; }
    .k-tabela--cartoes tr[hidden], .k-tabela--cartoes tr.cel-pag-fora { display: none; }
    .k-tabela--cartoes td:empty { display: none; }
    .k-tabela--cartoes .btn, .k-tabela--cartoes .k-btn { margin: 0; }
}
@media (pointer: coarse) {
    .k-btn, .k-input, .k-aba, .k-seg-btn, .k-chip-opc, .k-switch, .k-marcar { min-height: var(--toque); }
    .k-btn--peq { min-height: 40px; }
    .k-btn--icone { width: var(--toque); }
    .k-input, select.k-input, textarea.k-input { font-size: 16px; }   /* iOS da zoom em fonte menor */
    .k-switch input { position: absolute; opacity: 0; width: 56px; height: var(--toque); margin: -11px 0 0 -9px; }
    .k-switch-tk { position: relative; }
}
@media (max-width: 860px) {
    .k-btn { min-height: 40px; }
}

/* ============================================================================
   LEGADO → KIT. As classes antigas recebem a aparencia do kit (cor, raio, borda, fonte);
   nada de layout (display, largura, padding de estrutura) para nao quebrar tela que
   funciona. Quando um modulo for mexido, troca a classe pela k-* e a linha dele sai daqui.
   Regra do usuario (10/10/2026): padronizar NUNCA remove funcao, coluna, filtro ou acao.
   ============================================================================ */

/* ── Abas de modulo (nivel 1): sublinhado numa faixa, em TODOS os modulos ───────
   ChatGuru/Meta/GupShup/GDSF (.tabs/.tab-btn, eram pilulas), Fluxo Leilao (.fl-tabs), BMS
   (.lb-tabs), Robos (.r-subtabs, era segmentado). */
.tabs, .fl-tabs, .lb-tabs, .r-subtabs, .nav-tabs {
    display: flex; align-items: stretch; gap: 2px; padding: 0 12px; margin-bottom: 18px; flex-wrap: nowrap;
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
    overflow-x: auto; scrollbar-width: none; position: relative; box-shadow: none;
}
.tabs::-webkit-scrollbar, .fl-tabs::-webkit-scrollbar, .lb-tabs::-webkit-scrollbar, .r-subtabs::-webkit-scrollbar, .nav-tabs::-webkit-scrollbar { display: none; }
.tabs::after, .fl-tabs::after, .lb-tabs::after, .r-subtabs::after, .nav-tabs::after { content: ""; position: sticky; right: -12px; flex: 0 0 36px; margin-left: -36px; align-self: stretch; pointer-events: none; background: linear-gradient(90deg, transparent, var(--color-surface) 80%); opacity: 0; transition: opacity .15s; }
.tabs.tabs--mais::after, .tabs.k-abas--mais::after, .fl-tabs.k-abas--mais::after, .lb-tabs.k-abas--mais::after, .r-subtabs.k-abas--mais::after { opacity: 1; }
.tabs .tab-btn, .tab-btn, .fl-tab, .lb-tab, .r-subtab, .nav-tab {
    flex: 0 0 auto; min-height: 46px; padding: 2px 12px 0; margin: 0;
    border: 0; border-bottom: 2px solid transparent; border-radius: 0;
    background: transparent; color: var(--color-text-muted);
    font-size: var(--fs-base); font-weight: 600; white-space: nowrap; box-shadow: none;
}
.tabs .tab-btn-dropdown, .tab-btn-dropdown { padding-right: 22px; }
/* Faixa com muitas abas (ChatGuru: 9 + Ferramentas) fica densa para caber numa linha a 1366
   (iframe de 1134px): 13px, 8px de lado, 5px ate o icone. Com menos abas vale o tamanho do kit. */
.tabs:has(> .tab-btn:nth-child(n+9)) .tab-btn { font-size: var(--fs-md); padding: 2px 8px 0; gap: 5px; }
.tabs:has(> .tab-btn:nth-child(n+9)) .tab-btn-dropdown { padding-right: 20px; }
@media (hover: hover) {
    .tabs .tab-btn:hover, .fl-tab:hover:not(.active), .lb-tab:hover:not(.active), .r-subtab:hover { color: var(--color-text); background: transparent; }
}
.tabs .tab-btn.active, .tab-btn.active, .fl-tab.active, .lb-tab.active, .r-subtab.active, .nav-tab.active { margin-bottom: 0; background: transparent; color: var(--color-primary); border-color: transparent; border-bottom-color: var(--color-primary); }
.tabs .tab-btn.active .tab-btn-icon svg, .tab-btn.active .tab-btn-icon svg { fill: var(--color-primary); }
/* GDSF: os grupos (Operacao, Trafego, Origem, Leilao, Outros) viram segmento em cima; as abas, sublinhado */
.gdsf-nav { padding: 10px 14px 0; }
.gdsf-nav-grupos { gap: 4px; border-bottom: 0; padding: 0; align-items: center; }
.gdsf-nav-grupo { min-height: 34px; padding: 0 14px; margin-bottom: 0; border: 1px solid transparent; border-radius: 9px; font-size: var(--fs-md); font-weight: 600; }
.gdsf-nav-grupo.active { background: var(--k-acento-suave); color: var(--color-primary); border-color: var(--color-primary); font-weight: 600; }
.gdsf-nav-grupo.tem-atual::after { top: 6px; right: 6px; }
.tabs.gdsf-nav-abas { padding: 0; margin: 6px 0 0; border: 0; border-radius: 0; background: transparent; }
.tabs.gdsf-nav-abas::after { background: linear-gradient(90deg, transparent, var(--color-surface) 80%); }


/* Desktop e notebook: a faixa de abas QUEBRA em duas linhas quando nao cabe (nada escondido,
   nada recortado: o menu Ferramentas e absolute dentro dela). So ate 860px ela rola de lado. */
@media (min-width: 861px) {
    .k-abas, .tabs, .fl-tabs, .lb-tabs, .r-subtabs, .nav-tabs { flex-wrap: wrap; overflow: visible; }
    .k-abas::after, .tabs::after, .fl-tabs::after, .lb-tabs::after, .r-subtabs::after, .nav-tabs::after { display: none; }
}

/* ── Segmentado (nivel 2): periodo da aba Bancos e metodo da Automacao Guru ─── */
.fl-bk-filtro { gap: 4px; padding: 4px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); width: max-content; max-width: 100%; margin-left: auto; }
.fl-bk-chip { min-height: 34px; padding: 0 14px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--color-text-muted); font-size: var(--fs-md); font-weight: 600; }
.fl-bk-chip.on { background: var(--k-acento-suave); color: var(--color-primary); border-color: var(--color-primary); }
.fl-bk-dia { height: 34px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--color-text-muted); font-size: var(--fs-md); }
.fl-bk-dia.on { border-color: var(--color-primary); color: var(--color-primary); background: var(--k-acento-suave); }
.exec-panel .ag-method-btn.active { background: var(--k-acento-suave); color: var(--color-primary); border-color: var(--color-primary); }

/* ── Botoes: peso e raio do kit (o .btn ja e a base) ───────────────────────── */
.btn { font-weight: 600; border-radius: var(--radius-sm); }
.btn-small, .btn-sm { border-radius: 7px; }

/* ── Campos: mesma caixa em todo formulario ────────────────────────────────── */
.input-text, .r-input, .rc-input,
.exec-fr input:not([type=checkbox]):not([type=radio]), .exec-fr select, .exec-fr textarea,
.form-group input:not([type=checkbox]):not([type=radio]):not([type=file]), .form-group select, .form-group textarea,
.lb-field input:not([type=checkbox]):not([type=radio]), .lb-field select, .fl-field input:not([type=checkbox]):not([type=radio]), .fl-field select,
.exec-panel select, .exec-inline select, .exec-inline input[type=text], .gdsf-interval-select, .gdsf-gestor-empresa-select, .delegar-origem-busca,
.tb-field input:not([type=checkbox]), .tb-field select, .rl-mfilters .r-input, .op-filtros .input-date, .lm-filter-row .input-date {
    border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    background-color: var(--color-input-bg, var(--color-surface)); color: var(--color-text); font-size: var(--fs-md);
}
.input-text:focus, .r-input:focus, .rc-input:focus, .exec-fr input:focus, .exec-fr select:focus, .exec-fr textarea:focus,
.form-group input:focus, .form-group select:focus, .form-group textarea:focus, .lb-field input:focus, .lb-field select:focus, .fl-field input:focus, .fl-field select:focus {
    outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--k-acento-suave);
}
/* rotulo do campo: pequeno, 600, apagado, sem caixa alta */
.exec-fr > label, .lb-field > span, .fl-field label, .form-group label, .rl-mfilters label, .tb-field > span, .tb-field > label {
    font-size: var(--fs-sm); font-weight: 600; color: var(--color-text-muted); text-transform: none; letter-spacing: 0;
}

/* ── Interruptores: 38 x 22 em todos ───────────────────────────────────────── */
.exec-switch, .exec-toggle { width: 38px; height: 22px; }
.exec-switch .tk::after, .exec-toggle i { width: 16px; height: 16px; }
.exec-switch input:checked + .tk::after, .exec-toggle.on i { left: 18px; background: var(--color-on-primary); }
.fl-toggle-row input[type="checkbox"]:checked::after, .lb-toggle-row input[type="checkbox"]:checked::after { background: var(--color-on-primary); }

/* ── Chips de estado: pilula de 12px, peso 650 ─────────────────────────────── */
.exec-st, .fl-chip, .lb-badge, .status-badge, .badge, .rc-pill, .fl-badge, .prod-tag, #gdsf-tab-dashboard .op-pill {
    font-size: var(--fs-sm); font-weight: 650; padding: 3px 10px; border-radius: var(--radius-pill); line-height: 1.5; letter-spacing: 0; text-transform: none;
}

/* ── Cards: raio 16, borda, sombra leve; titulo 16px/650 ───────────────────── */
.card, .exec-panel, .lb-card, .fl-card, .r-card, .rel-card, .fl-dashboard-panel, .lb-dashboard-panel, .rl-card, .rc-card, .disp-kpi, .ini-kpi,
#gdsf-tab-dashboard .op-card, #gdsf-tab-dashboard .op-trilha, #gdsf-tab-leilao-metricas .lm-card, #gdsf-tab-leilao-metricas .lm-trilha {
    border-radius: var(--radius-lg); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm);
}
.card > h2:first-child, .lb-card h3, .r-card h2, .exec-hsec h2, .exec-hsec h3, .fl-card-title, .lb-card-title,
#gdsf-tab-dashboard .op-card-title, #gdsf-tab-leilao-metricas .lm-card-title { font-size: var(--fs-lg); font-weight: 650; letter-spacing: -.01em; }
/* rotulo pequeno em caixa alta (eyebrow): um tamanho so */
.exec-eyebrow, .fl-eyebrow, .fl-hero-tt, .lb-hero-tt, .lb-lm-eyebrow, .exec-tile .l, .fl-bk-lb, .fl-bk-sec, .fl-hero-k, .fl-bk-tempos .k, .fl-bk-cfg-i .k,
#gdsf-tab-dashboard .op-lbl, #gdsf-tab-leilao-metricas .lm-lbl { font-size: var(--fs-xs); font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
/* numeros grandes: peso 700, tabulares */
.fl-hero-big, .lb-hero-big, .fl-bk-big, .stat-number, .exec-tile .n, .fl-mchip .cv, .disp-kpi .kv, .ini-kpi .kv, .fl-stg .sv, .fl-brc .bv,
#gdsf-tab-dashboard .op-hero-num, #gdsf-tab-leilao-metricas .lm-hero-num { font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fl-hero-big, .lb-hero-big { font-size: var(--fs-3xl); }

/* ── Tabelas: cabecalho pequeno em caixa alta, numeros tabulares ───────────── */
.table th, .lb-table th, .rl-mtable th, .r-table-wrap th, .fl-panel table th, .lb-panel table th, .gdsf-tab-content table th, .exec-panel table th, .rl-pivot-wrap th {
    font-size: var(--fs-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-muted);
    background: var(--color-neutral-light); border-bottom: 1px solid var(--color-border);
}
.table td, .lb-table td, .rl-mtable td, .r-table-wrap td, .fl-panel table td, .lb-panel table td, .exec-panel table td { font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.table-wrap, .lb-table-wrap, .rl-mtable, .r-table-wrap { border-radius: var(--radius-md); }

/* ── Paginacao: um botao so ────────────────────────────────────────────────── */
.rl-pager button, .fl-pager-btns .btn, .lb-pager-btns .btn, .cel-pager button, #gdsf-tab-dashboard .op-pgb, .di-pager button, .rc-pg button,
.gdsf-cons-lista-pager button, .mt-ev-pager button, .bg-pager button, .cbg-pager button, .rl-gpager button {
    min-width: 36px; height: 36px; padding: 0 10px; margin: 0; border-radius: var(--radius-sm); border: 1px solid var(--color-border);
    background: var(--color-surface); color: var(--color-text); font-size: var(--fs-md); font-weight: 600; line-height: 1;
}
.rl-pager button[disabled], .cel-pager button:disabled, #gdsf-tab-dashboard .op-pgb:disabled { opacity: .35; }

/* ── Modais: raio 16, borda, sombra; no celular viram folha de baixo ───────── */
.modal-card, .rl-modal, .rc-modal, .r-modal, .lb-modal-box { border-radius: var(--radius-lg); border: 1px solid var(--color-border); box-shadow: var(--shadow-lg); }
@media (max-width: 600px) {
    :root .modal-overlay, .rl-overlay, .rc-overlay, .r-modal-overlay { align-items: flex-end; padding: 0; }
    :root .modal-card, .rl-modal, .rc-modal, .r-modal, .lb-modal-box {
        width: 100%; max-width: 100%; max-height: 92dvh; overflow: auto; margin: 0;
        border-radius: 18px 18px 0 0; border-bottom: 0; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }
    .lb-modal.open { display: flex; align-items: flex-end; }
}

/* ── Avisos e vazios ───────────────────────────────────────────────────────── */
.info-box, .warning-box, .exec-info { border-radius: 10px; font-size: var(--fs-md); }
.r-empty, .lb-lm-empty { font-size: var(--fs-md); }