/* CPay Gestão: estilos da aplicação */
:root {
  --ameixa: #24103F;
  --ameixa-2: #321858;
  --roxo: #6528C7;
  --roxo-escuro: #4B1F96;
  --roxo-claro: #EEE7FB;
  --roxo-suave: #FBF9FE;
  --lilas: #C9B3F5;
  --tinta: #17131F;
  --cinza: #77717F;
  --cinza-2: #9A93A5;
  --linha: #E6E1EE;
  --linha-2: #F0ECF5;
  --campo: #D9D3E3;
  --fundo: #F7F5FB;
  --branco: #FFFFFF;
  --amarelo: #F5C21B;
  --verde: #0F7A4A;
  --verde-claro: #E3F4EA;
  --vermelho: #B42318;
  --vermelho-claro: #FDECEA;
  --ambar: #8A5A00;
  --ambar-claro: #FFF3D6;
  --raio: 14px;
  --raio-p: 10px;
  --fonte: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-num: "Sora", "IBM Plex Sans", system-ui, sans-serif;
  --sombra: 0 1px 2px rgba(36, 16, 63, .04), 0 8px 24px rgba(36, 16, 63, .05);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--fundo);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--fonte-num); margin: 0; letter-spacing: -.01em; }
p { margin: 0; }
a { color: var(--roxo); }
img { max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--roxo); outline-offset: 2px; border-radius: 6px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: -4px; }
.cv { opacity: .55; }
.rs { font-size: .72em; font-weight: 500; color: var(--cinza); letter-spacing: 0; }
.vazio { color: #B8B1C2; }

/* ---------- Estrutura ---------- */
.lateral {
  position: fixed; inset: 0 auto 0 0; width: 240px; z-index: 20;
  display: flex; flex-direction: column; padding: 22px 14px 14px;
  background: var(--ameixa);
  background-image: radial-gradient(120% 60% at 0% 0%, rgba(101, 40, 199, .45), transparent 60%);
  color: #fff;
}
.marca { display: flex; align-items: center; gap: 12px; padding: 2px 10px 26px; text-decoration: none; color: #fff; }
.marca img { height: 34px; width: auto; }
.marca span { font-family: var(--fonte-num); font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .7); border-left: 1px solid rgba(255, 255, 255, .22); padding-left: 12px; }
.menu { display: grid; gap: 2px; }
.menu a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--raio-p); color: rgba(255, 255, 255, .7); text-decoration: none; font-weight: 500; }
.menu a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.menu a.ativo { background: rgba(255, 255, 255, .11); color: #fff; box-shadow: inset 3px 0 0 var(--lilas); }
.menu a.ativo .ic { color: var(--lilas); }
.quem { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 14px 6px 4px; border-top: 1px solid rgba(255, 255, 255, .1); }
.avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--roxo); color: #fff; font-family: var(--fonte-num); font-size: 12.5px; font-weight: 600; }
.quem-txt { min-width: 0; flex: 1; }
.quem-txt strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 13.5px; font-weight: 600; line-height: 1.3; overflow: hidden; overflow-wrap: anywhere; }
.quem-txt span { display: block; font-size: 12px; color: rgba(255, 255, 255, .6); }
.quem-acoes { display: flex; gap: 2px; }
.quem-acoes form { margin: 0; }
.quem-acoes a, .quem-acoes button { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; border: 0; background: none; color: rgba(255, 255, 255, .7); cursor: pointer; }
.quem-acoes a:hover, .quem-acoes button:hover { background: rgba(255, 255, 255, .08); color: #fff; }

.principal { margin-left: 240px; padding: 32px 40px 56px; max-width: 1340px; }
.topo-movel, .abas-movel { display: none; }

.cabeca { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.cabeca h1 { font-size: 28px; font-weight: 600; line-height: 1.2; }
.cabeca-sub { margin-top: 4px; color: var(--cinza); font-size: 14px; }
.cabeca-acoes { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cabeca-acoes form { margin: 0; }
.voltar { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; font-weight: 500; font-size: 14px; text-decoration: none; }
.voltar:hover { text-decoration: underline; }

/* ---------- Controles ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: var(--raio-p);
  border: 1px solid var(--campo); background: var(--branco); color: var(--tinta);
  font-weight: 500; font-size: 14px; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: border-color .15s, background-color .15s;
}
.botao:hover { border-color: var(--roxo); }
.botao-primario { background: var(--roxo); border-color: var(--roxo); color: #fff; }
.botao-primario:hover { background: var(--roxo-escuro); border-color: var(--roxo-escuro); }
.botao-perigo { color: var(--vermelho); border-color: #F1C4BF; }
.botao-perigo:hover { border-color: var(--vermelho); }
.botao-largo { width: 100%; height: 44px; }
.botao[disabled], .botao.carregando { opacity: .7; cursor: progress; }
.link { color: var(--roxo); font-weight: 500; text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; }
.link:hover { text-decoration: underline; }
summary.link { list-style: none; display: inline-flex; align-items: center; gap: 4px; }
summary.link::-webkit-details-marker { display: none; }

.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo > span:first-child, .campo legend { font-size: 12.5px; font-weight: 500; color: var(--cinza); }
.campo > span em { font-style: normal; font-weight: 400; color: var(--cinza-2); }
.campo small { font-size: 12px; color: var(--cinza); }
.campo input:not([type=checkbox]):not([type=radio]):not([type=file]), .campo select, .campo-inline select, .campo-taxa input {
  height: 40px; width: 100%; padding: 0 12px; border: 1px solid var(--campo); border-radius: 9px; background: var(--branco); font-size: 14px;
}
.campo select, .campo-inline select {
  appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2377717F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.campo input:focus, .campo select:focus, .campo-inline select:focus, .grade-taxas input:focus, .campo-taxa input:focus { outline: none; border-color: var(--roxo); box-shadow: 0 0 0 3px rgba(101, 40, 199, .16); }
.campo-inline { display: inline-flex; align-items: center; gap: 8px; }
.campo-inline > span { font-size: 13px; color: var(--cinza); white-space: nowrap; }
.campo-inline select { height: 38px; width: auto; min-width: 170px; }
.campo-sufixo, .campo-prefixo { display: flex; align-items: center; border: 1px solid var(--campo); border-radius: 9px; background: var(--branco); }
.campo-sufixo:focus-within, .campo-prefixo:focus-within { border-color: var(--roxo); box-shadow: 0 0 0 3px rgba(101, 40, 199, .16); }
.campo .campo-sufixo input, .campo .campo-prefixo input, .campo-taxa .campo-sufixo input { border: 0 !important; box-shadow: none !important; background: transparent; }
.campo-sufixo i, .campo-prefixo i { font-style: normal; color: var(--cinza); font-size: 13.5px; padding: 0 12px; }
.campo-prefixo i { padding-right: 0; }
.campo-sufixo i { padding-left: 0; }
fieldset.campo { border: 0; padding: 0; margin: 0; }
fieldset.campo legend { padding: 0; margin-bottom: 6px; }
.opcoes { display: grid; gap: 8px; }
.opcao { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--linha); border-radius: var(--raio-p); cursor: pointer; }
.opcao input { margin: 3px 0 0; accent-color: var(--roxo); width: 16px; height: 16px; }
.opcao strong { display: block; font-size: 14px; font-weight: 600; }
.opcao small { display: block; font-size: 12.5px; color: var(--cinza); }
.opcao:has(input:checked) { border-color: var(--roxo); background: var(--roxo-suave); }
.campo-check { flex-direction: row; align-items: center; gap: 10px; cursor: pointer; }
.campo-check input { width: 18px; height: 18px; accent-color: var(--roxo); margin: 0; }
.campo-check > span:last-child { font-size: 14px; color: var(--tinta); font-weight: 500; }
.form-acoes { display: flex; align-items: center; justify-content: flex-end; gap: 18px; margin-top: 4px; }

/* ---------- Avisos e selos ---------- */
.aviso { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: var(--raio-p); margin-bottom: 16px; font-size: 14px; border: 1px solid transparent; }
.aviso .ic { margin-top: 1px; vertical-align: 0; }
.aviso a { font-weight: 600; margin-left: 4px; }
.aviso-ok { background: var(--verde-claro); color: #0B5A37; border-color: #C3E5D1; }
.aviso-erro { background: var(--vermelho-claro); color: #8F1C13; border-color: #F5CAC5; }
.aviso-ambar { background: var(--ambar-claro); color: #6B4600; border-color: #F2DDA6; }
.aviso-ambar a { color: #6B4600; }
.aviso-info { background: var(--roxo-claro); color: var(--roxo-escuro); border-color: #DDD0F5; }

.selo { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 7px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; text-decoration: none; line-height: 1.45; }
.selo .ic { width: 14px; height: 14px; vertical-align: 0; }
.selo-ok { background: var(--verde-claro); color: var(--verde); }
.selo-erro { background: var(--vermelho-claro); color: var(--vermelho); }
.selo-ambar { background: var(--ambar-claro); color: var(--ambar); }
.selo-neutro { background: #F1EEF5; color: var(--cinza); padding-left: 10px; }
a.selo:hover { text-decoration: underline; }
.sob-selo { display: block; margin-top: 3px; font-size: 11.5px; color: var(--cinza); }
.etiqueta { display: inline-block; padding: 0 7px; border-radius: 6px; background: #F1EEF5; color: var(--cinza); font-size: 11.5px; font-weight: 500; line-height: 1.6; vertical-align: 1px; }
.etiqueta-resumo { background: var(--roxo-claro); color: var(--roxo-escuro); }
.dif { font-weight: 500; }
.dif-zero { color: var(--cinza-2); }
.dif-fora { color: var(--vermelho); font-weight: 600; }
.txt-erro, .num-erro { color: var(--vermelho); font-weight: 600; }

/* ---------- Painéis ---------- */
.painel { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 20px 24px; margin-bottom: 20px; }
.painel h2 { font-size: 16px; font-weight: 600; }
.painel > h2 { margin-bottom: 14px; }
.painel-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.painel-acoes { display: flex; align-items: center; gap: 18px; }
.painel-tabela { padding: 0; overflow: hidden; }
.painel-tabela > .painel-cabeca { padding: 18px 24px 6px; margin: 0; }
.painel-tabela > .vazio-linha { padding: 8px 24px 22px; }
.painel-ambar { background: var(--ambar-claro); border-color: #F2DDA6; }
.painel-ambar h2 { display: flex; align-items: center; gap: 8px; color: #6B4600; }
.nota { color: var(--cinza); font-size: 13px; margin-top: 12px; }
.nota-pagina { margin: -6px 2px 20px; }
.vazio-linha { color: var(--cinza); font-size: 14px; display: flex; align-items: center; gap: 8px; }
.vazio-linha .ic { color: var(--verde); }
.rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.grade-2 { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 20px; align-items: start; }
.vazio-grande { text-align: center; padding: 56px 24px; background: var(--branco); border: 1px dashed var(--campo); border-radius: var(--raio); margin-bottom: 20px; }
.vazio-grande .ic-grande { width: 44px; height: 44px; color: var(--roxo); stroke-width: 1.4; margin-bottom: 10px; }
.vazio-grande h2 { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.vazio-grande p { color: var(--cinza); max-width: 480px; margin: 0 auto 20px; }

/* ---------- Tabelas ---------- */
.tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabela th, .tabela td { padding: 10px 12px; text-align: left; vertical-align: top; }
.tabela thead th { font-size: 12px; font-weight: 500; color: var(--cinza); border-bottom: 1px solid var(--linha); white-space: nowrap; vertical-align: bottom; }
.tabela tbody th, .tabela tbody td { border-bottom: 1px solid var(--linha-2); }
.tabela tbody th { font-weight: 500; }
.tabela th small, .tabela td small { display: block; font-size: 12px; font-weight: 400; color: var(--cinza); margin-top: 1px; }
.tabela .num { text-align: right; white-space: nowrap; }
.tabela tbody tr:last-child > * { border-bottom: 0; }
.painel-tabela .tabela th:first-child, .painel-tabela .tabela td:first-child { padding-left: 24px; }
.painel-tabela .tabela th:last-child, .painel-tabela .tabela td:last-child { padding-right: 24px; }
.tabela tr[data-href] { cursor: pointer; }
.tabela tbody tr[data-href]:hover > * { background: #FAF8FD; }
.cel-nome a { color: var(--tinta); font-weight: 500; text-decoration: none; }
.cel-nome a:hover { color: var(--roxo); text-decoration: underline; }
.cel-data { white-space: nowrap; }
.cel-com { font-weight: 600; }
.cel-acao { text-align: right; white-space: nowrap; }
.cel-desc { font-weight: 400 !important; }
.cel-arq a { word-break: break-all; }
.linha-div > * { background: #FFF8F7; }
.linha-div > :first-child { box-shadow: inset 3px 0 0 var(--vermelho); }
.linha-nova > * { background: #F6F0FE; }
.g-ini { border-left: 1px solid var(--linha); }
.tabela thead .grupos th { border-bottom: 0; padding-bottom: 0; }
.grupos .grupo { text-align: center; font-size: 12px; font-weight: 600; color: var(--tinta); border-left: 1px solid var(--linha); }
.grupos .grupo::after { content: ""; display: block; height: 3px; margin: 7px 10px 0; border-radius: 3px; background: var(--ameixa); opacity: .85; }
.grupos .grupo-com::after { background: var(--amarelo); opacity: 1; }
.grupos .grupo:last-of-type::after { background: var(--lilas); }
.grupos .vazio-th { text-align: left; }
.em-reais { font-size: 11.5px; font-weight: 500; color: var(--cinza); background: #F1EEF5; padding: 2px 8px; border-radius: 6px; }
.tabela-tx { font-size: 13px; }
.tabela-tx th, .tabela-tx td { padding: 9px 9px; }
.tabela-tx .cel-nome { max-width: 210px; }
.tabela-tx .cel-nome a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabela-tx .cel-nome small .etiqueta { margin-left: 2px; }
.cel-markup { color: var(--roxo-escuro); font-weight: 500; }
.rodape-tabela { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 24px; border-top: 1px solid var(--linha); font-size: 13px; color: var(--cinza); }
.paginacao { display: inline-flex; align-items: center; gap: 8px; }
.paginacao a { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--campo); border-radius: 9px; color: var(--tinta); }
.paginacao a:hover { border-color: var(--roxo); color: var(--roxo); }

/* ---------- Filtros ---------- */
.filtros { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px 20px; margin-bottom: 18px; }
.filtros-linha { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.filtros-linha .campo { flex: 0 1 160px; }
.filtros-linha .campo-data { flex-basis: 148px; }
.filtros-linha .campo-mes { flex-basis: 180px; }
.filtros-linha .campo-estab { flex: 1 1 200px; }
.filtros-linha .campo-busca { flex: 1 1 240px; }
.filtros-mais { margin-top: 12px; }
.filtros-mais > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--roxo); font-weight: 500; font-size: 13.5px; list-style: none; }
.filtros-mais > summary::-webkit-details-marker { display: none; }
.filtros-mais > summary::before { content: ""; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.filtros-mais[open] > summary::before { transform: rotate(45deg); }
.filtros-mais[open] > summary { margin-bottom: 12px; }
.filtros-acoes { display: flex; align-items: center; gap: 18px; margin-top: 14px; flex-wrap: wrap; }
.filtros-cons { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.filtros-cons .segmentos { align-self: flex-start; }
.segmentos { display: inline-flex; background: #F1EEF5; border-radius: 11px; padding: 3px; height: 40px; }
.segmentos a { display: flex; align-items: center; padding: 0 16px; border-radius: 8px; color: var(--cinza); font-weight: 500; text-decoration: none; }
.segmentos a.ativo { background: var(--branco); color: var(--tinta); box-shadow: 0 1px 3px rgba(36, 16, 63, .12); }
.alternador { display: inline-flex; align-items: center; gap: 9px; height: 40px; cursor: pointer; font-size: 14px; font-weight: 500; position: relative; }
.alternador input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.alt-trilho { width: 38px; height: 22px; border-radius: 999px; background: var(--campo); position: relative; transition: background-color .15s; flex: none; }
.alt-trilho::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .15s; }
.alternador input:checked + .alt-trilho { background: var(--vermelho); }
.alternador input:checked + .alt-trilho::after { transform: translateX(16px); }
.alternador input:focus-visible + .alt-trilho { outline: 2px solid var(--roxo); outline-offset: 2px; }

/* ---------- Totais e chips ---------- */
.faixa-totais { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--linha); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; margin-bottom: 16px; }
.tot { background: var(--branco); padding: 16px 18px 14px; min-width: 0; position: relative; }
.tot > span { display: block; font-size: 12.5px; color: var(--cinza); font-weight: 500; }
.tot > strong { display: block; font-family: var(--fonte-num); font-size: 20px; font-weight: 600; margin: 4px 0 2px; white-space: nowrap; letter-spacing: -.01em; }
.tot > small { display: block; font-size: 12px; color: var(--cinza); line-height: 1.4; }
.tot-markup::before, .tot-roy::before, .tot-com::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 3px; border-radius: 0 0 3px 3px; }
.tot-markup::before { background: var(--roxo); }
.tot-markup > strong { color: var(--roxo-escuro); }
.tot-roy::before { background: var(--ameixa); }
.tot-com::before { background: var(--amarelo); }
.tot-div > strong { color: var(--vermelho); }
.tot-ok > strong { color: var(--verde); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 7px 6px 12px; border-radius: 999px; border: 1px solid var(--linha); background: var(--branco); color: var(--tinta); font-size: 13px; font-weight: 500; text-decoration: none; }
.chip .ic { width: 15px; height: 15px; vertical-align: 0; }
.chip b { font-weight: 600; font-size: 12px; background: #F1EEF5; color: var(--cinza); padding: 1px 8px; border-radius: 999px; }
a.chip:hover { border-color: var(--roxo); }
.chip-erro .ic { color: var(--vermelho); }
.chip-ok .ic { color: var(--verde); }
.chip.ativo { background: var(--ameixa); border-color: var(--ameixa); color: #fff; }
.chip.ativo .ic { color: currentColor; }
.chip.ativo b { background: rgba(255, 255, 255, .16); color: #fff; }
.chip-erro.ativo { background: var(--vermelho); border-color: var(--vermelho); }
.chip-ambar { background: var(--ambar-claro); border-color: #F2DDA6; color: var(--ambar); }
.chip-ambar b { background: rgba(138, 90, 0, .12); color: var(--ambar); }

/* ---------- Visão geral: a lente ---------- */
.lente { display: grid; grid-template-columns: minmax(0, 1fr) 300px; padding: 0; overflow: hidden; }
.lente-corpo { padding: 26px 32px 28px; }
.rotulo-sec { font-family: var(--fonte); font-size: 13px; font-weight: 500; color: var(--cinza); letter-spacing: 0; }
.numero-hero { font-family: var(--fonte-num); font-size: 44px; font-weight: 600; letter-spacing: -.025em; line-height: 1.1; margin-top: 4px; }
.numero-hero .rs { font-size: 20px; vertical-align: 14px; margin-right: 2px; }
.numero-medio { font-family: var(--fonte-num); font-size: 24px; font-weight: 600; letter-spacing: -.02em; color: var(--roxo-escuro); }
.lente-nota { color: var(--cinza); font-size: 13px; margin-top: 4px; }
.lente-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 18px; }
.lente-markup-tag { text-align: right; }
.lente-markup-tag span, .lente-markup-tag small { display: block; font-size: 12.5px; color: var(--cinza); }
.lente-markup-tag strong { display: block; font-family: var(--fonte-num); font-size: 28px; font-weight: 600; color: var(--roxo); letter-spacing: -.02em; line-height: 1.15; }
.barra-volume { position: relative; height: 40px; border-radius: 10px; overflow: hidden;
  background-color: #EFEAF7;
  background-image: repeating-linear-gradient(90deg, transparent 0 11px, rgba(36, 16, 63, .05) 11px 12px);
}
.barra-volume .fatia { position: absolute; right: 0; top: 0; bottom: 0; background: var(--roxo); border-radius: 0 10px 10px 0; }
.funil { height: 54px; margin: 0 0 2px; background: linear-gradient(180deg, rgba(101, 40, 199, .32), rgba(101, 40, 199, .07)); clip-path: polygon(calc(100% - var(--w, 2%)) 0, 100% 0, 100% 100%, 0 100%); }
.markup-linha { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 2px 10px; }
.barra-split { display: flex; height: 40px; border-radius: 10px; overflow: hidden; background: var(--amarelo); }
.barra-split .seg-roy { background: var(--ameixa); }
.barra-split .seg-com { flex: 1; background: var(--amarelo); }
.split-legenda { display: flex; justify-content: space-between; gap: 20px; margin-top: 14px; }
.leg { display: flex; gap: 10px; align-items: flex-start; }
.leg-com { text-align: right; flex-direction: row-reverse; }
.leg-ponto { width: 10px; height: 10px; border-radius: 3px; margin-top: 5px; flex: none; }
.leg-roy .leg-ponto { background: var(--ameixa); }
.leg-com .leg-ponto { background: var(--amarelo); }
.leg > div > span, .leg small { display: block; font-size: 12.5px; color: var(--cinza); }
.leg strong { display: block; font-family: var(--fonte-num); font-size: 20px; font-weight: 600; letter-spacing: -.015em; }
.lente-origens { background: var(--roxo-suave); border-left: 1px solid var(--linha); padding: 26px 24px; }
.lente-origens h3 { margin-bottom: 6px; }
.lente-origens ul { list-style: none; margin: 0; padding: 0; }
.lente-origens li { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--linha); }
.lente-origens li:last-child { border-bottom: 0; }
.org-nome { font-weight: 600; font-size: 14px; }
.lente-origens li strong { font-family: var(--fonte-num); font-size: 16px; font-weight: 600; text-align: right; grid-row: 1 / span 2; grid-column: 2; align-self: center; }
.org-n, .org-vol { font-size: 12px; color: var(--cinza); grid-column: 1; }
.org-vol { grid-column: 1 / -1; }

.lista-imp { list-style: none; margin: 0; padding: 0; }
.lista-imp li { border-bottom: 1px solid var(--linha-2); }
.lista-imp li:last-child { border-bottom: 0; }
.lista-imp a { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "arq selo" "meta nums"; column-gap: 12px; row-gap: 2px; padding: 11px 0; text-decoration: none; color: var(--tinta); }
.lista-imp a:hover .li-arq span { color: var(--roxo); text-decoration: underline; }
.li-arq { grid-area: arq; display: flex; align-items: center; gap: 8px; font-weight: 500; min-width: 0; }
.li-arq span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.li-arq .ic { color: var(--cinza); }
.li-meta { grid-area: meta; font-size: 12px; color: var(--cinza); padding-left: 26px; }
.li-nums { grid-area: nums; font-size: 12px; color: var(--cinza); text-align: right; }
.lista-imp .selo { grid-area: selo; justify-self: end; }
.tabela-conf th small { display: block; }

/* ---------- Consolidado ---------- */
.prova { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; border-radius: 12px; border: 1px solid; margin-bottom: 16px; font-size: 13.5px; }
.prova .prova-ic { width: 22px; height: 22px; vertical-align: 0; }
.prova strong { display: block; font-size: 14px; }
.prova span { color: var(--tinta); opacity: .85; }
.prova .link { margin-left: auto; white-space: nowrap; align-self: center; }
.prova-ok { background: var(--verde-claro); border-color: #C3E5D1; }
.prova-ok .prova-ic, .prova-ok strong { color: var(--verde); }
.prova-erro { background: var(--vermelho-claro); border-color: #F5CAC5; }
.prova-erro .prova-ic, .prova-erro strong { color: var(--vermelho); }
.prova-neutra { background: #F1EEF5; border-color: var(--linha); }
.prova-neutra .prova-ic { color: var(--cinza); }
.tabela-cons { font-size: 13px; }
.tabela-cons th, .tabela-cons td { padding: 9px 10px; }
.tabela-cons .cel-nome { max-width: 260px; }
.linha-periodo > * { background: var(--fundo); font-weight: 600; border-top: 1px solid var(--linha); }
.linha-periodo .cel-per { font-family: var(--fonte-num); font-size: 14px; }
.tabela-cons tfoot th, .tabela-cons tfoot td { background: var(--ameixa); color: #fff; font-weight: 600; padding-top: 12px; padding-bottom: 12px; border-left-color: rgba(255, 255, 255, .14); }
.tabela-cons tfoot th { font-family: var(--fonte-num); }
.tabela-cons tfoot .cv { opacity: .7; }
.tabela-cons tfoot .dif-zero { color: rgba(255, 255, 255, .7); }
.tabela-cons tfoot .dif-fora { color: #FFB4AB; }
.tabela-cons tfoot .vazio { color: rgba(255, 255, 255, .45); }
.cartoes-tx, .cartoes-cons { display: none; }

/* ---------- Detalhe da transação ---------- */
.grade-detalhe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.passos { list-style: none; margin: 0; padding: 0; counter-reset: passo; }
.passos li { counter-increment: passo; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 0 14px 40px; border-bottom: 1px dashed var(--linha); }
.passos li:last-child { border-bottom: 0; }
.passos li::before { content: counter(passo); position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--roxo-claro); color: var(--roxo-escuro); font-family: var(--fonte-num); font-size: 12.5px; font-weight: 600; }
.passo-txt strong { display: block; font-size: 14.5px; font-weight: 600; }
.passo-txt span { display: block; font-size: 13px; color: var(--cinza); }
.passo-val { font-family: var(--fonte-num); font-size: 17px; font-weight: 600; white-space: nowrap; text-align: right; }
.passo-markup .passo-val { color: var(--roxo-escuro); }
.passo-markup::before { background: var(--roxo) !important; color: #fff !important; }
.passo-roy::before { background: var(--ameixa) !important; color: #fff !important; }
.passo-com::before { background: var(--amarelo) !important; color: var(--ameixa) !important; }
.passo-com .passo-val { font-size: 20px; }
.passos-compactos li { padding-top: 11px; padding-bottom: 11px; }
.sub-h2 { margin: 26px 0 8px; }
.ficha { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; margin: 0; }
.ficha > div { padding: 9px 0; border-bottom: 1px solid var(--linha-2); min-width: 0; }
.ficha dt { font-size: 12px; color: var(--cinza); }
.ficha dd { margin: 1px 0 0; font-size: 14px; overflow-wrap: anywhere; }
.cod { font-size: 13px; letter-spacing: .01em; }

/* ---------- Importações ---------- */
.resultado { display: flex; gap: 18px; padding: 20px 24px; border-radius: var(--raio); border: 1px solid; margin-bottom: 20px; background: var(--branco); }
.res-icone { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.res-icone .ic { width: 24px; height: 24px; vertical-align: 0; }
.res-corpo { min-width: 0; flex: 1; }
.res-corpo h2 { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
.res-corpo > p { color: var(--tinta); overflow-wrap: anywhere; }
.res-nums { display: flex; flex-wrap: wrap; gap: 10px 32px; margin: 16px 0; }
.res-nums span { display: block; font-size: 12px; color: var(--cinza); }
.res-nums strong { display: block; font-family: var(--fonte-num); font-size: 22px; font-weight: 600; }
.rn-ok strong { color: var(--verde); }
.rn-erro strong { color: var(--vermelho); }
.res-aviso { display: flex; gap: 8px; font-size: 13.5px; margin-top: 8px; color: var(--tinta); }
.res-aviso .ic { margin-top: 1px; vertical-align: 0; color: var(--cinza); }
.res-acoes { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 16px; }
.resultado-bloqueio, .resultado-erro { border-color: #F5CAC5; background: linear-gradient(90deg, var(--vermelho-claro), #fff 70%); }
.resultado-bloqueio .res-icone, .resultado-erro .res-icone { background: var(--vermelho); color: #fff; }
.resultado-bloqueio h2, .resultado-erro h2 { color: var(--vermelho); }
.resultado-ok { border-color: #C3E5D1; background: linear-gradient(90deg, var(--verde-claro), #fff 70%); }
.resultado-ok .res-icone { background: var(--verde); color: #fff; }
.resultado-ambar { border-color: #F2DDA6; background: linear-gradient(90deg, var(--ambar-claro), #fff 70%); }
.resultado-ambar .res-icone { background: #C98A00; color: #fff; }
.grade-import { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.envio { display: grid; gap: 14px; }
.soltar { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 34px 20px; border: 2px dashed #CDBFE6; border-radius: var(--raio); background: var(--roxo-suave); cursor: pointer; transition: border-color .15s, background-color .15s; }
.soltar input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.soltar:hover, .soltar.arrastando { border-color: var(--roxo); background: var(--roxo-claro); }
.soltar.escolhido { border-style: solid; border-color: var(--roxo); background: var(--roxo-claro); }
.soltar:focus-within { outline: 2px solid var(--roxo); outline-offset: 2px; }
.soltar-ic { width: 52px; height: 52px; border-radius: 50%; background: var(--branco); color: var(--roxo); display: grid; place-items: center; margin-bottom: 4px; box-shadow: 0 2px 8px rgba(101, 40, 199, .14); }
.soltar-ic .ic { width: 24px; height: 24px; vertical-align: 0; }
.soltar-tit { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.soltar-sub { font-size: 13px; color: var(--cinza); }
.envio-linha { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.envio-linha .campo { flex: 1 1 220px; }
.envio .nota { margin-top: -4px; }
.regras-import ul { list-style: none; margin: 0; padding: 0; }
.regras-import li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linha-2); }
.regras-import li:last-child { border-bottom: 0; padding-bottom: 0; }
.regras-import li .ic { color: var(--roxo); margin-top: 2px; vertical-align: 0; }
.regras-import strong { display: block; font-size: 14px; }
.regras-import span { display: block; font-size: 13px; color: var(--cinza); }
.h1-arquivo { font-size: 22px !important; overflow-wrap: anywhere; }
.faixa-imp { margin-bottom: 20px; }

/* ---------- Configuração ---------- */
.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--linha); margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; }
.abas a { padding: 10px 14px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--cinza); font-weight: 500; text-decoration: none; white-space: nowrap; }
.abas a:hover { color: var(--tinta); }
.abas a.ativo { color: var(--roxo); border-bottom-color: var(--roxo); }
.grade-config { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.form-regras { display: grid; gap: 16px; }
.form-regras > h2 { margin-bottom: 0; }
.campos-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.como-calcula { background: var(--ameixa); border-color: var(--ameixa); color: #fff; background-image: radial-gradient(90% 70% at 100% 0%, rgba(101, 40, 199, .5), transparent 70%); }
.como-calcula h2 { color: #fff; }
.como-calcula .nota { color: rgba(255, 255, 255, .72); }
.como-calcula > .nota:first-of-type { margin: -6px 0 6px; }
.como-calcula .passos li { border-bottom-color: rgba(255, 255, 255, .14); }
.como-calcula .passo-txt span { color: rgba(255, 255, 255, .66); }
.como-calcula .passo-val { color: #fff; }
.como-calcula .passos li::before { background: rgba(255, 255, 255, .14); color: #fff; }
.como-calcula .passo-roy::before { background: var(--lilas) !important; color: var(--ameixa) !important; }
.como-calcula .rs { color: rgba(255, 255, 255, .6); }
.linha-tempo { list-style: none; margin: 0; padding: 0; }
.linha-tempo li { position: relative; padding: 9px 0 9px 20px; border-left: 2px solid var(--roxo-claro); margin-left: 4px; }
.linha-tempo li::before { content: ""; position: absolute; left: -6px; top: 14px; width: 10px; height: 10px; border-radius: 50%; background: var(--branco); border: 2px solid var(--roxo); }
.lt-quando { display: block; font-size: 12px; color: var(--cinza); }
.linha-tempo strong { display: block; font-size: 13px; font-weight: 600; }
.lt-desc { display: block; font-size: 13.5px; overflow-wrap: anywhere; }
.lista-sem-tabela { list-style: none; margin: 8px 0 0; padding: 0; }
.lista-sem-tabela li { padding: 12px 0; border-top: 1px solid #F2DDA6; }
.form-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.form-linha > strong { font-size: 14.5px; }
.form-linha .nota { margin: 0; }
.form-linha .campo-inline { margin-left: auto; }
.tabela-planos .cel-nome small { max-width: 320px; }
.acoes-usuario, .add-bandeira { position: relative; display: inline-block; }
.acoes-usuario > summary, .add-bandeira > summary { cursor: pointer; }
.acoes-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 15; width: 270px; display: grid; gap: 14px; padding: 14px; background: var(--branco); border: 1px solid var(--linha); border-radius: 12px; box-shadow: var(--sombra); text-align: left; white-space: normal; }
.acoes-pop form { display: grid; gap: 10px; margin: 0; }
.add-bandeira .acoes-pop { width: 190px; gap: 2px; padding: 8px; }
.add-bandeira .acoes-pop a { padding: 8px 10px; border-radius: 8px; color: var(--tinta); text-decoration: none; }
.add-bandeira .acoes-pop a:hover { background: var(--roxo-claro); color: var(--roxo-escuro); }
.tabela-hist .cel-desc { min-width: 320px; }

/* Plano */
.grade-plano { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.campos-plano { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.campo-largo { grid-column: 1 / -1; }
.legenda-plano dl { margin: 0; }
.legenda-plano dt { font-weight: 600; font-size: 13.5px; }
.legenda-plano dd { margin: 2px 0 12px; font-size: 13px; color: var(--cinza); }
.legenda-plano dd:last-child { margin-bottom: 0; }
.linha-pix { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding: 10px 24px 16px; border-bottom: 1px solid var(--linha); }
.linha-pix > strong { font-family: var(--fonte-num); font-size: 15px; width: 110px; padding-bottom: 8px; }
.campo-taxa { display: flex; flex-direction: column; gap: 4px; }
.campo-taxa > span:first-child { font-size: 12px; color: var(--cinza); font-weight: 500; }
.campo-taxa .campo-sufixo { width: 130px; }
.campo-taxa input { text-align: right; height: 36px !important; }
.grade-taxas { border-collapse: separate; border-spacing: 0; font-size: 13px; min-width: 100%; }
.grade-taxas th, .grade-taxas td { padding: 5px 5px; border-bottom: 1px solid var(--linha-2); }
.grade-taxas thead th { background: var(--roxo-suave); }
.grade-taxas .gt-prod { position: sticky; left: 0; z-index: 2; background: var(--branco); text-align: left; padding-left: 24px; padding-right: 14px; min-width: 120px; white-space: nowrap; border-right: 1px solid var(--linha); font-weight: 500; }
.grade-taxas thead .gt-prod { background: var(--roxo-suave); font-size: 12px; color: var(--cinza); vertical-align: bottom; padding-bottom: 8px; }
.gt-band { text-align: center; font-weight: 600; padding-top: 10px !important; border-left: 1px solid var(--linha); white-space: nowrap; }
.gt-band small { font-size: 11px; font-weight: 500; color: var(--roxo); background: var(--roxo-claro); padding: 0 6px; border-radius: 5px; }
.gt-sub { font-size: 11.5px; font-weight: 500; color: var(--cinza); text-align: center; padding-bottom: 8px !important; }
.gt-sub.gt-rec { color: var(--roxo); }
.grade-taxas td { text-align: center; }
.grade-taxas td.g-ini { padding-left: 10px; }
.grade-taxas td:last-child { padding-right: 16px; }
.grade-taxas input { width: 70px; height: 32px; padding: 0 8px; text-align: right; border: 1px solid #E2DCEB; border-radius: 7px; background: var(--branco); font-size: 13px; font-variant-numeric: tabular-nums; }
.grade-taxas td.gt-rec input { background: var(--roxo-suave); border-color: #DCCFF3; color: var(--roxo-escuro); font-weight: 500; }
.grade-taxas input.mudou, .campo-taxa input.mudou { background: #FFF8DF !important; border-color: #E8B500 !important; }
.grade-taxas tbody tr:hover th, .grade-taxas tbody tr:hover td { background: #FCFBFE; }
.nota-grade { padding: 0 24px 16px; }
.barra-salvar { position: sticky; bottom: 16px; z-index: 10; display: flex; align-items: center; justify-content: flex-end; gap: 18px; padding: 12px 16px 12px 20px; margin-bottom: 20px; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: 0 10px 30px rgba(36, 16, 63, .12); }
.barra-salvar [data-mudancas] { margin-right: auto; color: var(--cinza); font-size: 14px; }
.barra-salvar.tem-mudanca { border-color: #E8B500; }
.barra-salvar.tem-mudanca [data-mudancas] { color: var(--tinta); font-weight: 600; }

.form-estreito { max-width: 460px; display: grid; gap: 14px; }
.form-estreito .aviso { margin: 0; }
.pagina-erro { display: flex; gap: 18px; max-width: 640px; padding: 28px; }
.pagina-erro .res-icone { background: var(--ambar-claro); color: var(--ambar); }
.pagina-erro h1 { font-size: 22px; margin-bottom: 6px; }
.pagina-erro p { color: var(--cinza); margin-bottom: 18px; }

/* ---------- Login ---------- */
.tela-login { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100vh; background: var(--fundo); }
.login-arte { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 48px 56px; color: #fff; background: var(--ameixa); background-image: radial-gradient(80% 60% at 100% 0%, rgba(101, 40, 199, .65), transparent 70%), radial-gradient(60% 50% at 0% 100%, rgba(101, 40, 199, .35), transparent 70%); }
.login-logo { width: 124px; height: auto; }
.login-frase h2 { font-size: 34px; font-weight: 600; line-height: 1.18; letter-spacing: -.02em; max-width: 17ch; }
.login-frase p { margin-top: 16px; color: rgba(255, 255, 255, .74); font-size: 16px; max-width: 44ch; }
.mini-lente { max-width: 460px; display: grid; gap: 8px; }
.ml-rotulo { display: flex; justify-content: space-between; font-size: 12.5px; color: rgba(255, 255, 255, .7); }
.ml-barra { position: relative; height: 28px; border-radius: 8px; background-color: rgba(255, 255, 255, .1); background-image: repeating-linear-gradient(90deg, transparent 0 9px, rgba(255, 255, 255, .06) 9px 10px); overflow: hidden; }
.ml-barra i { position: absolute; right: 0; top: 0; bottom: 0; width: 5%; background: #A97CF5; }
.ml-funil { height: 46px; margin: -8px 0; background: linear-gradient(180deg, rgba(169, 124, 245, .6), rgba(169, 124, 245, .12)); clip-path: polygon(95% 0, 100% 0, 100% 100%, 0 100%); }
.ml-split { display: flex; height: 28px; border-radius: 8px; overflow: hidden; }
.ml-roy { width: 15%; background: var(--lilas); }
.ml-com { flex: 1; background: var(--amarelo); }
.login-form { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 32px 20px; }
.login-logo-movel { display: none; width: 96px; height: auto; }
.cartao-login { width: 100%; max-width: 384px; display: grid; gap: 14px; background: var(--branco); border: 1px solid var(--linha); border-radius: 18px; padding: 34px 32px 28px; box-shadow: var(--sombra); }
.cartao-login h1 { font-size: 26px; font-weight: 600; }
.cartao-login .sub { color: var(--cinza); margin: -10px 0 6px; }
.cartao-login .aviso { margin: 0; }
.cartao-login .botao { margin-top: 4px; }
.cartao-login .nota { margin-top: 2px; text-align: center; }

/* ---------- Instalação ---------- */
.tela-instalar { min-height: 100vh; background: var(--fundo); background-image: radial-gradient(70% 40% at 50% 0%, rgba(101, 40, 199, .1), transparent 70%); }
.instalar { max-width: 980px; margin: 0 auto; padding: 40px 20px 56px; }
.instalar-logo { width: 104px; height: auto; display: block; margin-bottom: 26px; }
.instalar-cabeca { margin-bottom: 20px; }
.instalar-cabeca h1 { font-size: 28px; font-weight: 600; }
.instalar-cabeca p { color: var(--cinza); margin-top: 6px; max-width: 60ch; }
.instalar-grade { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.instalar-form { display: grid; gap: 20px; }
.instalar-form fieldset { border: 0; margin: 0; padding: 0; }
.instalar-form legend { font-family: var(--fonte-num); font-size: 16px; font-weight: 600; padding: 0; margin-bottom: 12px; }
.instalar-form .aviso { margin: 0; }
.instalar-req ul { list-style: none; margin: 0; padding: 0; }
.instalar-req li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--linha-2); font-size: 14px; }
.req-ok .ic { color: var(--verde); }
.req-falta { color: var(--vermelho); font-weight: 500; }
.instalar-fim { max-width: 560px; display: grid; gap: 14px; justify-items: start; padding: 28px; }
.instalar-fim h1 { font-size: 24px; font-weight: 600; }
.instalar-fim p { color: var(--cinza); }
.instalar-fim .aviso { margin: 0; }
.instalar-ok { background: var(--verde); color: #fff; }

/* ---------- Telas médias ---------- */
@media (max-width: 1180px) {
  .principal { padding: 28px 28px 48px; }
  .faixa-totais { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .faixa-totais .tot:first-child { grid-column: span 1; }
  .lente { grid-template-columns: 1fr; }
  .lente-origens { border-left: 0; border-top: 1px solid var(--linha); }
  .lente-origens ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; }
  .lente-origens li { border-bottom: 0; }
}

@media (max-width: 960px) {
  .lateral { display: none; }
  .principal { margin-left: 0; padding: 20px 16px calc(88px + env(safe-area-inset-bottom)); }
  .topo-movel { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 30; height: 56px; padding: 0 16px; background: var(--branco); border-bottom: 1px solid var(--linha); }
  .marca-movel { display: flex; align-items: center; gap: 10px; text-decoration: none; }
  .marca-movel img { height: 28px; width: auto; }
  .marca-movel span { font-family: var(--fonte-num); font-size: 13px; font-weight: 500; color: var(--cinza); border-left: 1px solid var(--linha); padding-left: 10px; }
  .conta-movel { position: relative; }
  .conta-movel summary { list-style: none; cursor: pointer; }
  .conta-movel summary::-webkit-details-marker { display: none; }
  .conta-menu { position: absolute; right: 0; top: calc(100% + 10px); min-width: 210px; display: grid; gap: 4px; padding: 12px; background: var(--branco); border: 1px solid var(--linha); border-radius: 12px; box-shadow: var(--sombra); }
  .conta-menu strong { font-size: 14px; padding: 2px 8px 8px; border-bottom: 1px solid var(--linha); margin-bottom: 4px; }
  .conta-menu a, .conta-menu button { display: block; width: 100%; text-align: left; padding: 8px; border: 0; border-radius: 8px; background: none; color: var(--tinta); text-decoration: none; font-size: 14px; cursor: pointer; }
  .conta-menu a:hover, .conta-menu button:hover { background: var(--roxo-claro); }
  .conta-menu form { margin: 0; }
  .abas-movel { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: var(--branco); border-top: 1px solid var(--linha); box-shadow: 0 -4px 16px rgba(36, 16, 63, .05); }
  .abas-movel a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; border-radius: 10px; color: var(--cinza); text-decoration: none; font-size: 11px; font-weight: 500; }
  .abas-movel a .ic { width: 22px; height: 22px; }
  .abas-movel a.ativo { color: var(--roxo); }
  .abas-movel a.ativo .ic { background: var(--roxo-claro); border-radius: 8px; box-sizing: content-box; padding: 3px 12px; margin: -3px 0; }
  .grade-2, .grade-detalhe, .grade-import, .grade-config, .grade-plano { grid-template-columns: minmax(0, 1fr); }
  .barra-salvar { bottom: calc(80px + env(safe-area-inset-bottom)); }
  .tela-login { grid-template-columns: 1fr; }
  .login-arte { display: none; }
  .login-logo-movel { display: block; }
}

/* ---------- Celular ---------- */
@media (max-width: 760px) {
  body { font-size: 14px; }
  .cabeca { align-items: flex-start; margin-bottom: 16px; }
  .cabeca h1 { font-size: 23px; }
  .cabeca-acoes { width: 100%; }
  .cabeca-acoes .botao { flex: 1; }
  .cabeca-acoes .campo-inline { width: 100%; }
  .cabeca-acoes .campo-inline select { flex: 1; }
  .painel { padding: 16px; border-radius: 12px; }
  .painel-tabela { padding: 0; }
  .painel-tabela > .painel-cabeca { padding: 14px 16px 4px; }
  .painel-tabela > .vazio-linha { padding: 6px 16px 18px; }
  .painel-tabela .tabela th:first-child, .painel-tabela .tabela td:first-child { padding-left: 16px; }
  .painel-tabela .tabela th:last-child, .painel-tabela .tabela td:last-child { padding-right: 16px; }
  .filtros { padding: 14px; }
  .filtros-linha { gap: 10px; }
  .filtros-linha .campo, .filtros-linha .campo-estab, .filtros-linha .campo-busca, .filtros-linha .campo-mes { flex: 1 1 100%; }
  .filtros-linha .campo-data { flex: 1 1 calc(50% - 5px); }
  .filtros-linha > .botao, .filtros-acoes .botao { width: 100%; }
  .filtros-acoes { gap: 10px 18px; }
  .filtros-cons { gap: 12px; }
  .segmentos { width: 100%; }
  .segmentos a { flex: 1; justify-content: center; }
  .faixa-totais { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faixa-totais .tot:first-child { grid-column: 1 / -1; }
  .faixa-imp .tot:first-child { grid-column: auto; }
  .tot { padding: 13px 14px 12px; }
  .tot > strong { font-size: 17px; }
  .tot-markup::before, .tot-roy::before, .tot-com::before { left: 14px; right: 14px; }
  .chips { gap: 6px; }
  .chip { flex: none; }

  .lente-corpo { padding: 20px 16px 18px; }
  .lente-topo { flex-direction: column; align-items: flex-start; gap: 10px; }
  .lente-markup-tag { text-align: left; display: flex; align-items: baseline; gap: 8px; }
  .lente-markup-tag strong { font-size: 22px; }
  .numero-hero { font-size: 32px; }
  .numero-hero .rs { font-size: 16px; vertical-align: 9px; }
  .numero-medio { font-size: 20px; }
  .barra-volume, .barra-split { height: 30px; }
  .funil { height: 40px; }
  .leg strong { font-size: 17px; }
  .lente-origens { padding: 16px; }
  .lente-origens ul { display: block; }
  .lente-origens li { border-bottom: 1px solid var(--linha); }

  .tabela-tx, .tabela-cons { display: none; }
  .cartoes-tx, .cartoes-cons { display: block; list-style: none; margin: 0; padding: 0; }
  .cartoes-cons ul { list-style: none; margin: 0; padding: 0; }
  .cc-per { font-size: 14px; font-weight: 600; padding: 10px 16px; background: var(--fundo); border-bottom: 1px solid var(--linha); }
  .cartoes-tx li, .cartoes-cons li { border-bottom: 1px solid var(--linha); }
  .cartoes-tx a, .cartoes-cons a { display: block; padding: 14px 16px; color: var(--tinta); text-decoration: none; }
  .cartao-div { background: #FFF8F7; box-shadow: inset 3px 0 0 var(--vermelho); }
  .ct-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
  .ct-topo strong { font-size: 14.5px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
  .ct-meta { font-size: 12.5px; color: var(--cinza); margin: 2px 0 10px; }
  .ct-valores { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 6px; }
  .ct-valores-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ct-valores > div > span { display: block; font-size: 11.5px; color: var(--cinza); }
  .ct-valores strong { display: block; font-family: var(--fonte-num); font-size: 15px; font-weight: 600; white-space: nowrap; }
  .ct-valores .rs { display: none; }
  .ct-com strong { box-shadow: inset 0 -3px 0 rgba(245, 194, 27, .55); display: inline-block !important; }
  .ct-conf { display: grid; grid-template-columns: 66px minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px; align-items: baseline; padding: 6px 0 0; margin-top: 6px; border-top: 1px dashed var(--linha); font-size: 13px; }
  .ct-conf > span:first-child { font-weight: 500; color: var(--cinza); }
  .ct-conf > span:first-child small { display: block; font-weight: 400; white-space: nowrap; }
  .ct-conf small { font-size: 11px; color: var(--cinza-2); }
  .ct-conf .dif { text-align: right; }
  .ct-nota { font-size: 12.5px; color: var(--cinza); padding-top: 6px; margin-top: 6px; border-top: 1px dashed var(--linha); }
  .rodape-tabela { padding: 12px 16px; flex-direction: column; align-items: flex-start; }

  .tabela-cartoes thead, .tabela-conf thead { display: none; }
  .tabela-cartoes, .tabela-cartoes tbody, .tabela-cartoes tr, .tabela-conf, .tabela-conf tbody, .tabela-conf tr { display: block; width: 100%; }
  .tabela-cartoes tr, .tabela-conf tr { padding: 12px 16px; border-bottom: 1px solid var(--linha-2); }
  .tabela-conf tr { padding-left: 0; padding-right: 0; }
  .tabela-cartoes tr:last-child, .tabela-conf tr:last-child { border-bottom: 0; }
  .tabela-cartoes th, .tabela-cartoes td, .tabela-conf th, .tabela-conf td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 3px 0 !important; border: 0 !important; text-align: right; }
  .tabela-cartoes th[scope=row], .tabela-conf th[scope=row] { display: block; text-align: left; font-size: 14.5px; font-weight: 600; padding-bottom: 6px !important; }
  .tabela-cartoes td[data-rot]::before, .tabela-conf td[data-rot]::before { content: attr(data-rot); color: var(--cinza); font-size: 12.5px; text-align: left; flex: none; }
  .tabela-cartoes td small, .tabela-cartoes td .sob-selo { display: inline; margin-left: 6px; }
  .tabela-cartoes .cel-data { display: flex; }
  .tabela-cartoes .cel-data small { display: inline; margin-left: 6px; }
  .tabela-cartoes .cel-acao { display: block; text-align: left; padding-top: 8px !important; }
  .tabela-cartoes .cel-nome small, .tabela-conf th small { margin-top: 2px; }
  .tabela-hist .cel-desc { min-width: 0; font-weight: 500 !important; }
  .tabela-imp .linha-nova { box-shadow: inset 3px 0 0 var(--roxo); background: #F6F0FE; }
  .tabela-imp .linha-nova > * { background: none; }
  .tabela-cartoes td.cel-data::before { margin-right: auto; }
  .tabela-imp tr { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
  .tabela-imp .cel-arq { grid-column: 1 / -1; order: -2; }
  .tabela-imp .cel-data, .tabela-imp td[data-rot="Quem"] { order: -1; font-size: 13px; color: var(--cinza); padding-bottom: 8px !important; }
  .tabela-imp .cel-data { justify-content: flex-start; }
  .tabela-imp td[data-rot="Quem"] { justify-content: flex-end; }
  .tabela-imp td.cel-data::before, .tabela-imp td[data-rot="Quem"]::before, .tabela-imp td[data-rot="Situação"]::before { content: none; }
  .tabela-imp td[data-rot="Situação"] { grid-column: 1 / -1; justify-content: flex-start; padding-top: 10px !important; }
  .painel-tabela .tabela-cartoes th:first-child, .painel-tabela .tabela-cartoes td:first-child { padding-left: 0 !important; }
  .acoes-pop { position: static; width: auto; margin-top: 10px; box-shadow: none; }

  .prova { flex-wrap: wrap; padding: 12px 14px; }
  .prova > div { flex: 1 1 200px; }
  .prova .link { margin-left: 34px; }
  .passos li { padding-left: 36px; gap: 10px; }
  .passo-val { font-size: 15px; }
  .passo-com .passo-val { font-size: 17px; }
  .ficha { grid-template-columns: 1fr; }
  .resultado { flex-direction: column; gap: 12px; padding: 16px; }
  .res-icone { width: 40px; height: 40px; }
  .res-nums { gap: 10px 22px; }
  .res-nums strong { font-size: 19px; }
  .soltar { padding: 26px 16px; }
  .envio-linha .botao { width: 100%; }
  .campos-2, .campos-plano { grid-template-columns: 1fr; }
  .form-linha .campo-inline { margin-left: 0; width: 100%; }
  .form-linha .campo-inline select { flex: 1; min-width: 0; }
  .form-linha .botao { width: 100%; }
  .linha-pix { padding: 8px 16px 14px; gap: 12px; }
  .linha-pix > strong { width: 100%; padding: 0; }
  .campo-taxa { flex: 1 1 calc(50% - 6px); }
  .campo-taxa .campo-sufixo { width: 100%; }
  .grade-taxas .gt-prod { padding-left: 16px; min-width: 96px; }
  .nota-grade { padding: 0 16px 14px; }
  .barra-salvar { flex-wrap: wrap; gap: 10px 16px; padding: 10px 12px 10px 14px; }
  .barra-salvar [data-mudancas] { flex: 1 1 100%; font-size: 13px; }
  .barra-salvar .botao { flex: 1; }
  .abas { margin-right: -16px; }
  .pagina-erro { flex-direction: column; padding: 20px; }
  .instalar { padding: 24px 16px 40px; }
  .instalar-grade { grid-template-columns: 1fr; }
  .instalar-cabeca h1 { font-size: 23px; }
  .cartao-login { padding: 26px 20px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
#recalcular .nota { margin-bottom: 14px; }