/* Gastos T.I · identidade Mãe Rainha: azul-marinho, Open Sans e Sora (as fontes do site). */
:root {
  --bg: #f7f9fc; --surface: #fff; --soft: #f0f5fb; --track: #dce8f5;
  --ink: #0e1b33; --ink2: #2a3a5a; --head: #001e40; --mute: #5a6475; --link: #003d7a;
  --line: #003d7a1a; --line-strong: #003d7a2e; --line-input: #003d7a8f;
  --marca: #162a43; /* cor de fundo do logo: menu, painel do login e cartão do Início */
  --accent: #003d7a; --oe: #1d4d85; --ar: #f2a93b; --serie-ar: #9cc3ea;
  --c0: #001e40; --c1: #1758a0; --c2: #8fb5e6; --c3: #2e9e8f; --c4: #8a93a3;
  --warn-bg: #fef3c7; --warn-fg: #7a3a06; --ok-bg: #e5f4ea; --ok-fg: #116932; --bad-bg: #fee2e2; --bad-fg: #b91c1c;
  --sombra: 0 4px 14px #003d7a12, 0 2px 5px #003d7a0a;
}
[data-theme="dark"] {
  --bg: #0a1628; --surface: #10233f; --soft: #14305a; --track: #1f3d68;
  --ink: #e6edf7; --ink2: #c3d1e6; --head: #f1f5fb; --mute: #a3b3ca; --link: #8fb5e6;
  --line: #ffffff1f; --line-strong: #ffffff38; --line-input: #ffffff59;
  --accent: #1758a0; --oe: #5b93d6; --serie-ar: #bcd4ef;
  --c0: #e0eaf7; --c1: #5b93d6; --c2: #2f67a8; --c3: #3fc1b4; --c4: #9aa5b8;
  --warn-bg: #4a3a14; --warn-fg: #fcd98a; --ok-bg: #123d2a; --ok-fg: #8fdcb0; --bad-bg: #4a1d1d; --bad-fg: #f5a3a3;
  --sombra: 0 4px 14px #00000040;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; } /* nenhuma regra de display (ex.: .ranking, .acoes) pode revelar um elemento escondido */
body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Open Sans', system-ui, sans-serif; font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
h1, h2 { font-family: 'Sora', 'Open Sans', sans-serif; color: var(--head); margin: 0; letter-spacing: -0.01em; }
h1 { font-size: 28px; font-weight: 600; }
h2 { font-size: 18px; font-weight: 600; }
a { color: var(--link); text-decoration: none; }
code { background: var(--soft); padding: 1px 6px; border-radius: 6px; font-size: 13px; }
:focus-visible { outline: 2px solid #4885cc; outline-offset: 2px; }

/* botões e formulários */
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; padding: 0 20px; border-radius: 12px; border: 1px solid transparent; font: inherit; font-weight: 600; cursor: pointer; }
.btn-auto { width: auto; display: inline-flex; }
.btn-primario { background: var(--accent); color: #fff; box-shadow: inset 0 1px #ffffff1a, 0 1px 2px #003d7a33; }
.btn-secundario { background: var(--surface); color: var(--link); border-color: var(--line-strong); }
.btn-mini { min-height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--link); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.btn-perigo { color: var(--bad-fg); }
.btn-tema { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.icone-sol { display: none; }
[data-theme="dark"] .icone-sol { display: inline; }
[data-theme="dark"] .icone-lua { display: none; }
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.campo[hidden] { display: none; }
.campo label { font-size: 14px; font-weight: 700; color: var(--link); }
.campo-arquivo { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.campo-arquivo:focus + .btn { outline: 2px solid #4885cc; outline-offset: 2px; }
.campo:has(.campo-arquivo) { align-items: flex-start; }
.entrada { position: relative; }
.entrada > svg { position: absolute; left: 14px; top: 15px; color: var(--mute); }
.entrada input, .entrada select { width: 100%; height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-input); background: var(--surface); color: var(--ink); font: inherit; }
.login .entrada input[type="email"], .login .entrada input[type="password"], .login .entrada input[type="text"] { padding-left: 46px; padding-right: 52px; }
.ver-senha { position: absolute; right: 2px; top: 2px; width: 44px; height: 44px; border: 0; background: transparent; color: var(--mute); border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1; }
input[type="password"]::-ms-reveal, input[type="password"]::-ms-clear { display: none; }
input[type="password"]::-webkit-credentials-auto-fill-button { visibility: hidden; display: none !important; pointer-events: none; position: absolute; right: 0; }
.dica { font-size: 12px; color: var(--mute); }
.aviso { padding: 12px 16px; border-radius: 12px; font-size: 14px; font-weight: 600; margin-bottom: 14px; }
.aviso-ok { background: var(--ok-bg); color: var(--ok-fg); }
.aviso-erro { background: var(--bad-bg); color: var(--bad-fg); }

/* login (divisão em dois painéis) */
.login { min-height: 100vh; display: flex; flex-wrap: wrap; }
.login-lado { flex: 1 1 420px; min-height: 480px; position: relative; overflow: hidden; background: var(--marca); color: #fff; display: flex; align-items: center; justify-content: center; padding: 56px 48px; }
.login-linhas { position: absolute; inset: 0; width: 100%; height: 100%; }
.login-lado-conteudo { position: relative; max-width: 420px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.login-logo { display: block; }
.login-lado h2 { color: #fff; font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 36px; line-height: 1.15; }
.login-lado h2 strong { font-weight: 800; }
.login-lado p { margin: 0; color: #ffffffa6; line-height: 1.65; }
.login-form { flex: 1 1 420px; position: relative; display: flex; align-items: center; justify-content: center; padding: 64px 32px 32px; background: var(--bg); }
.login-tema { position: absolute; top: 12px; right: 12px; }
.login-caixa { width: 100%; max-width: 432px; }
.login-caixa h1 { text-align: center; color: var(--link); font-size: 30px; margin-bottom: 22px; }
.login-sub { text-align: center; color: var(--mute); font-size: 14px; margin: 4px 0 22px; }
.linha-opcoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; margin-bottom: 14px; }
.caixinha { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink2); cursor: pointer; }
.caixinha input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }
.link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.ou { display: flex; align-items: center; gap: 14px; color: var(--mute); font-size: 12px; font-weight: 600; margin: 16px 0; }
.ou::before, .ou::after { content: ""; flex: 1; height: 1px; background: var(--line-strong); }
.login-rodape { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin-top: 22px; font-size: 12px; color: var(--mute); }

/* painel com menu lateral */
.painel { min-height: 100vh; display: flex; flex-wrap: wrap; align-items: stretch; }
.menu { flex: 0 0 248px; background: var(--marca); color: #fff; display: flex; flex-direction: column; gap: 4px; padding: 16px 12px; }
.menu-logo { display: flex; justify-content: center; padding: 4px 0 18px; }
.menu-logo img { display: block; }
.menu-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px; border-radius: 10px; color: #fff; font: inherit; font-size: 14px; font-weight: 600; background: transparent; border: 0; cursor: pointer; text-align: left; }
.menu-item.ativo { background: #1e4489; }
.menu-item:hover { background: #ffffff1a; }
.menu-grupo { display: flex; flex-direction: column; gap: 4px; }
.menu-grupo-titulo { justify-content: flex-start; }
.menu-grupo-titulo .menu-seta { margin-left: auto; flex: none; transition: transform .15s ease; }
.menu-grupo-titulo[aria-expanded="true"] .menu-seta { transform: rotate(180deg); }
.menu-grupo-itens { display: flex; flex-direction: column; gap: 4px; padding-left: 10px; }
.menu-grupo-itens[hidden] { display: none; }
.menu-espaco { flex: 1 1 auto; min-height: 24px; }
.conteudo { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; }
.topo { background: var(--surface); border-bottom: 1px solid var(--line); min-height: 56px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 6px 24px; }
.trilha { font-size: 13px; color: var(--mute); }
.trilha strong { color: var(--ink); }
.topo-direita { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.topo-usuario { font-size: 12px; color: var(--mute); }
.principal { width: 100%; padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.titulo-pagina .sub, .sub { color: var(--mute); font-size: 13px; margin-top: 2px; }
.titulo-com-acao { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; }
.cartao { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; box-shadow: var(--sombra); }
.cartao-estreito { max-width: 520px; }
.cartao h2 + .sub { margin-bottom: 12px; }
.filtros { display: flex; flex-wrap: wrap; gap: 6px; }
.filtro { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-weight: 600; font-size: 13px; }
.filtro.ativo { background: var(--accent); border-color: var(--accent); color: #fff; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.kpis-5 { grid-template-columns: repeat(5, 1fr); }
.kpis-5 .kpi { padding: 14px 14px; }
.kpis-5 .kpi-valor { font-size: clamp(16px, 1.6vw, 28px); }
@media (max-width: 760px) { .kpis-5 { grid-template-columns: repeat(2, 1fr); } .kpis-5 .kpi-valor { font-size: 22px; } }
@media (max-width: 420px) { .kpis-5 { grid-template-columns: 1fr; } }
.kpi { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--head); border-radius: 16px; padding: 18px 22px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 6px; }
.kpi-ar { border-top-color: var(--ar); }
.kpi-rotulo { font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--mute); }
.kpi-valor { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 28px; color: var(--head); line-height: 1.2; }
.kpi-valor small { font-family: 'Open Sans', sans-serif; font-size: 15px; color: var(--mute); }
.kpi-sub { font-size: 13px; color: var(--mute); }
.duas-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px; }
.tabela { width: auto; min-width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela th { text-align: left; color: var(--mute); font-size: 11px; letter-spacing: .6px; text-transform: uppercase; padding: 10px 8px; border-bottom: 2px solid var(--track); }
.tabela td { padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.dir { text-align: right !important; }
.vazio { text-align: center; color: var(--mute); padding: 20px 8px !important; }
.rolagem { overflow-x: auto; }
.acoes { display: flex; flex-wrap: nowrap; gap: 6px; justify-content: flex-end; }
.acoes form { margin: 0; }
.etiqueta { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; text-align: center; white-space: nowrap; }
.etiqueta-oe { background: var(--track); color: var(--link); }
.etiqueta-ar, .etiqueta-inativo { background: var(--warn-bg); color: var(--warn-fg); }
.etiqueta-ok { background: var(--ok-bg); color: var(--ok-fg); }
.passos { margin: 0; padding-left: 20px; line-height: 1.8; color: var(--ink2); }
.rodape { font-size: 12px; color: var(--mute); padding-bottom: 12px; }
.erro { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 24px; }
.erro img { border-radius: 16px; }
.erro p { color: var(--mute); margin: 0 0 8px; }

/* filtros, gráfico e telas por categoria / lançamentos */
.filtros-grupo { display: flex; flex-wrap: wrap; gap: 16px 32px; padding: 16px 20px; }
.filtro-bloco { display: flex; flex-direction: column; gap: 6px; }
.filtro-largo { flex: 1 1 380px; }
.filtro-rotulo { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--mute); }
.grafico-controles { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.legenda { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
.amostra { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.amostra-oe { background: var(--oe); }
.amostra-ar { background: var(--serie-ar); }
.amostra-media { background: none; border-top: 2px dashed var(--mute); width: 14px; height: 0; align-self: center; }
.grafico { display: block; width: 100%; min-width: 560px; height: auto; margin-top: 12px; }
.g-grade { stroke: var(--line); stroke-width: 1; }
.g-eixo { stroke: var(--line-strong); stroke-width: 1; }
.g-valor { fill: var(--mute); font-size: 9px; font-weight: 600; }
.g-rotulo { fill: var(--mute); font-size: 11px; }
.g-atual { fill: var(--ink); font-weight: 700; }
.g-linha { fill: none; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.g-area { stroke-width: 1.25; stroke-linejoin: round; stroke-linecap: round; fill-opacity: .14; transition: fill-opacity .15s ease; }
.g-area-oe { fill: var(--oe); stroke: var(--oe); }
.g-area-ar { fill: var(--serie-ar); stroke: var(--serie-ar); }
.grafico-int[data-ativo="oe"] .g-area-ar, .grafico-int[data-ativo="ar"] .g-area-oe { fill-opacity: .04; }
.g-media { fill: none; stroke: var(--mute); stroke-width: 1; stroke-dasharray: 3 3; }
.g-ponto { r: 2.2px; stroke-width: 1.5; fill: var(--surface); cursor: pointer; outline: none; transition: r .15s ease, opacity .15s ease; }
.g-ponto-oe { stroke: var(--oe); }
.g-ponto-ar { stroke: var(--serie-ar); }
.g-ponto.ativo { r: 4px; }
.grade-aneis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-top: 12px; justify-items: center; }
.anel-item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 8px; border-radius: 14px; cursor: pointer; outline: none; transition: background-color .15s ease, opacity .15s ease; }
.anel-item:hover, .anel-item.ativo, .anel-item:focus-visible { background: var(--soft); }
.anel-svg { width: 116px; height: 116px; }
.anel-fundo { fill: none; stroke: var(--track); stroke-width: 10; }
.anel-frente { fill: none; stroke-width: 10; stroke-linecap: round; transition: stroke-width .15s ease; }
.anel-item.ativo .anel-frente, .anel-item:focus-visible .anel-frente { stroke-width: 12; }
.anel-pct { font-family: 'Sora', sans-serif; font-size: 19px; font-weight: 700; fill: var(--head); }
.anel-valor { font-size: 10px; fill: var(--mute); }
.anel-rotulo { font-size: 13px; font-weight: 600; color: var(--ink2); text-align: center; }
.rosca-linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px clamp(32px, 6vw, 72px); margin-top: 12px; }
.rosca-caixa { position: relative; flex: none; }
.rosca-svg { width: clamp(220px, 22vw, 360px); height: clamp(220px, 22vw, 360px); }
.rosca-fundo { fill: none; stroke: var(--track); stroke-width: 14; }
.rosca-fatia { fill: none; stroke-width: 14; cursor: pointer; outline: none; transition: stroke-width .15s ease, opacity .15s ease; }
.rosca-fatia.ativo, .rosca-fatia:focus-visible { stroke-width: 17; }
.rosca-centro { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 130px; pointer-events: none; }
.rosca-total-rotulo { font-size: 12px; color: var(--mute); }
.rosca-total-valor { font-family: 'Sora', sans-serif; font-size: 17px; font-weight: 700; color: var(--head); }
.legenda-vertical { flex-direction: column; align-items: stretch; gap: 10px; flex: 1 1 320px; }
.legenda-vertical li { justify-content: space-between; }
.grafico-int { position: relative; }
.grafico-int [data-serie] { cursor: pointer; outline: none; transition: opacity .15s ease; }
.grafico-int [data-serie]:focus-visible { outline: 2px solid #4885cc; outline-offset: 1px; }
.grafico-int[data-ativo] [data-serie]:not(.ativo) { opacity: .3; }
.grafico-int .legenda[data-serie], .grafico-int .legenda-lista li[data-serie] { border-radius: 8px; padding: 2px 6px; margin: -2px -6px; }
.grafico-int .legenda[data-serie].ativo, .grafico-int .legenda-lista li[data-serie].ativo { background: var(--soft); opacity: 1; }
.grafico-dica { position: absolute; z-index: 5; transform: translate(-50%, -100%) translateY(-10px); background: var(--marca); color: #fff; font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 8px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .1s ease; box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }
.grafico-dica.visivel { opacity: 1; }
.grade-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px; }
.cartao-cat { display: flex; flex-direction: column; gap: 12px; border-left: 6px solid var(--head); }
.cat-0 { border-left-color: var(--c0); } .cat-1 { border-left-color: var(--c1); } .cat-2 { border-left-color: var(--c2); }
.cat-3 { border-left-color: var(--c3); } .cat-4 { border-left-color: var(--c4); }
.kpi-menor { font-size: 22px; }
.par-valores { display: flex; justify-content: space-between; font-size: 12px; color: var(--mute); }
.tabela-larga { min-width: 760px; }
.nowrap { white-space: nowrap; }
.paginacao { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; }

/* tela Início */
.hero { background: var(--marca); color: #fff; border-radius: 16px; padding: 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 32px 48px; box-shadow: var(--sombra); }
.hero-logo { flex: none; }
.hero-texto { flex: 1 1 360px; display: flex; flex-direction: column; gap: 14px; }
.hero h1 { color: #fff; font-size: 44px; line-height: 1.1; }
.hero p { margin: 0; color: #c3d8eb; font-size: 16px; line-height: 1.6; max-width: 560px; }
.hero-botoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.hero-botao { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 12px; font-weight: 700; font-size: 15px; }
.hero-botao-claro { background: #fff; color: #003d7a; }
.hero-botao-contorno { border: 1px solid #ffffff59; color: #fff; font-weight: 600; }
.cartoes-inicio { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.cartao-link { display: flex; flex-direction: column; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 24px; box-shadow: var(--sombra); color: inherit; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.cartao-link:hover { border-color: var(--link); box-shadow: 0 10px 24px #003d7a1f, 0 3px 8px #003d7a14; transform: translateY(-3px); }
.cartao-link:hover .cartao-icone { background: var(--link); color: #fff; }
.cartao-link:focus-visible { outline: 2px solid #4885cc; outline-offset: 2px; }
.cartao-icone { width: 44px; height: 44px; border-radius: 12px; background: var(--soft); color: var(--link); display: flex; align-items: center; justify-content: center; transition: background-color .15s ease, color .15s ease; }
.cartao-titulo { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 20px; color: var(--head); }
.cartao-texto { font-size: 14px; line-height: 1.55; color: var(--mute); }
.trilha a { color: var(--mute); }

/* carrossel do login (igual ao exemplo: dois slides, pontos e troca automática) */
.carrossel { display: grid; }
.slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility .6s ease; }
.slide.ativo { opacity: 1; visibility: visible; }
.carrossel-pontos { display: flex; justify-content: center; align-items: center; margin-top: 4px; }
.ponto { position: relative; width: 28px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.ponto::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 999px; background: #ffffff59; transform: translate(-50%, -50%); transition: width .3s ease, background .3s ease; }
.ponto.ativo::after { width: 26px; background: #4885cc; }
@media (prefers-reduced-motion: reduce) { .slide, .ponto::after { transition: none; } }
.slide h2 + p { margin-top: 22px; }

/* filtros em lista suspensa, pesquisa, gráficos em barras e aba Alimentar */
.filtros-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 20px; padding: 16px 20px; }
.campo-filtro { display: flex; flex-direction: column; gap: 6px; min-width: 150px; }
.campo-filtro label { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--mute); }
.campo-filtro select, .campo-filtro input, .campo select, .campo input[type="text"], .campo input[type="date"], .campo input[type="datetime-local"], .campo input[type="file"] {
  min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line-input); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; width: 100%; }
.campo-busca { flex: 1 1 260px; }
.campo-acoes { flex-direction: row; align-items: center; gap: 12px; }
.ranking { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.rank-topo { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.rank-nome { font-weight: 600; overflow-wrap: anywhere; }
.rank-valor { font-weight: 700; white-space: nowrap; color: var(--head); }
.rank-sub { font-size: 12px; color: var(--mute); margin-top: 2px; }
.barra-rank { width: 100%; height: 10px; margin-top: 6px; border-radius: 999px; background: var(--track); overflow: hidden; }
.barra-rank-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--link)); transition: width .5s ease, filter .15s ease; }
.ranking li:hover .barra-rank-fill, .ranking li:focus-visible .barra-rank-fill { filter: brightness(1.15); }
.ranking li:not(.vazio) { padding: 6px 10px; margin: -6px -10px; border-radius: 10px; cursor: default; outline: none; transition: background-color .15s ease; }
.ranking li:not(.vazio):hover, .ranking li:not(.vazio):focus-visible { background: var(--soft); }
.ranking li:not(.vazio):focus-visible { box-shadow: 0 0 0 2px #4885cc; }
.busca-inicio label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--mute); margin-bottom: 6px; }
.busca-linha { display: flex; flex-wrap: wrap; gap: 10px; }
.busca-linha input { flex: 1 1 260px; min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line-input); background: var(--surface); color: var(--ink); font: inherit; }
.grade-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; margin-top: 12px; }
.campo-largo { grid-column: span 2; }
.campo-acao { align-self: end; }
.form-importar { max-width: 560px; margin-top: 12px; }
.acoes-form { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.acoes-form form { margin: 0; }
.form-linha { display: flex; flex-wrap: wrap; gap: 6px; }
.form-linha select { min-height: 36px; padding: 0 8px; border-radius: 10px; border: 1px solid var(--line-input); background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; }
@media (max-width: 560px) { .campo-largo { grid-column: span 1; } }

/* ===== Botões: um padrão só, simples e moderno ===== */
.btn, .btn-mini, .btn-tema, .filtro, .atalho, .menu-item, .menu-perfil { transition: background-color .15s ease, border-color .15s ease, color .15s ease, filter .15s ease; }
.btn { min-height: 42px; padding: 0 18px; border-radius: 10px; font-size: 14px; font-weight: 600; letter-spacing: 0; box-shadow: none; text-decoration: none; }
.btn-primario { background: var(--accent); border: 1px solid var(--accent); color: #fff; box-shadow: none; }
.btn-primario:hover { filter: brightness(1.15); }
.btn-secundario { background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink); }
.btn-secundario:hover { background: var(--soft); }
.btn-pequeno { min-height: 36px; padding: 0 14px; font-size: 13px; }
.btn-suporte svg { flex: none; }
.btn-mini { min-height: 34px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; }
.btn-mini:hover { background: var(--soft); }
.btn-perigo { color: var(--bad-fg); }
.btn-icone { width: 34px; height: 34px; padding: 0; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; flex: none; }
.btn-icone:hover { background: var(--soft); }
.btn-icone.btn-perigo:hover { background: var(--bad-bg); }
.btn-icone:focus-visible { outline: 2px solid #4885cc; outline-offset: 2px; }
.btn-tema { min-height: 36px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-weight: 600; }
.btn-tema:hover { background: var(--soft); }
.filtro { border-radius: 10px; }
.login-caixa .btn { min-height: 48px; }
.btn:focus-visible, .btn-mini:focus-visible, .atalho:focus-visible { outline: 2px solid #4885cc; outline-offset: 2px; }
.topo-direita { gap: 8px; }
.acoes-form { display: flex; flex-wrap: wrap; gap: 10px; }

/* ===== Foto de perfil e menu ===== */
.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.avatar-iniciais { display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; font-weight: 700; font-size: 14px; }
.avatar-menu { width: 36px; height: 36px; font-size: 13px; }
.avatar-pequeno { width: 28px; height: 28px; font-size: 11px; }
.avatar-grande { width: 88px; height: 88px; font-size: 30px; }
.menu-logo { justify-content: flex-start; gap: 10px; padding: 4px 12px 18px; color: #fff; }
.menu-logo img { border-radius: 0; }
.menu-marca { font-weight: 700; font-size: 14px; line-height: 1.2; }
.menu-perfil { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; color: #fff; min-height: 52px; }
.menu-perfil:hover { background: #ffffff1a; }
.menu-perfil.ativo { background: #1e4489; }
.menu-perfil-texto { min-width: 0; display: flex; flex-direction: column; }
.menu-perfil-texto strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.menu-perfil-texto small { font-size: 11px; color: #c3d8eb; }
.nome-com-foto { display: inline-flex; align-items: center; gap: 10px; }

/* ===== Início enxuto ===== */
.inicio { max-width: 860px; margin: 24px auto 0; display: flex; flex-direction: column; gap: 22px; }
.inicio h1 { font-size: 34px; }
.inicio-descricao { margin: -12px 0 0; color: var(--mute); font-size: 16px; }
.busca-inicio { display: flex; flex-wrap: wrap; gap: 10px; }
.busca-inicio input { flex: 1 1 280px; min-height: 42px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-input); background: var(--surface); color: var(--ink); font: inherit; }
.atalhos { display: flex; flex-wrap: wrap; gap: 10px; }
.atalho { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; border: 1px solid var(--line-strong); background: var(--surface); border-radius: 12px; color: var(--ink); font-weight: 600; font-size: 14px; }
.atalho svg { color: var(--link); flex: none; }
.atalho:hover { background: var(--soft); }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ===== Meu perfil ===== */
.perfil-topo { display: flex; align-items: center; gap: 18px; }
.grade-perfil { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.form-perfil { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.form-perfil .campo { width: 100%; }
.dados-perfil { margin: 12px 0; display: grid; gap: 12px; }
.dados-perfil dt { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--mute); }
.dados-perfil dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.subtitulo { margin-top: 22px; font-size: 16px; }

/* botões que não devem ocupar a linha toda */
.btn-pequeno, .busca-inicio .btn, .form-perfil .btn, .acoes-form .btn, .filtros-form .btn { width: auto; display: inline-flex; }
.topo-direita { flex-wrap: nowrap; }

/* ===== Início: faixa azul com o título; menu só com a logo ===== */
.menu-logo { justify-content: center; padding: 4px 12px 20px; }
.hero-inicio { flex-direction: column; align-items: flex-start; gap: 10px; padding: 40px 44px; }
.hero-inicio h1 { font-size: 38px; }
.hero-marca { font-family: Sora, "Open Sans", sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: #8fb6e0; }
@media (max-width: 640px) { .hero-inicio { padding: 28px 24px; } .hero-inicio h1 { font-size: 28px; } }

/* ===== Período por calendário (De / Até) ===== */
.campo-data { min-width: 150px; }
.campo-filtro input[type="date"] { cursor: pointer; }
[data-theme="dark"] .campo-filtro input[type="date"] { color-scheme: dark; }

/* ===== Pesquisa com sugestões ===== */
.com-sugestoes { position: relative; }
.sugestoes { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--sombra); max-height: 320px; overflow-y: auto; }
.sugestoes[hidden] { display: none; }
.sugestoes li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--ink); }
.sugestoes li:hover, .sugestoes li[aria-selected="true"] { background: var(--soft); }
.sugestao-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sugestoes small { flex: none; font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--mute); max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ajuda { margin-top: 6px; font-size: 12px; color: var(--mute); }

/* ===== Contratos ===== */
.cartao-medio { max-width: 720px; }
.grade-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 16px; }
.grade-meses { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 0 10px; margin-top: 8px; }
.campo-mes { margin-bottom: 10px; }
.campo-mes label { font-size: 12px; }
.entrada textarea { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-input); background: var(--surface); color: var(--ink); font: inherit; resize: vertical; }
.entrada input[type="file"] { height: auto; padding: 10px 12px; }
.entrada input[type="date"] { cursor: pointer; }
[data-theme="dark"] .entrada input[type="date"] { color-scheme: dark; }
.etiqueta-vigente { background: var(--ok-bg); color: var(--ok-fg); }
.etiqueta-vencendo { background: var(--warn-bg); color: var(--warn-fg); }
.etiqueta-vencido { background: var(--bad-bg); color: var(--bad-fg); }
.etiqueta-sem_vigencia { background: var(--track); color: var(--ink2); }
.kpi-alerta { border-top-color: var(--bad-fg); }

/* ===== Dashboard completo ===== */
:root { --s0: #8a93a3; --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4; --s6: #008300; }
[data-theme="dark"] { --s0: #9aa5b8; --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300; }
.s-0 { stroke: var(--s0); } .s-1 { stroke: var(--s1); } .s-2 { stroke: var(--s2); } .s-3 { stroke: var(--s3); } .s-4 { stroke: var(--s4); } .s-5 { stroke: var(--s5); } .s-6 { stroke: var(--s6); }
.amostra-s0 { background: var(--s0); } .amostra-s1 { background: var(--s1); } .amostra-s2 { background: var(--s2); } .amostra-s3 { background: var(--s3); }
.amostra-s4 { background: var(--s4); } .amostra-s5 { background: var(--s5); } .amostra-s6 { background: var(--s6); }
.como-ler { background: var(--soft); border: 1px solid var(--line); border-radius: 12px; padding: 10px 16px; font-size: 13px; color: var(--ink2); }
.como-ler summary { cursor: pointer; font-weight: 700; color: var(--link); }
.como-ler ul { margin: 8px 0 2px; padding-left: 20px; line-height: 1.7; }
.destaques { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 6px; font-size: 15px; }
.destaques li::marker { color: var(--ar); }
.variacao { font-weight: 600; color: var(--ink2); }
.legenda-lista { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; }
.legenda-lista li { display: inline-flex; align-items: center; gap: 8px; }
.legenda-lista li[data-serie]:focus-visible { outline: 2px solid #4885cc; outline-offset: 1px; }
.leg-valor { color: var(--mute); }
.ranking { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 12px; }
.tabela-detalhe { margin-top: 14px; }
.tabela-detalhe summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--link); margin-bottom: 8px; }
.calor-tabela { min-width: 760px; }
.calor-tabela .dir { text-align: center !important; }
.calor-tabela th, .calor-tabela td { white-space: nowrap; }
.calor-nome { display: flex; align-items: center; gap: 8px; text-align: left; font-weight: 600; max-width: 230px; overflow: hidden; text-overflow: ellipsis; }
.calor-nome .amostra { flex: none; }
.calor { color: var(--ink); }
.calor-1 { background: color-mix(in srgb, var(--oe) 10%, var(--surface)); }
.calor-2 { background: color-mix(in srgb, var(--oe) 22%, var(--surface)); }
.calor-3 { background: color-mix(in srgb, var(--oe) 38%, var(--surface)); }
.calor-4 { background: color-mix(in srgb, var(--oe) 58%, var(--surface)); color: #fff; }
.calor-5 { background: color-mix(in srgb, var(--oe) 80%, var(--surface)); color: #fff; }
.calor-total td, .calor-total th { border-top: 2px solid var(--line-strong); font-weight: 700; text-align: left; }
.calor-total td { text-align: right; }
.calor-expandir { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 0; margin: 0; font: inherit; font-weight: inherit; color: inherit; cursor: pointer; }
.calor-expandir:hover, .calor-expandir:focus-visible { color: var(--link); }
.calor-seta { transition: transform .15s ease; }
.calor-expandir[aria-expanded="true"] .calor-seta { transform: rotate(180deg); }
.calor-sub .calor-nome-sub { font-weight: 400; color: var(--mute); padding-left: 24px; }
.calor-sub td, .calor-sub th { border-bottom: 1px solid var(--line); }
.g-atual-th { color: var(--ink); }
.barra-visao { padding-block: 16px; }

.kpis-contratos { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.tabela .btn-mini { white-space: nowrap; }
.calor-tabela .calor-nome { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--ink); max-width: 210px; }
.calor-tabela thead th { font-size: 11px; }
.lista-aditivos { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lista-aditivos li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.lista-aditivos .acoes { display: flex; gap: 8px; }
.form-aditivo { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }

/* ===== Setores, perfis e permissões ===== */
.valor-fixo { padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--soft); font-weight: 600; }
.grupo-permissoes { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin: 0 0 14px; }
.grupo-permissoes legend { padding: 0 8px; font-weight: 700; font-size: 13px; color: var(--head); }
.rotulo-fino { display: block; font-size: 12px; font-weight: 700; color: var(--mute); margin-bottom: 6px; }
.permissoes-lista { display: grid; gap: 4px; margin-top: 12px; }
.permissoes-lista .caixinha { margin: 0; }

/* ===== Linhas decorativas do menu lateral (mesmo desenho do painel do login) ===== */
.menu { position: relative; overflow: hidden; }

/* ===== Início e Dashboard ===== */
.inicio { width: 100%; max-width: none; margin: 24px 0 0; }

.resumo-detalhes summary { list-style: none; cursor: pointer; }
.resumo-detalhes summary::-webkit-details-marker { display: none; }
.resumo-detalhes summary::after { content: "▾"; margin-left: 4px; }
.resumo-detalhes[open] summary::after { content: "▴"; }
.resumo-detalhes .destaques { margin-top: 14px; }
.resumo-ano { font-size: 15px; color: var(--ink2); }

/* ===== Botão de escolher arquivo (verde quando há arquivo) ===== */
.arquivo-botao { position: relative; display: inline-block; }
.botao-arquivo { cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.arquivo-botao:focus-within .botao-arquivo { outline: 2px solid #4885cc; outline-offset: 2px; }
.botao-arquivo.escolhido { background: #1f8a4c; border-color: #1f8a4c; color: #fff; }
.botao-arquivo.escolhido::before { content: "✓"; margin-right: 6px; font-weight: 700; }
.tabela-editor select { min-height: 36px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--line-input); background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; width: 100%; min-width: 150px; }
.grade-tres { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
@media (min-width: 1100px) { .grade-tres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ===== Avisos de atenção são botões: clicar leva ao problema ===== */
.aviso-botao { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; text-decoration: none; cursor: pointer; transition: filter .15s ease, box-shadow .15s ease; }
.aviso-botao:hover { filter: brightness(.96); box-shadow: 0 2px 10px #b91c1c26; }
.aviso-botao:focus-visible { outline: 2px solid #4885cc; outline-offset: 2px; }
.aviso-acao { white-space: nowrap; font-weight: 700; text-decoration: underline; }
a.kpi-link { color: inherit; text-decoration: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
a.kpi-link:hover { transform: translateY(-2px); box-shadow: 0 8px 22px #003d7a22; }
a.kpi-link:focus-visible { outline: 2px solid #4885cc; outline-offset: 2px; }
#fornecedores-a-classificar, #lista-contratos { scroll-margin-top: 16px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } a.kpi-link:hover { transform: none; } }