/* Workstation FP&A: design system MentorIA (laranja #E8541C, creme #FBF4E9, escuro #0B0A0E, ouro #E8A23D, Segoe UI) */
:root {
  --negativo: #850F14; --tab-texto: #2E2924; --tab-texto-suave: #4A433D; --bg: #FBF4E9; --card: #FFFFFF; --ink: #1C1A18; --muted: #7A7168; --line: #E8DFD0; --line-forte: #D9CCB8;
  --accent: #E8541C; --accent-soft: #FCE3D6; --accent-escuro: #B8400F; --gold: #E8A23D; --gold-soft: #FBEBD0;
  --dark: #0B0A0E; --dark-2: #16141B; --dark-line: #2B2732; --dark-text: #F2E9DC; --dark-muted: #9C9284;
  --bom: #1F7A5F; --bom-bg: #E6F5EF; --bom-borda: #9BD3BF; --ruim: #B03A2E; --ruim-bg: #FBEAE7; --ruim-borda: #E5A79F; --alerta: #9A6412; --alerta-bg: #FFF4DC;
  --radius: 14px; --radius-p: 9px; --sombra: 0 2px 12px rgba(28, 26, 24, 0.07); --alt: 38px;
  --fonte: "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif; --mono: Consolas, "SF Mono", Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--fonte); font-size: 14px; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: var(--accent-escuro); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0 0 8px; line-height: 1.25; }
h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; }
h1 em { font-style: normal; color: var(--accent); }
h2 { font-size: 17px; font-weight: 700; }
h3 { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pos { color: var(--bom); } .neg { color: var(--negativo); }
.estrelas { color: #C98A0B; letter-spacing: 1px; white-space: nowrap; }
/* Números negativos das tabelas (app.js: ativarNegativos) */
/* !important: vale sobre as cores das linhas (conta, subtotal, destaque). td.num.neg: as tabelas que já marcam o negativo (demonstrativos); pos (verde) fica como está. Cor --ruim: o --negativo (#850F14) parecia preto */
td.negativo, td.negativo strong, td.num.neg, td.num.neg strong { color: var(--ruim) !important; }

/* ---------- Estrutura ---------- */
.app { display: grid; grid-template-columns: var(--barra) 0 minmax(0, 1fr); min-height: 100vh; transition: grid-template-columns .18s ease-out; }
body.menu-aberto .app { grid-template-columns: var(--barra) var(--painel) minmax(0, 1fr); }
.lateral { background: var(--dark-2); color: var(--dark-text); position: sticky; top: 0; height: 100vh; overflow: hidden; z-index: 25; }
.lateral .marca { padding: 18px 18px 10px; border-bottom: 1px solid var(--dark-line); }
.lateral .marca img { width: 200px; max-width: 100%; height: auto; display: block; }
.lateral .marca small { display: block; margin-top: 6px; color: var(--gold); font-weight: 700; letter-spacing: 0.12em; font-size: 11px; text-transform: uppercase; }
/* Cliente ativo: logo e nome em destaque na lateral, para saber em qual cliente se está navegando */
.cliente-ativo { padding: 12px 14px; border-bottom: 1px solid var(--dark-line); background: var(--dark-2); }
.cliente-ativo .rotulo-cliente { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dark-muted); font-weight: 700; margin-bottom: 8px; }
.cliente-ativo .caixa-logo { display: flex; align-items: center; justify-content: center; min-height: 64px; padding: 8px; border-radius: 10px; border: 1px solid var(--dark-line); }
.cliente-ativo .caixa-logo.claro { background: #fff; border-color: #fff; }
.cliente-ativo .caixa-logo img { max-width: 100%; max-height: 72px; object-fit: contain; display: block; }
.cliente-ativo .nome-cliente { margin-top: 8px; font-weight: 700; font-size: 13.5px; line-height: 1.3; color: #fff; }
.cliente-ativo .nome-cliente.sem-logo { font-size: 15px; padding: 10px 2px; }
.cliente-ativo .sem-logo-aviso { margin-top: 4px; font-size: 11.5px; color: var(--gold); }
.cliente-ativo .tag-demo { display: inline-block; margin-top: 6px; padding: 1px 8px; border-radius: 999px; background: var(--accent-escuro); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.nav { padding: 10px 8px 20px; flex: 1; }
.nav .grupo { font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); padding: 16px 12px 6px; font-weight: 800; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; color: var(--dark-text); text-decoration: none; font-size: 13.5px; }
.nav a:hover { background: var(--dark-line); }
.nav a.ativo { background: var(--accent-escuro); color: #fff; font-weight: 600; }
.nav a .ico { width: 18px; text-align: center; opacity: 0.9; }
.ico-seta { display: inline-flex; width: 18px; height: 18px; border-radius: 50%; background: #fff; align-items: center; justify-content: center; font-size: 10px; line-height: 1; }
.ico-seta.rec { color: #1F7A5F; }
.ico-seta.pag { color: #B03A2E; }
.lateral .rodape { padding: 12px 18px 16px; border-top: 1px solid var(--dark-line); font-size: 12px; color: var(--dark-muted); }
/* No fundo escuro o laranja da marca já tem contraste (5,4:1); o laranja escuro é só para fundo claro */
.lateral a:not(.ativo):not([href^="#/"]) { color: var(--accent); }

/* ---------- Menu recolhido, como no VS Code (20/10/2026) ---------- */
/* Barra de atividades: sempre visível, um ícone por grupo; o painel (.lateral) abre ao lado com as telas do grupo */
:root { --barra: 56px; --painel: 260px; }
.barra { background: var(--dark); display: flex; flex-direction: column; align-items: center; position: sticky; top: 0; height: 100vh; padding: 8px 0; z-index: 30; border-right: 1px solid var(--dark-line); }
.barra .simbolo-marca { width: 40px; height: 40px; margin: 2px 0 8px; display: block; border-radius: 8px; flex: none; }
.barra .simbolo-marca img { width: 100%; height: 100%; display: block; }
.cli-mini { margin-bottom: 10px; flex: none; }
.cli-caixa { position: relative; width: 40px; height: 40px; border-radius: 9px; background: #fff; padding: 4px; outline: 2px solid var(--dark-line); outline-offset: 2px; display: flex; align-items: center; justify-content: center; }
.cli-caixa img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 5px; }
.cli-sigla { font-weight: 800; font-size: 14px; color: var(--accent-escuro); letter-spacing: 0.02em; }
.barra-sep { width: 28px; height: 1px; background: var(--dark-line); margin: 0 0 6px; flex: none; }
.barra-grupos { display: flex; flex-direction: column; gap: 2px; flex: 1; width: 100%; }
.barra-fim { position: relative; display: flex; flex-direction: column; gap: 2px; width: 100%; border-top: 1px solid var(--dark-line); padding-top: 6px; }
.barra .atv { position: relative; width: 100%; height: 46px; padding: 0; border: 0; background: transparent; color: var(--dark-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.barra .atv .ico-svg { width: 23px; height: 23px; }
.barra .atv .ico-sigla { display: flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; padding: 0 3px; border: 2px solid currentColor; border-radius: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.04em; line-height: 1; }
.barra .atv:hover, .barra .atv[aria-expanded="true"], .barra .atv.ativo { color: #fff; }
/* Traço laranja no grupo da tela aberta, mesmo com o painel recolhido */
.barra .atv.ativo::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.barra .atv:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; border-radius: 8px; }
.barra .cli-caixa:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Nome do grupo (ou do cliente) ao passar o mouse */
.barra .dica { position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); white-space: nowrap; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 600; padding: 5px 10px; border-radius: 7px; pointer-events: none; opacity: 0; transition: opacity .12s; box-shadow: 0 4px 14px rgba(0,0,0,.25); z-index: 160; text-align: left; }
.barra .dica small { display: block; font-weight: 400; color: #D9CCB8; }
.barra .atv:hover .dica, .barra .atv:focus-visible .dica, .cli-caixa:hover .dica, .cli-caixa:focus-visible .dica { opacity: 1; transition-delay: .25s; }
body.menu-aberto .barra .atv[aria-expanded="true"] .dica { display: none; }
@media (max-height: 760px) { .barra .atv { height: 38px; } .barra .simbolo-marca, .cli-mini { margin-bottom: 6px; } }
/* Ajuda (antes no rodapé da lateral): versão, manual, preferência do menu e o aviso de direitos */
.ajuda { position: absolute; left: calc(100% + 8px); bottom: 4px; width: 280px; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.25); padding: 14px; font-size: 12.5px; line-height: 1.5; z-index: 170; }
.ajuda strong { display: block; font-size: 13.5px; }
.ajuda a { color: var(--accent-escuro); font-weight: 600; }
.ajuda .pref-menu { display: flex; gap: 6px; align-items: flex-start; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); cursor: pointer; }
.ajuda .atalho { margin-top: 6px; color: var(--muted); }
.ajuda kbd { font-family: var(--mono); background: var(--bg); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; font-size: 11px; }
.ajuda .aviso-pi { margin-top: 8px; color: var(--muted); font-size: 11.5px; }
/* Painel do grupo */
.lateral-interno { width: var(--painel); height: 100%; display: flex; flex-direction: column; }
.lateral .marca { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 16px 12px 12px 16px; }
.lateral .marca img { width: 168px; }
.fechar-menu { flex: none; width: 30px; height: 30px; border: 0; border-radius: 7px; background: transparent; color: var(--dark-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.fechar-menu:hover { background: var(--dark-line); color: #fff; }
.lateral .cliente-ativo { background: transparent; }
.lateral .nav { overflow-y: auto; min-height: 0; }

/* ---------- Testeira em uma linha (20/10/2026): título da tela, (i), botões da tela | empresa, perguntar, Omie, alertas, conta ---------- */
.topo { min-height: 60px; gap: 8px 10px; padding: 11px 20px 11px 24px; container-type: inline-size; justify-content: flex-end; }
.tela-cab { position: relative; display: flex; align-items: center; gap: 6px; min-width: min(220px, 100%); flex: 0 1 auto; }
.topo .titulo-pagina { font-size: 20px; font-weight: 800; margin: 0; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.info-tela { flex: none; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.info-tela:hover, .info-tela[aria-expanded="true"] { color: var(--accent-escuro); background: var(--accent-soft); }
.desc-tela { display: none; position: absolute; top: calc(100% + 10px); left: 0; width: min(460px, 80vw); background: var(--ink); color: #fff; font-size: 12.5px; line-height: 1.5; padding: 9px 12px; border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.25); z-index: 60; white-space: normal; }
.desc-tela a { color: var(--gold); }
.desc-tela em { font-style: normal; }
.info-tela:hover ~ .desc-tela, .tela-cab.ver-desc .desc-tela { display: block; }
.acoes-topo, .acoes-topo > .acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.acoes-topo { margin-left: 6px; }
.acoes-topo:empty { display: none; }
.topo-espaco { flex: 1 1 0; min-width: 0; }
.cabecalho-resto { margin-bottom: 12px; }
.seletor-empresa { min-width: 0; flex: 0 3 auto; }
.seletor-empresa select { min-width: 0; }
.selo-omie { display: contents; }
.sinc { display: inline-flex; align-items: center; gap: 6px; height: var(--alt); padding: 0 10px; border-radius: var(--radius-p); border: 1px solid var(--line); background: var(--card); font-size: 12.5px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.sinc .ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--bom); flex: none; }
.sinc strong { color: var(--ink); font-weight: 600; }
.sinc .ico-svg { width: 16px; height: 16px; }
.sinc:hover { border-color: var(--line-forte); color: var(--accent-escuro); }
.sinc:disabled { opacity: .6; cursor: progress; }
.conta { position: relative; flex: none; }
.avatar { width: var(--alt); height: var(--alt); border-radius: 50%; border: 0; background: var(--dark); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; }
.avatar:hover, .avatar[aria-expanded="true"] { outline: 2px solid var(--accent); outline-offset: 2px; }
.menu-conta { position: absolute; right: 0; top: calc(100% + 8px); width: 250px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 6px; z-index: 60; }
.menu-conta .quem { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; font-size: 12.5px; color: var(--muted); }
.menu-conta .quem strong { display: block; color: var(--ink); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-conta button { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: 13.5px; color: var(--ink); }
.menu-conta button:hover { background: var(--bg); }
/* Pouco espaço (a largura é a da testeira, que muda com o menu aberto ou recolhido): botões só com ícone, o nome sai ao passar o mouse */
@container (max-width: 1100px) { .topo .rot-longo { display: none; } .seletor-empresa select { max-width: 180px; } }
@container (max-width: 860px) { .sinc strong { display: none; } }

.principal { min-width: 0; display: flex; flex-direction: column; overflow-x: hidden; }
.topo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 10px 24px; background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.seletor-empresa { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px 4px 5px; background: var(--bg); height: var(--alt); }
.seletor-empresa img { width: 28px; height: 28px; border-radius: 50%; object-fit: contain; background: #fff; border: 1px solid var(--line); }
.seletor-empresa img.fundo-escuro { background: var(--dark); border-color: var(--dark); }
.seletor-empresa select { border: 0; background: transparent; font-weight: 600; max-width: 230px; cursor: pointer; text-overflow: ellipsis; }
.sino { position: relative; width: var(--alt); height: var(--alt); border-radius: 50%; border: 1px solid var(--line); background: var(--card); cursor: pointer; font-size: 17px; }
.sino .qtd { position: absolute; top: -4px; right: -4px; background: var(--ruim); color: #fff; font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 1px 6px; }
.faixa-demo { background: var(--gold-soft); color: #6B4A10; border-bottom: 1px solid #F0D9A8; padding: 7px 24px; font-size: 12.5px; font-weight: 600; }
.faixa-assinatura { padding: 7px 24px; font-size: 12.5px; font-weight: 600; border-bottom: 1px solid var(--line); background: #F4EFE6; color: var(--ink); }
.faixa-assinatura.atencao { background: var(--alerta-bg); color: #6B4A10; border-bottom-color: #F0D9A8; }
.faixa-assinatura.erro { background: var(--ruim-bg); color: var(--ruim); border-bottom-color: var(--ruim-borda); }
.faixa-assinatura a { color: inherit; text-decoration: underline; margin-left: 6px; }
.uso-barra { height: 8px; border-radius: 999px; background: #F0EAE0; overflow: hidden; margin-top: 8px; }
.uso-barra span { display: block; height: 100%; background: var(--accent); }
.uso-barra span.cheio { background: var(--ruim); }
.conteudo { padding: 22px 24px 60px; max-width: 1500px; width: 100%; }
.cabecalho-tela { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.cabecalho-tela p { margin: 4px 0 0; color: var(--muted); max-width: 820px; }

/* ---------- Componentes ---------- */
.cartao { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--sombra); padding: 18px; margin-bottom: 16px; }
.cartao.sem-padding { padding: 0; overflow: hidden; }
.cartao > h2 { margin-bottom: 12px; }
.grade { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1200px) { .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 800px) { .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); } .conteudo { padding: 16px; } .topo { flex-wrap: wrap; padding: 10px 16px; } }

.btn { display: inline-flex; align-items: center; gap: 6px; height: var(--alt); padding: 0 14px; border-radius: var(--radius-p); border: 1px solid var(--line-forte); background: var(--card); cursor: pointer; font-weight: 600; font-size: 13px; white-space: nowrap; text-decoration: none; color: var(--ink); }
.btn:hover { border-color: var(--accent-escuro); color: var(--accent-escuro); }
.btn.primario { background: var(--accent-escuro); border-color: var(--accent-escuro); color: #fff; }
.btn.primario:hover { background: var(--accent-escuro); color: #fff; filter: brightness(0.88); }
.btn.perigo { color: var(--ruim); border-color: var(--ruim-borda); }
.btn.pequeno { height: 30px; padding: 0 10px; font-size: 12px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.btn.ativo { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-escuro); }
.btn.pequeno.ativo { font-weight: 700; box-shadow: 0 0 0 2px var(--accent-soft); }
.area-em-edicao { background: var(--accent-soft); border: 1px solid var(--accent); color: var(--accent-escuro); border-radius: 999px; padding: 3px 12px; font-size: 13px; }
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; }
.campo { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 600; }
.campo input, .campo select, .campo textarea, input.entrada, select.entrada { height: var(--alt); border: 1px solid var(--line-forte); border-radius: var(--radius-p); padding: 0 10px; background: #fff; color: var(--ink); font-weight: 400; font-size: 13.5px; min-width: 120px; }
/* Select com opção longa não alarga a coluna do formulário no celular (Cenário reforma, 23/10/2026) */
.campo select { max-width: 100%; }
/* Na tabela, a etiqueta quebra linha em vez de sair cortada (ranking de Fornecedores e reforma tributária) */
.tab td .etiqueta.quebra { white-space: normal; line-height: 1.35; border-radius: 8px; padding: 3px 8px; }
.campo textarea { height: auto; min-height: 70px; padding: 8px 10px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
/* Lista de caixas de seleção dentro de .campo (ex.: áreas ao reabrir o budget): as caixas não herdam a altura, a largura mínima e a borda dos campos de texto */
.chk-grupo { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 4px; }
.chk-grupo label { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 400; color: var(--ink); white-space: nowrap; cursor: pointer; }
.campo .chk-grupo input[type="checkbox"] { width: 16px; height: 16px; min-width: 0; min-height: 0; padding: 0; margin: 0; flex: none; }
.alternador { display: inline-flex; border: 1px solid var(--line-forte); border-radius: var(--radius-p); overflow: hidden; height: var(--alt); }
.alternador button { border: 0; background: #fff; padding: 0 12px; cursor: pointer; font-weight: 600; font-size: 12.5px; color: var(--muted); }
.alternador button.ativo { background: var(--accent-escuro); color: #fff; }
/* Cenários na escala vermelho (Pessimista), neutro (Base) e verde (Otimista): botões e colunas */
.alternador.cenarios button.cen-pessimista { color: var(--ruim); }
.alternador.cenarios button.cen-otimista { color: var(--bom); }
.alternador.cenarios button.cen-base { color: var(--tab-texto-suave); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.alternador.cenarios button.cen-pessimista.ativo { background: var(--ruim); color: #fff; }
.alternador.cenarios button.cen-base.ativo { background: #6F675C; color: #fff; }
.alternador.cenarios button.cen-otimista.ativo { background: var(--bom); color: #fff; }
.tab th.col-cen-pessimista { background: var(--ruim-bg); color: var(--ruim); }
.tab th.col-cen-base { background: #F1ECE4; color: var(--tab-texto-suave); }
.tab th.col-cen-otimista { background: var(--bom-bg); color: var(--bom); }
.tab td.col-cen-pessimista.destaque-col { background: var(--ruim-bg) !important; }
.tab td.col-cen-base.destaque-col { background: #F1ECE4 !important; }
.tab td.col-cen-otimista.destaque-col { background: var(--bom-bg) !important; }

/* KPIs */
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--sombra); position: relative; }
.kpi .rotulo { font-size: 12px; color: var(--muted); font-weight: 600; min-height: 32px; display: flex; align-items: flex-start; gap: 6px; }
.kpi .rotulo .ico-kpi { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px; color: var(--accent-escuro); }
.kpi .valor { font-size: 24px; font-weight: 800; margin: 4px 0; letter-spacing: -0.01em; }
.kpi .detalhe { font-size: 12px; color: var(--muted); }
.kpi .meta.ok { color: var(--bom); } .kpi .meta.nok { color: var(--ruim); }
.kpi .como { margin-top: 8px; font-size: 12px; color: var(--accent-escuro); background: none; border: 0; padding: 0; cursor: pointer; font-weight: 600; }
.kpi.alerta { border-color: var(--ruim-borda); }
/* Saldo disponível defasado (20/10/2026): último lançamento importado há mais de 35 dias */
.kpi.defasado { border-color: #E8C77A; background: var(--alerta-bg); }
.kpi .meta.defasado { color: var(--alerta); font-weight: 600; }
.kpi .marca-alerta { position: absolute; top: 10px; right: 12px; color: var(--ruim); font-size: 14px; }

/* Selo de amarração */
.selo { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 700; border: 1px solid; cursor: pointer; background: none; }
.selo.ok { color: var(--bom); background: var(--bom-bg); border-color: var(--bom-borda); }
.selo.nok { color: var(--ruim); background: var(--ruim-bg); border-color: var(--ruim-borda); }
.semaforo { display: inline-block; min-width: 62px; text-align: center; border-radius: 999px; padding: 2px 10px; font-weight: 700; border: 1px solid; }
.semaforo.verde { color: var(--bom); background: var(--bom-bg); border-color: var(--bom-borda); }
.semaforo.amarelo { color: var(--alerta); background: var(--alerta-bg); border-color: #E8C77A; }
.semaforo.vermelho { color: var(--ruim); background: var(--ruim-bg); border-color: var(--ruim-borda); }
.selo.na { color: var(--muted); background: #f4efe6; border-color: var(--line); }
.aviso { border-radius: var(--radius-p); padding: 10px 14px; margin-bottom: 12px; font-size: 13px; border: 1px solid; }
.aviso.info { background: #F4EFE6; border-color: var(--line); color: var(--ink); }
.aviso.atencao { background: var(--alerta-bg); border-color: #F0D9A8; color: #6B4A10; }
.aviso.erro { background: var(--ruim-bg); border-color: var(--ruim-borda); color: var(--ruim); }
.aviso.ok { background: var(--bom-bg); border-color: var(--bom-borda); color: var(--bom); }
/* Atualização do Omie em andamento (telas/aviso-omie.js): barra com percentual; sem referência (1ª carga) a barra só pulsa */
.barra-omie { position: relative; height: 8px; margin-top: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.barra-omie > span { display: block; height: 100%; border-radius: 999px; background: var(--accent-escuro); transition: width 0.6s ease; }
.barra-omie.indeterminada > span { opacity: 0.55; animation: barra-omie-pulsa 1.6s ease-in-out infinite; }
@keyframes barra-omie-pulsa { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.7; } }
@media (prefers-reduced-motion: reduce) { .barra-omie > span { transition: none; } .barra-omie.indeterminada > span { animation: none; } }
.barra-omie-pct { margin-top: 3px; font-size: 12px; font-weight: 700; text-align: right; }
.aviso-omie-linha { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; font-size: 12.5px; }
/* Cartões de conexão com o ERP em Parâmetros (Omie e Conta Azul, lado a lado): cartão vazio some e o outro ocupa a largura toda */
.cartoes-erp { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); align-items: stretch; margin-bottom: 16px; }
.cartoes-erp > div:empty { display: none; }
.cartoes-erp > div > .cartao { height: 100%; margin-bottom: 0; }
/* Nota do Controller (devolução do orçamento) e situação da aprovação por área: cor forte e ícone, para a nota não passar despercebida */
.nota-controller { display: flex; gap: 12px; align-items: flex-start; margin-top: 10px; padding: 12px 14px; border: 1px solid var(--ruim-borda); border-left: 5px solid var(--ruim); border-radius: var(--radius-p); background: var(--ruim-bg); color: var(--ink); }
.nota-controller > .ico-svg { width: 22px; height: 22px; margin-top: 1px; color: var(--ruim); }
.nota-controller .nota-t { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ruim); }
.nota-controller .nota-msg { margin-top: 2px; font-size: 15px; font-weight: 600; white-space: pre-wrap; overflow-wrap: anywhere; }
.nota-controller .nota-quem { margin-top: 4px; font-size: 12px; color: var(--muted); }
.faixa-orc { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; padding: 10px 14px; font-size: 13.5px; border: 1px solid; border-left-width: 5px; border-radius: var(--radius-p); }
.faixa-orc > .ico-svg { width: 20px; height: 20px; margin-top: 1px; }
.faixa-orc.ok { background: var(--bom-bg); border-color: var(--bom-borda); border-left-color: var(--bom); color: var(--bom); }
.faixa-orc.pendente { background: var(--ruim-bg); border-color: var(--ruim-borda); border-left-color: var(--ruim); color: var(--ruim); }
.faixa-orc .faixa-corpo { flex: 1; min-width: 0; color: var(--ink); }
.faixa-orc .faixa-corpo strong { color: inherit; }
.faixa-orc.ok .faixa-corpo strong { color: var(--bom); }
.faixa-orc.pendente .faixa-corpo strong { color: var(--ruim); }
.faixa-orc .nota-controller { background: #fff; }
.etiqueta { display: inline-block; border-radius: 999px; padding: 2px 9px; font-size: 11.5px; font-weight: 700; border: 1px solid var(--line); background: #F4EFE6; color: #6E655C; white-space: nowrap; }
.etiqueta.ok, .etiqueta.aprovado, .etiqueta.vigente { background: var(--bom-bg); color: var(--bom); border-color: var(--bom-borda); }
.etiqueta.critico, .etiqueta.devolvido, .etiqueta.vermelho, .etiqueta.alto { background: var(--ruim-bg); color: var(--ruim); border-color: var(--ruim-borda); }
.etiqueta.atencao, .etiqueta.enviado, .etiqueta.amarelo, .etiqueta.medio { background: var(--alerta-bg); color: var(--alerta); border-color: #F0D9A8; }
.etiqueta.pendente, .etiqueta.info, .etiqueta.baixo { background: #F4EFE6; color: #6E655C; } /* #6E655C: 4,98:1 sobre #F4EFE6 (o --muted dava 4,18:1) */

/* Tabelas */
.tabela-wrap { overflow: auto; max-width: 100%; }
table.tab { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; }
.tab th { position: sticky; top: 0; background: #F7F0E4; color: var(--tab-texto-suave); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.03em; text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line-forte); white-space: nowrap; z-index: 2; }
.tab th.num { text-align: right; }
.tab td { padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tab tbody tr:hover td { background: #FFFBF4; }
.tab td:first-child, .tab th:first-child { position: sticky; left: 0; background: inherit; }
/* Cabeçalho da primeira coluna: fundo sólido e acima das linhas, para o texto não aparecer por trás ao rolar */
.tab th:first-child { background: #F7F0E4; z-index: 3; }
.tab tbody td:first-child { background: var(--card); min-width: 220px; }
.tab tbody tr:hover td:first-child { background: #FFFBF4; }
.tab tr.subtotal td { font-weight: 700; background: #FBF6EE; }
.tab tr.subtotal td:first-child { background: #FBF6EE; }
.tab tr.destaque td { font-weight: 800; background: var(--accent-soft); }
.tab tr.destaque td:first-child { background: var(--accent-soft); }
/* Receita bruta: mesma linha em todas as telas (DRE, P&L, Budget, Forecast, Fechamento, Gerencial x Contábil, Premissas), em destaque,
   letra maiúscula e o mesmo tamanho de fonte (pedido do Pedro em 07/10) */
.tab tr[data-id="receita_bruta"] td, .tab tr[data-id="rb"] td { font-weight: 800; font-size: 13px; background: var(--accent-soft); }
.tab tr[data-id="receita_bruta"] td:first-child, .tab tr[data-id="rb"] td:first-child { text-transform: uppercase; letter-spacing: 0.03em; background: var(--accent-soft); }
.tab tr.secao td { font-weight: 800; color: var(--accent-escuro); text-transform: uppercase; font-size: 12px; letter-spacing: 0.04em; background: #fff; padding-top: 14px; }
.tab tr.agrupador td { font-weight: 600; background: #FDFAF5; }
.tab tr.secao.clicavel td { cursor: pointer; }
.tab tr.detalhe td { color: var(--tab-texto); font-size: 13px; }
.tab tr.detalhe td.neg { color: var(--negativo); }
.tab tr.grupo-conta td { color: var(--ink); font-weight: 600; font-size: 13px; }
.tab tr.grupo-conta td.neg { color: var(--negativo); }
.tab tr.lancamento td { color: var(--tab-texto-suave); font-size: 12.5px; background: #FDFBF7; padding-top: 3px; padding-bottom: 3px; white-space: nowrap; }
.tab tr.lancamento td:first-child { max-width: 460px; overflow: hidden; text-overflow: ellipsis; }
.tab tr.detalhe td:first-child { padding-left: 30px; }
.tab tr.alerta-linha td { color: var(--ruim); font-weight: 700; }
.tab tr.clicavel { cursor: pointer; }
.tab .seta { display: inline-block; width: 14px; color: var(--tab-texto-suave); }
.tab td.fav { color: var(--bom); font-weight: 700; } .tab td.desfav { color: var(--negativo); font-weight: 700; }

/* Modal */
.modal-fundo { position: fixed; inset: 0; background: rgba(11, 10, 14, 0.55); display: flex; align-items: flex-start; justify-content: center; padding: 50px 16px; z-index: 100; overflow-y: auto; }
.modal { background: var(--card); border-radius: var(--radius); max-width: 860px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
.modal .mcab { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.modal .mcab h2 { margin: 0; flex: 1; }
.modal .mcorpo { padding: 18px 20px; max-height: 70vh; overflow-y: auto; }
.modal .mrodape { padding: 12px 20px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; }
.fechar { border: 0; background: none; font-size: 22px; cursor: pointer; color: var(--muted); line-height: 1; }

/* Memorial */
.memorial .formula { font-family: var(--mono); background: var(--dark); color: var(--dark-text); border-radius: var(--radius-p); padding: 12px 14px; font-size: 13px; margin-bottom: 14px; }
.memorial .passo { font-family: var(--mono); background: #F7F0E4; border-left: 3px solid var(--accent); padding: 8px 12px; margin: 6px 0; border-radius: 0 6px 6px 0; font-size: 13px; }
.memorial .resultado { font-size: 22px; font-weight: 800; margin: 14px 0 6px; }
.memorial .leitura { background: var(--accent-soft); border-radius: var(--radius-p); padding: 12px 14px; font-size: 13.5px; }
.memorial ul.regras { margin: 10px 0 0; padding-left: 18px; color: var(--muted); font-size: 12.5px; }

/* Gráficos SVG */
.grafico { width: 100%; height: auto; display: block; }
.grafico text { font-family: var(--fonte); font-size: 11px; fill: var(--muted); }
.legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 6px; }
.legenda-topo { margin: 0 0 8px; }
.legenda i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 5px; }

/* Barras de aging */
.barra-aging { display: flex; height: 26px; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); }
.barra-aging div { height: 100%; }

/* Lista de alertas */
.alerta-item { border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: var(--radius-p); padding: 10px 14px; margin-bottom: 8px; background: #fff; }
.alerta-item.vermelho { border-left-color: var(--ruim); }
.alerta-item.resolvido { opacity: 0.55; }
.alerta-item .t { font-weight: 700; }
.alerta-item .d { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.alerta-item.orcamento .t + .d { font-size: 14px; font-weight: 600; color: var(--ink); }

/* Passos do ciclo e upload */
.soltar { display: block; border: 2px dashed var(--line-forte); border-radius: var(--radius); padding: 26px; text-align: center; background: #fff; cursor: pointer; }
.soltar.sobre { border-color: var(--accent); background: var(--accent-soft); }
.lista-simples { margin: 6px 0 0; padding-left: 18px; }
.lista-simples li { margin: 3px 0; }
.cartao-contrato { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; background: #fff; }
.cartao-contrato .linha { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; margin-top: 5px; }
.cartao-contrato .linha span:first-child { color: var(--muted); }

/* Login */
.login-pagina { min-height: 100vh; display: flex; align-items: center; justify-content: flex-start; padding: 30px 16px 30px clamp(16px, 4vw, 64px); background: var(--dark) url("../assets/logo-login-bg.jpg") center / cover no-repeat; position: relative; }
.login-pagina::before { content: ""; position: absolute; inset: 0; background: rgba(11, 10, 14, 0.5); }
.login-cartao { position: relative; background: var(--card); border-radius: 18px; padding: 30px 30px 24px; width: 100%; max-width: 380px; box-shadow: 0 25px 70px rgba(0,0,0,0.45); }
.login-cartao .logo-cliente { display: block; max-height: 90px; max-width: 220px; margin: 0 auto 10px; object-fit: contain; }
.login-cartao .nome-cliente { text-align: center; font-weight: 700; margin-bottom: 18px; }
.login-cartao h1 { text-align: center; font-size: 21px; margin-bottom: 4px; }
.login-cartao .sub { text-align: center; color: var(--muted); margin: 0 0 18px; font-size: 13px; }
.login-cartao form { display: flex; flex-direction: column; gap: 12px; }
.login-cartao .btn { justify-content: center; height: 42px; font-size: 14px; }
.login-cartao .by { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 11.5px; color: var(--muted); }
.login-cartao .by img { height: 34px; width: auto; background: var(--dark); border-radius: 6px; padding: 3px 8px; }
.login-cartao .erro { color: var(--ruim); font-size: 13px; min-height: 18px; text-align: center; }
.login-cartao .link-secundario { display: block; margin-top: 12px; text-align: center; font-size: 13px; color: var(--accent-escuro); }
.login-cartao .dica-senha { margin: -4px 0 0; font-size: 12px; color: var(--muted); }
.login-cartao .aviso-senha { margin: 0 0 14px; padding: 10px 12px; border-radius: 8px; font-size: 13px; border: 1px solid var(--line); }
.login-cartao .aviso-senha.ok { background: var(--bom-bg); border-color: var(--bom-borda); color: var(--bom); }
.login-cartao .aviso-senha.erro { background: var(--ruim-bg); border-color: var(--ruim-borda); color: var(--ruim); }
.login-cartao .aviso-senha.info { background: #F7F0E4; color: var(--muted); }
.login-cartao .demo {margin-top: 12px; font-size: 12px; color: var(--muted); background: #F7F0E4; border-radius: 8px; padding: 8px 10px; }
@media (max-width: 1000px) { .login-pagina { flex-direction: column; justify-content: center; padding-left: 16px; } }
.tremer { animation: tremer 0.35s; }
@keyframes tremer { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

.av-col { color: var(--tab-texto); font-size: 13px; background: #F6EEDF; border-left: 1px dashed var(--line-forte); }
th.av-col { color: var(--accent-escuro); }
.tab td.av-col.neg { color: var(--negativo); }
.tab tr.destaque td.av-col, .tab tr.subtotal td.av-col { background: #F3E6D2; }

.btn-icone { width: 38px; padding: 0; justify-content: center; }
.btn-icone svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.modo-analise td.num { cursor: pointer; }
.modo-analise tr.clicavel:hover td.num { background: var(--accent-soft); }
.modo-analise tr.analisavel td.num:hover { background: var(--accent-soft); }

/* Painel P&L */
.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.g6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1500px) { .g6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px) { .g6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .g6 { grid-template-columns: 1fr; } }
.cartoes-demo .kpi .valor { font-size: 20px; }
.kpi .var-pl.ok, .cartoes-demo .var-pl.ok { color: var(--bom); } .cartoes-demo .var-pl.nok { color: var(--ruim); }
.cartoes-demo .var-pl { font-size: 12px; font-weight: 700; }
@media (max-width: 1400px) { .g5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px) { .g5 { grid-template-columns: 1fr; } }
.kpi .margem-pl { font-weight: 700; color: var(--ink); }

/* Diagrama do ciclo operacional e financeiro (tarefa 194): substitui o gráfico de barras causa-raiz por uma linha do tempo.
   left/width usam calc() com uma margem fixa de 70px dos dois lados (espaço para o rótulo mais longo não cortar), por isso min-width folgado. */
/* Ciclo operacional e financeiro (linha do tempo em SVG) ao lado do efeito tesoura; em tela estreita, um embaixo do outro */
.lado-a-lado { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; margin-bottom: 16px; }
.lado-a-lado > .cartao { margin-bottom: 0; display: flex; flex-direction: column; }
@media (max-width: 1180px) { .lado-a-lado { grid-template-columns: 1fr; } }
.diagrama-ciclo-svg { width: 100%; height: auto; }
.conta-ciclo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; font-size: 12.5px; }
.conta-ciclo .op { font-weight: 800; color: var(--muted); }
.conta-ciclo .chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 10px 3px 8px; font-weight: 700; color: var(--ink); background: #fff; border: 1px solid var(--line-forte); }
.conta-ciclo .chip::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--cor); }
.conta-ciclo .chip.pme { --cor: #C98500; } .conta-ciclo .chip.pmr { --cor: #2A78D6; }
.conta-ciclo .chip.pmp, .conta-ciclo .chip.cfneg { --cor: #1BAF7A; } .conta-ciclo .chip.cf { --cor: #E34948; }

/* Decomposição DuPont (tarefa 194): fatores ligados por × e = numa única linha */
.dupont-linha { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.dupont-linha .kpi { flex: 1 1 150px; text-align: center; }
.dupont-linha .kpi.destaque { background: var(--gold-soft); border-color: var(--gold); }
.dupont-op { display: flex; align-items: center; font-size: 22px; font-weight: 800; color: var(--muted); }
.kpi .var-pl { font-size: 12px; font-weight: 700; margin-top: 3px; }
.kpi .var-pl.ok { color: var(--bom); } .kpi .var-pl.nok { color: var(--ruim); }
.dica-ws { position: fixed; z-index: 2000; display: none; max-width: 420px; background: #1C1A18; color: #fff; padding: 9px 12px; border-radius: 8px; font-size: 12.5px; line-height: 1.45; white-space: pre-line; pointer-events: none; box-shadow: 0 6px 20px rgba(0,0,0,.28); }
tr[data-dica]:hover td { background: #FFFBF4; cursor: help; }
.trilho-pl { background: var(--line); border-radius: 6px; height: 12px; overflow: hidden; min-width: 140px; }
.trilho-pl i { display: block; height: 100%; background: var(--gold); border-radius: 6px; }
.trilho-pl.res i { background: var(--bom); } .trilho-pl.res.neg i { background: var(--ruim); }
.comp-linha { display: grid; grid-template-columns: minmax(120px, 190px) 1fr 60px; gap: 10px; align-items: center; margin: 8px 0; font-size: 13px; }
.comp-linha .trilho { background: var(--line); border-radius: 6px; height: 14px; overflow: hidden; }
.comp-linha .trilho i { display: block; height: 100%; background: var(--gold); border-radius: 6px; }
.comp-linha.resultado { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 12px; }
.comp-linha.resultado .trilho i { background: var(--bom); } .comp-linha.resultado.neg-res .trilho i { background: var(--ruim); }
.comp-linha .pct { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

/* Impressão */
@media print {
  .lateral, .barra, .fundo-menu, .faixa-demo, .faixa-assinatura, .acoes, .filtros, .btn, .sino { display: none !important; }
  /* Na impressão, da testeira só o título da tela */
  .topo { position: static; display: block; min-height: 0; padding: 0 0 10px; border: 0; background: none; }
  .topo > :not(.tela-cab), .tela-cab > :not(.titulo-pagina) { display: none !important; }
  .app { display: block; } .conteudo { padding: 0; max-width: none; }
  .cartao { box-shadow: none; border: 0; }
  body { background: #fff; }
}

/* ---------- Cenários SaaS ---------- */
.abas-cen { flex-wrap: wrap; height: auto; }
.abas-cen button { height: var(--alt); }
.perguntas-cen { margin-bottom: 14px; }
.perguntas-cen .pergunta { display: flex; flex-direction: column; gap: 4px; text-align: left; cursor: pointer; padding: 12px 14px; margin: 0; font: inherit; color: var(--ink); }
.perguntas-cen .pergunta span { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.perguntas-cen .pergunta.ativa { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.cen-grade { display: grid; grid-template-columns: minmax(320px, 420px) minmax(0, 1fr); gap: 14px; align-items: start; }
.cen-grade > * { min-width: 0; }
@media (max-width: 1100px) { .cen-grade { grid-template-columns: 1fr; } }
.premissa input, .premissa select { min-width: 0; width: 100%; }
.premissa .origem { font-weight: 400; font-size: 11px; color: var(--muted); line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.premissa.mudou input, .premissa.mudou select { border-color: var(--accent); background: var(--accent-soft); }
.hipotese { margin-top: 14px; padding: 12px; border: 1px dashed var(--line-forte); border-radius: var(--radius-p); background: #FFFCF6; }
.hipotese.ativa { border-color: var(--alerta); background: var(--alerta-bg); }
.linha-check { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.virada .virada-item + .virada-item { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 10px; }
.virada p strong { color: var(--accent-escuro); }
/* Grupos de premissas: faixa no título; "Outras premissas" com cara de botão */
.grupo-premissas { margin-top: 14px; }
.grupo-premissas h3 { display: flex; align-items: center; gap: 8px; justify-content: space-between; margin: 0 0 10px; padding: 7px 10px; background: var(--gold-soft); border-left: 4px solid var(--gold); border-radius: 6px; color: var(--ink); font-size: 12.5px; }
.grupo-premissas.principal h3 { background: var(--accent-soft); border-left-color: var(--accent); }
.outras-premissas { margin-top: 16px; border: 1px solid var(--line-forte); border-radius: var(--radius-p); background: #FFFCF6; padding: 0 12px 12px; }
.outras-premissas > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; font-weight: 700; color: var(--accent-escuro); }
.outras-premissas > summary::-webkit-details-marker { display: none; }
.outras-premissas > summary::before { content: "▸"; color: var(--accent); margin-right: 2px; }
.outras-premissas[open] > summary::before { content: "▾"; }
.outras-premissas > summary span { flex: 1; }
.outras-premissas > summary small { color: var(--muted); font-weight: 600; }
.outras-premissas > summary:hover span { text-decoration: underline; }

/* ---------- Acessibilidade e celular (revisão de 2026-10-03: frontend-checklist, ui-ux-pro-max, frontend-design) ---------- */
/* Foco visível em tudo que se opera pelo teclado (diretriz focus-states); só aparece navegando pelo teclado, não no clique */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lateral :focus-visible { outline-color: var(--gold); }
.tab tr.clicavel:focus-visible td, .tab tr[data-grupo]:focus-visible td { background: var(--accent-soft); }
.tab tr.clicavel:focus-visible, .tab tr[data-grupo]:focus-visible { outline-offset: -2px; }
#conteudo:focus { outline: none; }
/* Pular para o conteúdo (diretriz skip-links): invisível até receber o foco do Tab */
.pular { position: absolute; left: 12px; top: -60px; z-index: 300; background: var(--accent-escuro); color: #fff; font-weight: 700; padding: 10px 16px; border-radius: var(--radius-p); text-decoration: none; }
.pular:focus { top: 12px; }
/* Ícones Tabler em traço (diretrizes no-emoji-icons e icon-style-consistent) */
.ico-svg { width: 18px; height: 18px; flex: none; display: block; }
.nav a .ico { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; opacity: 0.85; }
.nav a.ativo .ico { opacity: 1; }
.btn .ico-svg { width: 17px; height: 17px; }
.sino { display: inline-flex; align-items: center; justify-content: center; color: var(--ink); }
.sino .ico-svg { width: 19px; height: 19px; }
/* Fundo escurecido atrás do painel do menu: só no celular */
.fundo-menu { display: none; }
@media (max-width: 800px) {
  /* Celular: a barra de ícones fica; o painel do grupo abre por cima do conteúdo, com fundo escurecido (menu recolhido, 20/10/2026) */
  .app, body.menu-aberto .app { grid-template-columns: var(--barra) minmax(0, 1fr); }
  /* Gaveta (revisão de design 23/10/2026, W6): largura fixa e entra deslizando (transform), em vez de esticar a largura; o fundo esmaece */
  .lateral { position: fixed; top: 0; left: var(--barra); bottom: 0; width: min(var(--painel), calc(100vw - var(--barra))); height: 100%; z-index: 150; box-shadow: 0 0 40px rgba(0,0,0,.35); transform: translateX(calc(-100% - var(--barra))); visibility: hidden; transition: transform 240ms cubic-bezier(.32, .72, 0, 1), visibility 0s linear 240ms; }
  body.menu-aberto .lateral { transform: none; visibility: visible; transition: transform 240ms cubic-bezier(.32, .72, 0, 1), visibility 0s; }
  .fundo-menu { display: block; position: fixed; inset: 0 0 0 var(--barra); background: rgba(11, 10, 14, 0.55); z-index: 140; opacity: 0; pointer-events: none; transition: opacity 200ms ease-out; }
  body.menu-aberto .fundo-menu { opacity: 1; pointer-events: auto; }
  .topo { gap: 8px; padding: 8px 12px; }
  .tela-cab { flex: 1 1 100%; flex-wrap: wrap; row-gap: 8px; }
  .topo .titulo-pagina { max-width: calc(100% - 34px); font-size: 18px; }
  .acoes-topo { flex: 1 1 100%; margin-left: 0; }
  .seletor-empresa { order: 5; flex: 1 1 100%; }
  .seletor-empresa select { max-width: none; flex: 1; }
  .btn, .sino, .alternador, .campo input, .campo select { min-height: 40px; }
}
/* Campo de senha com botão Mostrar (diretriz password-toggle) */
.campo-senha label { font: inherit; }
.senha-caixa { position: relative; display: flex; }
.senha-caixa input { flex: 1; padding-right: 84px; }
.ver-senha { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); height: 30px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--accent-escuro); font-weight: 700; font-size: 12.5px; cursor: pointer; }
.ver-senha:hover { background: var(--accent-soft); }
/* Movimento reduzido (diretriz reduced-motion): sem tremida no login e sem animação da gaveta */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Revisão de design (23/10/2026, skill apple-design): resposta ao toque, movimento com origem, tipografia ---------- */
/* As animações daqui respeitam a regra de movimento reduzido acima (duração quase zero, com !important). */
/* W2: resposta no pressionar, não só no passar do mouse */
.btn, .alternador button, .sinc, .sino, .avatar, .hub-btn, .info-tela, .fechar-menu, .chip-status { transition: transform 100ms ease-out; }
.btn:active:not(:disabled), .alternador button:active, .sinc:active:not(:disabled), .sino:active, .avatar:active, .hub-btn:active, .info-tela:active, .fechar-menu:active, .chip-status:active { transform: scale(.97); }
.kpi.kpi-painel:active { transform: scale(.985); }
.tab tr.clicavel:active td, .tab tr[data-grupo]:active td, .tab tr.clicavel:active td:first-child { background: var(--accent-soft); }
.barra .atv:active, .nav a:active { background: var(--dark-line); }
.menu-conta button:active { background: var(--line); }
/* W3: seta única que gira ao abrir; linhas novas do drill aparecem esmaecendo (sem deslizar) */
.tab .seta { transition: transform 150ms ease-out; transform-origin: 5px 55%; }
.tab .seta.aberta { transform: rotate(90deg); }
.tab tr.entra td { animation: ws-esmaece 120ms ease-out; }
@keyframes ws-esmaece { from { opacity: 0; } }
/* W4: o memorial (e todo modal) nasce do elemento que o abriu e volta para ele ao fechar */
.modal-fundo { animation: ws-esmaece 160ms ease-out; }
.modal-fundo .modal { transform-origin: var(--origem, 50% 0); animation: ws-modal-entra 220ms cubic-bezier(.2, .8, .2, 1); }
.modal-fundo.saindo { animation: ws-esmaece-sai 140ms ease-in forwards; pointer-events: none; }
.modal-fundo.saindo .modal { animation: ws-modal-sai 140ms ease-in forwards; }
@keyframes ws-modal-entra { from { opacity: 0; transform: scale(.97); } }
@keyframes ws-modal-sai { to { opacity: 0; transform: scale(.97); } }
@keyframes ws-esmaece-sai { to { opacity: 0; } }
/* W5: menus suspensos crescem a partir do botão que os abriu e saem pelo mesmo caminho */
.menu-conta { transform-origin: top right; }
.ajuda { transform-origin: bottom left; }
.desc-tela { transform-origin: top left; }
.menu-conta:not([hidden]), .ajuda:not([hidden]), .info-tela:hover ~ .desc-tela, .tela-cab.ver-desc .desc-tela { animation: ws-suspenso-entra 120ms ease-out; }
.menu-conta.saindo, .ajuda.saindo { animation: ws-suspenso-sai 90ms ease-in forwards; pointer-events: none; }
@keyframes ws-suspenso-entra { from { opacity: 0; transform: scale(.96); } }
@keyframes ws-suspenso-sai { to { opacity: 0; transform: scale(.96); } }
/* W9: texto corrido mais arejado; números e títulos grandes um pouco mais juntos; tabelas continuam densas */
body { line-height: 1.45; }
.tab td { line-height: 1.3; }
.cabecalho-tela p, .aviso { line-height: 1.5; }
h1, .topo .titulo-pagina, .kpi .valor, .memorial .resultado, .hub-miolo .hub-valor { letter-spacing: -0.02em; line-height: 1.1; }
/* W11: testeira translúcida; a linha de baixo só aparece depois que a página rola */
.topo { background: color-mix(in srgb, var(--card) 82%, transparent); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); border-bottom-color: transparent; transition: border-color 150ms ease-out; }
body.rolou .topo { border-bottom-color: var(--line); }
@media (prefers-reduced-transparency: reduce) { .topo { background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; } }
/* W12: avisos sobem e esmaecem ao entrar e saem pelo mesmo caminho */
.aviso-flutuante { animation: ws-aviso-entra 180ms cubic-bezier(.2, .8, .2, 1); }
.aviso-flutuante.saindo { animation: ws-aviso-sai 140ms ease-in forwards; }
@keyframes ws-aviso-entra { from { opacity: 0; transform: translateY(8px); } }
@keyframes ws-aviso-sai { to { opacity: 0; transform: translateY(8px); } }
/* W14: dica dos ícones da DRE em 250 ms (a nativa demorava cerca de 1 s) e rótulo "Análise" ao lado do ícone em tela larga */
.barra-exibicao .btn-icone { position: relative; }
.barra-exibicao .dica-icone { position: absolute; top: calc(100% + 6px); left: 0; width: max-content; max-width: 260px; white-space: normal; background: var(--ink); color: #fff; font-size: 12px; font-weight: 500; line-height: 1.4; text-align: left; padding: 6px 10px; border-radius: 7px; box-shadow: 0 4px 14px rgba(0,0,0,.25); pointer-events: none; opacity: 0; transition: opacity .12s; z-index: 60; }
.barra-exibicao .btn-icone:hover .dica-icone, .barra-exibicao .btn-icone:focus-visible .dica-icone { opacity: 1; transition-delay: .25s; }
.barra-exibicao .rot-analise { display: none; }
@media (min-width: 1280px) { .barra-exibicao .btn-icone.com-rotulo { width: auto; padding: 0 10px; gap: 6px; } .barra-exibicao .rot-analise { display: inline; } }
/* W8 (só no Painel por enquanto): quatro tamanhos de letra e menos negrito; o valor continua forte */
:root { --t-xs: 11px; --t-s: 12px; --t-m: 13px; --t-l: 14px; }
.painel-hub-caixa .kpi.kpi-painel .rotulo { font-size: var(--t-s); font-weight: 500; }
.painel-hub-caixa .kpi.kpi-painel .var { font-size: var(--t-xs); font-weight: 600; }
.painel-hub-caixa .kpi.kpi-painel .detalhe { font-size: var(--t-xs); }
.painel-hub-caixa .painel-grupo .cab-grupo { font-size: var(--t-l); }
.painel-hub-caixa .painel-grupo .cab-grupo .nome { font-weight: 700; }
.painel-hub-caixa .painel-grupo .cab-grupo .desc { font-size: var(--t-s); }
.painel-hub-caixa .hub-rot { font-size: var(--t-m); font-weight: 500; }
.painel-hub-caixa .hub-var { font-size: var(--t-s); font-weight: 600; }
.painel-hub-caixa .hub-per, .painel-hub-caixa .hub-btn { font-size: var(--t-s); }
.painel-barra .chip-status, .painel-barra .chip-status strong { font-size: var(--t-s); }
.painel-barra .chip-status strong { font-weight: 500; }
/* W10: período resumido num botão; no celular ele abre uma folha por baixo com o mesmo controle (no computador, nada muda) */
.seletor-periodo .periodo-resumo, .seletor-periodo .periodo-fundo, .seletor-periodo .periodo-titulo { display: none; }
.seletor-periodo .periodo-campos { display: contents; }
.menu-conta-celular:empty { display: none; }
@media (max-width: 800px) {
  /* Testeira de uma linha: título e (i) à esquerda, alertas e conta à direita; empresa e Perguntar vão para o menu da conta */
  .topo { flex-wrap: nowrap; min-height: 56px; padding: 8px 12px; gap: 6px; }
  .topo .tela-cab { flex: 1 1 0; min-width: 0; }
  .topo .topo-espaco { display: none; }
  .topo .titulo-pagina { font-size: 17px; }
  .sino, .avatar { width: 36px; height: 36px; min-height: 0; }
  .menu-conta { width: min(300px, calc(100vw - 24px)); }
  .menu-conta-celular { display: grid; gap: 8px; padding: 4px 4px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
  .menu-conta-celular .seletor-empresa { order: 0; flex: none; width: 100%; height: 40px; }
  .menu-conta-celular .seletor-empresa select { max-width: none; flex: 1; }
  .menu-conta .menu-conta-celular #btn-perguntar { width: 100%; justify-content: center; color: #fff; background: var(--accent-escuro); border-radius: var(--radius-p); font-weight: 600; padding: 0 14px; display: inline-flex; }
  .menu-conta-celular #btn-perguntar .rot-longo { display: inline; }
  .seletor-periodo { margin-bottom: 10px; }
  .seletor-periodo .periodo-resumo { display: inline-flex; }
  .seletor-periodo .periodo-campos { display: none; }
  .seletor-periodo.folha-aberta .periodo-fundo { display: block; position: fixed; inset: 0; background: rgba(11, 10, 14, 0.45); z-index: 190; animation: ws-esmaece 200ms ease-out; }
  .seletor-periodo.folha-aberta .periodo-campos { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; background: var(--card); border-radius: 16px 16px 0 0; padding: 14px 16px calc(18px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -10px 40px rgba(0,0,0,.25); animation: ws-folha-sobe 240ms cubic-bezier(.32, .72, 0, 1); }
  .seletor-periodo.folha-aberta .periodo-titulo { display: flex; align-items: center; justify-content: space-between; flex-basis: 100%; font-weight: 700; font-size: 15px; }
  /* Painel: botão do período e os dois chips de status numa faixa compacta */
  .painel-barra { gap: 8px; align-items: stretch; }
  .painel-barra .seletor-periodo { flex-basis: 100%; margin-bottom: 0; }
  .painel-status { flex-wrap: nowrap; width: 100%; }
  .painel-status .chip-status { flex: 1 1 0; min-width: 0; padding: 6px 10px; }
  .painel-status .chip-status > span:last-child { min-width: 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
}
@keyframes ws-folha-sobe { from { transform: translateY(100%); } }

/* Premissas do planejamento (1.6): grade de digitação mês a mês */
.grade-premissas td { padding: 4px 6px; vertical-align: middle; }
.grade-premissas th .sub, .grade-premissas td .sub { font-size: 10.5px; font-weight: 400; color: var(--muted); text-transform: none; letter-spacing: 0; }
/* Cabeçalho de cada grupo da DRE (RECEITA BRUTA, (-) DEDUÇÕES, (-) DESPESAS...): faixa forte com o total do grupo, para separar um grupo do outro */
.grade-premissas tr.grupo-dre td { background: #F3DCCB; color: var(--accent-escuro); font-weight: 800; font-size: 13px; padding: 9px 10px; border-top: 2px solid var(--accent); border-bottom: 1px solid #E9C3A8; font-variant-numeric: tabular-nums; }
.grade-premissas tr.grupo-dre td:first-child { background: #F3DCCB; text-transform: uppercase; letter-spacing: 0.03em; }
.grade-premissas tr.grupo-dre td.fechado { background: #EDD3BF !important; color: var(--accent-escuro); }
.grade-premissas tbody tr.grupo-dre:hover td { background: #F3DCCB; }
.grade-premissas .seta-recolher { border: 0; background: none; cursor: pointer; width: 20px; padding: 0; margin-right: 4px; font-size: 12px; color: inherit; line-height: 1; }
.grade-premissas .seta-recolher:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 4px; }
.barra-recolher { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.grade-premissas tr.conta td { background: #FFFDF9; border-top: 1px solid var(--line-forte); }
.grade-premissas tr.conta td.calc { font-variant-numeric: tabular-nums; color: var(--tab-texto); }
.grade-premissas tr.item td { font-weight: 600; font-size: 12.5px; padding-top: 8px; color: var(--tab-texto-suave); }
.grade-premissas .nome-conta { font-weight: 700; }
.grade-premissas .metodo { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.grade-premissas .dica { font-size: 11.5px; margin-top: 3px; }
.grade-premissas select.entrada.pequena { height: 30px; min-width: 0; font-size: 12.5px; padding: 0 6px; }
.grade-premissas .rotulo-campo { font-size: 12.5px; }
.grade-premissas input.celula { width: 96px; height: 30px; border: 1px solid var(--line); border-radius: 6px; padding: 0 6px; text-align: right; font-size: 12.5px; background: #fff; color: var(--ink); font-variant-numeric: tabular-nums; }
.grade-premissas input.celula:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.grade-premissas input.celula:disabled { background: transparent; border-color: transparent; color: var(--muted); }
.grade-premissas .fechado { background: #F4EFE6 !important; color: var(--muted); }
.etiqueta.base-zero { background: var(--accent-escuro); color: #fff; border-color: var(--accent-escuro); }
/* Justificativa por conta (orçamento base zero e regra de justificativa, 23/10/2026) */
.grade-premissas .justificativa-conta { margin-top: 6px; max-width: 360px; }
.grade-premissas .rotulo-justificativa { font-size: 11.5px; font-weight: 600; color: var(--tab-texto-suave); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 3px; }
.grade-premissas .justificativa-conta textarea { width: 100%; min-width: 240px; min-height: 52px; height: auto; padding: 6px 8px; font-size: 12.5px; line-height: 1.35; font-weight: 400; resize: vertical; border: 1px solid var(--line-forte); border-radius: 6px; background: #fff; color: var(--ink); }
.grade-premissas .justificativa-conta textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.texto-justificativa { font-size: 12.5px; white-space: pre-wrap; max-width: 420px; }
.tabela-justificativas tr.falta-justificativa td { background: var(--ruim-bg); }
.grade-premissas .btn-mini { border: 1px solid var(--line-forte); background: #fff; border-radius: 6px; height: 22px; min-width: 22px; padding: 0 5px; margin-left: 4px; font-size: 11.5px; font-weight: 700; color: var(--muted); cursor: pointer; }
.grade-premissas .btn-mini:hover, .grade-premissas .btn-mini:focus-visible { color: var(--accent-escuro); border-color: var(--accent-escuro); }
@media (max-width: 800px) { .grade-premissas input.celula { width: 84px; } .grade-premissas tbody td:first-child { min-width: 180px; } }
.tab td.destaque-col { background: var(--accent-soft) !important; font-weight: 700; }
.kpi-linhas { margin-top: 8px; font-size: 12.5px; color: var(--muted); display: grid; gap: 3px; }
.kpi-linhas > div { display: flex; justify-content: space-between; gap: 10px; font-variant-numeric: tabular-nums; }
.kpi-linhas > div > span:last-child { color: var(--tab-texto); text-align: right; }
.kpi-linhas > div.fav > span:last-child { color: var(--bom); font-weight: 700; } .kpi-linhas > div.desfav > span:last-child { color: var(--ruim); font-weight: 700; }
.kpi-linhas > div.fav, .kpi-linhas > div.desfav { border-top: 1px solid var(--line); padding-top: 4px; margin-top: 2px; }
.kpi .valor .neg, .kpi-linhas .neg { color: var(--ruim); }

/* Metas de impacto por parceiro no cartão do Painel (tarefa 150) */
.kpi .parceiros-meta { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 6px; display: grid; gap: 6px; font-size: 12px; }
.kpi .parceiros-meta .tit { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.kpi .parceiros-meta .lin { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; }
.kpi .parceiros-meta .lin .nome { font-weight: 700; color: var(--ink); }
.kpi .parceiros-meta .lin .nome, .kpi .parceiros-meta .lin .ln { grid-column: 1; }
.kpi .parceiros-meta .lin .ln { color: var(--tab-texto-suave); font-variant-numeric: tabular-nums; }
.kpi .parceiros-meta .lin .etiqueta { grid-column: 2; grid-row: 1 / span 3; align-self: center; font-size: 11px; }
.kpi .parceiros-meta .barra { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.kpi .parceiros-meta .barra span { display: block; height: 100%; background: var(--accent); }

/* Marcos com parcela condicionada (tarefa 251): medidor linear por meta, com a marca do ritmo esperado */
.marcos-parceiros .mp-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.marcos-parceiros .mp-parceiro { border: 1px solid var(--line); border-radius: var(--radius-p); padding: 12px 14px; display: grid; gap: 10px; }
.marcos-parceiros .mp-cab { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.marcos-parceiros .mp-cab strong { font-size: 15px; }
.marcos-parceiros .mp-cab .muted { font-size: 12px; }
.marcos-parceiros .mp-marco { font-size: 13px; color: var(--tab-texto); }
.marcos-parceiros .mp-ind { display: grid; gap: 4px; }
.marcos-parceiros .mp-rot { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.marcos-parceiros .mp-nome { font-weight: 700; color: var(--ink); }
.marcos-parceiros .mp-num { color: var(--tab-texto-suave); font-variant-numeric: tabular-nums; text-align: right; }
.marcos-parceiros .mp-trilho { position: relative; height: 10px; border-radius: 5px; background: var(--line); }
.marcos-parceiros .mp-feito { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: var(--accent); }
.marcos-parceiros .mp-esperado { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink); box-shadow: 0 0 0 2px var(--card); }
.marcos-parceiros .mp-leg { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.marcos-parceiros .mp-leg .etiqueta { font-size: 11px; white-space: nowrap; }
.marcos-parceiros .mp-vencidos { border-top: 1px solid var(--line); padding-top: 8px; font-size: 12px; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.marcos-parceiros .mp-chip { white-space: nowrap; color: var(--tab-texto-suave); }
.marcos-parceiros .mp-chip .etiqueta { font-size: 11px; margin-left: 2px; }
.lancar-metas td input.entrada { width: 64px; min-width: 0; text-align: right; }
.marcos-form .mf-linha { display: grid; grid-template-columns: 126px 126px repeat(3, minmax(64px, 1fr)) 96px 70px 126px 32px; gap: 6px; align-items: end; margin-bottom: 6px; }
.marcos-form .mf-linha label { font-size: 11.5px; color: var(--muted); display: grid; gap: 2px; min-width: 0; }
.marcos-form .mf-linha label > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marcos-form .mf-linha input, .marcos-form .mf-linha select { width: 100%; min-width: 0; }
.marcos-form .mf-linha .mf-remover { padding: 0; height: 34px; width: 32px; font-size: 16px; line-height: 1; }
@media (max-width: 900px) { .marcos-form .mf-linha { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Tela de carregamento da empresa com barra de progresso (U7): mesma barra fina das metas por parceiro */
.carregando { max-width: 420px; padding: 24px 0; }
.carregando p { margin: 0 0 10px; }
.carregando .barra { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.carregando .barra span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .25s ease; }
.carregando .detalhe { margin: 8px 0 0; font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* Simulador de Cenários de Caixa para ONG */
.sim-ong .so-alavanca { border: 1px solid var(--line); border-radius: var(--radius-p); padding: 10px 12px; margin-bottom: 8px; }
.sim-ong .so-alavanca.ligada { border-color: var(--accent); background: var(--accent-soft); }
.sim-ong .so-alavanca p { margin: 2px 0 6px; font-size: 12.5px; }
.sim-ong .so-alavanca:not(.ligada) .grade { opacity: .6; }
.sim-ong .so-liga { display: flex; gap: 8px; align-items: center; cursor: pointer; }
tr.alerta-linha td { background: var(--ruim-bg); }

/* Aging (CAR e CAP): escala sequencial de atraso nas colunas, uma cor só do claro ao escuro (0-30 até +120); "A vencer" fica neutro.
   Só a célula com valor recebe a cor; o número continua em tinta, e a identidade da coluna vem do cabeçalho e da legenda, não só da cor. */
:root { --aging-0: #EFEDE7; --aging-1: #FBE4DC; --aging-2: #FADBD2; --aging-3: #F5BFB1; --aging-4: #EE9A86; --aging-5: #E3705B; }
.aging-n0 { --aging-cor: var(--aging-0); } .aging-n1 { --aging-cor: var(--aging-1); } .aging-n2 { --aging-cor: var(--aging-2); }
.aging-n3 { --aging-cor: var(--aging-3); } .aging-n4 { --aging-cor: var(--aging-4); } .aging-n5 { --aging-cor: var(--aging-5); }
.tab td.aging-cel { background: var(--aging-cor); }
.chip-aging { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; background: var(--aging-cor); border: 1px solid rgba(28, 26, 24, 0.12); }
.legenda-aging { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 12px; color: var(--muted); padding: 0 2px 8px; }
.legenda-aging strong { color: var(--tab-texto-suave); font-weight: 600; }

/* Conciliação: regra "soma de N linhas" abre as linhas somadas logo abaixo do par */
.link-soma { background: none; border: 0; padding: 0; font: inherit; color: var(--accent-escuro); cursor: pointer; text-align: left; }
.link-soma:hover { text-decoration: underline; }
.link-soma:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.link-soma[aria-expanded="true"] { font-weight: 600; }
tr.linhas-soma > td { background: var(--bg); padding: 8px 12px 12px; }
tr.linhas-soma .tab { font-size: 0.95em; }

/* ---------- Painel: cartões agrupados por tipo de análise (17/10/2026) ---------- */
/* A cor de cada grupo vem de WS.indicadores.GRUPOS_PAINEL (--grupo, paleta categórica validada); o texto fica nas cores de texto. */
/* Painel em volta da receita (17/10/2026): destaque central, grupos coloridos à esquerda, à direita e abaixo, ligados por linhas finas */
.painel-barra { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; margin-bottom: 12px; }
.painel-barra > :first-child { margin-bottom: 0; }
.painel-status { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-status { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--tab-texto); text-decoration: none; font-size: 12px; line-height: 1.25; }
.chip-status strong { display: block; font-size: 12px; color: var(--muted); font-weight: 600; }
.chip-status > span:last-child > span { font-weight: 700; color: var(--ink); }
.chip-status .ponto { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; background: var(--bom); box-shadow: 0 0 0 3px var(--bom-bg); }
.chip-status.pend .ponto { background: var(--alerta); box-shadow: 0 0 0 3px var(--alerta-bg); }
.chip-status:hover { border-color: var(--line-forte); }
.painel-hub-caixa { container-type: inline-size; margin-bottom: 18px; }
.painel-hub { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.painel-hub .col-hub { display: flex; flex-direction: column; gap: 16px; min-width: 0; position: relative; z-index: 1; }
/* Coluna única: as colunas somem e a ordem é destaque, grupos dos lados e, por último, Operação */
.painel-hub .col-hub { display: contents; }
.painel-hub .hub { order: -1; }
.painel-hub .col-centro .painel-grupo, .painel-hub .col-baixo .painel-grupo { order: 5; }
.painel-hub svg.ligacoes { display: none; position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: visible; }
.painel-hub svg.ligacoes path { fill: none; stroke-width: 1.5; opacity: .55; }
@container (min-width: 960px) {
  .painel-hub { grid-template-columns: minmax(0, 1fr) 290px minmax(0, 1fr); column-gap: 40px; align-items: start; }
  .painel-hub .col-hub { display: flex; }
  .painel-hub .hub, .painel-hub .col-centro .painel-grupo { order: 0; }
  .painel-hub .col-centro { padding-top: 24px; }
  .painel-hub .col-baixo { grid-column: 1 / -1; padding-top: 8px; }
  .painel-hub .col-baixo .painel-grupo .grade-grupo { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .painel-hub svg.ligacoes { display: block; }
}
.hub { display: flex; justify-content: center; }
.hub-anel { width: 270px; height: 270px; border-radius: 50%; padding: 9px; box-shadow: 0 6px 24px rgba(28, 26, 24, .10); }
.hub-miolo { width: 100%; height: 100%; border-radius: 50%; background: var(--card); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 5px; padding: 18px; }
.hub-ico .ico-svg { width: 22px; height: 22px; color: var(--accent-escuro); }
.hub-rot { font-size: 13px; font-weight: 600; color: var(--tab-texto); }
.hub-valor { font-size: 23px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; line-height: 1.15; }
.hub-var { font-size: 12px; font-weight: 700; }
.hub-var.ok { color: var(--bom); } .hub-var.nok { color: var(--ruim); } .hub-var.neutro { color: var(--muted); }
.hub-per { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.hub-per .ico-svg { width: 14px; height: 14px; }
.hub-btn { margin-top: 4px; background: var(--ink); color: #fff; border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 700; text-decoration: none; }
.hub-btn:hover { background: var(--tab-texto); }
.painel-grupo { margin: 0; border: 1px solid color-mix(in srgb, var(--grupo) 35%, var(--card)); background: color-mix(in srgb, var(--grupo) 6%, var(--card)); border-radius: var(--radius); padding: 12px; }
.painel-grupo .cab-grupo { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 10px; font-size: 14px; color: var(--tab-texto); text-transform: none; letter-spacing: 0; }
.painel-grupo .cab-grupo .nome { font-weight: 800; color: color-mix(in srgb, var(--grupo) 55%, var(--ink)); }
.painel-grupo .cab-grupo .ico-grupo { width: 26px; height: 26px; border-radius: 50%; background: var(--grupo); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.painel-grupo .cab-grupo .ico-grupo .ico-svg { width: 15px; height: 15px; }
.painel-grupo .cab-grupo .desc { font-weight: 400; color: var(--muted); font-size: 12px; flex-basis: 100%; padding-left: 34px; margin-top: -4px; }
.painel-grupo .grade-grupo { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; }
.col-centro .painel-grupo .grade-grupo { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
.kpi.kpi-painel { padding: 11px 12px 10px; cursor: pointer; display: flex; flex-direction: column; transition: border-color .15s, box-shadow .15s, transform 100ms ease-out; container-type: inline-size; }
.kpi.kpi-painel:hover, .kpi.kpi-painel:focus-visible { border-color: color-mix(in srgb, var(--grupo, var(--accent)) 60%, var(--line)); outline: none; }
.kpi.kpi-painel .rotulo { min-height: 30px; font-size: 11.5px; padding-right: 16px; }
.kpi.kpi-painel .rotulo .marca-alerta { position: static; font-size: 12px; }
.kpi.kpi-painel .valor { font-size: clamp(15px, 9.6cqi, 21px); margin: 2px 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi.kpi-painel .rodape-kpi { display: flex; flex-direction: column; gap: 4px; }
.kpi.kpi-painel .rodape-kpi .spark { align-self: flex-end; }
.kpi.kpi-painel .var { font-size: 11px; font-weight: 700; line-height: 1.3; }
.kpi.kpi-painel .var.ok { color: var(--bom); } .kpi.kpi-painel .var.nok { color: var(--ruim); } .kpi.kpi-painel .var.neutro { color: var(--muted); }
.kpi.kpi-painel .detalhe { font-size: 11.5px; margin-top: 4px; }
.kpi.kpi-painel .detalhe:empty { display: none; }
.kpi.kpi-painel .como { position: absolute; top: 9px; right: 9px; margin: 0; width: 17px; height: 17px; border-radius: 50%; border: 1px solid var(--line-forte); color: var(--muted); font: 700 10px/15px Georgia, serif; text-align: center; padding: 0; background: var(--card); }
.kpi.kpi-painel .como:hover { color: var(--accent-escuro); border-color: var(--accent-escuro); }
.spark { flex: 0 0 auto; overflow: visible; }
.spark .linha { fill: none; stroke: #A79E94; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.spark .ultimo { fill: var(--grupo, var(--accent)); stroke: var(--card); stroke-width: 2; }
.spark .alvos rect { fill: transparent; }
.kpi.com-grupo { box-shadow: var(--sombra); }
.kpi.com-grupo .rotulo .ico-kpi { color: var(--grupo); }
.painel-rodape { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; align-items: center; margin-top: 14px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-p); background: var(--card); font-size: 12px; color: var(--muted); }
.painel-rodape > span { display: flex; align-items: center; gap: 6px; }
.painel-rodape .ico-svg { width: 14px; height: 14px; }
.painel-rodape a { font-weight: 700; color: var(--accent-escuro); }

/* ---------- Balancete: contas sintéticas em negrito, analíticas recuadas pelo nível do código (17/10/2026) ---------- */
.cartao-balancete .tab tr.grupo-conta td { font-weight: 700; background: #FBF7F0; }
.cartao-balancete .tab tr.grupo-conta td:first-child { background: #FBF7F0; }
/* Simulador: o diagrama do ciclo (o mesmo da Análise de DFC e NCG) num cartão largo não passa de 760 px, para não crescer demais */
.sim-diagrama-ciclo { max-width: 760px; }

/* ---------- Estoque gerencial (17/10/2026) ---------- */
.tag-abc { display: inline-block; min-width: 22px; text-align: center; border-radius: 6px; padding: 1px 6px; font-weight: 700; font-size: 12px; background: #F1EBE0; color: var(--tab-texto); }
.tag-abc.abc-A { background: #FCE3D6; color: var(--accent-escuro); }
.tag-abc.abc-B { background: #FBEBD0; color: #8A5A0B; }
.margem-produto tr.subtotal.clicavel { cursor: pointer; }
/* Estoque > Configuração: créditos da compra como opções em pílula (17/10/2026) */
.opcoes-credito { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.opcoes-credito label { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border: 1px solid var(--line-forte); border-radius: 999px; background: var(--card); font-size: 13px; font-weight: 600; color: var(--tab-texto); cursor: pointer; transition: border-color .15s, background .15s; }
.opcoes-credito label:hover { border-color: var(--accent); }
.opcoes-credito label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.campo .opcoes-credito input[type="checkbox"] { width: 16px; height: 16px; min-width: 0; min-height: 0; margin: 0; padding: 0; flex: none; border: 0; accent-color: var(--accent-escuro); }
.opcoes-credito label { flex: none; width: auto; }
.dica-credito { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }
.dica-credito strong { color: var(--tab-texto); font-weight: 600; }

/* ---------- Vídeos dentro do app (21/10/2026, assinatura e EdN): botões da testeira, biblioteca, player e "Assista primeiro" ---------- */
/* Ícone oficial do YouTube, sem alteração de cor nem de proporção */
.ico-yt { width: 22px; height: auto; flex: none; display: block; }
.videos-tela { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.videos-tela:empty { display: none; }
.btn-video { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px 0 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.btn-video:hover { border-color: var(--line-forte); background: var(--bg); }
.btn-video .rot-curto { display: none; }
@container (max-width: 1100px) { .topo .btn-video .rot-curto { display: inline; } }
.ajuda .link-videos { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.ajuda .link-videos[hidden] { display: none; }
.modal-video .modal { max-width: 980px; }
.video-player { position: relative; width: min(100%, calc(60vh * 16 / 9)); aspect-ratio: 16 / 9; margin: 0 auto; background: #000; border-radius: 10px; overflow: hidden; }
.video-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-nota { font-size: 12.5px; margin: 10px 0 0; }
.video-progresso { margin: 0 0 12px; }
.lista-videos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.video-item { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; }
.video-item.visto .video-abrir { border-color: var(--bom-borda); }
.video-abrir { flex: 1 1 260px; min-width: 0; display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-p); background: var(--card); color: var(--ink); font: inherit; cursor: pointer; }
.video-abrir:hover { border-color: var(--accent); background: var(--accent-soft); }
.video-titulo { flex: 1; min-width: 0; font-weight: 600; }
.video-dur { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.video-visto { display: inline-flex; align-items: center; gap: 4px; border: 0; background: var(--bom-bg); color: var(--bom); border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 12px; font-weight: 700; }
button.video-visto { cursor: pointer; }
.video-visto .ico-svg { width: 14px; height: 14px; }
.grupo-videos { margin: 16px 0 8px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.assista-primeiro { margin: 10px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.link-video { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0; color: var(--accent-escuro); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-align: left; }