/* Cores da marca: ajuste aqui para combinar com a logo da Franco Consultoria */
:root {
  --marca: #12355b;
  --marca-escura: #0b2440;
  --acento: #c8a24a;
  --primaria: #1f5fa8;
  --primaria-hover: #194f8c;
  --fundo: #f3f5f8;
  --superficie: #ffffff;
  --borda: #e2e7ee;
  --texto: #1c2633;
  --texto-suave: #64748b;
  --verde: #15803d;
  --verde-claro: #e7f6ec;
  --vermelho: #c0262d;
  --vermelho-claro: #fdecec;
  --laranja: #c26a0a;
  --laranja-claro: #fff4e5;
  --azul-claro: #e8f0fb;
  --raio: 10px;
  --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px; color: var(--texto); background: var(--fundo);
}
a { color: var(--primaria); text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 600; }
h1 { font-size: 22px; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
.suave { color: var(--texto-suave); }
.pos { color: var(--verde); }
.neg { color: var(--vermelho); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.oculto { display: none !important; }

/* ---------- layout ---------- */
.layout { display: flex; min-height: 100vh; }
.sidebar {
  width: 248px; flex-shrink: 0; background: var(--marca); color: #dbe4ef;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.marca { padding: 22px 20px 18px; border-bottom: 1px solid rgba(255,255,255,.08); }
.marca img { max-width: 100%; max-height: 64px; display: block; }
.logo-texto { line-height: 1; }
.logo-texto b { display: block; font-size: 24px; letter-spacing: 2px; color: #fff; font-weight: 700; }
.logo-texto span { display: block; font-size: 10.5px; letter-spacing: 4.2px; color: var(--acento); margin-top: 5px; font-weight: 600; }
.logo-escuro .logo-texto b { color: var(--marca); }
.usuario-box { padding: 12px 20px; font-size: 12.5px; color: #9fb1c7; border-bottom: 1px solid rgba(255,255,255,.08); }
.usuario-box strong { color: #fff; display: block; font-size: 13.5px; }
nav { padding: 10px 0 20px; flex: 1; }
.nav-item, .nav-grupo > button {
  display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 20px; color: #cdd8e5;
  background: none; border: 0; font: inherit; cursor: pointer; text-align: left; border-left: 3px solid transparent;
}
.nav-item:hover, .nav-grupo > button:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-item.ativo { background: rgba(255,255,255,.1); color: #fff; border-left-color: var(--acento); font-weight: 600; }
.nav-item svg, .nav-grupo > button svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .85; }
.nav-grupo > button .seta { margin-left: auto; width: 14px; height: 14px; transition: transform .15s; }
.nav-grupo.aberto > button .seta { transform: rotate(90deg); }
.nav-sub { display: none; }
.nav-grupo.aberto .nav-sub { display: block; }
.nav-sub .nav-item { padding-left: 49px; font-size: 13.5px; }

.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topo {
  height: 56px; background: var(--superficie); border-bottom: 1px solid var(--borda); display: flex; align-items: center;
  padding: 0 24px; gap: 12px; position: sticky; top: 0; z-index: 20;
}
.topo .titulo-pagina { font-weight: 600; font-size: 15px; }
.topo .espaco { flex: 1; }
main#view { padding: 24px; max-width: 1500px; width: 100%; }

/* ---------- componentes ---------- */
.cabecalho { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.cabecalho h1 { flex: 1; min-width: 200px; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.card { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); }
.card-corpo { padding: 18px 20px; }
.card-titulo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 20px;
  border-bottom: 1px solid var(--borda); flex-wrap: wrap; }
.grade { display: grid; gap: 16px; }
.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)); }
.mt { margin-top: 16px; }

.kpi { padding: 18px 20px; position: relative; overflow: hidden; }
.kpi .rotulo { font-size: 12.5px; color: var(--texto-suave); font-weight: 500; }
.kpi .valor { font-size: 24px; font-weight: 700; margin-top: 6px; font-variant-numeric: tabular-nums; }
.kpi .detalhe { font-size: 12px; color: var(--texto-suave); margin-top: 4px; }
.kpi::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--cor, var(--primaria)); }
.kpi.verde { --cor: var(--verde); } .kpi.vermelho { --cor: var(--vermelho); }
.kpi.laranja { --cor: var(--laranja); } .kpi.azul { --cor: var(--primaria); }
.kpi.verde .valor { color: var(--verde); } .kpi.vermelho .valor { color: var(--vermelho); }
.kpi.clicavel { cursor: pointer; } .kpi.clicavel:hover { border-color: #c5d2e3; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 14px; border-radius: 8px;
  border: 1px solid var(--borda); background: var(--superficie); color: var(--texto); font: inherit; font-weight: 500;
  cursor: pointer; white-space: nowrap; line-height: 1.2;
}
.btn:hover { background: #f6f8fb; }
.btn svg { width: 16px; height: 16px; }
.btn.primario { background: var(--primaria); border-color: var(--primaria); color: #fff; }
.btn.primario:hover { background: var(--primaria-hover); }
.btn.perigo { color: var(--vermelho); }
.btn.perigo:hover { background: var(--vermelho-claro); }
.btn.sucesso { background: var(--verde); border-color: var(--verde); color: #fff; }
.btn.pequeno { padding: 5px 9px; font-size: 12.5px; }
.btn.icone { padding: 6px; border-color: transparent; background: transparent; color: var(--texto-suave); }
.btn.icone:hover { background: #eef2f7; color: var(--texto); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.grupo-btn { display: inline-flex; }
.grupo-btn .btn { border-radius: 0; margin-left: -1px; }
.grupo-btn .btn:first-child { border-radius: 8px 0 0 8px; margin-left: 0; }
.grupo-btn .btn:last-child { border-radius: 0 8px 8px 0; }
.grupo-btn .btn.ativo { background: var(--marca); border-color: var(--marca); color: #fff; z-index: 1; }

label.campo { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 500; color: #415066; }
input, select, textarea {
  font: inherit; color: var(--texto); padding: 8px 10px; border: 1px solid #cfd8e3; border-radius: 8px; background: #fff;
  width: 100%; min-height: 36px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(31,95,168,.25); border-color: var(--primaria); }
input[type=checkbox] { width: 16px; height: 16px; min-height: 0; accent-color: var(--primaria); }
input[type=color] { padding: 3px; height: 36px; }
textarea { min-height: 70px; resize: vertical; }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.obrig::after { content: ' *'; color: var(--vermelho); }
.form-grade { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.c12 { grid-column: span 12; } .c8 { grid-column: span 8; } .c6 { grid-column: span 6; }
.c4 { grid-column: span 4; } .c3 { grid-column: span 3; } .c1 { grid-column: span 1; }
.dica { font-size: 12px; color: var(--texto-suave); font-weight: 400; }

.filtros { padding: 16px 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; align-items: end; }
.filtros .acoes { grid-column: 1 / -1; justify-content: flex-end; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { padding: 6px 13px; border-radius: 999px; border: 1px solid var(--borda); background: #fff; cursor: pointer; font: inherit;
  font-size: 13px; font-weight: 500; color: var(--texto-suave); }
.chip.ativo { background: var(--marca); color: #fff; border-color: var(--marca); }

.tabela-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 9px 12px; border-bottom: 1px solid var(--borda); text-align: left; vertical-align: middle; }
th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); font-weight: 600;
  background: #f8fafc; position: sticky; top: 0; z-index: 1; white-space: nowrap; }
tbody tr:hover td { background: #fafbfd; }
td.acoes-td { white-space: nowrap; text-align: right; width: 1%; }
td .sub { display: block; font-size: 12px; color: var(--texto-suave); }
tr.conciliada td { background: var(--verde-claro); }
tr.conciliada:hover td { background: #d9f0e1; }
tr.conciliada td:first-child { box-shadow: inset 4px 0 0 var(--verde); }
.btn-conciliado { background: var(--verde); border-color: var(--verde); color: #fff; }
.btn-conciliado:hover { background: #126c33; }
tr.selecionada td { background: var(--azul-claro) !important; }
tfoot td { font-weight: 700; background: #f8fafc; }
.vazio { padding: 40px; text-align: center; color: var(--texto-suave); }

.badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.b-aberto { background: var(--azul-claro); color: var(--primaria); }
.b-pago { background: var(--verde-claro); color: var(--verde); }
.b-vencido { background: var(--vermelho-claro); color: var(--vermelho); }
.b-cancelado { background: #eef0f3; color: #6b7280; }
.b-neutro { background: #eef2f7; color: #475569; }
.tag { display: inline-block; padding: 1px 7px; border-radius: 5px; font-size: 11px; color: #fff; margin-right: 3px; }

.totais { display: flex; gap: 28px; flex-wrap: wrap; padding: 12px 20px; border-bottom: 1px solid var(--borda); background: #fbfcfe; }
.totais div { font-size: 12px; color: var(--texto-suave); }
.totais strong { display: block; font-size: 16px; color: var(--texto); font-variant-numeric: tabular-nums; }
.barra-selecao { display: flex; align-items: center; gap: 10px; padding: 10px 20px; background: var(--azul-claro);
  border-bottom: 1px solid var(--borda); flex-wrap: wrap; }

.progresso { height: 12px; background: #edf1f6; border-radius: 99px; overflow: hidden; }
.progresso > div { height: 100%; border-radius: 99px; }

/* multiselect */
.msel { position: relative; }
.msel-btn { width: 100%; text-align: left; justify-content: space-between; min-height: 36px; border-color: #cfd8e3; font-weight: 400;
  overflow: hidden; text-overflow: ellipsis; }
.msel-pop { display: none; position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; min-width: 100%; max-width: 360px;
  max-height: 280px; overflow-y: auto; background: #fff; border: 1px solid var(--borda); border-radius: 8px;
  box-shadow: 0 10px 30px rgba(15,23,42,.15); padding: 6px; }
.msel.aberto .msel-pop { display: block; }
.msel-pop label { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 6px; cursor: pointer;
  font-size: 13px; font-weight: 400; color: var(--texto); white-space: nowrap; }
.msel-pop label:hover { background: #f3f6fa; }
.msel-pop input[type=search] { margin-bottom: 4px; }

/* modal */
.fundo-modal { position: fixed; inset: 0; background: rgba(15,23,42,.45); display: flex; align-items: flex-start;
  justify-content: center; padding: 40px 16px; z-index: 100; overflow-y: auto; }
.modal { background: #fff; border-radius: 12px; width: 100%; max-width: 640px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.modal.largo { max-width: 920px; }
.modal-topo { display: flex; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--borda); }
.modal-topo h2 { flex: 1; }
.modal-corpo { padding: 20px 22px; }
.modal-rodape { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--borda);
  background: #fafbfc; border-radius: 0 0 12px 12px; }

#toasts { position: fixed; right: 18px; bottom: 18px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast { padding: 12px 16px; border-radius: 8px; color: #fff; background: #1f2937; box-shadow: 0 8px 24px rgba(0,0,0,.2);
  max-width: 380px; animation: entra .2s ease-out; }
.toast.erro { background: var(--vermelho); } .toast.ok { background: var(--verde); }
@keyframes entra { from { transform: translateY(10px); opacity: 0; } }

/* login */
.tela-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: linear-gradient(160deg, var(--marca) 0%, var(--marca-escura) 100%); }
.caixa-login { background: #fff; border-radius: 14px; padding: 36px 34px; width: 100%; max-width: 400px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.caixa-login .marca-login { text-align: center; margin-bottom: 22px; }
.caixa-login .marca-login img { max-width: 240px; max-height: 90px; }
.caixa-login .logo-texto b { font-size: 30px; color: var(--marca); }
.caixa-login .logo-texto span { font-size: 12px; }
.caixa-login form { display: flex; flex-direction: column; gap: 14px; }
.caixa-login .btn { padding: 11px; }

/* tabelas de relatório */
.tab-rel td, .tab-rel th { padding: 7px 10px; font-size: 13px; }
.tab-rel td:first-child, .tab-rel th:first-child { position: sticky; left: 0; background: #fff; z-index: 2; min-width: 240px; }
.tab-rel th:first-child { background: #f8fafc; z-index: 3; }
.ln-faixa td { font-weight: 700; background: #f4f7fb !important; }
.ln-total td { font-weight: 700; background: #e9eff8 !important; color: var(--marca); }
.ln-categoria td { font-weight: 600; }
.ln-categoria td:first-child { padding-left: 22px; cursor: pointer; }
.ln-plano td { color: #475569; font-size: 12.5px; }
.ln-plano td:first-child { padding-left: 40px; }
.ln-plano td.clic { cursor: pointer; }
.ln-plano td.clic:hover { text-decoration: underline; color: var(--primaria); }
.cab-relatorio { display: none; }

.conc-item, .conc-cab { display: grid; grid-template-columns: 92px minmax(180px, 1.3fr) 120px minmax(240px, 1.4fr) 80px; gap: 14px;
  padding: 12px 20px; border-bottom: 1px solid var(--borda); align-items: center; }
.conc-cab { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); font-weight: 600;
  background: #f8fafc; padding-top: 9px; padding-bottom: 9px; margin-top: 12px; border-top: 1px solid var(--borda); }
.conc-item.ok { background: var(--verde-claro); }
.conc-campos { display: flex; flex-direction: column; gap: 6px; }
.conc-campos select { min-height: 32px; padding: 5px 8px; font-size: 13px; }
.rodape-conc { position: sticky; bottom: 12px; margin-top: 14px; display: flex; align-items: center; gap: 16px; padding: 14px 20px;
  flex-wrap: wrap; box-shadow: 0 -4px 20px rgba(15,23,42,.08); z-index: 5; }
.toast.aviso { background: var(--laranja); }

/* ---------- layout com menu superior ---------- */
.layout-topo { min-height: 100vh; display: flex; flex-direction: column; }
.layout-topo main#view { margin: 0 auto; }
.barra-topo { background: var(--marca); color: #dbe4ef; position: sticky; top: 0; z-index: 40;
  box-shadow: 0 2px 10px rgba(11,36,64,.25); }
.layout-topo.admin .barra-topo { background: #1d2633; }
.barra-inner { max-width: 1500px; margin: 0 auto; height: 60px; padding: 0 24px; display: flex; align-items: center; gap: 18px; }
.marca-topo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.marca-topo img { max-height: 38px; max-width: 170px; display: block; }
.marca-topo .logo-texto b { font-size: 19px; letter-spacing: 1.6px; }
.marca-topo .logo-texto span { font-size: 8.5px; letter-spacing: 3.4px; margin-top: 3px; }
.marca-topo .selo-admin { margin-top: 0; }
.btn-menu { display: none; background: none; border: 0; color: #fff; padding: 6px; cursor: pointer; border-radius: 8px; }
.btn-menu svg { width: 22px; height: 22px; }
.btn-menu:hover { background: rgba(255,255,255,.1); }

.menu-topo { display: flex; align-items: stretch; gap: 2px; flex: 1; min-width: 0; height: 100%; }
.menu-topo > .nav-item, .menu-topo > .nav-grupo > .nav-grupo-btn {
  display: flex; align-items: center; gap: 5px; width: auto; height: 100%; padding: 0 12px; color: #cdd8e5; background: none; border: 0;
  border-bottom: 3px solid transparent; border-top: 3px solid transparent; font: inherit; font-size: 13.5px; font-weight: 500;
  cursor: pointer; white-space: nowrap; }
.menu-topo > .nav-item:hover, .menu-topo > .nav-grupo > .nav-grupo-btn:hover,
.menu-topo > .nav-grupo.aberto > .nav-grupo-btn { color: #fff; background: rgba(255,255,255,.07); }
.menu-topo > .nav-item.ativo, .menu-topo > .nav-grupo.ativo > .nav-grupo-btn { color: #fff; border-bottom-color: var(--acento); font-weight: 600; }
.nav-grupo { position: relative; display: flex; }
.nav-grupo-btn .seta { width: 14px; height: 14px; opacity: .75; transition: transform .15s; }
.nav-grupo.aberto > .nav-grupo-btn .seta { transform: rotate(180deg); }

.barra-topo .nav-sub { display: none; position: absolute; top: 100%; left: 0; min-width: 240px; background: #fff; color: var(--texto);
  border: 1px solid var(--borda); border-radius: 0 0 10px 10px; box-shadow: 0 14px 34px rgba(15,23,42,.18); padding: 6px; z-index: 50; }
.barra-topo .nav-sub-direita { left: auto; right: 0; border-radius: 10px 0 10px 10px; }
.barra-topo .nav-grupo.aberto > .nav-sub { display: block; }
.barra-topo .nav-sub .nav-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; border-radius: 7px; color: var(--texto);
  background: none; border: 0; border-left: 0; font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; white-space: nowrap; }
.barra-topo .nav-sub .nav-item svg { width: 16px; height: 16px; }
.barra-topo .nav-sub .nav-item:hover { background: #f1f5fa; }
.barra-topo .nav-sub .nav-item.ativo { background: var(--azul-claro); color: var(--marca); font-weight: 600; }
.nav-sep { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-suave); font-weight: 600; padding: 10px 12px 4px; }
.nav-sep:not(:first-child) { border-top: 1px solid var(--borda); margin-top: 4px; }

.acoes-topo { display: flex; align-items: center; gap: 10px; height: 100%; flex-shrink: 0; }
.btn-suporte { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; background: #25d366; color: #fff;
  font-weight: 600; font-size: 13px; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.btn-suporte:hover { background: #1ebe5b; }
.btn-suporte svg { width: 17px; height: 17px; }
.menu-usuario .nav-grupo-btn { display: flex; align-items: center; gap: 8px; height: 100%; padding: 0 6px; background: none; border: 0;
  color: #fff; font: inherit; font-size: 13px; cursor: pointer; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--acento); color: var(--marca); font-weight: 700; font-size: 12.5px;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nome-usuario { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usuario-info { padding: 10px 12px 12px; border-bottom: 1px solid var(--borda); margin-bottom: 4px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.usuario-info strong { font-size: 14px; }
.link-suporte { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; color: #128c4a; font-weight: 600; }
.link-suporte svg { width: 16px; height: 16px; }
.layout-topo .faixa-admin { padding-left: max(24px, calc((100% - 1500px) / 2 + 24px)); }

@media (max-width: 1180px) {
  .menu-topo > .nav-item, .menu-topo > .nav-grupo > .nav-grupo-btn { padding: 0 8px; font-size: 13px; }
  .nome-usuario { display: none; }
}
@media (max-width: 1024px) {
  .btn-menu { display: inline-flex; order: -1; }
  .barra-inner { padding: 0 14px; gap: 10px; }
  .marca-topo { margin-right: auto; }
  .menu-topo { display: none; position: absolute; top: 60px; left: 0; right: 0; flex-direction: column; height: auto; gap: 0;
    background: var(--marca); padding: 6px 0 12px; max-height: calc(100vh - 60px); overflow-y: auto; box-shadow: 0 12px 24px rgba(0,0,0,.25); }
  body.menu-aberto .menu-topo { display: flex; }
  .menu-topo > .nav-item, .menu-topo > .nav-grupo > .nav-grupo-btn { height: auto; padding: 12px 20px; border: 0; width: 100%; justify-content: space-between; font-size: 14px; }
  .menu-topo > .nav-item.ativo, .menu-topo > .nav-grupo.ativo > .nav-grupo-btn { border: 0; background: rgba(255,255,255,.08); box-shadow: inset 3px 0 0 var(--acento); }
  .menu-topo .nav-grupo { flex-direction: column; }
  .menu-topo .nav-sub { position: static; box-shadow: none; border: 0; border-radius: 0; background: rgba(0,0,0,.18); padding: 4px 0; min-width: 0; }
  .menu-topo .nav-sub .nav-item { color: #dbe4ef; padding: 10px 34px; border-radius: 0; }
  .menu-topo .nav-sub .nav-item:hover { background: rgba(255,255,255,.06); }
  .menu-topo .nav-sub .nav-item.ativo { background: rgba(255,255,255,.1); color: #fff; }
  .menu-topo .nav-sep { color: #8fa3bb; padding-left: 34px; }
  .menu-topo .nav-sep:not(:first-child) { border-top-color: rgba(255,255,255,.08); }
}
@media (max-width: 560px) {
  .btn-suporte span { display: none; }
  .btn-suporte { padding: 8px; }
  .marca-topo img { max-width: 120px; }
}
@media print { .barra-topo, .faixa-admin { display: none !important; } }

/* acesso, usuários e painel administrativo */
.login-rodape { margin-top: 18px; text-align: center; font-size: 13px; color: var(--texto-suave); display: flex; flex-direction: column; gap: 4px; }
.grupo-usuario { display: block; margin-top: 4px; font-size: 11.5px; color: var(--acento); }
.faixa-admin { background: #fff4e5; color: #7a4b06; border-bottom: 1px solid #f3d7a8; padding: 8px 24px; font-size: 13px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.faixa-admin svg { width: 16px; height: 16px; }
.faixa-admin a { font-weight: 600; margin-left: auto; }
.sidebar-admin { background: #1d2633; }
.selo-admin { display: inline-block; margin-top: 10px; padding: 3px 9px; border-radius: 999px; background: rgba(200,162,74,.18);
  color: var(--acento); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.token-mono { font-family: ui-monospace, Consolas, monospace; font-size: 13px; background: #f1f4f8; padding: 3px 7px; border-radius: 5px; letter-spacing: .5px; }
.token-grande { font-family: ui-monospace, Consolas, monospace; font-size: 26px; font-weight: 700; letter-spacing: 2px; text-align: center;
  padding: 18px; border: 2px dashed var(--acento); border-radius: 10px; background: #fffbf0; color: var(--marca); word-break: break-all; }
.matriz-perm table { border: 1px solid var(--borda); border-radius: 8px; }
.matriz-perm th, .matriz-perm td { padding: 7px 10px; }
.matriz-perm .c { text-align: center; width: 100px; }
.matriz-perm input[type=radio] { width: 16px; height: 16px; min-height: 0; accent-color: var(--primaria); cursor: pointer; }

/* conciliação OFX em colunas */
.tab-conc td { vertical-align: middle; }
.tab-conc td.col-combo { min-width: 190px; width: 22%; }
.tab-conc td.col-hist { min-width: 180px; }
.tab-conc td:first-child { white-space: nowrap; }
.tab-conc .sugestao { padding: 1px 0; gap: 6px; font-size: 12px; color: var(--texto-suave); flex-wrap: nowrap; }
.tab-conc .sugestao .btn { padding: 2px 7px; font-size: 11.5px; }
.tab-conc tr.conciliada td:first-child { box-shadow: inset 4px 0 0 var(--verde); }

/* campo de seleção com pesquisa */
.combo { position: relative; }
.combo-input { padding: 6px 30px 6px 10px; min-height: 34px; font-size: 13px; text-overflow: ellipsis; }
.combo-seta { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: var(--texto-suave); pointer-events: none; display: flex; }
.combo-seta svg { width: 14px; height: 14px; }
.cb-plano[data-valor=""] .combo-input { border-color: #f0b46a; background: #fffaf2; }
.combo-pop { position: fixed; display: none; z-index: 150; background: #fff; border: 1px solid var(--borda); border-radius: 8px;
  box-shadow: 0 12px 32px rgba(15,23,42,.18); max-height: 300px; overflow-y: auto; padding: 4px; }
.combo-op { padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.combo-op .sub { display: block; font-size: 11.5px; color: var(--texto-suave); }
.combo-op.ativo, .combo-op:hover { background: #eef3fa; }
.combo-op.sel { font-weight: 600; color: var(--marca); }
.combo-op.limpar { color: var(--texto-suave); border-top: 1px solid var(--borda); margin-top: 4px; }
.combo-op.novo { color: var(--primaria); font-weight: 600; border-top: 1px solid var(--borda); margin-top: 4px; }
.combo-vazio { padding: 8px 10px; color: var(--texto-suave); font-size: 13px; }
.sugestao { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 4px 0; flex-wrap: wrap; }

.lista-mini { list-style: none; margin: 0; padding: 0; }
.lista-mini li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 20px; border-bottom: 1px solid var(--borda); }
.lista-mini li:last-child { border-bottom: 0; }
.abas { display: flex; gap: 2px; border-bottom: 1px solid var(--borda); padding: 0 12px; overflow-x: auto; }
.aba { padding: 11px 14px; background: none; border: 0; border-bottom: 2px solid transparent; font: inherit; font-weight: 500;
  color: var(--texto-suave); cursor: pointer; white-space: nowrap; }
.aba.ativo { color: var(--marca); border-bottom-color: var(--acento); }
.grafico { position: relative; height: 280px; }

@media (max-width: 1100px) { .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .sidebar { position: fixed; left: -260px; z-index: 90; transition: left .2s; }
  body.menu-aberto .sidebar { left: 0; box-shadow: 0 0 40px rgba(0,0,0,.4); }
  #btnMenu { display: inline-flex; }
  .g2, .g3 { grid-template-columns: 1fr; }
  main#view { padding: 16px; }
  .topo { padding: 0 16px; }
  .conc-item { grid-template-columns: 1fr 1fr; }
  .conc-item > :nth-child(2), .conc-item > :nth-child(4) { grid-column: 1 / -1; }
  .conc-cab { display: none; }
  .form-grade > * { grid-column: span 12; }
}
@media (max-width: 560px) { .g4 { grid-template-columns: 1fr; } .kpi .valor { font-size: 21px; } }

@media print {
  .sidebar, .topo, .nao-imprime, .filtros, #toasts { display: none !important; }
  body { background: #fff; font-size: 11px; }
  main#view { padding: 0; max-width: none; }
  .card { box-shadow: none; border: 0; }
  .cab-relatorio { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--marca);
    padding-bottom: 10px; margin-bottom: 14px; }
  .cab-relatorio img { max-height: 50px; }
  th { position: static; }
  .tabela-wrap { overflow: visible; }
  .tab-rel td:first-child { position: static; }
}