/* 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); }

/* ---------- Estrutura ---------- */
.app { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.lateral { background: var(--dark); color: var(--dark-text); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.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-2); }
.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); }

.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; }
.topo .titulo-pagina { font-weight: 700; font-size: 15px; margin-right: auto; }
.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; }
.usuario { font-size: 12.5px; color: var(--muted); text-align: right; line-height: 1.2; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1100px) { .usuario { display: none; } }
.usuario strong { color: var(--ink); display: block; font-size: 13px; }
.faixa-demo { background: var(--gold-soft); color: #6B4A10; border-bottom: 1px solid #F0D9A8; padding: 7px 24px; font-size: 12.5px; font-weight: 600; }
.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) { .app { grid-template-columns: 1fr; } .lateral { position: static; height: auto; } .g2, .g3, .g4 { grid-template-columns: 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); }
.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; }
.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); }
.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); }
.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); }
#status-dados a { color: var(--bom); font-weight: 600; }
#status-dados .pendente { color: var(--alerta); font-weight: 700; }
.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: var(--muted); 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: var(--muted); }

/* 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; }
.topo .titulo-pagina { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
.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 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; }

/* 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); }

/* 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, .topo, .faixa-demo, .acoes, .filtros, .btn, .sino { 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; }
/* Botão do menu: só no celular */
.btn-menu { display: none; }
.fundo-menu { display: none; }
@media (max-width: 800px) {
  /* Celular: o menu lateral vira gaveta e o conteúdo aparece primeiro (diretriz content-priority) */
  .btn-menu { display: inline-flex; }
  .lateral { position: fixed; top: 0; left: 0; bottom: 0; width: min(300px, 86vw); height: 100%; z-index: 150; transform: translateX(-100%); visibility: hidden; transition: transform .2s ease-out, visibility 0s linear .2s; box-shadow: 0 0 40px rgba(0,0,0,.35); }
  body.menu-aberto .lateral { transform: none; visibility: visible; transition: transform .2s ease-out; }
  body.menu-aberto .fundo-menu { display: block; position: fixed; inset: 0; background: rgba(11, 10, 14, 0.55); z-index: 140; }
  .topo { gap: 8px; }
  .topo .titulo-pagina { max-width: none; flex: 1 1 120px; }
  .seletor-empresa { order: 5; flex: 1 1 100%; }
  .seletor-empresa select { max-width: none; flex: 1; }
  #btn-perguntar { order: 6; flex: 1 1 100%; justify-content: center; }
  .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; }
}

/* 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); }
.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); }