/* Kit Olhar do gateway. Tokens e componentes do Olhar BaaS (baas/web/src/styles.css) e gráficos do olhar-tracking.
   Toda classe leva o prefixo ol- e toda regra de elemento fica presa a :where(.ol-shell, .ol-page), porque as telas
   antigas (Bootstrap + Mannat) carregam este arquivo junto. A única exceção é o :root: tokens e color-scheme são
   globais de propósito (o tema é um só) e andam junto com o tema.js, que acerta o data-bs-theme das telas antigas.
   A View Transition entre documentos é do head-css.php, não daqui. Guia: docs/redesign/DESIGN_SYSTEM.md.
   Exceção também: a barra de rolagem (fina e tingida, inclusive no Safari) vale para a página inteira.
   Identidade (docs/redesign/DESIGN.md): o azul Olhar é ação, seleção e foco; verde-água, violeta, âmbar, rosa e celeste
   identificam área e série de dado; verde, âmbar e vermelho de estado só dizem estado.
   Vidro só na navegação; conteúdo em placas sólidas. Tema por light-dark(): data-theme fixa a escolha. */

:root { color-scheme: light dark;
  --brand: #0038e5;
  --bg: light-dark(#f2f4f8, #0b0d12);
  --surface: light-dark(#ffffff, #12151c);
  --surface-2: light-dark(#f5f7fb, #181c25);
  --surface-3: light-dark(#eaeef5, #20252f);
  --line: light-dark(rgba(16, 26, 54, 0.09), rgba(220, 228, 250, 0.08));
  --line-strong: light-dark(rgba(16, 26, 54, 0.15), rgba(220, 228, 250, 0.15));
  --fg: light-dark(#0b1020, #eef1f8);
  --fg-2: light-dark(#3c4458, #b6bdcd);
  --fg-3: light-dark(#626a7c, #868ea0);
  --accent: light-dark(#0038e5, #6189ff);
  --accent-strong: light-dark(#002cb8, #85a4ff);
  --accent-fg: #ffffff;
  /* Fundo de ação: o azul do escuro (#6189ff) serve a texto e link; sob texto branco ele dá 3,2:1, então o fundo usa #2f5cf5 (5,3:1). */
  --accent-fill: light-dark(#0038e5, #2f5cf5);
  --accent-fill-strong: light-dark(#002cb8, #2348d6);
  --bad-fill: light-dark(#bf1f33, #c42a40);
  --warn-fill: light-dark(#9a5b00, #f2b24c);
  --warn-fill-fg: light-dark(#ffffff, #1a1200);
  /* Medidas de controle e cantos (DESIGN.md): uma fonte só. */
  --h-control: 40px;
  --r-control: 10px;
  --r-item: 14px;
  --r-card: 20px;
  --accent-soft: light-dark(rgba(0, 56, 229, 0.08), rgba(97, 137, 255, 0.15));
  --ok: light-dark(#0e7a3c, #4ccf86);
  --ok-soft: light-dark(rgba(16, 150, 70, 0.11), rgba(76, 207, 134, 0.13));
  --warn: light-dark(#9a5b00, #f2b24c);
  --warn-soft: light-dark(rgba(214, 140, 0, 0.13), rgba(242, 178, 76, 0.13));
  --bad: light-dark(#bf1f33, #ff7586);
  --bad-soft: light-dark(rgba(214, 33, 60, 0.1), rgba(255, 117, 134, 0.13));
  /* Cores de área e de série (DESIGN.md, The Azul É Ação Rule): nunca tons do mesmo azul num gráfico. */
  --teal: light-dark(#09776c, #4fd1c0);
  --teal-soft: light-dark(rgba(11, 138, 125, 0.11), rgba(79, 209, 192, 0.14));
  --violet: light-dark(#6d3ff2, #a98bff);
  --violet-soft: light-dark(rgba(109, 63, 242, 0.1), rgba(169, 139, 255, 0.15));
  --amber: light-dark(#975a00, #f5b54a);
  --amber-soft: light-dark(rgba(214, 140, 0, 0.12), rgba(245, 181, 74, 0.14));
  --rose: light-dark(#c72b51, #ff8aa5);
  --rose-soft: light-dark(rgba(212, 56, 94, 0.1), rgba(255, 138, 165, 0.14));
  --sky: light-dark(#0971aa, #5cc2f5);
  --sky-soft: light-dark(rgba(10, 132, 199, 0.1), rgba(92, 194, 245, 0.14));
  --orange: light-dark(#b2410f, #ff9a62);
  --orange-soft: light-dark(rgba(178, 65, 15, 0.1), rgba(255, 154, 98, 0.14));
  --slate: light-dark(#4b5466, #aab3c5);
  --berry: light-dark(#9c2a74, #f08ccd);
  --berry-soft: light-dark(rgba(156, 42, 116, 0.1), rgba(240, 140, 205, 0.15));
  --slate-soft: light-dark(rgba(75, 84, 102, 0.1), rgba(170, 179, 197, 0.14));
  --c1: var(--teal);
  --c2: var(--violet);
  --c3: var(--amber);
  --c4: var(--rose);
  --c5: var(--sky);
  --c6: var(--orange);
  /* Séries dos gráficos, nesta ordem: violeta, âmbar, verde-água, laranja, azul e rosa. O azul é a cor de ação do
     produto e fica para o fim (o PO reprovou gráfico "todo azul"). Passam no validador de paleta (faixa de luminosidade,
     croma, daltonismo e contraste) nos dois temas; o escuro tem tons próprios, não a inversão do claro. */
  --serie-1: light-dark(#6d3ff2, #8a66f0);
  --serie-2: light-dark(#975a00, #bd8216);
  --serie-3: light-dark(#008a78, #1a9c8b);
  --serie-4: light-dark(#b2410f, #d96a33);
  --serie-5: light-dark(#0971aa, #2f93c8);
  --serie-6: light-dark(#c72b51, #d9587a);
  /* Cor de significado: dinheiro que entra é verde; cada método tem a mesma cor em todas as telas. */
  --dinheiro: var(--ok);
  --metodo-pix: var(--serie-3);
  --metodo-cartao: var(--serie-1);
  --metodo-boleto: var(--serie-2);
  --glass-tint: light-dark(rgba(255, 255, 255, 0.55), rgba(22, 26, 35, 0.5));
  --glass-rim-hi: light-dark(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.26));
  --glass-rim-lo: light-dark(rgba(16, 26, 54, 0.12), rgba(0, 0, 0, 0.5));
  --shadow-near: light-dark(rgba(10, 20, 50, 0.06), rgba(0, 0, 0, 0.45));
  --shadow-far: light-dark(rgba(10, 20, 60, 0.18), rgba(0, 0, 0, 0.6));
  --glass-shadow: 0 1px 2px var(--shadow-near), 0 12px 32px -16px var(--shadow-far);
  --card-shadow: 0 1px 2px var(--shadow-near), 0 8px 24px -18px var(--shadow-far);
  --selected: light-dark(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.09));
  --selected-hi: light-dark(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.14));
  --selected-sh: light-dark(rgba(10, 20, 50, 0.1), rgba(0, 0, 0, 0.5));
  --selected-shadow: inset 0 1px 1px var(--selected-hi), 0 1px 3px var(--selected-sh);
  --wall-ink: light-dark(rgba(0, 56, 229, 0.05), rgba(140, 165, 230, 0.045));
  --wall-dot: light-dark(rgba(16, 26, 54, 0.07), rgba(220, 228, 250, 0.045));
  --code-bg: light-dark(#f4f6fb, #0d1119);
  --code-fg: light-dark(#1a2340, #dbe2f3);
  --code-key: light-dark(#0038e5, #85a4ff);
  --code-str: light-dark(#8a4b08, #f2c27a);
  --code-com: light-dark(#7d8597, #6b7487);
  --code-num: light-dark(#1a2b5c, #aab6d6);
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  
  --control-bg: light-dark(rgba(255, 255, 255, 0.66), rgba(44, 50, 64, 0.46));
  --control-bg-hover: light-dark(rgba(255, 255, 255, 0.9), rgba(56, 64, 82, 0.6));
  --control-rim: light-dark(rgba(16, 26, 54, 0.11), rgba(255, 255, 255, 0.1));
  --control-shadow: inset 0 1px 0 light-dark(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.07)), 0 1px 2px var(--shadow-near), 0 6px 16px -10px var(--shadow-far);
  /* Borda de campo e de controle com 3:1 contra o fundo (WCAG 1.4.11); --line-strong fica para divisórias. */
  /* Borda do campo: 3:1 no claro (WCAG 1.4.11); no escuro, mais discreta (o branco a 42% destoava) e o fundo do campo,
     mais claro que o card, ajuda a identificar o controle. */
  --line-control: light-dark(rgba(16, 26, 54, 0.5), rgba(220, 228, 250, 0.26));
  --line-control-hover: light-dark(rgba(16, 26, 54, 0.62), rgba(220, 228, 250, 0.4));
  --field-bg: light-dark(#f7f9fc, #1d222c);
  --badge-fg: light-dark(#fff, #0b1020);
  --veil: light-dark(rgba(10, 16, 40, 0.3), rgba(0, 0, 0, 0.6));
  --scroll-thumb: light-dark(rgba(16, 26, 54, 0.22), rgba(220, 228, 250, 0.2));
  --scroll-thumb-hover: light-dark(rgba(16, 26, 54, 0.38), rgba(220, 228, 250, 0.34));
  
  --t-large: 750 30px/1.12 var(--font-display);
  --t-title: 700 21px/1.2 var(--font-display);
  --t-headline: 650 15.5px/1.3 var(--font);
  --t-footnote: 500 13px/1.4 var(--font);
  --t-caption: 600 12px/1.35 var(--font); }
/* Sem light-dark() (iOS anterior ao 17.5): a paleta clara inteira, para nenhuma cor sumir. Gerado do :root acima. */
@supports not (color: light-dark(#000, #fff)) {
  :root { --bg: #f2f4f8; --surface: #ffffff; --surface-2: #f5f7fb; --surface-3: #eaeef5; --line: rgba(16, 26, 54, 0.09); --line-strong: rgba(16, 26, 54, 0.15); --line-control: rgba(16, 26, 54, 0.5); --badge-fg: #fff; --veil: rgba(10, 16, 40, 0.3); --line-control-hover: rgba(16, 26, 54, 0.62); --field-bg: #f7f9fc; --fg: #0b1020; --fg-2: #3c4458; --fg-3: #626a7c; --accent: #0038e5; --accent-strong: #002cb8; --accent-fill: #0038e5; --accent-fill-strong: #002cb8; --bad-fill: #bf1f33; --warn-fill: #9a5b00; --warn-fill-fg: #ffffff; --accent-soft: rgba(0, 56, 229, 0.08); --ok: #0e7a3c; --ok-soft: rgba(16, 150, 70, 0.11); --warn: #9a5b00; --warn-soft: rgba(214, 140, 0, 0.13); --bad: #bf1f33; --bad-soft: rgba(214, 33, 60, 0.1); --teal: #09776c; --teal-soft: rgba(11, 138, 125, 0.11); --violet: #6d3ff2; --violet-soft: rgba(109, 63, 242, 0.1); --amber: #975a00; --amber-soft: rgba(214, 140, 0, 0.12); --rose: #c72b51; --rose-soft: rgba(212, 56, 94, 0.1); --sky: #0971aa; --sky-soft: rgba(10, 132, 199, 0.1); --orange: #b2410f; --orange-soft: rgba(178, 65, 15, 0.1); --slate: #4b5466; --berry: #9c2a74; --berry-soft: rgba(156, 42, 116, 0.1); --slate-soft: rgba(75, 84, 102, 0.1); --glass-tint: rgba(255, 255, 255, 0.55); --glass-rim-hi: rgba(255, 255, 255, 0.95); --glass-rim-lo: rgba(16, 26, 54, 0.12); --shadow-near: rgba(10, 20, 50, 0.06); --shadow-far: rgba(10, 20, 60, 0.18); --selected: rgba(255, 255, 255, 0.8); --selected-hi: rgba(255, 255, 255, 0.95); --selected-sh: rgba(10, 20, 50, 0.1); --wall-ink: rgba(0, 56, 229, 0.05); --wall-dot: rgba(16, 26, 54, 0.07); --code-bg: #f4f6fb; --code-fg: #1a2340; --code-key: #0038e5; --code-str: #8a4b08; --code-com: #7d8597; --code-num: #1a2b5c; --control-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 2px var(--shadow-near), 0 6px 16px -10px var(--shadow-far); --control-bg: rgba(255, 255, 255, 0.66); --control-bg-hover: rgba(255, 255, 255, 0.9); --control-rim: rgba(16, 26, 54, 0.11); --scroll-thumb: rgba(16, 26, 54, 0.22); --scroll-thumb-hover: rgba(16, 26, 54, 0.38); --serie-1: #6d3ff2; --serie-2: #975a00; --serie-3: #008a78; --serie-4: #b2410f; --serie-5: #0971aa; --serie-6: #c72b51; }
}
:root[data-theme='light'] { color-scheme: light; }
:root[data-theme='dark'] { color-scheme: dark; }
:where(.ol-shell, .ol-page) *, :where(.ol-shell, .ol-page) *::before, :where(.ol-shell, .ol-page) *::after { box-sizing: border-box; }
:where(.ol-shell, .ol-page) { color: var(--fg); font: 14px/1.5 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:where(.ol-shell, .ol-page) button, :where(.ol-shell, .ol-page) input, :where(.ol-shell, .ol-page) select, :where(.ol-shell, .ol-page) textarea { font: inherit; color: inherit; }
:where(.ol-shell, .ol-page) a { color: var(--accent); }
:where(.ol-shell, .ol-page) h1, :where(.ol-shell, .ol-page) h2, :where(.ol-shell, .ol-page) h3, :where(.ol-shell, .ol-page) h4 { font-family: var(--font-display); text-wrap: balance; margin: 0; }
:where(.ol-shell, .ol-page) p { margin: 0; }
:where(.ol-shell, .ol-page) code, .ol-mono { font-family: var(--mono); font-size: 0.92em; }
:where(.ol-shell, .ol-page) :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:where(.ol-shell, .ol-page) [tabindex='-1']:focus, :where(.ol-shell, .ol-page) [tabindex='-1']:focus-visible { outline: none; }
.ol-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.ol-muted { color: var(--fg-3); }
.ol-num { font-variant-numeric: tabular-nums; }
.ol-wallpaper { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background-color: var(--bg); background-image: radial-gradient(var(--wall-dot) 1px, transparent 1.2px); background-size: 22px 22px; }
.ol-wallpaper svg { position: absolute; left: -8vw; bottom: -10vh; width: min(78vw, 1100px); height: auto; fill: none; stroke: var(--wall-ink); stroke-width: 3; }
.ol-glass { position: relative; isolation: isolate; border-radius: var(--glass-radius, 24px); background: var(--glass-tint); -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%); box-shadow: var(--glass-shadow); }
.ol-glass::before { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, var(--glass-rim-hi), transparent 32%, var(--glass-rim-lo) 66%, var(--glass-rim-hi)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; }
.ol-glass::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: inset 0 1px 0 light-dark(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.1)), inset 0 -1px 1px light-dark(rgba(10, 20, 50, 0.04), rgba(0, 0, 0, 0.25)); pointer-events: none; }
.ol-glass-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .ol-glass { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .ol-glass::before { background: var(--line-strong); }
}
@media (forced-colors: active) {
  .ol-glass { background: Canvas; backdrop-filter: none; border: 1px solid CanvasText; }
  .ol-glass::before, .ol-glass::after { display: none; }
}
.ol-app { position: relative; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; height: 100%; padding: 16px; }
.ol-app > .ol-sidebar, .ol-app > .ol-main { position: relative; z-index: 1; }
.ol-sidebar { display: flex; flex-direction: column; gap: 14px; padding: 18px 12px 14px; min-height: 0; }
.ol-brand { display: grid; gap: 10px; padding: 2px 10px 4px; }
.ol-logo { display: block; height: 30px; width: auto; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .ol-logo { filter: brightness(0) invert(1); }
}
:root[data-theme='dark'] .ol-logo { filter: brightness(0) invert(1); }
.ol-nav { display: grid; gap: 14px; overflow-y: auto; margin: 0 -4px; padding: 0 4px; align-content: start; }
.ol-nav-group { display: grid; gap: 2px; }
.ol-nav-title { padding: 0 12px 4px; font: 600 12px/1.35 var(--font); color: var(--fg-3); }
.ol-nav-item { position: relative; display: flex; align-items: center; gap: 11px; padding: 6px 10px; border-radius: var(--r-item); color: var(--fg); text-decoration: none; font-weight: 500; transition: background 0.25s var(--ease), box-shadow 0.25s var(--ease); border: 0; background: transparent; cursor: pointer; font-size: 14px; }
.ol-nav-item svg { flex: none; opacity: 0.75; }
.ol-nav-item:hover { background: color-mix(in srgb, var(--selected) 55%, transparent); }
.ol-nav-item[aria-current='page'] { background: var(--selected); box-shadow: var(--selected-shadow); font-weight: 650; }
.ol-nav-item[aria-current='page'] svg { opacity: 1; color: var(--tom, var(--fg)); }
.ol-side-foot { margin-top: auto; display: grid; gap: 10px; padding: 0 4px; }
.ol-who { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--r-item); background: color-mix(in srgb, var(--selected) 45%, transparent); color: inherit; text-decoration: none; transition: background 0.2s, box-shadow 0.2s; }
.ol-who:hover, .ol-who[aria-current='page'] { background: var(--selected); box-shadow: var(--selected-shadow); }
.ol-avatar { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--fg); font: 700 13px/1 var(--font); }
.ol-who-text { min-width: 0; }
.ol-who-name { font-weight: 650; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ol-who-role { font-size: 12px; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ol-side-actions { display: flex; gap: 6px; }
.ol-side-actions .ol-btn { flex: 1; }
.ol-main { min-width: 0; min-height: 0; overflow: auto; padding: 4px 6px 48px 4px; scroll-padding-top: 16px; }
.ol-page { display: grid; gap: 20px; align-content: start; width: 100%; min-width: 0; }
.ol-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 20px; padding: 4px 0 0; }
.ol-page-head h1 { font: var(--t-large); letter-spacing: -0.022em; }
.ol-page-head.ol-compact h2 { font: var(--t-title); letter-spacing: -0.015em; }
.ol-page-sub { margin-top: 6px; color: var(--fg-2); font-size: 14px; max-width: 70ch; }
.ol-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ol-back { display: inline-flex; align-items: center; gap: 6px; color: var(--fg-2); text-decoration: none; font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.ol-back:hover { color: var(--accent); }
.ol-back svg { width: 16px; height: 16px; }
.ol-mobile-only { display: none; }
.ol-card { min-width: 0; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 18px 20px; box-shadow: var(--card-shadow); }
.ol-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ol-card-head h2 { font: var(--t-headline); }
.ol-card-sub { margin-top: 2px; font-size: 12px; color: var(--fg-3); }
.ol-card-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ol-card-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ol-card.ol-flush { padding: 0; overflow: hidden; }
.ol-card.ol-flush > .ol-card-head { padding: 18px 20px 0; }
/* Uma coluna que nunca passa da largura do pai (a trilha auto crescia com texto sem quebra e transbordava). */
.ol-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.ol-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.ol-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.ol-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
.ol-grid-side { grid-template-columns: 320px minmax(0, 1fr); align-items: stretch; }
/* A coluna estica até a altura da vizinha, mas os cards dentro dela ficam na altura própria. */
.ol-grid-side > .ol-grid { align-content: start; }
/* Legado: .ol-hero (número gigante com números ao lado) é o template que o DESIGN.md proíbe; tela nova usa olFaixa. Sai quando a última tela migrar. */
.ol-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 28px; align-items: center; }
.ol-hero-stats .ol-stat-value { font-size: 17px; white-space: normal; }
.ol-hero-label { display: flex; align-items: center; gap: 8px; color: var(--fg-2); font-weight: 600; font-size: 13px; }
.ol-hero-label svg { color: var(--tom, var(--fg-2)); }
.ol-hero-value { margin: 6px 0 2px; font: 760 38px/1.1 var(--font-display); letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.ol-hero-note { font-size: 12px; color: var(--fg-3); }
.ol-hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ol-stat { display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--r-item); background: var(--surface-2); min-width: 0; align-content: start; }
.ol-stat.ol-stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px 18px; box-shadow: var(--card-shadow); }
.ol-stat-label { font-size: 12px; color: var(--fg-3); font-weight: 600; padding-right: 40px; }
.ol-stat { position: relative; }
.ol-stat-icon { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: var(--r-control); display: grid; place-items: center; background: var(--surface-3); color: var(--fg-2); }
.ol-stat-icon svg { width: 18px; height: 18px; }
.ol-stat-value { font: var(--t-title); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ol-stat-hint { font-size: 12px; color: var(--fg-3); }
.ol-stat-list { display: grid; gap: 10px; margin: 0; }
.ol-stat-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.ol-stat-row:last-child { border-bottom: 0; padding-bottom: 0; }
.ol-stat-row dt { color: var(--fg-2); font-size: 13px; }
.ol-stat-row dd { margin: 0; font-weight: 700; min-width: 0; text-align: right; overflow-wrap: anywhere; }
.ol-input.ol-input-prosa { font-family: inherit; font-size: inherit; }
.ol-segbar { display: grid; gap: 10px; }
.ol-segbar-track { display: flex; gap: 3px; height: 10px; border-radius: 999px; overflow: hidden; background: var(--surface-3); }
.ol-segbar-track span { display: block; height: 100%; transform-origin: left; animation: ol-grow-x 0.9s var(--ease) backwards; }
.ol-segbar-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.ol-segbar-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ol-segbar-legend b { color: var(--fg); }
.ol-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; flex: none; }
.ol-attention { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; flex: 1; align-content: start; }
.ol-attention-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--r-item); background: var(--surface-2); color: inherit; text-decoration: none; transition: background 0.2s; }
:where(.ol-shell, .ol-page) a.ol-attention-item:hover { background: var(--surface-3); }
.ol-attention-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--r-control); }
.ol-attention-icon svg { width: 17px; height: 17px; }
.ol-attention-icon.ol-ok { background: var(--ok-soft); color: var(--ok); }
.ol-attention-icon.ol-warn { background: var(--warn-soft); color: var(--warn); }
.ol-attention-icon.ol-bad { background: var(--bad-soft); color: var(--bad); }
.ol-attention-icon.ol-info { background: var(--sky-soft); color: var(--sky); }
.ol-attention-title { font-weight: 600; font-size: 13px; }
.ol-attention-text { font-size: 12px; color: var(--fg-3); }
.ol-attention-count { font: 720 18px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.ol-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--h-control); padding: 0 16px; border-radius: 999px; border: 1px solid var(--control-rim); background: var(--control-bg); box-shadow: var(--control-shadow); color: var(--fg); font-weight: 600; font-size: 13px; cursor: pointer; white-space: nowrap; text-decoration: none; transition: transform 0.15s var(--ease), background 0.2s, border-color 0.2s, box-shadow 0.2s; }
.ol-btn:hover:not(:disabled) { background: var(--control-bg-hover); }
.ol-btn[aria-pressed='true'], .ol-btn[aria-expanded='true'] { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.ol-btn:active:not(:disabled) { transform: scale(0.97); }
.ol-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.ol-btn svg { width: 17px; height: 17px; flex: none; }
.ol-btn-primary { background: var(--accent-fill); border-color: transparent; color: var(--accent-fg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 6px 16px -8px var(--accent-fill); }
.ol-btn-primary:hover:not(:disabled) { background: var(--accent-fill-strong); border-color: transparent; }
.ol-btn-danger { color: var(--bad); }
.ol-btn-danger:hover:not(:disabled) { border-color: var(--bad); background: var(--bad-soft); }
.ol-btn-danger-solid { background: var(--bad-fill); color: var(--accent-fg); border-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 6px 16px -8px var(--bad-fill); }
.ol-btn-danger-solid:hover:not(:disabled) { border-color: transparent; filter: brightness(1.08); }
.ol-btn-ghost { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.ol-btn-ghost:hover:not(:disabled) { background: var(--surface-2); border-color: transparent; }
.ol-btn-icon { width: var(--h-control); padding: 0; flex: none; }
.ol-btn-icon.ol-btn-sm { width: 32px; }
.ol-btn-sm { min-height: 32px; padding: 0 12px; font-size: 12px; }
.ol-btn-block { width: 100%; }
.ol-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: ol-spin 0.7s linear infinite; }
@keyframes ol-spin { to { transform: rotate(360deg); } }
.ol-field { display: grid; gap: 6px; min-width: 0; }
.ol-field > label { font-weight: 600; font-size: 13px; color: var(--fg-2); }
.ol-field-hint { font-size: 12px; color: var(--fg-3); }
.ol-field-error { font-size: 12px; color: var(--bad); }
.ol-input { width: 100%; min-height: var(--h-control); padding: 8px 12px; border-radius: var(--r-control); border: 1px solid var(--line-control); background: var(--field-bg); outline: none; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; }
.ol-input:hover:not(:focus):not(:disabled) { border-color: var(--line-control-hover); }
.ol-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); background: var(--surface); outline: 2px solid transparent; outline-offset: 1px; }
.ol-tab:focus-visible, .ol-periodo-opcoes a:focus-visible { outline-offset: -2px; }
.ol-input[aria-invalid='true'] { border-color: var(--bad); }
.ol-input[aria-invalid='true']:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 35%, transparent); }
.ol-input:disabled, .ol-input[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; }
.ol-input::placeholder { color: var(--fg-3); }
.ol-input:is(select) { -webkit-appearance: none; appearance: none; padding-right: 36px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238a93a6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; text-overflow: ellipsis; }
.ol-input:is(select)[multiple] { padding-right: 12px; background-image: none; }
:where(.ol-shell, .ol-page) textarea.ol-input { min-height: 90px; resize: vertical; font-family: var(--mono); font-size: 13px; }
.ol-input-wrap { position: relative; }
.ol-input-wrap .ol-input { padding-right: 46px; }
.ol-input-wrap > button { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
.ol-search { position: relative; min-width: 220px; flex: 1; max-width: 360px; }
.ol-search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--fg-3); pointer-events: none; }
.ol-search .ol-input { padding-left: 38px; min-height: 38px; border-radius: 999px; border-color: var(--control-rim); background: var(--control-bg); -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%); box-shadow: var(--control-shadow); }
.ol-search .ol-input:focus { background: var(--control-bg-hover); border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.ol-form { display: grid; gap: 14px; align-content: start; }
.ol-form-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 300px)); gap: 12px 16px; align-items: start; }
.ol-form-row > .ol-field:has(textarea), .ol-form-row > .ol-field-largo { grid-column: 1 / -1; max-width: 720px; }
.ol-form > .ol-field { max-width: 480px; }
.ol-form > .ol-field:has(textarea), .ol-form > .ol-field-largo { max-width: 720px; }
.ol-form-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.ol-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 650; white-space: nowrap; }
.ol-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ol-pill-ok { background: var(--ok-soft); color: var(--ok); }
.ol-pill-warn { background: var(--warn-soft); color: var(--warn); }
.ol-pill-bad { background: var(--bad-soft); color: var(--bad); }
.ol-pill-info { background: var(--sky-soft); color: var(--sky); }
.ol-pill-neutral { background: var(--surface-3); color: var(--fg-2); }
.ol-note { padding: 10px 14px; border-radius: var(--r-control); font-size: 13px; }
.ol-note-bad { background: var(--bad-soft); color: var(--bad); }
.ol-note-ok { background: var(--ok-soft); color: var(--ok); }
.ol-note-warn { background: var(--warn-soft); color: var(--warn); }
.ol-note-info { background: var(--accent-soft); color: var(--fg); }
.ol-tabs { display: flex; gap: 26px; width: 100%; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; padding: 0 2px; }
.ol-tab { position: relative; flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 10px 1px 12px; color: var(--fg-2); text-decoration: none; font-weight: 560; font-size: 14px; border: 0; background: transparent; cursor: pointer; transition: color 0.2s; }
.ol-tab svg { width: 17px; height: 17px; flex: none; opacity: 0.85; }
.ol-tab::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transition: transform 0.2s var(--ease); }
.ol-tab:hover { color: var(--fg); }
.ol-tab[aria-selected='true'] { color: var(--accent); font-weight: 650; }
.ol-tab[aria-selected='true']::after { transform: scaleX(1); }
.ol-tabs-filter { gap: 18px; }
.ol-tabs-filter .ol-tab { padding: 8px 1px 10px; font-size: 13px; }
.ol-tabs-filter .ol-tab[aria-selected='true'], .ol-tabs-filter .ol-tab[aria-current='page'] { color: var(--fg); }
.ol-tabs-filter .ol-tab::after { background: var(--fg); }
.ol-tabs::-webkit-scrollbar { display: none; }
.ol-tabs.ol-rola { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
.ol-tab .ol-count { min-width: 20px; padding: 0 7px; border-radius: 999px; background: var(--surface-3); color: var(--fg-2); font: 650 11.5px/1.6 var(--font); text-align: center; }
.ol-segmented { padding: 4px; }
.ol-segmented-inner { position: relative; display: flex; }
.ol-segmented button { position: relative; z-index: 1; border: 0; background: transparent; padding: 4px 12px; font-size: 12px; border-radius: 8px; cursor: pointer; font-weight: 550; white-space: nowrap; }
.ol-segmented button[aria-checked='true'] { font-weight: 700; }
.ol-segmented button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ol-table-wrap { overflow-x: auto; position: relative; }
.ol-card > .ol-table-wrap { margin: 0 -20px; padding: 0 8px; }
.ol-card.ol-flush > .ol-table-wrap { margin: 0; padding: 0 8px; }
:where(.ol-shell, .ol-page) table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
:where(.ol-shell, .ol-page) th { text-align: left; font-size: 12px; font-weight: 600; color: var(--fg-3); padding: 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
:where(.ol-shell, .ol-page) td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
:where(.ol-shell, .ol-page) tbody tr:last-child td { border-bottom: 0; }
:where(.ol-shell, .ol-page) td.ol-right, :where(.ol-shell, .ol-page) th.ol-right { text-align: right; white-space: nowrap; }
:where(.ol-shell, .ol-page) tbody tr { transition: background 0.15s; }
:where(.ol-shell, .ol-page) tbody tr.ol-clickable { cursor: pointer; }
:where(.ol-shell, .ol-page) tbody tr.ol-clickable:hover, :where(.ol-shell, .ol-page) tbody tr.ol-clickable:focus-visible { background: var(--surface-2); outline: none; }
.ol-cell-main { font-weight: 600; display: block; }
:where(.ol-shell, .ol-page) td a { color: inherit; text-decoration: none; }
:where(.ol-shell, .ol-page) td a .ol-cell-main, :where(.ol-shell, .ol-page) td a:only-child:not(.ol-btn) { color: var(--accent); }
:where(.ol-shell, .ol-page) td a:hover .ol-cell-main { text-decoration: underline; }
.ol-cell-sub { display: block; font-size: 12px; color: var(--fg-3); }
.ol-money { transition: filter 0.35s var(--ease), opacity 0.35s; }
:root.ol-hide-values .ol-money, :root.ol-hide-values .ol-stat-hint-moeda, :root.ol-hide-values .ol-lucro-origem small { filter: blur(6px); opacity: 0.8; user-select: none; }
/* Os contêineres que cortavam o desfoque (texto com reticências) ficam abertos; eixo, dica e listas com reais desfocam junto. */
:root.ol-hide-values .ol-stat-value, :root.ol-hide-values .ol-hero-value, :root.ol-hide-values .ol-stat-row dd { overflow: visible; }
.ol-chart .ol-axis, .ol-tooltip b, .ol-barlist-value, .ol-barlist-hint, .ol-money-values .ol-segbar-legend b, .ol-stat-row dd.ol-money, .ol-attention-text.ol-money { transition: filter 0.35s var(--ease); }
:root.ol-hide-values .ol-chart .ol-axis, :root.ol-hide-values .ol-tooltip b, :root.ol-hide-values .ol-barlist-value, :root.ol-hide-values .ol-barlist-hint, :root.ol-hide-values .ol-money-values .ol-segbar-legend b { filter: blur(5px); }
.ol-chart { position: relative; width: 100%; min-height: 220px; flex: 1; touch-action: pan-y; }
.ol-chart svg { display: block; overflow: visible; }
.ol-chart .ol-grid-line { stroke: var(--line); stroke-width: 1; }
.ol-chart .ol-axis { fill: var(--fg-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.ol-line { fill: none; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.ol-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ol-draw 1.1s var(--ease) forwards; }
@keyframes ol-draw { to { stroke-dashoffset: 0; } }
.ol-area { opacity: 0; animation: ol-fade 0.8s 0.25s var(--ease) forwards; }
@keyframes ol-fade { to { opacity: 1; } }
.ol-bar { transform-box: fill-box; transform-origin: 50% 100%; animation: ol-grow 0.7s var(--ease) backwards; }
@keyframes ol-grow { from { transform: scaleY(0); } }
.ol-bar-hover { fill: var(--surface-2); }
.ol-hover line { stroke: var(--line-strong); stroke-dasharray: 3 3; }
.ol-hover circle { fill: var(--surface); stroke-width: 2.5; }
.ol-tooltip { position: absolute; top: 4px; transform: translateX(-50%); pointer-events: none; z-index: 3; display: grid; gap: 2px; padding: 8px 12px; border-radius: var(--r-control); min-width: 160px; background: color-mix(in srgb, var(--surface) 94%, transparent); border: 1px solid var(--line-strong); box-shadow: var(--card-shadow); font-size: 12px; font-variant-numeric: tabular-nums; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.ol-tooltip span { display: flex; align-items: center; gap: 6px; color: var(--fg-2); }
.ol-tooltip i, .ol-chart-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; flex: none; }
.ol-chart-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--fg-2); }
.ol-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ol-barlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; align-content: start; }
.ol-barlist-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.ol-barlist-label { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ol-barlist-value { font-weight: 650; }
.ol-barlist-track { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.ol-barlist-fill { display: block; height: 100%; border-radius: inherit; background: var(--tom, var(--c1)); transform-origin: left; animation: ol-grow-x 0.8s var(--ease) backwards; }
@keyframes ol-grow-x { from { transform: scaleX(0); } }
.ol-barlist-hint { display: block; margin-top: 4px; font-size: 12px; color: var(--fg-3); }
.ol-empty { display: grid; place-items: center; align-content: center; text-align: center; gap: 4px; padding: 32px 12px; color: var(--fg-3); flex: 1; }
.ol-empty-title { font-weight: 650; color: var(--fg-2); }
.ol-empty-text { font-size: 13px; max-width: 46ch; text-wrap: pretty; }
.ol-skeleton { border-radius: var(--r-card); background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%); background-size: 300% 100%; animation: ol-shimmer 1.4s linear infinite; border: 1px solid var(--line); }
@keyframes ol-shimmer { from { background-position: 100% 0; }   to { background-position: 0 0; } }
@keyframes ol-pulse { 50% { opacity: 0.4; transform: scale(0.96); } }
.ol-modal { width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 48px); border: 1px solid var(--line-strong); border-radius: var(--r-card); padding: 24px; background: var(--surface); color: var(--fg); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.45); overflow: visible; }
.ol-modal.ol-wide { width: min(720px, calc(100vw - 32px)); overflow: auto; }
.ol-visor { width: min(960px, calc(100vw - 32px)); height: min(860px, calc(100dvh - 48px)); padding: 16px; }
.ol-visor[open] { display: flex; flex-direction: column; gap: 12px; }
.ol-visor .ol-card-head { margin: 0; align-items: center; }
.ol-visor .ol-acoes { flex-wrap: wrap; justify-content: flex-end; }
.ol-visor-corpo { flex: 1; min-height: 0; display: grid; place-items: center; border-radius: var(--r-control); background: var(--surface-2); overflow: auto; }
.ol-visor-corpo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ol-visor-corpo iframe { width: 100%; height: 100%; border: 0; }
/* Lista de documentos com miniatura (Minha conta › Documentos). */
.ol-docs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.ol-doc { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.ol-doc-mini { aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; border-radius: var(--r-control); background: var(--surface-2); color: var(--fg-3); }
.ol-doc-mini img { width: 100%; height: 100%; object-fit: cover; }
.ol-doc-mini .ol-icon { width: 32px; height: 32px; }
.ol-doc-nome { font-weight: 600; font-size: 13px; }
.ol-modal::backdrop { background: var(--veil); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ol-modal[open] { animation: ol-pop 0.28s var(--ease); }
.ol-modal h2, .ol-modal .ol-card-head h2 { font: var(--t-title); }
@keyframes ol-pop { from { opacity: 0; transform: scale(0.97) translateY(6px); } }
.ol-chart .ol-base-line { stroke: var(--line-strong); stroke-width: 1; }
.ol-chart .ol-line { fill: none; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.ol-chart .ol-line-comparacao { stroke-width: 1.75; stroke-dasharray: 5 4; opacity: 0.85; }
.ol-chart .ol-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ol-draw 1.1s var(--ease) forwards; }
.ol-chart .ol-area { opacity: 0; animation: ol-fade 0.8s 0.25s var(--ease) forwards; }
.ol-chart .ol-area.ol-static { opacity: 1; animation: none; }
.ol-chart .ol-bar { transform-box: fill-box; transform-origin: 50% 100%; }
.ol-chart .ol-bar.ol-grow { animation: ol-grow 0.7s var(--ease) backwards; }
.ol-chart .ol-bar { transition: opacity 0.2s; }
.ol-chart .ol-bar.ol-apagada { opacity: 0.4; }
.ol-chart .ol-bar-hover { fill: var(--surface-2); }
.ol-chart .ol-hover line { stroke: var(--line-strong); stroke-dasharray: 3 3; }
.ol-chart .ol-hover circle { fill: var(--surface); stroke-width: 2.5; }
.ol-chart .ol-overlay { fill: transparent; cursor: crosshair; outline: none; }
.ol-chart .ol-overlay:focus-visible { stroke: var(--accent); stroke-width: 2; }
.ol-tooltip strong { font-weight: 650; margin-bottom: 2px; }
.ol-tooltip span b { margin-left: auto; padding-left: 10px; color: var(--fg); }
.ol-chart-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--fg-2); margin-bottom: 8px; }
.ol-spark { display: block; width: 100%; height: 34px; }
.ol-spark svg { display: block; overflow: visible; }
.ol-spark .ol-line { fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ol-live { position: relative; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); flex: none; }
.ol-live::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--ok); opacity: 0; animation: ol-ping 1.8s var(--ease) infinite; }
.ol-live.ol-warn { background: var(--warn); }
.ol-live.ol-warn::after { border-color: var(--warn); }
@keyframes ol-ping { 0% { transform: scale(0.6); opacity: 0.7; }   100% { transform: scale(1.8); opacity: 0; } }
.ol-gauge svg { display: block; width: 100%; max-width: 170px; margin: 0 auto; overflow: visible; }
.ol-gauge-track { fill: none; stroke: var(--surface-3); stroke-width: 13; stroke-linecap: round; }
.ol-gauge-value { fill: none; stroke-width: 13; stroke-linecap: round; stroke-dasharray: 100; transition: stroke-dashoffset 1s var(--ease); }
.ol-gauge-text { fill: var(--fg); font: 760 22px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.ol-rate { display: grid; justify-items: center; gap: 2px; padding: 10px 6px 12px; border-radius: var(--r-item); background: var(--surface-2); text-align: center; }
.ol-rate-label { font-size: 12px; font-weight: 600; color: var(--fg-2); }
.ol-gauge-wrap { display: grid; justify-items: center; gap: 2px; }
.ol-gauge-wrap + .ol-stat-list { margin-top: 18px; }
/* Gráficos do refino (F3). Valores em texto usam a tinta do texto; a cor da série fica só na marca ao lado. */
.ol-chart-bloco { display: grid; gap: 4px; width: 100%; }
.ol-chart-bloco > .ol-chart-legend { margin-bottom: 4px; }
.ol-chart .ol-pilha-area { fill-opacity: 0.85; opacity: 0; animation: ol-fade 0.8s var(--ease) forwards; }
.ol-chart .ol-pilha-area.ol-static { opacity: 1; animation: none; }
.ol-chart .ol-pilha-borda { fill: none; stroke-width: 2; stroke-linejoin: round; }
.ol-chart .ol-pilha-guia { stroke: var(--line-strong); stroke-dasharray: 3 3; }
.ol-rosca { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.ol-rosca-anel { position: relative; flex: none; width: 200px; height: 200px; }
.ol-rosca-anel svg { display: block; }
.ol-rosca-trilho { fill: none; stroke: var(--surface-3); stroke-width: 16; opacity: 0.6; }
.ol-rosca-fatia { fill: none; stroke-width: 16; stroke-linecap: round; transition: opacity 0.2s, stroke-width 0.2s; }
.ol-rosca-foco .ol-rosca-fatia { opacity: 0.35; }
.ol-rosca-foco .ol-rosca-fatia.ol-ativa { opacity: 1; stroke-width: 20; }
.ol-rosca-centro { position: absolute; inset: 24px; display: grid; place-content: center; text-align: center; gap: 2px; pointer-events: none; }
.ol-rosca-centro strong { font: 760 18px/1.1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--fg); }
.ol-rosca-centro span { font-size: 12px; line-height: 1.3; color: var(--fg-3); max-width: 120px; margin: 0 auto; }
.ol-rosca-legenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; flex: 1 1 220px; min-width: 0; }
.ol-rosca-legenda li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 52px; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-control); font-size: 13px; font-variant-numeric: tabular-nums; cursor: default; }
.ol-rosca-legenda li.ol-ativa, .ol-rosca-legenda li:hover { background: var(--surface-2); }
.ol-rosca-legenda i { width: 10px; height: 10px; border-radius: 3px; }
.ol-rosca-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-2); }
.ol-rosca-legenda b { font-weight: 650; color: var(--fg); }
.ol-rosca-legenda small { text-align: right; color: var(--fg-3); font-size: 12px; }
.ol-calor { position: relative; display: grid; gap: 10px; }
.ol-calor .ol-tooltip { top: auto; bottom: calc(100% + 6px); }
.ol-calor-grade { display: grid; gap: 5px; align-items: center; }
.ol-calor-col { font-size: 11px; color: var(--fg-3); text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ol-calor-lin { font-size: 12px; color: var(--fg-2); padding-right: 8px; white-space: nowrap; }
.ol-calor-cel { display: block; aspect-ratio: 1.6; min-height: 14px; border-radius: 6px; background: var(--surface-3); outline-offset: 1px; transition: transform 0.15s var(--ease); }
.ol-calor-cel:hover { transform: scale(1.12); }
.ol-calor-cel:hover { box-shadow: 0 0 0 2px var(--fg-3); }
.ol-calor-escala { display: flex; align-items: center; gap: 4px; justify-content: flex-end; font-size: 11px; color: var(--fg-3); }
.ol-calor-escala i { width: 16px; height: 10px; border-radius: 4px; }
.ol-calor-escala span:first-child { margin-right: 4px; } .ol-calor-escala span:last-child { margin-left: 4px; }
/* Mapa de apoio: células baixas e sem zoom, rótulo a cada 6 h. */
.ol-calor-compacto .ol-calor-grade { gap: 2px; }
.ol-calor-compacto .ol-calor-cel { aspect-ratio: 1.6; min-height: 8px; border-radius: 3px; }
.ol-calor-compacto .ol-calor-cel:hover { transform: none; }
.ol-calor-compacto .ol-calor-lin { font-size: 11px; padding-right: 6px; }
/* Minilinha de tendência dentro do cartão de número. */
.ol-stat-spark { margin-top: 6px; height: 34px; }
/* Linha "principal + apoio" com os cartões da mesma altura: o de apoio estica e o conteúdo dele ocupa o espaço. */
.ol-grid.ol-grid-cheio { align-items: stretch; }
.ol-grid-cheio .ol-stat-list { align-content: start; } /* a lista não espalha as linhas pela altura do cartão esticado */
.ol-grid-cheio > .ol-card > :last-child { flex: 1 1 auto; }
.ol-grid-cheio .ol-chart-bloco { grid-template-rows: auto minmax(0, 1fr); height: 100%; }
.ol-grid-cheio [data-ol-grafico] { min-height: 0; }
.ol-grid-cheio .ol-segmentos { display: flex; flex-direction: column; gap: 14px; }
.ol-grid-cheio .ol-segmentos-resumo { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
/* Mapa de calor no cartão esticado: a grade fica no meio da sobra, e a célula mantém a proporção (nunca estica). */
.ol-grid-cheio .ol-calor { align-content: center; }
/* Lucro por adquirente: a composição de cada adquirente (entradas, saídas e multas) numa barra dividida. */
.ol-composicao-adq { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 16px; }
.ol-composicao-adq li { display: grid; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.ol-composicao-adq li:last-child { border-bottom: 0; padding-bottom: 0; }
.ol-composicao-topo { display: flex; align-items: baseline; gap: 10px; }
.ol-composicao-topo a { font-weight: 650; color: var(--fg); text-decoration: none; }
.ol-composicao-topo b { margin-left: auto; font-variant-numeric: tabular-nums; }
.ol-cor-entradas { background: var(--dinheiro); } .ol-cor-saidas { background: var(--serie-5); } .ol-cor-multas { background: var(--serie-2); }
/* Coluna de cartões empilhados dentro de uma grade (principal e lateral). */
.ol-pilha { display: grid; gap: 16px; align-content: start; min-width: 0; }
/* Escolha entre poucas opções que ocupa a largura (ex.: Pix ou Boleto). Marcada por aria-pressed. */
.ol-escolha { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; border-radius: var(--r-control); background: var(--surface-3); }
.ol-escolha button { min-height: 38px; border: 0; border-radius: 8px; background: none; color: var(--fg-2); font: 600 14px/1.2 var(--font); display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: background 0.2s, color 0.2s; }
.ol-escolha button[aria-pressed='true'] { background: var(--surface); color: var(--fg); box-shadow: var(--control-shadow); }
.ol-escolha button:disabled { opacity: 0.45; cursor: not-allowed; }
.ol-escolha button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Campo de valor em destaque e botão que ocupa a linha (formulários curtos de dinheiro). */
.ol-input.ol-input-valor { min-height: 56px; font: 700 24px/1.2 var(--font-display); font-variant-numeric: tabular-nums; }
.ol-btn.ol-btn-bloco { width: 100%; min-height: 48px; }
.ol-deposito { gap: 16px; }
/* Recibo (detalhe de saque, depósito, transferência): valor e situação no topo, blocos rotulados embaixo. */
.ol-recibo { display: grid; gap: 20px; }
.ol-recibo-topo { display: grid; gap: 4px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.ol-recibo-rotulo { font-size: 13px; color: var(--fg-2); }
.ol-recibo-valor { font: 760 30px/1.15 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--fg); }
.ol-recibo-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; font-size: 13px; color: var(--fg-3); }
.ol-recibo-secao > h3 { margin: 0 0 8px; font: 650 13px/1.4 var(--font); color: var(--fg-3); }
.ol-recibo .ol-stat-list { gap: 8px; }
.ol-recibo .ol-stat-row { padding-bottom: 8px; }
.ol-recibo .ol-stat-row dd { font-weight: 600; }
.ol-recibo-total dt, .ol-recibo-total dd { color: var(--fg); font-weight: 750; }
.ol-recibo-sub { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--fg-3); }
/* Partes de um todo (olSegmentos): barra única dividida e a lista com valor, participação e detalhe. */
.ol-segmentos { display: grid; gap: 14px; }
.ol-segmentos-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ol-segmentos-lista li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 48px; gap: 4px 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.ol-segmentos-lista li:last-child { border-bottom: 0; }
.ol-segmentos-lista i { width: 10px; height: 10px; border-radius: 3px; align-self: center; }
.ol-segmentos-lista b { font-weight: 650; }
.ol-segmentos-lista .ol-seg-pct { text-align: right; color: var(--fg-3); font-size: 12px; }
.ol-segmentos-lista .ol-seg-sub { grid-column: 2 / -1; font-size: 12px; color: var(--fg-3); }
.ol-segmented { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; }
.ol-segmented button { color: var(--fg-2); }
/* Por método, vista Conversão: a aprovação de cada método numa barra de 0 a 100%, com pagas de geradas embaixo. */
.ol-conversao-lista li { grid-template-columns: 10px minmax(0, 1fr) auto; }
/* Anéis da conversão (olMetodos): um por método, o arco é a aprovação; cresce ao aparecer. */
.ol-aneis { position: relative; width: 168px; aspect-ratio: 1; margin: 2px auto 4px; }
.ol-aneis svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.ol-anel-trilho { fill: none; stroke: var(--surface-3); stroke-width: 10; }
.ol-anel-arco { fill: none; stroke-width: 10; stroke-linecap: round; stroke-dasharray: var(--len) var(--c); animation: ol-anel-cresce 0.9s var(--ease) both; }
@keyframes ol-anel-cresce { from { stroke-dasharray: 0 var(--c); } }
.ol-aneis-centro { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 2px; }
.ol-aneis-centro strong { font: 700 18px/1.1 var(--font); font-variant-numeric: tabular-nums; }
.ol-aneis-centro span { font-size: 12px; color: var(--fg-3); }
@media (prefers-reduced-motion: reduce) { .ol-anel-arco { animation: none; } }
/* Bloco ao vivo depois da 1ª atualização (vivo.js): sem animação de entrada; anéis e barras crescem do antigo ao novo. */
.ol-vivo-silencioso, .ol-vivo-silencioso * { animation: none !important; }
.ol-anel-arco.ol-vivo-cresce { transition: stroke-dasharray 0.8s var(--ease); }
.ol-barra-pct-valor.ol-vivo-cresce, .ol-segbar-track span.ol-vivo-cresce { transition: width 0.8s var(--ease), flex-grow 0.8s var(--ease); }
.ol-metodos { display: flex; flex-direction: column; gap: 14px; }
.ol-funil { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ol-funil-linha { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.ol-funil-nome { font-weight: 600; color: var(--fg); }
.ol-funil-linha b { font-weight: 650; color: var(--fg); }
.ol-funil-trilho { height: 12px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.ol-funil-barra { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--serie-1) 50%, transparent), var(--serie-1)); transform-origin: left; animation: ol-crescer-x 0.7s var(--ease) backwards; }
@keyframes ol-crescer-x { from { transform: scaleX(0); } }
.ol-funil-passagem { display: block; margin-top: 4px; font-size: 12px; color: var(--fg-3); }
:root.ol-hide-values .ol-chart-valor { filter: blur(6px); user-select: none; }
@media (prefers-reduced-motion: reduce) { .ol-funil-barra, .ol-chart .ol-pilha-area { animation: none; opacity: 1; } .ol-rosca-fatia { transition: none; } }
.ol-databar { position: relative; display: inline-block; min-width: 86px; padding: 3px 8px; border-radius: 7px; text-align: right; isolation: isolate; }
.ol-databar-fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; z-index: -1; transform-origin: left; animation: ol-grow-x 0.8s var(--ease) backwards; }
@media (max-width: 1280px) {
  .ol-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ol-hero { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1100px) {
  .ol-grid-2, .ol-grid-3, .ol-grid-side, .ol-hero { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .ol-app { grid-template-columns: minmax(0, 1fr); padding: 12px 12px 96px; }
  .ol-app > .ol-sidebar { position: fixed; z-index: 30; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); height: 66px; flex-direction: row; padding: 6px; gap: 0; --glass-radius: 999px; border-radius: 999px; }
  .ol-sidebar .ol-brand, .ol-sidebar .ol-side-foot, .ol-sidebar .ol-nav { display: none; }
  .ol-mobile-nav { display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; }
  .ol-mobile-nav .ol-nav-item { flex-direction: column; justify-content: center; gap: 2px; padding: 6px 4px; border-radius: 999px; font-size: 10.5px; height: 54px; text-align: center; }
  .ol-mobile-nav .ol-nav-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ol-mobile-only { display: flex !important; }
}
.ol-mobile-nav { display: none; }
@media (max-width: 600px) {
  .ol-grid-4, .ol-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ol-stat.ol-stat-card, .ol-hero-stats .ol-stat { padding: 12px 14px; border-radius: var(--r-item); }
  .ol-stat-icon { width: 28px; height: 28px; top: 10px; right: 10px; border-radius: var(--r-control); }
  .ol-stat-icon svg { width: 15px; height: 15px; }
  .ol-stat-label { padding-right: 30px; }
  .ol-stat.ol-stat-card .ol-stat-value, .ol-hero-stats .ol-stat-value { font-size: 16px; white-space: normal; }
  .ol-hero-stats .ol-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .ol-page-actions { width: 100%; }
  .ol-tab { padding: 7px 1px; }
  .ol-tabs { gap: 20px; }
  .ol-page-head h1 { font-size: 24px; }
  .ol-hero-value { font-size: 30px; }
  .ol-search { width: 100%; max-width: none; }
  .ol-table-wrap table, .ol-table-wrap tbody, .ol-table-wrap tr { display: block; width: 100%; }
  .ol-table-wrap thead { display: none; }
  .ol-table-wrap tr { padding: 10px 6px; border-bottom: 1px solid var(--line); }
  .ol-table-wrap tbody tr:last-child { border-bottom: 0; }
  .ol-table-wrap td { display: grid; width: auto; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); column-gap: 12px; align-items: center; justify-items: end; padding: 5px 6px; border: 0; text-align: right; white-space: normal; overflow-wrap: anywhere; }
  .ol-table-wrap td > * { grid-column: 2; min-width: 0; }
  .ol-table-wrap td[data-label]::before { content: attr(data-label); grid-column: 1; grid-row: 1 / span 4; justify-self: start; color: var(--fg-3); font-size: 12px; font-weight: 600; text-align: left; }
  .ol-table-wrap td:not([data-label]) { grid-template-columns: minmax(0, 1fr); }
  .ol-table-wrap td:not([data-label]) > * { grid-column: 1; }
  .ol-modal, .ol-modal.ol-wide { width: 100vw; max-width: 100vw; max-height: 92dvh; margin: auto 0 0; border-radius: var(--r-card) var(--r-card) 0 0; border-bottom: 0; padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px)); overflow: auto; }
  .ol-modal .ol-form-actions { position: sticky; bottom: calc(-20px - env(safe-area-inset-bottom, 0px)); padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--surface); }
  .ol-btn { min-height: 44px; }
  .ol-btn-sm { min-height: 36px; }
  .ol-btn-icon { width: 44px; }
  .ol-btn-icon.ol-btn-sm { width: 36px; }
  .ol-page-head { align-items: stretch; }
  .ol-page-actions > .ol-btn { flex: 1; }
  .ol-mono, :where(.ol-shell, .ol-page) code { overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  .ol-page, .ol-shell, .ol-modal[open], .ol-modal::backdrop, :where(.ol-shell, .ol-page) *, :where(.ol-shell, .ol-page) *::before, :where(.ol-shell, .ol-page) *::after { animation-duration: 0.001ms !important; animation-delay: 0ms !important; transition-duration: 0.001ms !important; }
  .ol-draw { stroke-dashoffset: 0; }
  .ol-area { opacity: 1; }
}
.ol-reconnecting { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 1000; padding: 6px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--card-shadow); font-size: 13px; }
.ol-topbar { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 10px; padding: 0 0 18px; }
.ol-topbar .ol-spacer { flex: 1; }
.ol-nav-item .ol-badge.ol-warn { background: var(--warn-fill); color: var(--warn-fill-fg); }
.ol-subtabs { margin-top: -6px; }
@keyframes ol-flash { from { background: var(--accent-soft); } }
:where(.ol-shell, .ol-page) tr.ol-flash td { animation: ol-flash 2.6s var(--ease); }
.ol-count-pop { animation: ol-pop 0.4s var(--ease); display: inline-block; }
:where(.ol-shell, .ol-page) [hidden] { display: none !important; }
.ol-attention-title, .ol-attention-text, .ol-who-name, .ol-who-role { display: block; }
.ol-segmented button { transition: background 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.ol-segmented button[aria-checked='true'] { background: var(--surface); color: var(--accent); box-shadow: var(--control-shadow); }
.ol-filters .ol-tabs-filter { width: auto; max-width: 100%; min-width: 0; }
/* Aba que é link (aba de hub = URL da tela): mesmo estado da aba selecionada. */
.ol-tab[aria-current='page'] { color: var(--accent); font-weight: 650; }
.ol-tab[aria-current='page']::after { transform: scaleX(1); }
.ol-tab[aria-current='page'] .ol-count, .ol-tab[aria-selected='true'] .ol-count { background: var(--accent-soft); color: var(--accent); }
.ol-tabs-filter .ol-tab[aria-current='page'] .ol-count, .ol-tabs-filter .ol-tab[aria-selected='true'] .ol-count { background: var(--surface-3); color: var(--fg); }
/* Bloco ao vivo (vivo.js) e seus esqueletos; período personalizado nos filtros. */
.ol-bloco { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-content: start; min-width: 0; }
/* Coluna do grid que pode encolher: com "auto", uma faixa que não quebra (abas, filtros) alargava a página no celular. */
.ol-page { grid-template-columns: minmax(0, 1fr); }
.ol-skeleton-hero { height: 168px; }
.ol-skeleton-stat { height: 104px; }
.ol-skeleton-grafico { height: 320px; }
/* Listas de operação (Aprovações e as próximas): paginação, ações da linha, valores e a camada de "processando". */
.ol-paginacao { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 14px 20px; border-top: 1px solid var(--line); }
.ol-paginacao a, .ol-paginacao span { min-width: 34px; height: 34px; padding: 0 10px; display: inline-grid; place-items: center; border-radius: 999px; font-weight: 600; font-size: 13px; color: var(--fg-2); text-decoration: none; }
.ol-paginacao a:hover { background: var(--surface-2); color: var(--fg); }
.ol-paginacao [aria-current='page'] { background: var(--accent-soft); color: var(--accent); }
.ol-paginacao .ol-desligado { opacity: 0.4; }
.ol-acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.ol-texto-ok { color: var(--ok); font-weight: 650; }
.ol-texto-bad { color: var(--bad); font-weight: 650; }
.ol-input-sm { width: auto; min-height: 32px; padding: 4px 12px; border-radius: 999px; font-size: 13px; }
.ol-linha-detalhe td { background: var(--surface-2); white-space: normal; }
.ol-processando { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; background: var(--veil); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.ol-processando > div { display: grid; justify-items: center; gap: 10px; padding: 20px 26px; border-radius: var(--r-card); background: var(--surface); color: var(--fg); box-shadow: var(--card-shadow); font-weight: 600; }
.ol-card.ol-flush > .ol-note { margin: 0 20px 18px; }
.ol-nowrap { white-space: nowrap; }
.ol-acoes.ol-nowrap { flex-wrap: nowrap; }
/* Coluna de ações presa à direita: com a tabela rolando de lado, os botões continuam à vista. */
:where(.ol-shell, .ol-page) th.ol-col-acoes, :where(.ol-shell, .ol-page) td.ol-col-acoes { position: sticky; right: 0; z-index: 1; background: var(--surface); box-shadow: -10px 0 12px -12px var(--shadow-far); }
:where(.ol-shell, .ol-page) tr.ol-linha-detalhe td.ol-col-acoes { background: var(--surface-2); }
@media (max-width: 600px) { :where(.ol-shell, .ol-page) th.ol-col-acoes, :where(.ol-shell, .ol-page) td.ol-col-acoes { position: static; box-shadow: none; background: transparent; } }

.ol-btn[aria-disabled='true'] { opacity: 0.55; pointer-events: none; }
.ol-check { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.ol-check input { flex: none; }
:where(.ol-shell, .ol-page) :where(input[type='checkbox'], input[type='radio']) { -webkit-appearance: none; appearance: none; flex: none; width: 18px; height: 18px; margin: 0; display: inline-grid; place-content: center; border: 1.5px solid var(--line-control-hover); background: var(--field-bg); cursor: pointer; transition: background 0.15s, border-color 0.15s, box-shadow 0.15s; vertical-align: middle; }
:where(.ol-shell, .ol-page) :where(input[type='checkbox']) { border-radius: 5px; }
:where(.ol-shell, .ol-page) :where(input[type='radio']) { border-radius: 50%; }
:where(.ol-shell, .ol-page) :where(input[type='checkbox'], input[type='radio']):hover:not(:disabled) { border-color: var(--accent); }
:where(.ol-shell, .ol-page) :where(input[type='checkbox']):checked, :where(.ol-shell, .ol-page) :where(input[type='checkbox']):indeterminate { background: var(--accent-fill) no-repeat center / 12px; border-color: var(--accent-fill); }
:where(.ol-shell, .ol-page) :where(input[type='checkbox']):checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.5 6.2 2.3 2.3 4.7-4.9'/%3E%3C/svg%3E"); }
:where(.ol-shell, .ol-page) :where(input[type='checkbox']):indeterminate { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 6h6'/%3E%3C/svg%3E"); }
:where(.ol-shell, .ol-page) :where(input[type='radio']):checked { border-color: var(--accent-fill); box-shadow: inset 0 0 0 4px var(--field-bg); background: var(--accent-fill); }
:where(.ol-shell, .ol-page) :where(input[type='checkbox'], input[type='radio']):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:where(.ol-shell, .ol-page) :where(input[type='checkbox'], input[type='radio']):disabled { opacity: 0.5; cursor: not-allowed; }
/* Modal Bootstrap das telas convertidas: o miolo com as cores do kit. */
.ol-modal-conteudo { background: var(--surface); color: var(--fg); border: 1px solid var(--line-strong); border-radius: var(--r-card); }
/* Linhas agrupadas (Disputas › Mesclar por seller): os itens só aparecem com o grupo aberto. */
.ol-grupo { cursor: pointer; }
.ol-grupo-item:not(.ol-aberto) { display: none; }
.ol-grupo .ol-btn[aria-expanded='true'] svg { transform: rotate(90deg); }
/* No celular a linha de ações quebra: sem a coluna fixa, botões a mais saíam cortados à esquerda. */
@media (max-width: 600px) {
  .ol-acoes.ol-nowrap { flex-wrap: wrap; justify-content: flex-end; }
  .ol-table-wrap td.ol-col-acoes { grid-template-columns: minmax(0, 1fr); padding-top: 8px; }
  .ol-table-wrap td.ol-col-acoes::before { display: none; }
  .ol-table-wrap td.ol-col-acoes > * { grid-column: 1; }
}
.ol-pre { max-height: 180px; margin: 0; overflow: auto; white-space: pre-wrap; font-size: 12px; }
.ol-trunca { display: inline-block; max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.ol-skeleton-linha { display: block; height: 14px; min-width: 80px; border-radius: 8px; }
/* Filtros e rodapé dentro de um card ol-flush (tabela de ponta a ponta). */
.ol-card-filtros { padding: 0 20px 14px; }
.ol-rodape-tabela { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 20px 14px; border-top: 1px solid var(--line); }
.ol-rodape-tabela > div { flex: 1; min-width: 0; }
.ol-rodape-tabela .ol-paginacao { justify-content: flex-start; padding: 0; border-top: 0; }
.ol-avatar-img { width: 36px; height: 36px; flex: none; border-radius: var(--r-control); object-fit: cover; background: var(--surface-2); }
/* Logo de adquirente: inteira (sem corte), sobre fundo claro nos dois temas, porque as marcas são desenhadas para ele. */
.ol-adq-logo { object-fit: contain; padding: 3px; color-scheme: light; background: var(--surface); border: 1px solid var(--line); }
/* Barra de progresso nativa (<progress>), para funis e etapas. */
.ol-progresso { display: block; width: 100%; height: 8px; border: 0; border-radius: 999px; overflow: hidden; appearance: none; background: var(--surface-3); color: var(--tom, var(--c1)); }
.ol-progresso::-webkit-progress-bar { background: var(--surface-3); border-radius: 999px; }
.ol-progresso::-webkit-progress-value { background: var(--tom, var(--c1)); border-radius: 999px; }
.ol-progresso::-moz-progress-bar { background: var(--tom, var(--c1)); border-radius: 999px; }
.ol-progresso.ol-bad::-webkit-progress-value { background: var(--bad); }
.ol-progresso.ol-bad::-moz-progress-bar { background: var(--bad); }
/* Tabela com rolagem própria (listas longas carregadas aos poucos). */
.ol-rolagem { max-height: 70vh; overflow-y: auto; }
/* Grupo de campos com título pequeno (formulários longos, como o cadastro do KYC). */
.ol-secao-form { display: grid; gap: 10px; }
.ol-secao-form > h3, .ol-titulo-secao { font: 650 13px/1.4 var(--font); color: var(--fg-2); }
/* Valor de um campo em modo leitura, trocado pelo campo na edição. */
.ol-campo-valor { min-height: 42px; display: flex; align-items: center; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
/* Documentos (KYC): grade de cartões com prévia, título e ações. */
.ol-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.ol-doc { display: grid; gap: 8px; align-content: start; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-item); background: var(--surface-2); min-width: 0; }
.ol-doc-vazio { border-style: dashed; }
.ol-doc-vazio form { display: grid; gap: 8px; justify-items: start; }
.ol-doc-vazio .ol-doc-previa { justify-self: stretch; }
.ol-doc-previa { display: grid; place-items: center; min-height: 120px; border-radius: var(--r-control); background: var(--surface); color: var(--fg-3); overflow: hidden; }
.ol-doc-previa svg { width: 28px; height: 28px; }
.ol-doc-imagem { width: 100%; height: 140px; object-fit: cover; cursor: zoom-in; }
.ol-doc-titulo { font-weight: 650; font-size: 13px; overflow-wrap: anywhere; }
/* Imagem ampliada no modal. */
.ol-modal-imagem { display: flex; justify-content: center; }
.ol-modal-imagem img { max-width: 100%; max-height: calc(100dvh - 9rem); object-fit: contain; border-radius: var(--r-control); }
.ol-doc-ampliar { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--r-control); }
.ol-doc-ampliar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Interruptor com título e descrição (input checkbox role="switch" dentro do rótulo). */
.ol-alternar { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-item); background: var(--surface-2); cursor: pointer; }
.ol-alternar > span { display: grid; gap: 2px; min-width: 0; }
.ol-alternar input { appearance: none; flex: none; width: 38px; height: 22px; margin-top: 1px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--line-control); position: relative; cursor: pointer; transition: background 0.2s; }
.ol-alternar input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px var(--shadow-far); transition: transform 0.2s var(--ease); }
.ol-alternar input:checked { background: var(--accent-fill); border-color: var(--accent-fill); }
.ol-alternar input:checked::after { transform: translateX(16px); }
.ol-alternar input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Campo com prefixo (R$, %). */
.ol-prefixo { display: flex; align-items: stretch; }
.ol-prefixo > span { display: grid; place-items: center; padding: 0 12px; border: 1px solid var(--line-control); border-right: 0; border-radius: var(--r-control) 0 0 var(--r-control); background: var(--surface-3); color: var(--fg-2); font-weight: 600; font-size: 13px; }
.ol-prefixo > .ol-input { border-radius: 0 var(--r-control) var(--r-control) 0; }
.ol-prefixo:focus-within > span { border-color: var(--accent); }

/* ── V2 (docs/redesign/DESIGN.md) ─────────────────────────────────────────────────────────────────────────────────── */
/* Tons de área e de dado: definem --tom e --tom-soft para ícone de métrica, ícone do menu e ilustração. */
.ol-tom-azul { --tom: var(--accent); --tom-soft: var(--accent-soft); }
.ol-tom-teal { --tom: var(--teal); --tom-soft: var(--teal-soft); }
.ol-tom-violet { --tom: var(--violet); --tom-soft: var(--violet-soft); }
.ol-tom-amber { --tom: var(--amber); --tom-soft: var(--amber-soft); }
.ol-tom-rose { --tom: var(--rose); --tom-soft: var(--rose-soft); }
.ol-tom-sky { --tom: var(--sky); --tom-soft: var(--sky-soft); }
.ol-tom-orange { --tom: var(--orange); --tom-soft: var(--orange-soft); }
.ol-tom-slate { --tom: var(--slate); --tom-soft: var(--slate-soft); }
.ol-tom-berry { --tom: var(--berry); --tom-soft: var(--berry-soft); }
.ol-tom-neutro { --tom: var(--fg-2); --tom-soft: var(--surface-3); }
.ol-tom-ok { --tom: var(--ok); --tom-soft: var(--ok-soft); }
.ol-tom-warn { --tom: var(--warn); --tom-soft: var(--warn-soft); }
.ol-tom-bad { --tom: var(--bad); --tom-soft: var(--bad-soft); }

/* Menu: cada grupo com o ícone num quadrado tingido da sua cor (nunca faixa lateral). */
.ol-nav-item > svg { width: 28px; height: 28px; padding: 5px; border-radius: var(--r-control); background: transparent; color: var(--tom, var(--fg-2)); opacity: 1; transition: transform 0.2s var(--ease), background 0.2s var(--ease); }
.ol-nav-item[aria-current='page'] > svg { background: var(--tom-soft, var(--surface-3)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tom, var(--fg-2)) 28%, transparent); }
.ol-nav-item[aria-expanded='true'] { background: var(--selected); box-shadow: var(--selected-shadow); }

/* Barra de rolagem fina e tingida na página inteira (Chrome/Firefox por scrollbar-color, Safari pelo pseudo-elemento). */
:root { scrollbar-color: var(--scroll-thumb) transparent; scrollbar-width: thin; }
:root::-webkit-scrollbar, :root ::-webkit-scrollbar { width: 8px; height: 8px; }
:root::-webkit-scrollbar-track, :root ::-webkit-scrollbar-track { background: transparent; }
:root::-webkit-scrollbar-thumb, :root ::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border: 2px solid transparent; border-radius: 999px; background-clip: padding-box; }
:root::-webkit-scrollbar-thumb:hover, :root ::-webkit-scrollbar-thumb:hover { background-color: var(--scroll-thumb-hover); }
:root::-webkit-scrollbar-corner, :root ::-webkit-scrollbar-corner { background: transparent; }

/* Campo de data: partes da data na cor do texto (o padrão do Safari deixa dia e mês apagados) e o ícone discreto. */
.ol-input[type='date'] { font-variant-numeric: tabular-nums; }
.ol-input[type='date']::-webkit-datetime-edit, .ol-input[type='date']::-webkit-datetime-edit-fields-wrapper { color: var(--fg); padding: 0; }
.ol-input[type='date']::-webkit-datetime-edit-text { color: var(--fg-3); padding: 0 1px; }
@supports selector(::-webkit-calendar-picker-indicator) {
  /* Ícone de calendário do kit; o indicador nativo fica transparente por cima dele e continua abrindo o seletor. */
  .ol-input[type='date'] { background: var(--surface-2) url('calendario.svg') no-repeat right 12px center / 18px; padding-right: 40px; }
  .ol-input[type='date']:focus { background-color: var(--surface); }
  :root[data-theme='dark'] .ol-input[type='date'] { background-image: url('calendario-escuro.svg'); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .ol-input[type='date'] { background-image: url('calendario-escuro.svg'); } }
  .ol-input[type='date']::-webkit-calendar-picker-indicator { opacity: 0; cursor: pointer; width: 24px; height: 24px; margin-right: -6px; }
}

/* Filtro de período (olPeriodo): atalhos num segmentado compacto e "Período" com as datas num painel. Uma linha. */
.ol-periodo { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; position: relative; }
/* Segmentado (sem pílula): trilho cinza de canto 10 px e a opção ativa numa placa clara com relevo, como o controle do sistema. */
.ol-periodo-opcoes { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--r-control); background: var(--surface-3); }
.ol-periodo-opcoes a { padding: 4px 12px; display: inline-flex; align-items: center; border-radius: 8px; color: var(--fg-2); font: 600 12px/1.2 var(--font); text-decoration: none; white-space: nowrap; transition: background 0.2s var(--ease), color 0.2s; }
.ol-periodo-opcoes a:hover { color: var(--fg); }
.ol-periodo-opcoes a[aria-current='true'] { background: var(--surface); color: var(--accent); box-shadow: var(--control-shadow); }
.ol-periodo-custom { position: relative; }
.ol-periodo-custom > summary { list-style: none; }
.ol-periodo-custom > summary::-webkit-details-marker { display: none; }
.ol-periodo-custom[open] > summary { background: var(--control-bg-hover); }
.ol-periodo-custom.ol-ativo > summary { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.ol-periodo-pop { position: absolute; z-index: 30; top: calc(100% + 8px); right: 0; /* o botão fecha o filtro à direita */ width: min(380px, calc(100vw - 32px)); display: grid; gap: 12px; padding: 16px; }
.ol-periodo-pop .ol-form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ol-periodo-pop .ol-input[type='date'] { min-width: 0; }
@media (max-width: 420px) { .ol-periodo-pop .ol-form-row { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .ol-periodo { width: 100%; flex-wrap: nowrap; } .ol-periodo-opcoes { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; } .ol-periodo-opcoes a { flex: 1; justify-content: center; } .ol-periodo-custom:not(.ol-ativo) > summary span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .ol-periodo-pop { left: auto; right: 0; } }

/* Estado vazio com ilustração em traço bicolor (símbolos ilu-* do icones.svg) e a ação que resolve. */
.ol-empty .ol-ilustracao { width: 112px; height: 84px; color: var(--tom, var(--accent)); --ilu-2: var(--tom-2, var(--violet)); margin-bottom: 6px; }
/* Par de cores por cena (DESIGN.md: duas cores da paleta): ok verde + celeste, busca celeste + violeta, vazio violeta + âmbar. */
.ol-empty.ol-tom-ok { --tom-2: var(--sky); }
.ol-empty.ol-tom-sky { --tom-2: var(--violet); }
.ol-empty.ol-tom-violet { --tom-2: var(--amber); }
.ol-empty .ol-empty-acao { margin-top: 10px; }

/* Toque: alvo mínimo de 44 px (WCAG 2.5.5) em telas de dedo, sem mudar a densidade no mouse. */
@media (pointer: coarse) {
  .ol-btn, .ol-btn-sm, .ol-search-trigger, .ol-input, .ol-input-sm, .ol-nav-item, .ol-periodo-opcoes a, .ol-perfil-menu a, .ol-back, .ol-paginacao a, .ol-segmented button { min-height: 44px; }
  .ol-paginacao a { min-width: 44px; }
  .ol-btn-icon, .ol-btn-icon.ol-btn-sm { width: 44px; }
  .ol-periodo-custom > summary { min-width: 44px; }
  .ol-tab, .ol-tabs-filter .ol-tab { padding-top: 12px; padding-bottom: 14px; }
  .ol-periodo-opcoes a, .ol-back, .ol-perfil-menu a { display: inline-flex; align-items: center; }
}

/* Faixa de métricas: uma placa com as métricas lado a lado, separadas por linha (no lugar da grade de cards iguais). */
.ol-faixa { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--card-shadow); overflow: hidden; }
.ol-faixa[data-n='1'] { grid-template-columns: minmax(0, 1fr); } .ol-faixa[data-n='2'] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ol-faixa[data-n='3'] { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ol-faixa[data-n='5'] { grid-template-columns: repeat(5, minmax(0, 1fr)); } .ol-faixa[data-n='6'] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ol-faixa > .ol-stat { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 16px 18px; }
.ol-faixa > .ol-stat + .ol-stat { border-left: 1px solid var(--line); }
.ol-faixa .ol-stat-icon { display: none; }
.ol-faixa .ol-stat-value { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.ol-faixa { container-type: inline-size; }
.ol-faixa .ol-stat-label { display: flex; align-items: center; padding-right: 0; }
.ol-faixa .ol-stat-label::before { content: ''; width: 8px; height: 8px; margin-right: 8px; flex: none; border-radius: 3px; background: var(--tom, var(--line-strong)); }
@media (max-width: 900px) { .ol-faixa > .ol-stat:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@container (max-width: 640px) { .ol-faixa > .ol-stat { padding: 14px 16px; } }
@media (max-width: 900px) { .ol-faixa, .ol-faixa[data-n] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ol-faixa[data-n='1'] { grid-template-columns: minmax(0, 1fr); } .ol-faixa > .ol-stat + .ol-stat { border-left: 0; } .ol-faixa > .ol-stat:nth-child(even) { border-left: 1px solid var(--line); } .ol-faixa > .ol-stat:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (min-width: 901px) and (max-width: 1280px) { .ol-faixa[data-n='5'], .ol-faixa[data-n='6'] { grid-template-columns: repeat(6, minmax(0, 1fr)); } .ol-faixa[data-n='6'] > .ol-stat { grid-column: span 2; } .ol-faixa[data-n='5'] > .ol-stat:nth-child(-n+3) { grid-column: span 2; } .ol-faixa[data-n='5'] > .ol-stat:nth-child(n+4) { grid-column: span 3; } .ol-faixa[data-n='5'] > .ol-stat:nth-child(4), .ol-faixa[data-n='6'] > .ol-stat:nth-child(4) { border-left: 0; } .ol-faixa[data-n='5'] > .ol-stat:nth-child(n+4), .ol-faixa[data-n='6'] > .ol-stat:nth-child(n+4) { border-top: 1px solid var(--line); } }

/* Alto contraste: a seleção não pode depender de fundo ou sombra. */
@media (forced-colors: active) {
  .ol-tab[aria-current='page']::after, .ol-tab[aria-selected='true']::after { background: Highlight; forced-color-adjust: none; }
  .ol-periodo-opcoes a[aria-current='true'], .ol-nav-item[aria-current='page'], .ol-segmented button[aria-checked='true'] { outline: 2px solid Highlight; }
  .ol-input:focus { outline: 2px solid Highlight; }
  .ol-casca-inferior .ol-nav-item[aria-current='true'] { outline: 2px solid Highlight; }
  /* Interruptor: o modo troca fundo por Canvas, então trilha e bolinha vêm das cores do sistema. */
  .ol-alternar input, .ol-alternar input::after { forced-color-adjust: none; border: 1px solid CanvasText; background: Canvas; }
  .ol-alternar input:checked { background: Highlight; border-color: Highlight; }
  .ol-alternar input:checked::after { background: HighlightText; }
}

/* Duas colunas desiguais: o principal (gráfico) e um lado estreito (ranking, conversão). Empilha antes do tablet. */
.ol-grid-lado { grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); align-items: start; }
@media (max-width: 1100px) { .ol-grid-lado { grid-template-columns: minmax(0, 1fr); } }
/* Lucro por origem (Painel): origem com a composição embaixo, custo em vermelho e o total separado por linha forte. */
.ol-lucro { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ol-lucro th { padding: 10px 12px; color: var(--fg-3); font: var(--t-caption); text-align: left; border-bottom: 1px solid var(--line); }
.ol-lucro td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ol-lucro .ol-num { text-align: right; }
.ol-lucro-origem b { display: block; font-weight: 650; }
.ol-lucro-origem small { display: block; margin-top: 2px; color: var(--fg-3); font-size: 12px; }
.ol-lucro-total td { border-top: 2px solid var(--line-strong); border-bottom: 0; }
.ol-lucro-total td:last-child b { color: var(--tom, var(--fg)); font-size: 16px; }
.ol-lucro-total.ol-lucro-negativo td:last-child b { color: var(--bad); }
.ol-lucro td:first-child, .ol-lucro th:first-child { padding-left: 20px; }
.ol-lucro td:last-child, .ol-lucro th:last-child { padding-right: 20px; }
.ol-card.ol-flush > .ol-table-wrap:has(> .ol-lucro) { padding: 0; }
.ol-lucro-custo { color: var(--fg-2); }
.ol-lucro-origem .ol-lucro-conta { display: none; }
/* Valor da faixa nunca separa o "R$" do número. */
.ol-faixa .ol-money { white-space: nowrap; }
/* Métrica que leva à tela dona: a placa inteira é o link, com o mesmo relevo do hover de controle. */
.ol-stat-link { color: inherit; text-decoration: none; transition: background 0.2s var(--ease); }
.ol-stat-link:hover { background: var(--surface-2); }
.ol-stat-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ol-stat-link .ol-stat-label::after { content: '›' / ''; margin-left: 5px; color: var(--fg-3); } /* margem, não espaço: no flex da faixa o espaço some */
@media (max-width: 900px) {
  /* Celular: uma linha por origem (nome e conta à esquerda, lucro à direita); taxas e custo entram na conta. */
  .ol-table-wrap .ol-lucro tr { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; }
  .ol-table-wrap .ol-lucro td { border: 0; padding: 0; }
  .ol-table-wrap .ol-lucro td.ol-lucro-origem { display: flex; flex: 1; flex-direction: column; align-items: flex-start; text-align: left; }
  .ol-table-wrap .ol-lucro td.ol-lucro-detalhe { display: none; }
  .ol-table-wrap .ol-lucro td:last-child { display: block; }
  .ol-table-wrap .ol-lucro td:last-child::before { display: none; }
  .ol-lucro-origem .ol-lucro-conta { display: block; }
  .ol-lucro-origem .ol-lucro-composicao { display: none; }
  .ol-lucro-total { border-top: 2px solid var(--line-strong); }
}
/* Celular: os atalhos que não cabem somem num degradê na borda (pista de que o trilho rola). */
/* Fade nas bordas que ainda têm conteúdo (classes do casca.js): só à direita, só à esquerda ou nos dois lados. */
.ol-periodo-opcoes.ol-rola, .ol-tabs.ol-rola { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.ol-periodo-opcoes.ol-rola-ini, .ol-tabs.ol-rola-ini { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px); mask-image: linear-gradient(90deg, transparent, #000 28px); }
.ol-periodo-opcoes.ol-rola.ol-rola-ini, .ol-tabs.ol-rola.ol-rola-ini { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
/* Faixa estreita (ao lado de outra placa, tablet): 2 colunas em vez de espremer 4 valores em dinheiro. */
.ol-faixa-caixa { container-type: inline-size; min-width: 0; }
@container (max-width: 760px) {
  .ol-faixa[data-n] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ol-faixa[data-n='1'] { grid-template-columns: minmax(0, 1fr); }
  .ol-faixa > .ol-stat + .ol-stat { border-left: 0; }
  .ol-faixa > .ol-stat:nth-child(even) { border-left: 1px solid var(--line); }
  .ol-faixa > .ol-stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .ol-faixa > .ol-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* Painel: duas colunas que empilham por dentro (principal: faixa e gráfico; lado: carteira e conversão), cada placa na
   altura natural. Abaixo de 1100 px as colunas se desfazem e a ordem vira faixa, carteira, gráfico, conversão. */
.ol-coluna { display: grid; gap: 16px; align-content: start; min-width: 0; }
@media (max-width: 1100px) {
  .ol-colunas > .ol-coluna { display: contents; }
  .ol-colunas .ol-ordem-1 { order: 1; } .ol-colunas .ol-ordem-2 { order: 2; } .ol-colunas .ol-ordem-3 { order: 3; } .ol-colunas .ol-ordem-4 { order: 4; }
}
/* Meia coluna estreita (celular): valor de 10 dígitos encolhe em vez de ser cortado. */
@container (max-width: 420px) { .ol-faixa .ol-stat-value { font-size: clamp(14px, 4.4cqi, 17px); } }
@media (max-width: 420px) { .ol-periodo-opcoes a { padding: 4px 9px; } } /* os cinco atalhos cabem sem rolar */
/* Mestre-detalhe (filas de aprovação): fila compacta à esquerda e o pedido escolhido à direita, com tudo o que a decisão
   pede e as ações só ali. No celular o detalhe vem primeiro e a fila segue embaixo. */
.ol-mestre { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 16px; align-items: start; }
.ol-fila { display: grid; padding: 0 8px 8px; }
.ol-fila a { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--r-item); color: var(--fg); text-decoration: none; }
.ol-fila a:hover { background: var(--surface-2); }
.ol-fila a[aria-current='true'] { background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
.ol-fila a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ol-fila-linha { display: flex; justify-content: space-between; gap: 12px; min-width: 0; }
.ol-fila-linha b { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ol-fila-valor { font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; }
.ol-fila-sub { color: var(--fg-3); font-size: 12px; }
.ol-detalhe { display: grid; gap: 16px; position: sticky; top: calc(var(--ol-topo, 68px) + 12px); }
.ol-detalhe-quem { margin: 0; font: var(--t-headline); }
.ol-detalhe-quem a { color: var(--accent); text-decoration: none; }
.ol-detalhe-valor { margin: 2px 0 4px; font: var(--t-title); font-size: 28px; font-variant-numeric: tabular-nums; }
.ol-detalhe-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 0 4px; border-top: 1px solid var(--line); position: sticky; bottom: 0; background: var(--surface); }
/* O detalhe cabe na tela (rola por dentro) e a barra de ações fica sempre à vista, mesmo com a fila longa. */
.ol-detalhe { max-height: calc(100dvh - var(--ol-topo, 68px) - 24px); overflow: auto; overscroll-behavior: contain; }
.ol-detalhe-acoes > .ol-btn:first-child { margin-right: auto; }
.ol-historico { list-style: none; margin: 0; padding: 0; display: grid; }
.ol-historico li { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.ol-historico li:last-child { border-bottom: 0; }
.ol-mais { position: relative; }
.ol-mais > summary { list-style: none; }
.ol-mais > summary::-webkit-details-marker { display: none; }
.ol-mais-menu { position: absolute; z-index: 30; right: 0; bottom: calc(100% + 8px); width: max-content; padding: 6px; }
.ol-quebra { overflow-wrap: anywhere; }
.ol-fila-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 16px 12px; border-top: 1px solid var(--line); }
.ol-corta { display: block; max-width: 26ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1000px) {
  .ol-mestre { grid-template-columns: minmax(0, 1fr); }
  .ol-detalhe { position: static; order: -1; max-height: none; overflow: visible; }
  .ol-detalhe-acoes { position: static; }
}
@media (max-width: 600px) { .ol-detalhe-acoes > .ol-btn:first-child { flex-basis: 100%; margin-right: 0; justify-content: center; } .ol-detalhe-acoes > .ol-btn-danger { flex: 1; justify-content: center; } }
/* Menu "Mais": itens empilhados, cada um na largura do menu. */
.ol-mais-menu { display: grid; gap: 2px; z-index: 1005; }
.ol-mais-menu form { margin: 0; }
.ol-mais-menu .ol-btn { width: 100%; justify-content: flex-start; }
/* Barra de filtros sem card: campos na mesma linha, quebrando no celular. */
.ol-barra-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ol-barra-filtros .ol-input { width: auto; min-width: 150px; flex: 0 1 200px; }
.ol-filtro-datas { display: inline-flex; gap: 8px; }
@media (max-width: 600px) { .ol-barra-filtros .ol-input, .ol-filtro-datas { flex: 1 1 100%; } .ol-filtro-datas .ol-input { flex: 1; min-width: 0; } }
/* Diálogo largo (formulário com seções): topo e rodapé fixos, corpo rola. */
.ol-modal.ol-modal-largo { width: min(980px, calc(100vw - 32px)); padding: 0; display: none; overflow: hidden; }
.ol-modal.ol-modal-largo[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: calc(100dvh - 48px); }
.ol-modal-topo { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; padding: 20px 24px 12px; border-bottom: 1px solid var(--line); }
.ol-modal-corpo { overflow: auto; padding: 16px 24px; }
.ol-modal-rodape { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 12px 24px 20px; border-top: 1px solid var(--line); }
@media (max-width: 600px) { .ol-modal.ol-modal-largo { width: 100vw; max-width: 100vw; } }
/* A coluna de ações é sticky (z-index 1, um contexto por linha): com o menu aberto ela sobe, senão a linha de baixo o cobre. */
.ol-col-acoes:has(details.ol-mais[open]) { z-index: 6; }
/* Barra de porcentagem na célula (taxa de estorno): trilho neutro e valor no rosa das saídas. */
.ol-barra-pct { display: inline-flex; align-items: center; gap: 10px; min-width: 160px; }
.ol-barra-pct-trilho { flex: 1; height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.ol-barra-pct-valor { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--rose); }
.ol-barra-pct b { font-variant-numeric: tabular-nums; font-weight: 650; min-width: 52px; text-align: right; }
/* Tipos dentro de um grupo (segmentado com contagem) e a idade da disputa em tom por faixa de dias. */
.ol-tipos { flex-wrap: wrap; max-width: 100%; justify-self: start; width: max-content; }
.ol-tipos .ol-count { margin-left: 4px; }
.ol-idade { font-weight: 650; }
.ol-idade-warn { color: var(--warn); }
.ol-idade-bad { color: var(--bad); }
.ol-fila-grupo { padding: 10px 12px 4px; color: var(--fg-3); font: var(--t-caption); }
/* Grupos por idade na fila de Disputas: o título leva a cor da faixa (texto, não fundo). */
.ol-fila-grupo-bad { color: var(--bad); } .ol-fila-grupo-warn { color: var(--warn); }
.ol-fila-grupo .ol-count { margin-left: 4px; }
.ol-stat-row.ol-stat-bloco { display: grid; gap: 4px; }
.ol-stat-row.ol-stat-bloco dd { text-align: left; color: var(--fg-2); }
/* Diálogo de defesa: linha de contexto (seller, valor, transação), evidências em fieldset, upload no botão do kit. */
.ol-modal-contexto { margin: 2px 0 4px; font: var(--t-footnote); color: var(--fg); font-weight: 600; }
.ol-modal-contexto:empty { display: none; }
.ol-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.ol-fieldset legend { padding: 0; margin-bottom: 6px; font: var(--t-caption); color: var(--fg-2); }
.ol-arquivo { width: max-content; cursor: pointer; }
.ol-modal textarea.ol-input { font: inherit; font-size: 14px; line-height: 1.5; }
.ol-barra-pct-warn .ol-barra-pct-valor { background: var(--warn); }
.ol-barra-pct-bad .ol-barra-pct-valor { background: var(--bad); }
.ol-barra-pct-ok .ol-barra-pct-valor { background: var(--fg-3); }
/* Busca de disputas: o formulário entra na mesma linha da barra (Buscar não cai sozinho). */
.ol-busca-disputas { display: contents; }
/* Aviso do resultado de uma ação de dinheiro (POST da tela): placa do kit no canto, com o tom do estado. */
.ol-aviso-acao { position: fixed; z-index: 1100; right: 16px; bottom: 24px; max-width: min(420px, calc(100vw - 32px)); margin: 0; padding: 12px 14px 12px 40px; border-radius: var(--r-card); border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg); box-shadow: var(--card-shadow); font: var(--t-footnote); }
.ol-aviso-acao::before { content: ''; position: absolute; left: 16px; top: 16px; width: 10px; height: 10px; border-radius: 3px; background: var(--fg-3); }
.ol-aviso-acao-success::before { background: var(--ok); }
.ol-aviso-acao-warning::before { background: var(--warn); }
.ol-aviso-acao-danger::before { background: var(--bad); }
.ol-aviso-acao-warning { bottom: 88px; }
@media (max-width: 900px) { .ol-aviso-acao { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } }
/* Abas do grupo e tipos na mesma linha (a fila sobe para perto da dobra). */
.ol-linha-abas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.ol-linha-abas > .ol-tabs { flex: 1 1 auto; }
/* Fila com rolagem própria no desktop (a página não pula ao trocar de disputa). */
@media (min-width: 1001px) { .ol-fila { max-height: calc(100dvh - var(--ol-topo, 68px) - 200px); overflow: auto; } }
/* Busca de disputas numa linha: ID e seller crescem, o resto fica no tamanho natural e Buscar vai para a direita. */
.ol-busca-disputas > .ol-input[type='search'] { flex: 1 1 140px; min-width: 120px; }
.ol-busca-disputas > select.ol-input { flex: 0 0 auto; }
/* Busca principal de uma lista: ocupa o espaço que sobra na barra. */
.ol-barra-filtros .ol-busca-larga { flex: 1 1 260px; min-width: 180px; }
/* Na barra de filtros, campo e select têm a largura do conteúdo (o width:100% do .ol-input empurrava cada um para uma
   linha); a busca cresce até 420 px, o formulário interno ocupa o que sobra e o período fica à direita. */
.ol-barra-filtros :where(.ol-input:not(.ol-busca-larga)) { width: auto; flex: 0 1 200px; min-width: 140px; } /* :where: a regra própria de cada tela continua valendo */
.ol-barra-filtros .ol-periodo-pop .ol-input { width: 100%; flex: none; min-width: 0; } /* datas do painel de período seguem na grade dele */
.ol-barra-filtros .ol-busca-larga { max-width: 420px; }
.ol-barra-filtros > form.ol-barra-filtros { flex: 1 1 520px; min-width: 0; }
.ol-barra-filtros > * + .ol-periodo { margin-left: auto; } /* período depois dos campos vai para a direita; primeiro, fica no lugar */
@media (max-width: 600px) { .ol-barra-filtros .ol-input:not(.ol-busca-larga), .ol-barra-filtros .ol-busca-larga { flex: 1 1 100%; max-width: none; } .ol-barra-filtros > * + .ol-periodo { margin-left: 0; } }
.ol-mais-filtros .ol-mais-menu { min-width: 260px; gap: 8px; padding: 12px; }
.ol-mais-filtros .ol-mais-menu .ol-input { width: 100%; }
.ol-composicao .ol-titulo-secao { margin-top: 0; }
/* Título de seção em lista de pares (detalhes, composição): respiro antes da primeira linha. */
.ol-titulo-secao { margin: 0 0 6px; }
/* Lista de pares longa em duas colunas (detalhes da transação); uma coluna no celular. */
.ol-stat-list.ol-colunas-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.ol-stat-list.ol-colunas-2 > .ol-stat-row { break-inside: avoid; }
@media (max-width: 700px) { .ol-stat-list.ol-colunas-2 { grid-template-columns: minmax(0, 1fr); } }
/* Composição com barra: rótulo e valor na linha, barra proporcional embaixo (métodos e maiores sellers). */
.ol-stat-row.ol-metodo { flex-wrap: wrap; row-gap: 6px; }
.ol-metodo .ol-barra-pct-trilho { flex: 1 0 100%; }
.ol-metodo .ol-barra-pct-valor { background: var(--dinheiro); }
/* Cor fixa do método nas barras de participação. */
.ol-barra-pct-valor.ol-cor-pix { background: var(--metodo-pix); } .ol-barra-pct-valor.ol-cor-cartao { background: var(--metodo-cartao); } .ol-barra-pct-valor.ol-cor-boleto { background: var(--metodo-boleto); }
/* Controles de visualização (agrupar, ocultar) à direita da barra de filtros. */
.ol-barra-vista { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; }
@media (max-width: 600px) { .ol-barra-vista { margin-left: 0; } }
/* Botões da barra de filtros na altura dos campos (antes 32 px ao lado de campos de 40 px). */
/* Inclui os que ficam dentro de formulário e do período, e o trilho dos atalhos de período. Só no mouse: no toque vale o alvo de 44 px. */
@media (pointer: fine) { .ol-barra-filtros .ol-btn-sm { min-height: var(--h-control); } .ol-barra-filtros .ol-periodo-opcoes a { min-height: calc(var(--h-control) - 6px); } }
/* Botão de copiar ao lado de um ID na célula. */
.ol-copiar { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }
.ol-copiar .ol-btn-icon { min-height: 24px; width: 24px; padding: 0; }
@media (max-width: 600px) { .ol-copiar .ol-btn-icon { min-height: 36px; width: 36px; } }
/* Cartão compacto no celular (opt-in na tabela): 1ª coluna e 2ª (valor) lado a lado no topo, sem rótulo; o resto em linhas
   menores. As tabelas de Transações têm 6 a 7 colunas e viravam cartões de ~250 px. */
@media (max-width: 600px) {
  .ol-table-wrap table.ol-tabela-compacta tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 12px 6px; }
  .ol-table-wrap table.ol-tabela-compacta td:nth-child(1), .ol-table-wrap table.ol-tabela-compacta td:nth-child(2) { display: block; padding: 0 6px 6px; }
  .ol-table-wrap table.ol-tabela-compacta td:nth-child(1) { grid-column: 1; text-align: left; justify-items: start; }
  .ol-table-wrap table.ol-tabela-compacta td:nth-child(2) { grid-column: 2; grid-row: 1; text-align: right; }
  .ol-table-wrap table.ol-tabela-compacta td:nth-child(1)::before, .ol-table-wrap table.ol-tabela-compacta td:nth-child(2)::before { content: none; }
  .ol-table-wrap table.ol-tabela-compacta td:nth-child(n+3) { grid-column: 1 / -1; padding: 3px 6px; font-size: 13px; }
  .ol-table-wrap table.ol-tabela-compacta td.ol-col-acoes { padding-top: 6px; }
}
.ol-check { color: var(--fg-2); }
/* Botão de perigo desabilitado com fundo neutro: só a opacidade ainda parecia ativo no escuro. */
.ol-btn-danger-solid:disabled { background: var(--surface-3); color: var(--fg-3); box-shadow: none; }
.ol-metodo-warn .ol-barra-pct-valor { background: var(--amber); }
.ol-metodo-bad .ol-barra-pct-valor { background: var(--rose); }
.ol-metodo-fluxo .ol-barra-pct-valor { background: var(--violet); }
/* Método com o desconto na mesma linha (edição de link). */
.ol-metodo-desconto { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; }
.ol-input-sufixo { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-2); }
.ol-input-sufixo .ol-input { width: 96px; }
/* ID com botão de copiar dentro de uma sublinha. */
.ol-cell-sub.ol-copiar { display: flex; }
/* Cartão compacto: a sublinha do valor quebra em vez de invadir a 1ª coluna. */
@media (max-width: 600px) { .ol-table-wrap table.ol-tabela-compacta td:nth-child(2) .ol-cell-sub { white-space: normal; } .ol-table-wrap table.ol-tabela-compacta td:nth-child(2) { max-width: 55vw; } }
/* Agenda curta (próximas cobranças): dia em destaque, quem e quanto. */
.ol-agenda { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px 24px; }
.ol-agenda li { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ol-agenda-dia { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; border-radius: 10px; background: var(--violet-soft, var(--surface-3)); color: var(--violet); font-size: 11px; line-height: 1.1; }
.ol-agenda-dia b { font-size: 17px; }
.ol-agenda-texto { flex: 1; min-width: 0; }
.ol-agenda-texto .ol-cell-main, .ol-agenda-texto .ol-cell-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Barra empilhada de situação (ok, atenção, falha) com legenda. */
.ol-empilhada { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--surface-3); gap: 2px; }
.ol-empilhada-parte { display: block; height: 100%; width: 0; }
.ol-empilhada-ok { background: var(--ok); } .ol-empilhada-warn { background: var(--amber); } .ol-empilhada-bad { background: var(--rose); }
.ol-legenda-barra { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; }
.ol-legenda-barra li { display: inline-flex; align-items: center; gap: 6px; }
.ol-legenda-cor { width: 10px; height: 10px; border-radius: 3px; }
@media (max-width: 600px) { .ol-table-wrap table.ol-tabela-compacta tr { grid-template-columns: minmax(0, 1fr) fit-content(50%); } .ol-table-wrap table.ol-tabela-compacta td:nth-child(1) .ol-cell-sub { white-space: normal; } }
/* Paginador de lista montada no navegador (Links, Recorrências). */
.ol-paginador { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 12px 20px; }
.ol-legenda-barra li { align-items: baseline; } .ol-legenda-barra .ol-cell-sub { display: inline; }
/* Seis atalhos de período cabem sem rolar até 360 px; cartão compacto com rótulo alinhado ao topo do valor. */
@media (max-width: 420px) { .ol-periodo-opcoes a { padding: 4px 6px; } }
@media (max-width: 600px) { .ol-table-wrap table.ol-tabela-compacta td { align-items: start; } }
/* Trilho da barra como <dd> (lista de pares válida): ocupa a linha inteira, sem o estilo de valor. */
.ol-stat-row > dd.ol-barra-pct-trilho { margin: 0; padding: 0; flex: 1 0 100%; overflow: hidden; }
/* Valor em dinheiro numa lista de pares não quebra no meio ("R$" de um lado, número do outro). */
.ol-stat-row dd .ol-money, .ol-stat-row dd.ol-money { white-space: nowrap; }
/* Tabela com colunas de largura estável entre seções (Carteiras: Com saldo × Negativos). */
@media (min-width: 601px) { .ol-tabela-fixa { table-layout: fixed; width: 100%; } }
.ol-texto-warn { color: var(--amber); }
.ol-texto-warn { font-weight: 650; }
/* Seller como link na tabela: cor de link, como no card ao lado. */
.ol-page a.ol-cell-main { color: var(--accent); text-decoration: none; } .ol-page a.ol-cell-main:hover { text-decoration: underline; }
/* Conta passo a passo (como se forma o lucro): a linha do resultado em destaque. */
.ol-conta .ol-conta-total { border-top: 1px solid var(--line-strong); padding-top: 10px; }
.ol-conta .ol-conta-total dt, .ol-conta .ol-conta-total dd { font-weight: 700; }
.ol-conta .ol-conta-total dt { color: var(--fg); }
/* Cabeçalho de grupo entre tabelas de um mesmo card (Lucro por adquirente): nome e subtotal na mesma linha. */
.ol-grupo-tabela { display: flex; align-items: baseline; gap: 10px; margin: 0; padding: 18px 20px 4px; font: 650 14px/1.3 var(--font); color: var(--fg); }
/* Corpo de card sem tabela, depois das abas e filtros (detalhe do cliente). */
.ol-card-corpo { padding: 8px 20px 20px; }
.ol-barra-pct-valor.ol-barra-pct-azul { background: var(--sky); }
/* Larguras de coluna para tabelas fixas (grupos de uma mesma lista alinhados). */
.ol-col-15 { width: 15%; } .ol-col-20 { width: 20%; } .ol-col-30 { width: 30%; }
/* Dinheiro não quebra no meio ("R$" numa linha, o número na outra). */
.ol-page .ol-money, .ol-page .ol-cell-sub .ol-money { white-space: nowrap; }
.ol-grid-inicio { align-items: start; }
/* Débitos do par no detalhe do Lucro por adquirente. */
.ol-debitos-par { margin-top: 12px; }
.ol-lista-debitos { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.ol-lista-debitos li { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
/* Cabeçalho com imagem do produto: quebra em vez de passar da tela. */
.ol-cabeca-produto { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.ol-cabeca-produto > div { min-width: 0; }
/* Miniatura + nome na célula: não quebra nem vai para a direita no cartão do celular. */
.ol-produto-celula { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: nowrap; }
.ol-produto-celula > span { min-width: 0; }
/* Alvo dos atalhos de período: pelo menos 28 px (32 no toque). */
.ol-periodo-opcoes a { min-height: 28px; }
@media (pointer: coarse) { .ol-periodo-opcoes a { min-height: 32px; } }
/* Ações da linha sempre encostadas à direita (a seta não muda de lugar quando falta um botão). */
.ol-page td.ol-col-acoes > .ol-acoes { justify-content: flex-end; }
/* Contas digitais › Subcontas: contagem que pede atenção, selos da subconta, pendências e formulário longo em diálogo. */
.ol-count.ol-count-alerta { background: var(--bad-soft); color: var(--bad); }
.ol-selos { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.ol-pendencias { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 24px; margin-bottom: 8px; }
.ol-pendencias h3 { margin: 0 0 4px; font-size: 13px; font-weight: 650; }
.ol-pendencias ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.ol-modal-conteudo-form { display: contents; }
.ol-form-titulo { margin: 8px 0 0; font-size: 14px; font-weight: 650; }
.ol-kyc-link { display: grid; grid-template-columns: minmax(0, 160px) minmax(0, 1fr); gap: 16px; align-items: center; }
.ol-kyc-link img { width: 100%; border-radius: 10px; }
@media (max-width: 600px) { .ol-kyc-link { grid-template-columns: minmax(0, 1fr); } }
.ol-pendencias-botao[aria-expanded="true"] { color: var(--amber); }
/* Detalhes da subconta no painel lateral e resultado da consulta antifraude (modal): pares rótulo/valor e contadores. */
.ol-gaveta-secao { display: grid; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.ol-gaveta-secao:last-child { border-bottom: 0; padding-bottom: 0; }
.ol-gaveta-secao > h3 { margin: 0; font-size: 13px; font-weight: 650; letter-spacing: 0.01em; }
.ol-dados { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 6px 16px; margin: 0; font-size: 13px; }
.ol-dados dt { color: var(--fg-2); font-weight: 500; }
.ol-dados dd { margin: 0; font-weight: 550; overflow-wrap: anywhere; }
@media (max-width: 480px) { .ol-dados { grid-template-columns: minmax(0, 1fr); } .ol-dados dd { margin-bottom: 6px; } }
.ol-lista-simples { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; }
.ol-carregando { display: flex; align-items: center; gap: 10px; padding: 24px 0; color: var(--fg-2); }
.ol-carregando .ol-spinner { width: 20px; height: 20px; color: var(--accent); }
.ol-af-papel { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-item); }
.ol-af-papel-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 650; }
/* Contas digitais › Gestão de saldo: master, uma conta por subconta (sem placa dentro de placa), formulários de dinheiro. */
.ol-gestao-painel { padding: 16px 20px 20px; display: grid; gap: 20px; }
.ol-gestao-titulo { margin: 0; font-size: 15px; font-weight: 700; }
.ol-gestao-master { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.ol-gestao-numeros { display: flex; gap: 32px; margin: 0; }
.ol-gestao-numeros dt { color: var(--fg-2); font-size: 12px; }
.ol-gestao-numeros dd { margin: 0; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ol-gestao-master form { margin-left: auto; }
.ol-avisos-conta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.ol-avisos-tipos { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.ol-avisos-acao { margin-left: auto; }
.ol-gestao-conta { display: grid; gap: 14px; padding-top: 20px; border-top: 1px solid var(--line); }
.ol-gestao-conta-topo { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; }
.ol-gestao-detalhe { gap: 24px; align-items: start; }
.ol-gestao-inline { display: inline-flex; margin-left: 8px; }
.ol-gestao-trava { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.ol-gestao-trava > .ol-acoes { margin-left: auto; }
.ol-gestao-trava .ol-field-error { flex-basis: 100%; margin: 0; }
.ol-gestao-forms { gap: 32px; align-items: start; }
.ol-gestao-forms fieldset { display: grid; gap: 14px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ol-gestao-forms legend { padding: 0; }
.ol-gestao-forms .ol-field > legend { margin-bottom: 6px; color: var(--fg-2); font-size: 13px; font-weight: 600; }
.ol-opcoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ol-opcao { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; }
.ol-opcao:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.ol-opcao:has(input:disabled) { opacity: 0.6; cursor: not-allowed; }
.ol-gestao-forms fieldset:disabled .ol-opcao { opacity: 1; }
.ol-gestao-forms fieldset:disabled .ol-input { background: var(--surface-2); color: var(--fg-2); }
.ol-gestao-forms fieldset:disabled .ol-btn-primary { background: var(--surface-3); color: var(--fg-2); box-shadow: none; }
.ol-conta dt .ol-cell-sub { display: block; font-weight: 400; }
.ol-opcao input { accent-color: var(--accent); }
.ol-gestao-resolver { min-width: 280px; gap: 10px; padding: 12px; }
.ol-gestao-totais { max-width: 520px; }
@media (max-width: 900px) { .ol-gestao-forms, .ol-gestao-detalhe { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .ol-gestao-painel { padding: 12px; }
  .ol-gestao-master form, .ol-avisos-acao, .ol-gestao-trava > .ol-acoes { margin-left: 0; }
  .ol-opcoes { grid-template-columns: minmax(0, 1fr); }
}
.ol-gestao-detalhe .ol-stat-row dd { flex-shrink: 0; white-space: nowrap; }
.ol-gestao-detalhe .ol-stat-row dd form { white-space: normal; }
.ol-bloco-codigo { margin: 0; padding: 12px; border-radius: 10px; background: var(--code-bg); color: var(--code-fg); white-space: pre-wrap; overflow-wrap: anywhere; }
.ol-card-topo { align-self: start; }
.ol-input[type="file"] { padding: 6px; }
.ol-input[type="file"]::file-selector-button { margin-right: 10px; padding: 6px 14px; border: 1px solid var(--control-rim); border-radius: 999px; background: var(--control-bg); color: var(--fg); font: 600 13px/1 var(--font); cursor: pointer; }
/* Marketplace: produto sem logo e nome que abre o detalhe. */
.ol-avatar-vazio { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--surface-2); color: var(--fg-3); }
.ol-link-botao { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 650; text-align: left; cursor: pointer; }
.ol-link-botao:hover { text-decoration: underline; }
.ol-link-botao:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.ol-dica-secao { margin: -4px 0 0; color: var(--fg-2); font-size: 13px; }
.ol-detalhes-nota summary { cursor: pointer; font-weight: 600; margin-top: 4px; }
.ol-detalhes-nota p { margin: 6px 0 0; }
/* Configurações globais: abas com seções e um rodapé de gravação fixo no fim do cartão. */
.ol-cg-painel { display: grid; gap: 24px; padding: 20px; }
.ol-cg-secao { display: grid; gap: 12px; min-width: 0; margin: 0; padding: 0 0 20px; border: 0; border-bottom: 1px solid var(--line); }
.ol-cg-secao:last-child { border-bottom: 0; padding-bottom: 0; }
.ol-cg-secao > legend { padding: 0; margin-bottom: 4px; }
.ol-cg-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.ol-cg-perigo .ol-alternar { border-color: var(--bad-soft); }
.ol-cg-perigo .ol-alternar input:checked { background: var(--bad-fill); border-color: var(--bad-fill); }
.ol-cg-campo-curto { max-width: 360px; }
/* Taxas globais: as 11 faixas de parcelamento em colunas estreitas. */
.ol-form-row.ol-tg-parcelas { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
.ol-opcoes.ol-opcoes-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ol-cg-rodape { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--line); background: var(--surface); border-radius: 0 0 20px 20px; }
@media (max-width: 600px) {
  .ol-cg-painel { padding: 14px; }
  .ol-opcoes.ol-opcoes-3 { grid-template-columns: minmax(0, 1fr); }
  .ol-cg-rodape { bottom: calc(env(safe-area-inset-bottom, 0px) + 76px); }
}
.ol-alternar strong { color: var(--fg); font-weight: 650; }
/* Módulos do painel do seller: um cartão por página, interruptor no topo e subpáginas em lista embaixo. */
.ol-modulos { display: grid; gap: 12px; margin: 0; padding: 18px 20px; border: 0; min-width: 0; }
.ol-modulos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 12px; align-items: stretch; }
.ol-modulo { display: grid; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-item); background: var(--surface-2); align-content: start; }
.ol-modulo .ol-alternar { padding: 0; border: 0; background: none; }
.ol-modulo-subs { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.ol-modulo-subs.ol-modulo-off { opacity: 0.5; }
@media (max-width: 600px) { .ol-modulos { padding: 14px; } }
/* Placas de premiação: grade de placas, cada uma com a imagem grande, a marca e as ações. */
.ol-placas { list-style: none; margin: 0; padding: 18px 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 12px; }
.ol-placa { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-item); background: var(--surface-2); align-content: start; }
.ol-placa-imagem { width: 100%; aspect-ratio: 4 / 3; border-radius: 10px; border: 1px dashed var(--line-strong); background: var(--surface); display: grid; place-items: center; overflow: hidden; }
.ol-placa-imagem img { width: 100%; height: 100%; object-fit: contain; }
.ol-placa-info { display: grid; gap: 2px; min-width: 0; }
.ol-placa-info .ol-cell-main { font: var(--t-headline); }
@media (max-width: 600px) { .ol-placas { padding: 14px 14px 72px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .ol-placa { padding: 10px; } .ol-placa .ol-acoes { flex-wrap: wrap; } }
/* Termos: PDF do termo dentro do diálogo. */
.ol-termo-pdf { display: grid; gap: 10px; justify-items: start; }
.ol-termo-frame { width: 100%; height: min(60vh, 520px); border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.ol-cg-secao .ol-alternar strong { color: var(--fg); }
.ol-tab.ol-tab-pendente::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--amber); vertical-align: middle; }
.ol-placa-imagem { text-align: center; font-size: 12px; }
.ol-placa .ol-acoes:has(input:focus-visible) label.ol-btn { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 600px) { .ol-cg-painel, .ol-modulos { padding-bottom: 72px; } }
/* Rodapé com várias ações: no celular cada botão ocupa a linha, sem empurrar os outros para fora da tela. */
@media (max-width: 600px) { .ol-cg-rodape { flex-wrap: wrap; } .ol-cg-rodape > .ol-btn { flex: 1 1 100%; justify-content: center; } .ol-cg-rodape > .ol-cell-sub { flex-basis: 100%; } }
/* Regras financeiras › Adquirentes: lista ordenável (a posição é a ordem de tentativa), uma chave por método. */
.ol-adq-cabeca, .ol-adq-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) repeat(3, 84px) 40px; align-items: center; gap: 12px; padding: 10px 20px; }
.ol-adq-cabeca { font-size: 12px; font-weight: 600; color: var(--fg-3); border-bottom: 1px solid var(--line); }
.ol-adq-cabeca > span:nth-child(n+3):not(:last-child), .ol-adq-metodo { text-align: center; }
.ol-adq-lista { list-style: none; margin: 0; padding: 0; }
.ol-adq-item { border-bottom: 1px solid var(--line); background: var(--surface); }
.ol-adq-item:last-child { border-bottom: 0; }
.ol-adq-item:first-child [data-adq-posicao] { color: var(--accent); }
.ol-adq-arrastando { background: var(--accent-soft); }
.ol-adq-alca { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid transparent; border-radius: var(--r-control); background: none; color: var(--fg-3); font: inherit; font-weight: 700; cursor: grab; touch-action: none; }
.ol-adq-alca [data-adq-posicao] { color: var(--fg); font-variant-numeric: tabular-nums; }
.ol-adq-alca:hover { border-color: var(--line); }
.ol-adq-alca:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ol-adq-alca svg { width: 16px; height: 16px; }
.ol-adq-chave { display: inline-flex; cursor: pointer; }
.ol-adq-chave input { appearance: none; width: 38px; height: 22px; margin: 0; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--line-control); position: relative; cursor: pointer; transition: background 0.2s; }
.ol-adq-chave input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px var(--shadow-far); transition: transform 0.2s var(--ease); }
.ol-adq-chave input:checked { background: var(--accent-fill); border-color: var(--accent-fill); }
.ol-adq-chave input:checked::after { transform: translateX(16px); }
.ol-adq-chave input:disabled { opacity: 0.5; cursor: progress; }
.ol-adq-chave input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ol-adq-codigo { display: flex; justify-content: center; gap: 8px; margin: 4px 0 10px; }
.ol-adq-codigo .ol-input { width: 46px; height: 52px; padding: 0; text-align: center; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ol-adq-todos { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--fg-2); cursor: pointer; }
.ol-adq-todos input { accent-color: var(--accent); }
.ol-adq-toast { position: fixed; z-index: 1080; top: 16px; right: 16px; max-width: min(360px, calc(100vw - 32px)); border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); color: var(--fg); box-shadow: 0 12px 32px -12px var(--shadow-far); font-size: 13px; }
.ol-adq-toast-success { border-color: var(--ok); }
.ol-adq-toast-danger, .ol-adq-toast-error { border-color: var(--bad); }
.ol-adq-toast-warning { border-color: var(--amber); }
@media (max-width: 720px) {
  .ol-adq-cabeca { display: none; }
  .ol-adq-item { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 12px; padding: 12px 16px; }
  .ol-adq-item > .ol-adq-alca { grid-area: 1 / 1; }
  .ol-adq-item > .ol-produto-celula { grid-area: 1 / 2; }
  .ol-adq-item > .ol-mais { grid-area: 1 / 3; }
  .ol-adq-item > .ol-adq-metodo { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-control); text-align: left; }
  .ol-adq-item > .ol-adq-metodo::before { content: attr(data-rotulo); font-size: 12px; font-weight: 600; color: var(--fg-2); }
}
/* Passo a passo (casca.js, [data-ol-passos]): trilha numerada em cima e um passo por vez. */
.ol-passos { display: grid; gap: 18px; }
.ol-passos-trilha { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: ol-passo; }
.ol-passos-trilha li { flex: 1; display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 3px solid var(--line-strong); font-size: 13px; font-weight: 600; color: var(--fg-3); counter-increment: ol-passo; }
.ol-passos-trilha li::before { content: counter(ol-passo); display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--surface-3); color: var(--fg-2); font-size: 12px; }
.ol-passos-trilha li[aria-current="step"] { border-top-color: var(--accent); color: var(--fg); }
.ol-passos-trilha li[aria-current="step"]::before { background: var(--accent-fill); color: var(--accent-fg); }
.ol-passos-trilha li.ol-feito { border-top-color: var(--ok); color: var(--fg-2); }
.ol-passos-trilha li.ol-feito::before { content: "✓"; background: var(--ok-soft); color: var(--ok); }
.ol-passo { display: grid; gap: 12px; align-content: start; }
.ol-passo-titulo { font: var(--t-headline); outline: none; }
.ol-passo-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
@media (max-width: 600px) { .ol-passos-trilha li { font-size: 0; gap: 0; } .ol-passos-trilha li[aria-current="step"] { font-size: 13px; gap: 8px; } }
/* Painel lateral (<dialog class="ol-modal ol-gaveta">): detalhe de um item da lista sem abrir linha embaixo nem trocar de tela. */
.ol-modal.ol-gaveta { width: min(480px, 100vw); height: 100dvh; max-height: none; margin: 0 0 0 auto; border-radius: var(--r-card) 0 0 var(--r-card); border-right: 0; overflow-y: auto; display: grid; grid-template-rows: auto 1fr; align-content: start; gap: 16px; }
.ol-modal.ol-gaveta:not([open]) { display: none; }
.ol-modal.ol-gaveta[open] { animation: ol-gaveta-entra 0.24s var(--ease); }
@keyframes ol-gaveta-entra { from { transform: translateX(24px); opacity: 0; } }
.ol-gaveta > .ol-card-head { margin: 0; position: sticky; top: -24px; padding-top: 0; background: var(--surface); z-index: 1; }
.ol-gaveta-corpo { display: grid; gap: 16px; align-content: start; }
@media (max-width: 600px) { .ol-modal.ol-gaveta { border-radius: 0; } }
.ol-modal.ol-gaveta:has(.ol-gestao-conta) { width: min(760px, 100vw); } /* detalhe da subconta: conta e tabela de sellers */
.ol-gaveta .ol-gestao-detalhe { grid-template-columns: minmax(0, 1fr); }
/* Linha do tempo (Gestão de saldo › Histórico): movimentos agrupados por dia, entrada e saída com cor e sinal. */
.ol-linha-tempo { list-style: none; margin: 0; padding: 0; display: grid; }
.ol-linha-tempo-dia { padding: 16px 0 6px; font-size: 13px; font-weight: 650; color: var(--fg-2); }
.ol-linha-tempo-item { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ol-linha-tempo-marca { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 999px; background: var(--surface-2); }
.ol-linha-tempo-marca.ol-entrada { color: var(--ok); } .ol-linha-tempo-marca.ol-saida { color: var(--bad); }
.ol-linha-tempo-marca .ol-icon { width: 16px; height: 16px; }
.ol-linha-tempo-texto { display: grid; gap: 2px; min-width: 0; }
.ol-linha-tempo-valor { display: grid; justify-items: end; gap: 4px; font-variant-numeric: tabular-nums; }
/* Separador entre grupos de abas (ficha da empresa). */
.ol-tabs-sep { flex: none; width: 1px; align-self: stretch; margin: 6px 4px 8px; background: var(--line-strong); }
/* Texto livre (relato, defesa): mantém as quebras de linha de quem escreveu e não estoura a largura. */
.ol-texto-livre { margin: 0 0 12px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--fg); }
/* Título de seção logo depois de uma lista de dados ganha respiro; textarea da página com a fonte do kit. */
.ol-stat-list + .ol-titulo-secao, .ol-texto-livre + .ol-titulo-secao { margin-top: 18px; }
:where(.ol-shell, .ol-page) textarea.ol-input { font: inherit; font-size: 14px; line-height: 1.5; }
/* Contagem de aba que pede atenção (olAbas com 'tom' => 'bad'). */
.ol-tab .ol-count.ol-count-bad { background: var(--bad-fill); color: var(--accent-fg); }