/* =====================================================================
   Sistema Forecast — visual do painel (escuro e claro)
   Fontes: Plus Jakarta Sans (títulos 700, números 800, rótulos 600)
           JetBrains Mono (só o que é código: e-mails, ids, datas em tabela)
   A cor da marca fica em --marca; --orange é o apelido antigo dela, para
   as telas que ainda chamam var(--orange).
   ===================================================================== */
:root {
  --bg: #0F0F11; --panel: #16161A; --panel2: #1C1C21; --line: #26262C; --line2: #34343C;
  --ink: #ECECEF; --muted: #9795A1; --faint: #68666F;
  --alertbg: #221811; --alertline: #4A2C1D;
  --marca: #F2884E; --orange: var(--marca);
  --red: #F0575C; --blue: #5B9DFF; --amber: #F4B24B; --green: #45C98A;
  --redsoft: rgba(240,87,92,.16); --bluesoft: rgba(91,157,255,.16); --ambersoft: rgba(244,178,75,.16); --greensoft: rgba(69,201,138,.16);
  --purple: #B48CF2; --purplesoft: rgba(180,140,242,.16);
  --testbg: #241F12; --testline: #4D3D17; --navon: #212127; --veu: rgba(5,5,7,.66);
  --sombra: 0 6px 18px rgba(0,0,0,.28);
  --sombra-card: none;
  --sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  color-scheme: dark;
}
:root[data-tema="claro"] {
  --bg: #F4F4F7; --panel: #FFFFFF; --panel2: #FAFAFB; --line: #EAEAEF; --line2: #DCDCE4;
  --ink: #17161C; --muted: #6A6878; --faint: #9B99A7;
  --alertbg: #FFF7F1; --alertline: #F0D6C3;
  --marca: #E2601F; --orange: var(--marca);
  --red: #D63D46; --blue: #2F6FE0; --amber: #B27512; --green: #1F9A63;
  --redsoft: rgba(214,61,70,.09); --bluesoft: rgba(47,111,224,.09); --ambersoft: rgba(178,117,18,.11); --greensoft: rgba(31,154,99,.10);
  --purple: #7A45C9; --purplesoft: rgba(122,69,201,.10);
  --testbg: #FFF8E5; --testline: #EFDCA8; --navon: #F1F1F5; --veu: rgba(20,18,28,.36);
  --sombra: 0 8px 24px rgba(22,20,40,.10);
  --sombra-card: 0 1px 2px rgba(22,20,40,.04), 0 6px 18px rgba(22,20,40,.05);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 14.5px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
body, .menu, .card, .principal, .faixa-teste, .botao, .campo, .chip, .pill, table, tr, td, th, .modal-caixa {
  transition: background-color .35s ease, border-color .35s ease, color .35s ease, box-shadow .25s ease, transform .25s ease;
}
a { color: var(--orange); text-decoration: none; }
a:hover { color: var(--ink); }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 4px; }

.mono { font-family: var(--mono); }
.suave { color: var(--muted); }
.fraco { color: var(--faint); }
/* Rótulo pequeno: em sans, não em monoespaçada — é o que mais pesava no visual antigo */
.lbl { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.numero { font-weight: 800; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
h1, h2, h3 { margin: 0; }
.titulo { font-size: 27px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.subtitulo { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }

@keyframes surgir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes abrir { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes veu { from { opacity: 0; } to { opacity: 1; } }
@keyframes girar { to { transform: rotate(360deg); } }
.entra { animation: surgir .5s cubic-bezier(.2,.7,.2,1) both; }
.entra-2 { animation-delay: .06s; } .entra-3 { animation-delay: .12s; } .entra-4 { animation-delay: .18s; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- Tela cheia (carregando / login) ---------- */
.tela-cheia { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; }
.marca-grande { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--line2); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 24px; }
.login-caixa { width: min(420px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 32px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.login-caixa h1 { font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
.login-caixa p { margin: 0; }
.login-erro { width: 100%; background: var(--alertbg); border: 1px solid var(--alertline); border-radius: 8px; padding: 10px 12px; font-size: 13px; }

/* ---------- Estrutura ---------- */
#app { display: flex; min-height: 100vh; }
.menu { width: 252px; flex-shrink: 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 26px; padding: 22px 14px 18px; }
.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.conteudo { padding: 30px 40px 48px; display: flex; flex-direction: column; gap: 22px; max-width: 1400px; width: 100%; margin: 0 auto; }

.marca { display: flex; align-items: center; gap: 11px; }
.marca-bola { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line2); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; }
.marca-nome { font-weight: 700; font-size: 17px; letter-spacing: -.01em; line-height: 1; }
.dominio { display: flex; justify-content: space-between; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px; font-size: 11.5px; color: var(--muted); font-family: var(--mono); }
.menu-grupo { display: flex; flex-direction: column; gap: 3px; }
.menu-grupo .lbl { color: var(--faint); padding: 0 10px 6px; font-size: 10.5px; }
.nav { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 10px; color: var(--muted); font-size: 14px; cursor: pointer; background: none; border: 0; width: 100%; text-align: left; }
.nav:hover { background: var(--navon); color: var(--ink); }
.nav:hover svg { transform: translateX(2px); }
.nav svg { transition: transform .25s ease; flex-shrink: 0; }
.nav.ativo { background: var(--navon); color: var(--ink); font-weight: 600; }
.nav .contador { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--faint); }
.nav .contador.alerta { color: var(--red); }
.menu-rodape { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.tema-botao { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; color: var(--muted); cursor: pointer; background: none; }
.tema-botao:hover { border-color: var(--line2); color: var(--ink); }
.tema-trilho { position: relative; width: 34px; height: 18px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--line2); flex-shrink: 0; }
.tema-bola { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--orange); transition: transform .3s cubic-bezier(.2,.7,.2,1); }
:root[data-tema="claro"] .tema-bola { transform: translateX(16px); }
.usuario { border-top: 1px solid var(--line); padding: 14px 10px 0; display: flex; flex-direction: column; gap: 10px; }
.usuario-linha { display: flex; align-items: center; gap: 10px; }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--panel2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 12px; overflow: hidden; flex-shrink: 0; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.ponto { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.ponto.verde { background: var(--green); } .ponto.vermelho { background: var(--red); } .ponto.ambar { background: var(--amber); } .ponto.azul { background: var(--blue); } .ponto.cinza { background: var(--faint); }

.faixa-teste { display: flex; align-items: center; gap: 12px; padding: 9px 40px; background: var(--testbg); border-bottom: 1px solid var(--testline); font-size: 12px; color: var(--amber); }

/* ---------- Componentes ---------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--sombra-card); }
.card.clicavel { cursor: pointer; }
.card.clicavel:hover, .card.flutua:hover { border-color: var(--line2); transform: translateY(-1px); box-shadow: var(--sombra); }
.card-cabeca { display: flex; align-items: center; gap: 10px; padding: 16px 18px; flex-wrap: wrap; }
.card-corpo { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }

.pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-weight: 600; font-size: 10.5px; letter-spacing: .05em; padding: 4px 9px; border-radius: 7px; white-space: nowrap; }
.p-red { background: var(--redsoft); color: var(--red); } .p-blue { background: var(--bluesoft); color: var(--blue); }
.p-amber { background: var(--ambersoft); color: var(--amber); } .p-green { background: var(--greensoft); color: var(--green); }
.p-mute { background: var(--panel2); color: var(--muted); border: 1px solid var(--line); }
.p-purple { background: var(--purplesoft); color: var(--purple); }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { font-size: 12.5px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); background: none; cursor: pointer; }
.chip:hover { border-color: var(--line2); color: var(--ink); }
/* Selecionado: mesmo contorno laranja do foco, para ficar claro o que está filtrando */
.chip.ativo { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange); background: var(--panel2); color: var(--ink); font-weight: 600; }
.chip.ativo:hover { border-color: var(--orange); }

.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 10px; border: 1px solid var(--line2); background: var(--panel); color: var(--ink); font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.botao:hover { border-color: var(--line2); transform: translateY(-1px); }
.botao:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.botao-principal { background: var(--orange); border-color: var(--orange); color: #141414; font-weight: 600; }
.botao-principal:hover { filter: brightness(1.05); }
.botao-alerta { background: var(--amber); border-color: var(--amber); color: #141414; font-weight: 600; }
.botao-lateral { justify-content: flex-start; width: 100%; }
/* Linha de lista que abre uma lista filtrada (cartões do Início) */
.item-botao { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; cursor: pointer; border-radius: 8px; }
.item-botao:hover .suave, .item-botao:focus-visible .suave { color: var(--ink); text-decoration: underline; }
.item-botao:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
/* Lixeira dos bônus: ícone discreto que fica vermelho no foco */
.botao-lixeira { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--faint); cursor: pointer; }
.botao-lixeira:hover, .botao-lixeira:focus-visible { color: var(--red); background: var(--redsoft); border-color: var(--redsoft); }
.botao-lixeira:disabled { opacity: .5; cursor: not-allowed; }
.botao-perigo { background: var(--red); border-color: var(--red); color: #fff; font-weight: 600; }
.botao-perigo:hover { filter: brightness(1.05); }

.campo { width: 100%; border: 1px solid var(--line2); background: var(--panel2); border-radius: 10px; padding: 10px 13px; font: inherit; font-size: 13.5px; color: var(--ink); }
.campo:focus { outline: none; border-color: var(--orange); }
textarea.campo { resize: vertical; min-height: 140px; font-family: var(--mono); font-size: 12.5px; line-height: 1.7; }
.rotulo-campo { display: flex; flex-direction: column; gap: 7px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }

/* Interruptor (TRUE verde / FALSE apagado) */
.interruptor { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; user-select: none; flex-wrap: wrap; }
.interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruptor-trilho { position: relative; width: 40px; height: 22px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--line2); flex-shrink: 0; transition: background .2s ease, border-color .2s ease; }
.interruptor-bola { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--faint); transition: transform .22s cubic-bezier(.2,.7,.2,1), background .2s ease; }
.interruptor input:checked + .interruptor-trilho { background: var(--green); border-color: var(--green); }
.interruptor input:checked + .interruptor-trilho .interruptor-bola { transform: translateX(18px); background: #fff; }
.interruptor input:focus-visible + .interruptor-trilho { outline: 2px solid var(--orange); outline-offset: 2px; }
.interruptor input:disabled + .interruptor-trilho { opacity: .6; cursor: not-allowed; }

/* Campo de data DD/MM/AAAA com calendário */
.campo-data { position: relative; display: flex; align-items: center; width: 100%; }
.campo-data .campo { padding-right: 40px; }
.campo-data .campo.invalido { border-color: var(--red); }
.campo-data-botao { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--muted); cursor: pointer; padding: 6px; border-radius: 6px; display: flex; }
.campo-data-botao:hover { color: var(--ink); background: var(--panel); }
.campo-data-nativo { position: absolute; right: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }

/* Metadados: um cartão por sistema, lado a lado; dentro, duas colunas de "título + dado" */
.metadados-sistemas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.meta-colunas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.meta-colunas > div + div { border-left: 1px solid var(--line); }
.meta-linha { display: grid; grid-template-columns: minmax(88px, 38%) minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px 16px; border-bottom: 1px solid var(--line); height: 62px; }
.meta-linha .lbl { overflow-wrap: anywhere; font-size: 10px; letter-spacing: .1em; }
.meta-linha .meta-valor { overflow: hidden; }
.meta-valor { font-size: 12.5px; min-width: 0; }
.meta-composto { padding: 10px 16px; border-bottom: 1px solid var(--line); }
.meta-composto summary { cursor: pointer; display: flex; align-items: center; gap: 10px; }
.meta-composto pre { margin-top: 8px !important; }
@media (max-width: 1360px) { .metadados-sistemas { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .meta-colunas { grid-template-columns: minmax(0, 1fr); } .meta-colunas > div + div { border-left: 0; } }

.alerta-banner { background: var(--alertbg); border: 1px solid var(--alertline); border-radius: 12px; padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; }
.alerta-titulo { font-size: 21px; font-weight: 600; color: var(--orange); letter-spacing: -.01em; }
.alerta-itens { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.alerta-item { display: flex; align-items: center; gap: 10px; border: 1px solid var(--alertline); border-radius: 8px; padding: 10px 12px; font-size: 13px; background: none; color: var(--ink); cursor: pointer; text-align: left; }
.alerta-item:hover { background: rgba(232,121,58,.06); }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.kpi { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; border-left-width: 2px; text-align: left; font: inherit; color: inherit; }
.kpi-numero { font-size: 40px; line-height: 1; }
.kpi-rodape { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; font-size: 12.5px; color: var(--muted); }
.kpi-link { font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--faint); }

.grade-2 { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; }
.lateral { display: flex; flex-direction: column; gap: 14px; }

/* ---------- Tabelas ---------- */
.tabela-rolagem { overflow-x: auto; }
table.tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela th { text-align: left; font-family: var(--sans); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 10px 12px; border-top: 1px solid var(--line); white-space: nowrap; }
/* Todas as linhas com a mesma altura */
.tabela td { padding: 11px 12px; border-top: 1px solid var(--line); vertical-align: middle; height: 52px; }
.tabela td.faixa { height: auto; }
.tabela tbody tr:hover { background: var(--panel2); }
.tabela tr.clicavel { cursor: pointer; }
/* A coluna da faixa colorida é só um traço: o cabeçalho vazio também não pode ter recuo */
.tabela td.faixa, .tabela th:empty { width: 3px; padding: 0; }
/* Título de coluna que ordena: clique alterna A-Z / Z-A (ou data antiga / nova) */
.th-ordenar { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
.th-ordenar:hover, .th-ordenar.ativo { color: var(--ink); }
.th-ordenar:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 4px; }
.th-seta { font-size: 11px; opacity: .45; }
.th-ordenar.ativo .th-seta { opacity: 1; color: var(--orange); }
.faixa-red { background: var(--red); } .faixa-amber { background: var(--amber); } .faixa-blue { background: var(--blue); } .faixa-green { background: var(--green); }
.celula-dupla { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.celula-dupla .mono { font-size: 11px; color: var(--faint); }
.vazio { padding: 28px 18px; text-align: center; color: var(--muted); font-size: 13px; }

/* ---------- Ficha ---------- */
.busca { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line2); background: var(--panel); border-radius: 12px; padding: 4px 6px 4px 14px; box-shadow: var(--sombra-card); }
.busca input { flex: 1; border: 0; background: none; color: var(--ink); font-family: var(--mono); font-size: 13px; padding: 8px 0; outline: none; }
.comparacao { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) 260px; gap: 14px; }
@media (max-width: 1360px) { .comparacao { grid-template-columns: repeat(2, minmax(0, 1fr)); } .comparacao > :last-child { grid-column: 1 / -1; } }
/* Plano · Acesso · Vale até · 3D numa linha só (a data ganha mais espaço, o 3D menos) */
.valores { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.25fr) minmax(0, .55fr); gap: 12px 14px; }
.valor { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.valor span:first-child { font-size: 12px; color: var(--muted); }
.valor span:last-child { font-size: 17px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linha-tempo { position: relative; height: 30px; background: var(--panel2); border-radius: 5px; overflow: hidden; }
.segmento { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding: 0 8px; font-family: var(--mono); font-size: 11px; white-space: nowrap; overflow: hidden; border-right: 1px solid var(--bg); }
.segmento.pago { background: var(--green); color: #101010; }
.segmento.bonus { background: var(--amber); color: #101010; }
.marcador-hoje { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--orange); }
.eixo { position: relative; height: 16px; font-family: var(--mono); font-size: 10.5px; color: var(--faint); }
.eixo span { position: absolute; top: 0; white-space: nowrap; }
.lista-simples { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.lista-simples .item { display: flex; align-items: center; gap: 10px; }

/* ---------- Modal e avisos ---------- */
.modal-veu { position: fixed; inset: 0; background: var(--veu); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 50; animation: veu .25s ease both; }
.modal-caixa { width: min(520px, 100%); max-height: 88vh; overflow: auto; background: var(--panel); border: 1px solid var(--line2); border-radius: 14px; padding: 24px 26px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.35); animation: abrir .3s cubic-bezier(.2,.7,.2,1) both; }
.modal-caixa.larga { width: min(860px, 100%); }
.modal-caixa.teste { border-color: var(--testline); }
.modal-titulo { font-size: 20px; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
.modal-acoes { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; padding-top: 4px; }
.avisos { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 60; }
.aviso { background: var(--panel); border: 1px solid var(--line2); border-left: 3px solid var(--green); border-radius: 8px; padding: 12px 16px; font-size: 13.5px; box-shadow: var(--sombra); animation: surgir .3s ease both; max-width: 380px; }
.aviso.erro { border-left-color: var(--red); }
.girando { width: 16px; height: 16px; border: 2px solid var(--line2); border-top-color: var(--orange); border-radius: 50%; animation: girar .8s linear infinite; display: inline-block; }
.carregando-bloco { display: flex; align-items: center; gap: 10px; color: var(--muted); padding: 30px 0; }

/* Inserir Bônus: formulário (e-mails) ocupa 2/3 e o CSV 1/3, na largura da prévia */
.grade-bonus { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.grade-bonus > div > .card { height: 100%; }
.grade-bonus textarea.campo { min-height: 180px; }

/* =====================================================================
   Painel do Início — mesmo conteúdo, desenho mais arejado (referência Waid):
   cartões com canto maior, borda discreta, mais respiro e menos linhas.
   Tudo dentro de .painel, para não mexer nas outras telas.
   ===================================================================== */
.painel { display: flex; flex-direction: column; gap: 22px; }
.painel .card { border-radius: 16px; }
.painel .card-cabeca { padding: 18px 22px 14px; }
.painel .card-corpo { padding: 20px 22px; gap: 14px; }
.painel .alerta-banner { border-radius: 16px; padding: 20px 24px; }
.painel .alerta-item { border-radius: 10px; padding: 12px 14px; }
.painel .tabela th { border-top: 0; padding: 8px 22px; }
.painel .tabela td { padding: 12px 22px; }
.painel .tabela td.faixa { padding: 0; }

/* Cabeçalho da tela: saudação à esquerda, dia e ações à direita */
.painel-cabeca { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.painel-cabeca .titulo { font-size: 29px; }
.painel-acoes { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.selo-rotina { display: inline-flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 12px; color: var(--muted); }

/* Título de seção entre os blocos */
.secao { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: -6px; }
.secao .subtitulo { font-size: 16px; }

/* KPIs: sem a barra colorida à esquerda; a cor vira um ponto junto do rótulo.
   Três por linha, para os seis cartões fecharem duas linhas inteiras. */
.painel .kpis { gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.painel .kpi { padding: 20px 22px; gap: 12px; border-left-width: 1px; min-height: 152px; }
.painel .kpi-numero { font-size: 34px; }
.kpi-topo { display: flex; align-items: center; gap: 8px; }
.painel .kpi-rodape { margin-top: auto; }
.painel .kpi-link { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.painel .kpi:hover .kpi-link { color: var(--orange); }
.painel .kpi:hover .kpi-link svg { transform: translateX(3px); }
.painel .kpi-link svg { transition: transform .25s ease; }

/* Gráfico à esquerda, coluna estreita à direita (como a referência) */
.painel .grade-2 { grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; }
.painel .lateral { gap: 18px; }
.lista-forte { display: flex; flex-direction: column; }
.lista-forte .item { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: 13px; }
.lista-forte .item + .item { border-top: 1px solid var(--line); }
.painel-rodape { padding: 14px 22px; border-top: 1px solid var(--line); }
.painel-rodape a { display: inline-flex; align-items: center; gap: 6px; }

@media (max-width: 1100px) {
  .painel .grade-2 { grid-template-columns: minmax(0, 1fr); }
  .painel .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .painel .kpis { grid-template-columns: minmax(0, 1fr); }
  .painel-cabeca .titulo { font-size: 24px; }
  .painel-acoes { align-items: flex-start; }
  .painel .card-cabeca, .painel .card-corpo, .painel-rodape { padding-left: 16px; padding-right: 16px; }
  .painel .tabela th, .painel .tabela td { padding-left: 16px; padding-right: 16px; }
}

/* ---------- Telas menores ---------- */
@media (max-width: 1280px) {
  .conteudo { padding: 26px 28px 44px; }
}
@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade-2, .comparacao, .grade-bonus { grid-template-columns: minmax(0, 1fr); }
  /* Coluna lateral vira grade de cartões lado a lado em vez de uma faixa estreita */
  .lateral { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; align-items: start; }
  .alerta-itens { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
@media (max-width: 760px) {
  #app { flex-direction: column; }
  .menu { width: 100%; height: auto; position: static; }
  .conteudo { padding: 22px 16px 40px; max-width: 640px; }
  .faixa-teste { padding: 9px 16px; }
  .titulo { font-size: 23px; }
  .kpis { grid-template-columns: minmax(0, 1fr); }
  .valores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lateral { grid-template-columns: minmax(0, 1fr); }
  .alerta-titulo { font-size: 18px; }
  .card-cabeca { padding: 14px; }
  .card-corpo { padding: 14px; }
}