/* Identidade Brasa: universo quase preto, um acento laranja, vidro espelhado e luz no que está ativo.
   Guia completo em docs/identidade-visual.html. Só existe o tema escuro.
   Camadas: #cosmos (fundo com paralaxe, js/cosmos.js) → vidro (painéis) → luz (bordas, brilhos, cursor). */
@property --luz { syntax: '<number>'; inherits: true; initial-value: 0; }

:root {
  color-scheme: dark;
  /* base */
  --fundo: #07060A;
  --superficie: #161412;
  --superficie-2: #1E1B18;
  --superficie-3: #27231F;
  --vidro: rgba(255, 244, 232, .035);
  --vidro-topo: rgba(255, 244, 232, .07);
  --borda: rgba(255, 236, 220, .08);
  --borda-forte: rgba(255, 236, 220, .15);
  --reflexo: rgba(255, 255, 255, .1);
  /* texto */
  --texto: #F6F1EC;
  --texto-2: #C2B9AF;
  --texto-3: #AAA096;
  /* acento */
  --brasa-clara: #FFB27A;
  --brasa: #FF8A3D;
  --brasa-funda: #C2541A;
  --brasa-quente: #FFE3CC;
  --brasa-a12: rgba(var(--acento-rgb), .12);
  --brasa-a35: rgba(var(--acento-rgb), .35);
  --brasa-a60: rgba(var(--acento-rgb), .6);
  /* canais RGB do acento (para transparências) e tons de apoio que cada tema redefine */
  --acento-rgb: 255, 138, 61;
  --acento-claro-rgb: 255, 180, 130;
  --claro-rgb: 255, 236, 220;
  --texto-forte: #FFF7F0;
  --titulo-2: #E9D9CB;
  --titulo-3: #BFA996;
  --superficie-pop: #1C1815;
  --primaria: var(--brasa);
  --primaria-texto: #1A0F07;
  --serie: var(--brasa);
  /* significado */
  --positivo: #45D49A; --projetivo: #B79BFF; --projetivo-rgb: 183, 155, 255;
  --positivo-fundo: rgba(69, 212, 154, .1);
  --critico: #FF5D73;
  --critico-fundo: rgba(255, 93, 115, .1);
  --alerta: #F2C14E;
  --alerta-fundo: rgba(242, 193, 78, .1);
  --info: #6FA3FF;
  --info-fundo: rgba(111, 163, 255, .1);
  /* flutuante claro (dicas e avisos) */
  --flutuante: #F6F0EA;
  --flutuante-texto: #17130F;
  /* vidro espelhado */
  --vidro-fundo:
    linear-gradient(165deg, rgba(255, 248, 242, .12) 0%, rgba(255, 248, 242, .055) 26%, rgba(255, 248, 242, .025) 58%, rgba(255, 240, 228, .045) 100%),
    rgba(14, 11, 13, .34);
  --desfoque: blur(18px) saturate(150%);
  --aro: linear-gradient(162deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .14) 16%, rgba(255, 255, 255, .045) 40%, rgba(255, 255, 255, .03) 68%, rgba(255, 200, 160, .26) 100%);
  --sombra-vidro:
    inset 0 1px 0 rgba(255, 255, 255, .13), inset 0 -18px 30px -24px rgba(0, 0, 0, .7),
    0 1px 2px rgba(0, 0, 0, .3), 0 30px 70px -30px rgba(0, 0, 0, .9);
  /* luz em camadas: núcleo, halo e bloom */
  --luz-brasa: 0 0 6px -1px rgba(var(--acento-claro-rgb), .9), 0 0 22px -4px rgba(var(--acento-rgb), .65), 0 0 60px -10px rgba(var(--acento-rgb), .4);
  --brilho-brasa: 0 0 28px -6px var(--brasa-a60);
  /* forma */
  --raio: 20px;
  --raio-grande: 28px;
  --raio-campo: 14px;
  --sombra: var(--sombra-vidro);
  --suave: cubic-bezier(.16, .8, .24, 1);
  /* tipo */
  --f-display: "Outfit", "Manrope", ui-sans-serif, system-ui, sans-serif;
  --f-ui: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-family: var(--f-ui);
  font-size: 15px;
}

* { box-sizing: border-box; }
html { background: var(--fundo); }
body {
  margin: 0; color: var(--texto); display: grid; grid-template-columns: 272px minmax(0, 1fr); min-height: 100vh;
  -webkit-font-smoothing: antialiased; background: var(--fundo);
}
::selection { background: var(--brasa-a35); }
:focus-visible { outline: 2px solid var(--brasa); outline-offset: 2px; }
h1, h2 { font-family: var(--f-display); text-wrap: balance; }
h1 { font-size: 2.3rem; font-weight: 300; margin: 0; letter-spacing: -.03em; line-height: 1.1; }
h2 { font-size: 1.15rem; font-weight: 400; margin: 0; letter-spacing: -.01em; }
p { margin: .4rem 0; }
code { background: var(--superficie-2); padding: 1px 5px; border-radius: 6px; font-size: .9em; }
small { font-size: .82rem; }
strong { font-weight: 600; }
.sutil { color: var(--texto-3); }
.txt-positivo { color: var(--positivo); }
.txt-critico { color: var(--critico); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rs { font-size: .45em; color: var(--texto-3); margin-right: .3em; vertical-align: .5em; letter-spacing: 0; font-weight: 400; }
.cent { color: var(--texto-3); }
svg.i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Universo (fundo com paralaxe) ---------- */
#cosmos {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(130% 80% at 75% 115%, #1C0E07 0%, #0B0708 42%, transparent 70%),
    radial-gradient(100% 70% at 10% -10%, #120C1E 0%, transparent 60%),
    #050407;
}
#cosmos .camada { position: absolute; inset: -90px; will-change: transform; }
.estrelas {
  position: absolute; left: -80px; right: -80px; top: -80px; height: calc(100% + 160px + var(--tile)); will-change: transform;
  background-repeat: repeat; background-size: var(--tile) var(--tile);
}
.estrelas.longe { opacity: .95; }
/* grão de filme (fica no fundo, sem mistura de cores sobre a interface) */
.grao {
  position: absolute; inset: 0; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* estrela cadente: só uma animação de transform, disparada de vez em quando por js/cosmos.js */
.cadente {
  position: absolute; width: 190px; height: 1.5px; border-radius: 2px; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(var(--acento-claro-rgb), 0), rgba(var(--claro-rgb), .95)); transform: rotate(150deg);
  box-shadow: 0 0 6px rgba(var(--claro-rgb), .6);
}
.cadente.voando { animation: cadente 1.3s cubic-bezier(.3, .1, .4, 1) forwards; }
@keyframes cadente {
  0% { opacity: 0; transform: rotate(150deg) translateX(0) scaleX(.3); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: rotate(150deg) translateX(-520px) scaleX(1); }
}
.neb { position: absolute; border-radius: 50%; filter: blur(70px); }
.neb.n1 { width: 75vw; height: 60vh; left: -18vw; top: -20vh; background: radial-gradient(closest-side, rgba(130, 96, 255, .26), rgba(86, 64, 210, .09) 55%, transparent); }
.neb.n2 { width: 55vw; height: 46vh; left: 38vw; top: -6vh; background: radial-gradient(closest-side, rgba(80, 120, 255, .13), transparent); }
.neb.n3 { width: 85vw; height: 66vh; right: -24vw; bottom: -26vh; background: radial-gradient(closest-side, rgba(var(--acento-rgb), .26), rgba(200, 70, 20, .09) 50%, transparent); }
.via-lactea {
  position: absolute; left: -25%; top: 26%; width: 150%; height: 30vh; transform: rotate(-17deg); filter: blur(26px); opacity: .9;
  background:
    radial-gradient(48% 34% at 46% 52%, rgba(var(--claro-rgb), .09), transparent 70%),
    radial-gradient(30% 22% at 30% 46%, rgba(190, 170, 255, .07), transparent 70%),
    radial-gradient(26% 20% at 66% 56%, rgba(var(--acento-claro-rgb), .07), transparent 70%);
}

.poeira {
  opacity: .5;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%, rgba(var(--claro-rgb), .55), transparent),
    radial-gradient(1.2px 1.2px at 64% 12%, rgba(var(--claro-rgb), .45), transparent),
    radial-gradient(2px 2px at 82% 64%, rgba(var(--acento-claro-rgb), .4), transparent),
    radial-gradient(1.4px 1.4px at 34% 78%, rgba(220, 210, 255, .4), transparent),
    radial-gradient(1.2px 1.2px at 48% 44%, rgba(var(--claro-rgb), .35), transparent);
  background-size: 680px 520px;
}
.vinheta {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 95% at 50% 45%, transparent 52%, rgba(0, 0, 0, .62) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 14%, transparent 86%, rgba(0, 0, 0, .4));
}
body:not([data-view="geral"]):not(.tela-perfis) #cosmos .cena { opacity: .55; }

/* ---------- Vidro espelhado ---------- */
.vidro, .painel, .kpi { position: relative; }
:is(.vidro, .painel, .kpi, .lateral, dialog) {
  isolation: isolate;
  background: var(--vidro-fundo);
  -webkit-backdrop-filter: var(--desfoque); backdrop-filter: var(--desfoque);
  border: 0; box-shadow: var(--sombra-vidro);
  transition: --luz .45s ease, box-shadow .3s, transform .35s var(--suave);
}
:is(.vidro, .painel, .kpi, .lateral, dialog):hover { --luz: 1; }
/* aro: borda de 1px que pega luz no alto e acende onde o cursor passa */
:is(.vidro, .painel, .kpi, .lateral, dialog)::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2;
  background:
    radial-gradient(220px circle at var(--mx, 50%) var(--my, -300px), rgba(var(--acento-claro-rgb), calc(.95 * var(--luz))), rgba(var(--acento-claro-rgb), calc(.3 * var(--luz))) 45%, transparent 72%),
    var(--aro);
  -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);
}
/* reflexo: faixa diagonal de espelho + luz difusa do cursor sobre o vidro */
:is(.vidro, .painel, .kpi, .lateral, dialog)::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background:
    radial-gradient(480px circle at var(--mx, 50%) var(--my, -300px), rgba(var(--claro-rgb), calc(.13 * var(--luz))), transparent 50%),
    linear-gradient(116deg, transparent 0 15%, rgba(255, 255, 255, .095) 22%, rgba(255, 255, 255, .025) 31%, transparent 37%, transparent 63%, rgba(255, 255, 255, .05) 67%, transparent 73%),
    radial-gradient(120% 60% at 20% -10%, rgba(255, 255, 255, .07), transparent 60%);
}
.painel::after { opacity: .7; }

/* ---------- Lateral ---------- */
.lateral {
  position: sticky; z-index: 5; top: 16px; height: calc(100vh - 32px); margin: 16px 0 16px 16px; border-radius: 32px;
  padding: 18px 14px; display: flex; flex-direction: column; gap: 14px;
}
.marca { display: flex; align-items: center; gap: 10px; font-family: var(--f-display); font-weight: 500; font-size: 1.1rem; padding: 4px 4px 16px 10px; border-bottom: 1px solid var(--borda); white-space: nowrap; }
.marca-ponto {
  width: 28px; height: 28px; border-radius: 9px; flex: none; position: relative;
  background: radial-gradient(circle at 30% 25%, var(--brasa-quente), var(--brasa-clara) 22%, var(--brasa) 55%, var(--brasa-funda));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), var(--luz-brasa);
}
.recolher { margin-left: auto; padding: 6px; }
.recolher svg { width: 18px; height: 18px; transition: transform .3s; }
/* grupo do menu rebaixado no vidro, como no guia */
.menu {
  display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 26px;
  background: rgba(0, 0, 0, .3); border: 1px solid rgba(var(--claro-rgb), .06);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .05);
}
.menu a {
  position: relative; display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 999px;
  color: var(--texto-2); text-decoration: none; font-weight: 500; font-size: .92rem; white-space: nowrap;
  transition: color .25s, background .25s, box-shadow .25s;
}
.menu a:hover { background: rgba(var(--claro-rgb), .05); color: var(--texto); }
.menu a.ativo {
  color: var(--texto);
  background:
    radial-gradient(85% 170% at 0% 50%, rgba(var(--acento-rgb), .34), rgba(var(--acento-rgb), .09) 42%, transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .015));
  box-shadow:
    inset 0 1px 0 rgba(var(--claro-rgb), .22), inset 0 0 0 1px rgba(var(--acento-claro-rgb), .3),
    0 0 0 1px rgba(0, 0, 0, .35), 0 10px 26px -12px rgba(var(--acento-rgb), .7), 0 0 44px -14px rgba(var(--acento-rgb), .55);
}
.menu a.ativo svg { color: var(--brasa-quente); filter: drop-shadow(0 0 5px rgba(var(--acento-rgb), .9)); }
.menu a.ativo::before {
  content: ""; position: absolute; left: -9px; top: 50%; width: 3px; height: 20px; transform: translateY(-50%); border-radius: 3px;
  background: linear-gradient(180deg, var(--brasa-quente), var(--brasa)); box-shadow: 0 0 4px var(--brasa-quente), 0 0 14px 2px rgba(var(--acento-rgb), .75), 0 0 34px 6px rgba(var(--acento-rgb), .3);
}
.menu hr { border: 0; border-top: 1px solid var(--borda); margin: 6px 10px; }
.cont {
  margin-left: auto; min-width: 22px; height: 20px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 700; border-radius: 999px; border: 1px solid var(--borda-forte); color: var(--texto-2); background: rgba(255, 255, 255, .04);
}
.cont.critico { border-color: rgba(255, 93, 115, .5); color: #FF8A9A; background: rgba(255, 93, 115, .12); box-shadow: 0 0 14px -3px rgba(255, 93, 115, .7); }
.rodape-lateral { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
#status-salvo { padding: 0 6px; text-align: center; }
#status-salvo[data-estado="erro"] { color: var(--critico); }
kbd { font: 600 .68rem var(--f-ui); border: 1px solid currentColor; opacity: .6; border-radius: 6px; padding: 0 5px; margin-left: 4px; }

@media (min-width: 992px) {
  body.menu-recolhido { grid-template-columns: 96px minmax(0, 1fr); }
  .menu-recolhido .lateral { padding: 18px 10px; }
  .menu-recolhido .lateral .rot { display: none; }
  .menu-recolhido .marca { flex-direction: column; padding: 4px 0 14px; gap: 14px; }
  .menu-recolhido .recolher { margin: 0; }
  .menu-recolhido .recolher svg { transform: scaleX(-1); }
  .menu-recolhido .menu a { justify-content: center; padding: 11px 0; }
  .menu-recolhido .menu a.ativo::before { left: -9px; }
  .menu-recolhido .menu .cont { position: absolute; top: 2px; right: 4px; min-width: 17px; height: 17px; padding: 0 4px; font-size: .6rem; }
  .menu-recolhido .rodape-lateral .btn { width: 48px; height: 48px; padding: 0; align-self: center; }
}

main { position: relative; z-index: 1; padding: 36px clamp(16px, 2.6vw, 44px) 72px; width: 100%; min-width: 0; }
body:not([data-view="geral"]) main { max-width: 1480px; margin-inline: auto; }
/* telas grandes (acima de xxl): letra um pouco maior e conteúdo centralizado, sem esticar demais */
@media (min-width: 1800px) {
  html { font-size: 17px; }
  body[data-view="geral"] main { max-width: 1960px; margin-inline: auto; }
  body:not([data-view="geral"]) main { max-width: 1640px; }
}
@media (min-width: 2400px) {
  html { font-size: 19px; }
  body[data-view="geral"] main { max-width: 2240px; }
  body:not([data-view="geral"]) main { max-width: 1840px; }
}

/* ---------- Botões ---------- */
.btn {
  font: inherit; font-weight: 600; font-size: .9rem; height: 40px; padding: 0 18px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; position: relative;
  color: var(--texto); border: 1px solid rgba(var(--claro-rgb), .13);
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .025));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 6px 18px -10px rgba(0, 0, 0, .8);
  transition: background .25s, box-shadow .25s, border-color .25s, transform .15s;
}
.btn svg.i { width: 17px; height: 17px; stroke-width: 2; }
.btn:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .05)); border-color: rgba(var(--claro-rgb), .22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 22px -8px rgba(var(--claro-rgb), .35), 0 6px 18px -10px rgba(0, 0, 0, .8); }
.btn:active { transform: translateY(1px); }
.btn.primario {
  color: var(--primaria-texto); border-color: transparent;
  background:
    radial-gradient(120% 110% at 50% -30%, rgba(var(--claro-rgb), .8), transparent 48%),
    linear-gradient(180deg, var(--brasa-clara), var(--brasa) 55%, var(--brasa-funda));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .65), inset 0 -3px 8px rgba(150, 50, 0, .35), 0 0 0 1px rgba(var(--acento-claro-rgb), .55),
    0 10px 28px -10px rgba(var(--acento-rgb), .85), 0 0 46px -12px rgba(var(--acento-rgb), .6);
}
.btn.primario:hover {
  background:
    radial-gradient(120% 110% at 50% -30%, rgba(var(--claro-rgb), .95), transparent 52%),
    linear-gradient(180deg, var(--brasa-clara), var(--brasa) 55%, var(--brasa-funda));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -3px 8px rgba(150, 50, 0, .3), 0 0 0 1px rgba(var(--acento-claro-rgb), .7),
    0 12px 34px -10px rgba(var(--acento-rgb), .95), 0 0 70px -10px rgba(var(--acento-rgb), .7);
}
.btn.positivo { color: #8BF2C6; border-color: rgba(69, 212, 154, .42); background: linear-gradient(180deg, rgba(69, 212, 154, .22), rgba(69, 212, 154, .06)); box-shadow: inset 0 1px 0 rgba(190, 255, 225, .25), 0 0 26px -10px rgba(69, 212, 154, .7); }
.btn.positivo:hover { background: linear-gradient(180deg, rgba(69, 212, 154, .3), rgba(69, 212, 154, .1)); box-shadow: inset 0 1px 0 rgba(190, 255, 225, .3), 0 0 34px -8px rgba(69, 212, 154, .8); }
.btn.perigo { color: #FF8A9A; border-color: rgba(255, 93, 115, .45); background: linear-gradient(180deg, rgba(255, 93, 115, .2), rgba(255, 93, 115, .05)); box-shadow: inset 0 1px 0 rgba(255, 200, 210, .2), 0 0 24px -10px rgba(255, 93, 115, .7); }
.btn.perigo[type=submit] { background: linear-gradient(180deg, #FF8293, var(--critico)); border-color: transparent; color: var(--primaria-texto); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 10px 26px -10px rgba(255, 93, 115, .8); }
.btn.pequeno { height: 32px; padding: 0 13px; font-size: .82rem; }
.btn.largo { width: 100%; }
.icone { font: inherit; background: none; border: 0; cursor: pointer; padding: 6px 9px; border-radius: 10px; color: var(--texto-3); transition: background .2s, color .2s; }
.icone:hover { background: var(--vidro-topo); color: var(--texto); }
.link { font: inherit; background: none; border: 0; color: var(--brasa-clara); cursor: pointer; padding: 4px 0; font-weight: 600; font-size: .88rem; transition: color .2s, text-shadow .2s; }
.link:hover { color: var(--brasa-quente); text-shadow: 0 0 14px rgba(var(--acento-rgb), .7); }
.acoes-rapidas { display: flex; flex-wrap: wrap; gap: 8px; }
.acoes-rapidas.vertical { flex-direction: column; align-items: stretch; }
.acoes { white-space: nowrap; text-align: right; }

/* ---------- Layout ---------- */
.topo-pagina { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.topo-pagina h1 { font-weight: 200; font-size: 2.6rem; background: linear-gradient(180deg, #FFFFFF, var(--titulo-2) 75%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.topo-pagina .sutil { margin-top: 8px; }
.painel { border-radius: var(--raio-grande); padding: 22px 24px; margin-bottom: 16px; min-width: 0; content-visibility: auto; contain-intrinsic-size: auto 320px; }
.painel > header { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
details.painel > summary { cursor: pointer; font-family: var(--f-display); font-size: 1.1rem; }
details.painel[open] > summary { margin-bottom: 14px; }
.alerta-painel, .kpi.critico, .h-atraso.critico {
  --aro: linear-gradient(162deg, rgba(255, 170, 185, .7), rgba(255, 93, 115, .25) 30%, rgba(255, 93, 115, .08) 60%, rgba(255, 93, 115, .3));
  background: linear-gradient(160deg, rgba(255, 93, 115, .16), rgba(255, 93, 115, .04) 55%, rgba(255, 93, 115, .07)), rgba(18, 8, 10, .4);
  box-shadow: var(--sombra-vidro), 0 0 50px -16px rgba(255, 93, 115, .55);
}
.alerta-painel h2 { color: #FF8A9A; text-shadow: 0 0 18px rgba(255, 93, 115, .45); }
.grade-painel { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 16px; }
.grade-painel > .painel { margin-bottom: 0; }
.grade-painel + * , .grade-painel { margin-bottom: 16px; }
.barra-filtros { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.filtros { display: flex; gap: 12px; flex-wrap: wrap; }
.filtros label { display: flex; flex-direction: column; font-size: .78rem; font-weight: 600; color: var(--texto-3); gap: 5px; }
.vazio { color: var(--texto-3); text-align: center; padding: 24px 12px; }
.vazio.grande { padding: 60px; display: flex; flex-direction: column; gap: 16px; align-items: center; }

/* entrada da tela */
@keyframes surgir { from { opacity: 0; transform: translateY(24px) scale(.985); } to { opacity: 1; transform: none; } }
#conteudo.entrando .surgir { animation: surgir .95s var(--suave) backwards; animation-delay: calc(var(--i, 0) * 85ms + 40ms); }
#conteudo.entrando > :not(.hero) { animation: surgir .8s var(--suave) backwards; }
#conteudo.entrando > :nth-child(2) { animation-delay: 70ms; }
#conteudo.entrando > :nth-child(3) { animation-delay: 140ms; }
#conteudo.entrando > :nth-child(4) { animation-delay: 210ms; }
#conteudo.entrando > :nth-child(n+5) { animation-delay: 280ms; }

/* ---------- Visão geral em tela cheia ---------- */
body[data-view="geral"] main { padding-top: 0; padding-bottom: 72px; }
.hero { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; gap: 14px; padding: 22px 0 8px; }
.hero-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.saudacao { display: flex; flex-direction: column; gap: 6px; }
.saudacao h1 {
  font-size: clamp(2.5rem, 3.8vw, 3.6rem); font-weight: 200; letter-spacing: -.04em; line-height: 1;
  background: linear-gradient(180deg, #FFFFFF 20%, var(--titulo-2) 70%, var(--titulo-3)); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 30px rgba(var(--acento-claro-rgb), .18));
}
.ponto-brasa { color: var(--brasa); -webkit-text-fill-color: var(--brasa); text-shadow: 0 0 14px rgba(var(--acento-rgb), .9), 0 0 40px rgba(var(--acento-rgb), .5); }
.rotulo-h { display: inline-flex; align-items: center; gap: 8px; color: var(--texto-3); font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.saudacao .rotulo-h { color: var(--texto-2); }
.ponto { width: 7px; height: 7px; border-radius: 50%; flex: none; background: currentColor; }
.ponto.positivo { color: var(--positivo); background: var(--positivo); box-shadow: 0 0 4px var(--positivo), 0 0 14px 1px rgba(69, 212, 154, .7); }
.ponto.critico { color: var(--critico); background: var(--critico); box-shadow: 0 0 4px var(--critico), 0 0 14px 1px rgba(255, 93, 115, .7); }
.barra-periodo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; width: fit-content; max-width: 100%; padding: 6px 14px 6px 6px; border-radius: 999px; }
.barra-periodo .segmentado { margin: 0; }
.hero-grade {
  flex: 1; display: grid; gap: 16px;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.08fr);
  grid-template-rows: repeat(3, minmax(min-content, 1fr));
  grid-template-areas: "saldo saldo receber cartao" "saldo saldo pagar cartao" "prox prox atraso cartao";
}
.hero-grade > .vidro { border-radius: 26px; padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; min-width: 0; transition: --luz .45s ease, box-shadow .3s, transform .5s var(--suave); }
.hero-grade > [data-tilt]:hover { transition: --luz .45s ease, box-shadow .3s, transform .12s linear; }
.h-saldo { grid-area: saldo; }
.h-receber { grid-area: receber; }
.h-pagar { grid-area: pagar; }
.h-atraso { grid-area: atraso; }
.h-cartao { grid-area: cartao; }
.h-proximos { grid-area: prox; }
.h-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; }

.saldo-grande {
  font-family: var(--f-display); font-weight: 200; font-size: clamp(3rem, 5.4vw, 5.8rem); letter-spacing: -.05em; line-height: 1; margin: 10px 0 6px;
  color: var(--texto-forte); font-variant-numeric: tabular-nums; text-shadow: 0 0 34px rgba(var(--acento-claro-rgb), .28), 0 0 90px rgba(var(--acento-rgb), .15);
}
.saldo-grande .rs { font-size: .3em; vertical-align: 1.5em; margin-right: .4em; }
.saldo-grande .cent { color: rgba(var(--claro-rgb), .42); }
.saldo-grande.negativo { color: #FFC9D1; text-shadow: 0 0 34px rgba(255, 93, 115, .35); }
.saldo-partes { display: flex; gap: 32px; flex-wrap: wrap; }
.saldo-partes > div { display: flex; flex-direction: column; gap: 1px; }
.saldo-partes span { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); }
.saldo-partes strong { font-family: var(--f-display); font-weight: 300; font-size: 1.3rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.saldo-partes small { color: var(--texto-3); font-size: .74rem; }

/* gráfico de linhas: entradas x custos */
.fluxo-linhas { position: relative; flex: 1; min-height: 140px; margin: 16px 0 0; padding-bottom: 20px; }
.fluxo-linhas svg { position: absolute; left: 0; right: 0; top: 0; bottom: 20px; width: 100%; height: calc(100% - 20px); overflow: visible; }
.fluxo-linhas .base { stroke: rgba(var(--claro-rgb), .14); stroke-width: 1; }
.fluxo-linhas .area { fill: url(#area-entradas); }
.fluxo-linhas .linha { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fluxo-linhas .linha.entradas { stroke: var(--positivo); filter: drop-shadow(0 0 5px rgba(69, 212, 154, .55)); }
.fluxo-linhas .linha.saidas { stroke: var(--brasa); filter: drop-shadow(0 0 5px rgba(var(--acento-rgb), .55)); }
.fluxo-linhas .linha.previsto { stroke-dasharray: 4 6; opacity: .7; filter: none; }
.fluxo-vazio { flex: 1; display: grid; place-items: center; }
.ponto-col { position: absolute; top: 0; bottom: 20px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; border-radius: 10px; }
.ponto-col:hover, .ponto-col:focus-visible { background: linear-gradient(180deg, rgba(var(--claro-rgb), .07), rgba(var(--claro-rgb), .02)); outline: none; }
.ponto-col.atual { background: linear-gradient(180deg, rgba(var(--acento-claro-rgb), .09), transparent 70%); }
.ponto-col .pt { position: absolute; left: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--fundo); border: 2px solid; z-index: 1; }
.ponto-col .pt.entradas { border-color: var(--positivo); box-shadow: 0 0 8px rgba(69, 212, 154, .7); }
.ponto-col .pt.saidas { border-color: var(--brasa); box-shadow: 0 0 8px rgba(var(--acento-rgb), .7); }
.ponto-col.futuro .pt { border-style: dashed; box-shadow: none; }
.ponto-col .valor { position: absolute; left: 50%; white-space: nowrap; font-size: .74rem; font-weight: 700; font-variant-numeric: tabular-nums; padding: 1px 7px; border-radius: 99px; z-index: 2; pointer-events: none; }
.ponto-col .valor.acima { margin-top: -26px; translate: -50% 0; }
.ponto-col .valor.abaixo { margin-top: 9px; translate: -50% 0; }
.ponto-col .valor.entradas { color: #9DF3CC; background: rgba(10, 30, 22, .78); border: 1px solid rgba(69, 212, 154, .35); }
.ponto-col .valor.saidas { color: var(--brasa-quente); background: rgba(34, 18, 8, .78); border: 1px solid rgba(var(--acento-rgb), .35); }
.ponto-col.futuro .valor { opacity: .75; }
.ponto-col .rotulo-x { position: absolute; left: 0; right: 0; bottom: -20px; text-align: center; font-size: .66rem; color: var(--texto-3); white-space: nowrap; }
.ponto-col.atual .rotulo-x { color: var(--brasa-quente); font-weight: 700; }
.fluxo-eixo { display: flex; justify-content: flex-start; align-items: center; gap: 18px; flex-wrap: wrap; font-size: .74rem; color: var(--texto-3); font-variant-numeric: tabular-nums; margin-top: 6px; }
.fluxo-eixo .sutil { margin-left: auto; }
.legenda-fluxo { display: inline-flex; align-items: center; gap: 6px; }
.legenda-fluxo i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; }
.legenda-fluxo i.ent { background: var(--positivo); box-shadow: 0 0 8px rgba(69, 212, 154, .7); }
.legenda-fluxo i.sai { background: var(--brasa); box-shadow: 0 0 8px rgba(var(--acento-rgb), .7); }
.legenda-fluxo i.prev { height: 0; border-top: 2px dashed rgba(var(--claro-rgb), .55); }
.legenda-fluxo i.proj { height: 0; border-top: 2px dashed var(--projetivo); }
.fluxo-linhas .linha.projetivo { stroke: var(--projetivo); stroke-width: 2; stroke-dasharray: 2 5; filter: drop-shadow(0 0 4px rgba(var(--projetivo-rgb), .6)); }
.ponto-col .pt.projetivo { border-color: var(--projetivo); border-style: dashed; width: 8px; height: 8px; margin: -4px 0 0 -4px; }
.ponto-col .valor.projetivo { color: #E1D6FF; background: rgba(26, 18, 48, .82); border: 1px dashed rgba(var(--projetivo-rgb), .55); }
.txt-projetivo { color: var(--projetivo); }
/* projetivo no quadro A receber */
.projetivo-mini { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 8px; margin-top: 4px; padding: 4px 10px; border-radius: 12px; text-align: left; cursor: pointer; color: inherit; font: inherit;
  background: rgba(var(--projetivo-rgb), .08); border: 1px dashed rgba(var(--projetivo-rgb), .4); }
.projetivo-mini:hover { background: rgba(var(--projetivo-rgb), .14); }
.projetivo-mini span { white-space: nowrap; font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--projetivo); }
.projetivo-mini b { font-variant-numeric: tabular-nums; color: #E1D6FF; justify-self: end; }
.projetivo-mini small { grid-column: 1 / -1; font-size: .7rem; color: var(--texto-3); }
/* painel certo × projetivo, mês a mês */
.meses-projetivo { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; height: 210px; margin: 18px 0 6px; }
.mes-proj { display: grid; grid-template-rows: 22px 1fr auto auto; justify-items: center; gap: 4px; padding: 6px 4px; border-radius: 14px; cursor: default; }
.mes-proj:hover { background: rgba(var(--claro-rgb), .05); }
.mes-proj.atual { background: linear-gradient(180deg, rgba(var(--acento-claro-rgb), .08), transparent 80%); }
.mp-total { font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--texto-forte); align-self: end; }
.mp-pilha { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; width: min(46px, 70%); height: 100%; }
.mp-pilha i { display: block; width: 100%; min-height: 0; }
.mp-pilha i[style*="height:0%"] { display: none; }
i.mp-certo { background: linear-gradient(180deg, #6BE3B0, #2FA877); border-radius: 0 0 4px 4px; box-shadow: 0 0 14px -4px rgba(69, 212, 154, .7); }
i.mp-proj { border-radius: 4px 4px 0 0; border: 1px dashed rgba(var(--projetivo-rgb), .9); background: repeating-linear-gradient(135deg, rgba(var(--projetivo-rgb), .45) 0 4px, rgba(var(--projetivo-rgb), .16) 4px 8px); }
.mp-pilha i.mp-proj:last-child { border-radius: 4px; }
.mp-pilha i.mp-certo:first-child { border-radius: 4px 4px 4px 4px; }
.mp-rotulo { font-size: .7rem; color: var(--texto-3); text-transform: capitalize; }
.mes-proj.atual .mp-rotulo { color: var(--brasa-quente); font-weight: 700; }
.mp-partes { display: flex; gap: 6px; font-size: .68rem; font-variant-numeric: tabular-nums; min-height: 1em; }
.legenda-proj { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .74rem; color: var(--texto-3); margin-bottom: 6px; }
.legenda-proj span { display: inline-flex; align-items: center; gap: 6px; }
.legenda-proj i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.lista-proj li { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 12px; }
.lista-proj .num { font-variant-numeric: tabular-nums; font-weight: 600; }
.foco-neg { margin-top: 12px; }
.foco-neg summary { cursor: pointer; font-size: .84rem; color: var(--texto-2); padding: 6px 0; }

/* campo com lista de cadastrados (clientes, serviços) */
.sugestoes { position: relative; }
.sugestoes input { width: 100%; }
.sugestoes-lista {
  position: absolute; z-index: 10; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; max-height: 260px; overflow-y: auto;
  border-radius: 14px; background: var(--superficie-pop); border: 1px solid var(--borda-forte); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .9);
}
.sugestoes-lista li { padding: 8px 12px; border-radius: 10px; cursor: pointer; font-size: .9rem; }
.sugestoes-lista li:hover, .sugestoes-lista li.ativo { background: rgba(var(--claro-rgb), .08); }
.sugestoes-lista li.novo { color: var(--brasa-clara); font-weight: 600; border-top: 1px solid var(--borda); border-radius: 0 0 10px 10px; }
/* quadros que abrem relatório */
[data-a="relatorio"][role="button"] { cursor: pointer; }
[data-a="relatorio"][role="button"]:focus-visible { outline: 2px solid var(--brasa); outline-offset: 3px; }
.ver-rel { margin-left: auto; font-size: .62rem; letter-spacing: .12em; color: var(--brasa-clara); opacity: 0; transform: translateX(-4px); transition: opacity .25s, transform .25s; }
[data-a="relatorio"]:hover .ver-rel, [data-a="relatorio"]:focus-visible .ver-rel { opacity: 1; transform: none; }
.h-mini > .rotulo-h { width: 100%; }
.h-cab-dir { display: inline-flex; align-items: center; gap: 10px; }
.link.pequeno { font-size: .66rem; letter-spacing: .08em; padding: 0; margin-left: auto; }
.na-fatura > .rotulo-h { width: 100%; }

/* cartões menores do painel */
.valor-m { font-family: var(--f-display); font-weight: 300; font-size: clamp(1.7rem, 2.3vw, 2.35rem); letter-spacing: -.035em; line-height: 1.1; margin-top: 4px; font-variant-numeric: tabular-nums; }
.valor-m.txt-positivo { text-shadow: 0 0 26px rgba(69, 212, 154, .35); }
.h-atraso.critico .valor-m { color: #FF9AA8; text-shadow: 0 0 26px rgba(255, 93, 115, .45); }
.h-atraso .btn { margin-top: auto; align-self: flex-start; }
.progresso { margin-top: auto; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .04); }
.progresso span { position: relative; display: block; height: 100%; min-width: 6px; border-radius: inherit; background: linear-gradient(90deg, var(--brasa-funda), var(--brasa) 70%, var(--brasa-quente)); box-shadow: 0 0 12px -1px rgba(var(--acento-rgb), .7); }
.progresso.positivo span { background: linear-gradient(90deg, #1C8F63, var(--positivo) 70%, #B8F5DA); box-shadow: 0 0 12px -1px rgba(69, 212, 154, .7); }
.progresso span::after, .limite span::after, .barra::after {
  content: ""; position: absolute; right: -2px; top: 50%; width: 8px; height: 8px; transform: translateY(-50%); border-radius: 50%;
  background: var(--brasa-quente); box-shadow: 0 0 6px 1px rgba(var(--acento-claro-rgb), .95), 0 0 16px 4px rgba(var(--acento-rgb), .45);
}
.progresso.positivo span::after { box-shadow: 0 0 6px 1px rgba(150, 255, 210, .95), 0 0 16px 4px rgba(69, 212, 154, .45); }

/* cartão de crédito em pilha */
.pilha-cartoes { position: relative; margin: 4px 0 6px; }
.pilha-cartoes.com-pilha { padding-top: 24px; }
.cartao-fisico {
  appearance: none; border: 0; font: inherit; color: #fff; text-align: left; cursor: pointer; position: relative; z-index: 2; overflow: hidden; isolation: isolate;
  width: 100%; aspect-ratio: 1.586; max-height: 210px; border-radius: 18px; padding: 16px 18px; display: flex; flex-direction: column; gap: 2px;
  background:
    radial-gradient(110% 90% at 0% 0%, color-mix(in srgb, var(--cor-cartao) 80%, #fff 12%) 0%, transparent 58%),
    radial-gradient(90% 120% at 100% 100%, color-mix(in srgb, var(--cor-cartao) 50%, var(--brasa) 30%) 0%, transparent 62%),
    linear-gradient(135deg, color-mix(in srgb, var(--cor-cartao) 45%, #0B0A09), #110E0D 72%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 -20px 40px -20px rgba(0, 0, 0, .6),
    0 22px 44px -18px rgba(0, 0, 0, .95), 0 0 60px -22px color-mix(in srgb, var(--cor-cartao) 85%, transparent);
  transition: transform .5s var(--suave), box-shadow .4s, filter .4s;
}
.cartao-fisico::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 7px); }
.cartao-fisico::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(112deg, transparent 32%, rgba(255, 255, 255, .28) 45%, rgba(var(--claro-rgb), .1) 50%, transparent 60%);
  background-size: 260% 100%; background-position: 100% 0; transition: background-position 1.4s var(--suave);
}
.cartao-fisico:hover { transform: translateY(-3px); }
.cartao-fisico:hover::after { background-position: 0 0; }
.cartao-fisico.atras { position: absolute; top: 0; left: 7%; width: 86%; height: 70px; aspect-ratio: auto; z-index: 0; padding: 0; filter: brightness(.7) saturate(.85); }
.cartao-fisico.atras.a1 { top: 12px; left: 3.5%; width: 93%; z-index: 1; filter: brightness(.82) saturate(.9); }
.cartao-fisico.atras:hover { transform: translateY(-5px); filter: brightness(1); }
.cf-topo { display: flex; justify-content: space-between; align-items: center; }
.cf-nome { font-family: var(--f-display); font-weight: 500; font-size: 1.05rem; letter-spacing: -.01em; text-shadow: 0 1px 10px rgba(0, 0, 0, .4); }
.cf-chip { width: 36px; height: 27px; border-radius: 7px; background: linear-gradient(135deg, #F6DFBE, #B98D55 48%, #EACB9C); box-shadow: inset 0 0 0 1px rgba(90, 60, 20, .35), inset 0 9px 0 -8px rgba(90, 60, 20, .5), inset 0 -9px 0 -8px rgba(90, 60, 20, .5), 0 2px 6px rgba(0, 0, 0, .4); }
.cf-rotulo { margin-top: auto; font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.cf-valor { font-family: var(--f-display); font-weight: 300; font-size: clamp(1.5rem, 2.1vw, 2rem); letter-spacing: -.03em; line-height: 1.15; font-variant-numeric: tabular-nums; text-shadow: 0 1px 14px rgba(0, 0, 0, .45); }
.cf-valor .rs, .cf-valor .cent { color: rgba(255, 255, 255, .62); }
.cf-rodape { display: flex; justify-content: space-between; gap: 8px; font-size: .72rem; color: rgba(255, 255, 255, .78); }
.cf-rodape em { font-style: normal; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .62rem; }
.na-fatura { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.na-fatura ul { list-style: none; margin: 0; padding: 4px 12px; border-radius: 14px; background: rgba(0, 0, 0, .26); border: 1px solid rgba(var(--claro-rgb), .07); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 255, 255, .05); }
.na-fatura li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; font-size: .82rem; border-bottom: 1px solid var(--borda); }
.na-fatura li:last-child { border-bottom: 0; }
.na-fatura li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto-2); }
.na-fatura li small { color: var(--texto-3); font-size: .72rem; }
.na-fatura li b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cartao-dados { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
.cd-linha { display: flex; flex-direction: column; gap: 2px; }
.cd-linha span { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); }
.cd-linha strong { font-family: var(--f-display); font-weight: 300; font-size: 1.55rem; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

/* próximos vencimentos ligados por luz */
.linha-tempo { list-style: none; margin: 4px 0 0; padding: 0; position: relative; display: flex; flex-direction: column; }
.linha-tempo::before { content: ""; position: absolute; left: 63px; top: 20px; bottom: 20px; width: 1px; background: linear-gradient(rgba(var(--acento-claro-rgb), .95), rgba(var(--acento-rgb), .3) 45%, rgba(255, 255, 255, .08)); box-shadow: 0 0 8px rgba(var(--acento-rgb), .6); }
.linha-tempo li { display: grid; grid-template-columns: 44px 18px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 5px 0; }
.lt-data { display: flex; flex-direction: column; align-items: center; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--texto-3); line-height: 1.15; }
.lt-data b { font-family: var(--f-display); font-size: 1.3rem; font-weight: 300; color: var(--texto); letter-spacing: 0; }
.lt-no { justify-self: center; width: 9px; height: 9px; border-radius: 50%; position: relative; z-index: 1; background: #221C18; border: 1px solid rgba(var(--claro-rgb), .3); }
.linha-tempo li.proximo .lt-no { background: var(--brasa-quente); border-color: transparent; box-shadow: 0 0 0 3px rgba(var(--acento-rgb), .22), 0 0 10px 2px rgba(var(--acento-claro-rgb), .95), 0 0 28px 6px rgba(var(--acento-rgb), .4); }
.lt-info { min-width: 0; }
.lt-info strong { display: block; font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-info small { display: block; color: var(--texto-3); font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-info .chip { font-size: inherit; color: inherit; }
.lt-valor { font-weight: 600; font-size: .92rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.linha-tempo li.urgente .lt-valor { color: var(--alerta); }

.rolar {
  align-self: center; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 2px;
  font: 700 .66rem var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--texto-3);
  background: none; border: 0; cursor: pointer; padding: 4px 12px; transition: color .2s, text-shadow .2s;
}
.rolar svg { width: 18px; height: 18px; animation: boiar 2.4s ease-in-out infinite; }
.rolar:hover { color: var(--texto); text-shadow: 0 0 14px rgba(var(--acento-claro-rgb), .6); }
@keyframes boiar { 0%, 100% { transform: translateY(0); opacity: .6; } 50% { transform: translateY(4px); opacity: 1; } }
.detalhes { padding-top: 28px; scroll-margin-top: 16px; }
.detalhes .painel { scroll-margin-top: 16px; }

/* ---------- KPIs ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 14px; }
.kpi { border-radius: var(--raio); padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.kpi > span { display: flex; align-items: center; gap: 8px; color: var(--texto-3); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.kpi strong { font-family: var(--f-display); font-size: 2rem; font-weight: 300; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; margin-top: 4px; }
.kpi small { color: var(--texto-3); }
.kpi.positivo > span::before, .kpi.negativo > span::before, .kpi.critico > span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 4px currentColor, 0 0 12px currentColor; }
.kpi.positivo > span { color: var(--positivo); }
.kpi.positivo strong { color: var(--positivo); text-shadow: 0 0 24px rgba(69, 212, 154, .3); }
.kpi.negativo > span { color: var(--critico); }
.kpi.critico > span, .kpi.critico strong { color: #FF8A9A; }
.realizado { margin: 0 0 18px; }

/* ---------- Filtros e campos ---------- */
.filtro-periodo { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.intervalo { display: flex; gap: 8px; align-items: center; color: var(--texto-2); font-size: .88rem; }
input, select, textarea {
  font: inherit; color: var(--texto); background: rgba(0, 0, 0, .34); border: 1px solid rgba(var(--claro-rgb), .13); border-radius: var(--raio-campo);
  padding: 9px 12px; min-width: 0; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 255, 255, .04);
  transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus { outline: 0; border-color: rgba(var(--acento-claro-rgb), .8); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45), 0 0 0 4px var(--brasa-a12), 0 0 26px -6px var(--brasa-a60); }
input[type=checkbox], input[type=radio] { accent-color: var(--brasa); box-shadow: none; }
input[type=color] { padding: 3px; height: 38px; width: 60px; }
input[type=date]::-webkit-calendar-picker-indicator { filter: invert(.75) sepia(.3); cursor: pointer; }
select option { background: var(--superficie); }

.segmentado { display: inline-flex; flex-wrap: wrap; background: rgba(0, 0, 0, .32); border: 1px solid rgba(var(--claro-rgb), .07); border-radius: 999px; padding: 4px; gap: 2px; margin-bottom: 4px; box-shadow: inset 0 2px 5px rgba(0, 0, 0, .45); }
.segmentado label { cursor: pointer; }
.segmentado input { position: absolute; opacity: 0; pointer-events: none; }
.segmentado span { display: block; padding: 7px 14px; border-radius: 999px; font-size: .86rem; font-weight: 600; color: var(--texto-3); transition: color .25s, background .25s, box-shadow .25s; }
.segmentado label:hover span { color: var(--texto-2); }
.segmentado input:checked + span {
  color: var(--texto); background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 0 0 1px rgba(255, 255, 255, .08), 0 6px 16px -8px rgba(0, 0, 0, .9), 0 0 20px -8px rgba(var(--claro-rgb), .35);
}
.segmentado input:focus-visible + span { outline: 2px solid var(--brasa); }
.segmentado.pequeno span { padding: 6px 12px; }

.abas { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(0, 0, 0, .32); border: 1px solid rgba(var(--claro-rgb), .07); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .45); margin-bottom: 20px; overflow-x: auto; max-width: 100%; }
.abas button { font: inherit; font-weight: 600; font-size: .9rem; background: none; border: 0; border-radius: 999px; padding: 8px 16px; color: var(--texto-3); cursor: pointer; white-space: nowrap; transition: color .25s, background .25s, box-shadow .25s; }
.abas button:hover { color: var(--texto-2); }
.abas button.ativa {
  color: var(--texto);
  background: radial-gradient(100% 150% at 50% 130%, rgba(var(--acento-rgb), .42), rgba(var(--acento-rgb), .08) 55%, transparent 80%), linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02));
  box-shadow: inset 0 0 0 1px rgba(var(--acento-claro-rgb), .38), inset 0 1px 0 rgba(var(--claro-rgb), .25), 0 0 26px -8px rgba(var(--acento-rgb), .7);
}

.nav-mes { display: inline-flex; align-items: center; gap: 6px; }
.nav-mes strong, .nav-mes h2 { min-width: 140px; text-align: center; }

/* ---------- Tabelas ---------- */
.tabela-wrap { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabela th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; color: var(--texto-3); font-weight: 700; padding: 8px 12px 10px; border-bottom: 1px solid var(--borda); }
.tabela th.num { text-align: right; }
.tabela td { padding: 12px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr { transition: background .2s; }
.tabela tbody tr:hover { background: linear-gradient(90deg, rgba(var(--acento-claro-rgb), .06), rgba(var(--claro-rgb), .025) 40%, transparent); }
.tabela tr.atrasada td:first-child { box-shadow: inset 3px 0 var(--critico), inset 14px 0 18px -14px rgba(255, 93, 115, .6); }
.tabela tr.inativa { opacity: .5; }
.tabela.compacta td { padding: 8px 12px; }

.chip { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--texto-2); }
.chip i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; box-shadow: 0 0 6px -1px currentColor; }
.chip.grande { font-size: .92rem; color: var(--texto); font-weight: 500; }
.chip.vazio { color: var(--texto-3); }
.tag { font-size: .7rem; background: rgba(255, 255, 255, .06); border: 1px solid var(--borda); color: var(--texto-2); padding: 1px 7px; border-radius: 999px; font-weight: 600; }
.selo { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--borda-forte); background: rgba(255, 255, 255, .04); color: var(--texto-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.selo.critico::before, .selo.alerta::before, .selo.ok::before, .selo.info::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 4px currentColor, 0 0 10px currentColor; }
.selo.critico { background: var(--critico-fundo); color: #FF8A9A; border-color: rgba(255, 93, 115, .4); }
.selo.alerta { background: var(--alerta-fundo); color: var(--alerta); border-color: rgba(242, 193, 78, .35); }
.selo.ok { background: var(--positivo-fundo); color: var(--positivo); border-color: rgba(69, 212, 154, .35); }
.selo.info { background: var(--info-fundo); color: var(--info); border-color: rgba(111, 163, 255, .35); }

/* ---------- Listas ---------- */
.lista { list-style: none; margin: 0; padding: 0; }
.lista li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--borda); }
.lista li:last-child { border-bottom: 0; }
.lista li > div { flex: 1; min-width: 0; }
.lista li.inativa { opacity: .5; }
.lista.categorias li .chip { flex: 1; }
.checklist label { flex: 1; display: flex; gap: 10px; align-items: center; cursor: pointer; }
.checklist li.feito span { text-decoration: line-through; color: var(--texto-3); }
.form-inline { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.form-inline input[name=nome] { flex: 1; min-width: 160px; }
.curta { width: 76px; }

/* ---------- Blocos rebaixados dentro do vidro ---------- */
.cartao-resumo, .compra-mercado, .emprestimo, .resumo-pagamento {
  background: rgba(0, 0, 0, .26); border: 1px solid rgba(var(--claro-rgb), .07);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 255, 255, .05);
}

/* ---------- Cartão ---------- */
.cartao-resumo { position: relative; border-radius: var(--raio); padding: 16px 18px 16px 22px; margin-bottom: 12px; overflow: hidden; }
.cartao-resumo::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 0 3px 3px 0; background: var(--cor-cartao); box-shadow: 0 0 6px var(--cor-cartao), 0 0 18px var(--cor-cartao); }
.cartao-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cartao-numeros { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
.cartao-numeros div { display: flex; flex-direction: column; gap: 2px; }
.cartao-numeros span { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); }
.cartao-numeros strong { font-family: var(--f-display); font-weight: 300; font-size: 1.6rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cartao-numeros small { color: var(--texto-3); }
.nota { font-size: .85rem; margin: 8px 0 0; color: var(--texto-2); }
.nota.critico { color: #FF8A9A; }
.limite { height: 8px; background: rgba(255, 255, 255, .06); border-radius: 99px; margin: 10px 0; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .04); }
.limite span { position: relative; display: block; height: 100%; min-width: 8px; background: linear-gradient(90deg, var(--brasa-funda), var(--brasa) 70%, var(--brasa-quente)); border-radius: 99px; box-shadow: 0 0 14px -1px var(--brasa-a60); }
.limite.alerta span { background: linear-gradient(90deg, #A27A1E, var(--alerta)); box-shadow: 0 0 14px rgba(242, 193, 78, .5); }
.limite.critico span { background: linear-gradient(90deg, #A3283B, var(--critico)); box-shadow: 0 0 14px rgba(255, 93, 115, .55); }
.limite.positivo span { background: var(--positivo); box-shadow: 0 0 14px rgba(69, 212, 154, .5); }
.resumo-fatura { padding: 12px 0 18px; border-bottom: 1px solid var(--borda); margin-bottom: 10px; }
.fatura-dados { display: grid; grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); gap: 16px 20px; align-items: start; }
.fatura-celula { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fatura-celula > span { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); white-space: nowrap; }
.fatura-celula > strong { font-family: var(--f-display); font-weight: 300; font-size: 1.45rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fatura-celula > small { min-height: 24px; display: flex; align-items: center; color: var(--texto-3); }
.fatura-celula > small .link { width: auto; margin: 0; padding: 0; }
.fatura-acoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--borda); }
.fatura-acoes .btn { min-width: 190px; justify-content: center; }
.grade-emprestimos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.emprestimo { border-radius: var(--raio); padding: 16px; display: flex; flex-direction: column; gap: 6px; }

/* ---------- Gráficos ---------- */
.total-grafico { margin: -8px 0 12px; }
.grafico-barras { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.grafico-barras.duas-colunas { display: grid; grid-auto-flow: column; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--linhas), auto); column-gap: 32px; }
.barra-linha { display: grid; grid-template-columns: minmax(110px, 34%) 1fr auto; align-items: center; gap: 12px; padding: 5px 8px; border-radius: 10px; transition: background .2s; }
.barra-linha:hover { background: rgba(var(--claro-rgb), .05); }
.barra-rotulo { display: flex; align-items: center; gap: 8px; font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-rotulo i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.barra-trilho { height: 8px; background: rgba(255, 255, 255, .05); border-radius: 99px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5); }
.barra { position: relative; display: block; height: 100%; background: linear-gradient(90deg, rgba(194, 84, 26, .7), var(--brasa) 75%, var(--brasa-quente)); border-radius: 99px; min-width: 4px; box-shadow: 0 0 12px -2px var(--brasa-a60); }
.barra::after { opacity: 0; transition: opacity .25s; width: 7px; height: 7px; }
.barra-linha:first-child .barra::after, .barra-linha:hover .barra::after { opacity: 1; }
.barra-valor { font-size: .84rem; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; min-width: 110px; }
.barra-valor small { color: var(--texto-3); margin-left: 4px; display: inline-block; min-width: 30px; }
.grafico-colunas { display: flex; align-items: flex-end; gap: 6px; height: calc(var(--altura) + 40px); padding-top: 4px; }
.coluna { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; min-width: 0; border-radius: 12px; cursor: default; transition: background .2s; }
.coluna:hover { background: rgba(var(--claro-rgb), .04); }
.coluna-barra { width: 64%; max-width: 44px; background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); border: 1px solid rgba(var(--claro-rgb), .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); border-radius: 10px; min-height: 2px; max-height: var(--altura); }
.coluna.destaque .coluna-barra {
  background: linear-gradient(180deg, var(--brasa-quente), var(--brasa) 30%, rgba(194, 84, 26, .55)); border-color: transparent;
  box-shadow: inset 0 2px 0 rgba(var(--claro-rgb), .85), 0 0 22px -4px rgba(var(--acento-rgb), .8), 0 0 60px -12px rgba(var(--acento-rgb), .5);
}
.coluna-valor { font-size: .72rem; color: var(--texto-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.coluna.destaque .coluna-valor { color: var(--flutuante-texto); background: var(--flutuante); font-weight: 700; padding: 2px 8px; border-radius: 99px; box-shadow: 0 0 18px -4px rgba(var(--acento-claro-rgb), .6); }
.coluna-rotulo { font-size: .74rem; color: var(--texto-3); white-space: nowrap; }
.coluna.destaque .coluna-rotulo { color: var(--texto); font-weight: 700; }
#dica {
  position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; max-width: 300px; min-width: 120px;
  display: flex; flex-direction: column; gap: 3px; padding: 10px 14px 11px; border-radius: 16px;
  color: var(--texto); font-size: .8rem; line-height: 1.35;
  background: radial-gradient(140% 120% at 0% 0%, rgba(var(--acento-rgb), .2), transparent 55%), linear-gradient(180deg, rgba(var(--claro-rgb), .08), rgba(var(--claro-rgb), .02)), rgba(12, 10, 14, .88);
  border: 1px solid rgba(var(--acento-rgb), .32);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(var(--claro-rgb), .14), 0 0 26px -8px rgba(var(--acento-rgb), .55), 0 18px 40px -14px rgba(0, 0, 0, .95);
  animation: dica-entra .16s ease-out;
}
#dica[hidden] { display: none; }
@keyframes dica-entra { from { opacity: 0; scale: .96; } }
.dica-titulo { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .13em; color: rgb(var(--acento-claro-rgb)); }
.dica-valor { font-family: var(--f-display); font-size: 1.28rem; font-weight: 400; letter-spacing: -.02em; color: var(--texto-forte); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dica-texto { white-space: pre-line; }
.dica-etiquetas { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.dica-etiqueta { display: inline-flex; align-items: center; gap: 5px; font-size: .7rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: rgba(var(--claro-rgb), .08); color: var(--texto-2); }
.dica-etiqueta i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
.dica-etiqueta.ok { color: var(--positivo); background: rgba(69, 212, 154, .12); }
.dica-etiqueta.critico { color: #FF8A9A; background: var(--critico-fundo); }
.dica-etiqueta.acento { color: rgb(var(--acento-claro-rgb)); background: rgba(var(--acento-rgb), .14); }
.dica-etiqueta.aviso { color: #F2C14E; background: rgba(242, 193, 78, .12); }
.dica-etiqueta.projetivo { color: var(--projetivo); background: rgba(var(--projetivo-rgb), .14); }
.dica-etiqueta.sutil { color: var(--texto-3); }

/* ---------- Mercado ---------- */
.compra-mercado { border-radius: var(--raio); margin-bottom: 10px; overflow: hidden; }
.compra-mercado summary { display: flex; justify-content: space-between; gap: 10px; padding: 14px 16px; cursor: pointer; }
.compra-mercado summary:hover { background: rgba(var(--claro-rgb), .03); }
.compra-mercado[open] { border-color: var(--borda-forte); }
.compra-mercado[open] summary { border-bottom: 1px solid var(--borda); }
.compra-mercado .acoes { padding: 10px 16px; display: flex; gap: 8px; justify-content: flex-end; }
.tabela.itens td { padding: 5px 4px; }
.tabela.itens input, .tabela.itens select { width: 100%; padding: 7px 10px; border-radius: 10px; }
.tabela.itens td:first-child { min-width: 170px; }
.linha-total { display: flex; justify-content: space-between; align-items: center; margin: 14px 0 6px; font-size: 1.05rem; }

/* ---------- Modal ---------- */
dialog {
  border-radius: var(--raio-grande); padding: 0; width: min(560px, calc(100vw - 32px)); color: var(--texto); overflow: visible;
  --vidro-fundo: linear-gradient(165deg, rgba(var(--claro-rgb), .13), rgba(var(--claro-rgb), .04) 40%, rgba(var(--claro-rgb), .05)), rgba(20, 16, 15, .78);
  --desfoque: blur(34px) saturate(170%);
  box-shadow: var(--sombra-vidro), 0 50px 120px -30px rgba(0, 0, 0, .95), 0 0 80px -30px rgba(var(--acento-rgb), .45);
}
dialog[open] { animation: abrir .45s var(--suave); }
@keyframes abrir { from { opacity: 0; transform: translateY(14px) scale(.97); } }
dialog.largo { width: min(720px, calc(100vw - 32px)); }
dialog.extra-largo { width: min(980px, calc(100vw - 32px)); }
dialog::backdrop { background: rgba(4, 3, 6, .55); -webkit-backdrop-filter: blur(8px) saturate(120%); backdrop-filter: blur(8px) saturate(120%); }
.modal-form { position: relative; z-index: 3; display: flex; flex-direction: column; max-height: calc(100vh - 40px); }
.modal-topo { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--borda); }
.modal-topo h2 { font-size: 1.4rem; font-weight: 300; }
.modal-corpo { padding: 20px 24px; overflow-y: auto; }
.modal-erro { margin: 0 24px; padding: 10px 14px; border-radius: var(--raio-campo); border: 1px solid rgba(255, 93, 115, .35); background: var(--critico-fundo); color: #FF8A9A; font-weight: 600; }
.modal-rodape { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 24px; border-top: 1px solid var(--borda); }
.modal-rodape .btn:not(.primario):not(.positivo):not(.perigo) { background: none; border-color: transparent; box-shadow: none; color: var(--texto-2); }
.modal-rodape .btn:not(.primario):not(.positivo):not(.perigo):hover { background: var(--vidro-topo); color: var(--texto); }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grade-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 14px; }
.larga { grid-column: 1 / -1; }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo > span { font-size: .82rem; font-weight: 600; color: var(--texto-2); }
.campo > small { color: var(--texto-3); }
.campo.check { flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 10px; }
.campo.check input { width: 18px; height: 18px; }
.campo [hidden], [hidden] { display: none !important; }
.entrada-prefixo { display: flex; align-items: center; border: 1px solid rgba(var(--claro-rgb), .13); border-radius: var(--raio-campo); background: rgba(0, 0, 0, .34); overflow: hidden; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45); transition: border-color .2s, box-shadow .2s; }
.entrada-prefixo:focus-within { border-color: rgba(var(--acento-claro-rgb), .8); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45), 0 0 0 4px var(--brasa-a12), 0 0 26px -6px var(--brasa-a60); }
.entrada-prefixo em { font-style: normal; font-weight: 600; color: var(--texto-3); padding: 0 0 0 12px; font-size: .88rem; }
.entrada-prefixo.sufixo em { padding: 0 12px 0 0; }
.entrada-prefixo input { border: 0; outline: 0; flex: 1; width: 100%; background: none; box-shadow: none; font-variant-numeric: tabular-nums; }
.previa { background: linear-gradient(160deg, rgba(var(--acento-rgb), .16), rgba(var(--acento-rgb), .05)); border: 1px solid var(--brasa-a35); border-radius: var(--raio-campo); padding: 12px 14px; font-size: .88rem; margin: 0; box-shadow: inset 0 1px 0 rgba(var(--acento-claro-rgb), .15), 0 0 30px -14px var(--brasa-a60); }
.previa:empty { display: none; }
.dica { font-size: .85rem; color: var(--texto-3); margin: 0; }
.resumo-pagamento { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border-radius: var(--raio); padding: 14px 16px; margin-bottom: 18px; }
.resumo-pagamento div { display: flex; flex-direction: column; gap: 2px; }
.resumo-pagamento span { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); }
.valor-devido { font-family: var(--f-display); font-weight: 300; font-size: 1.7rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.form-config { display: flex; flex-direction: column; gap: 14px; max-width: 380px; }

/* ---------- Avisos ---------- */
#avisos { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 200; }
.aviso { background: rgba(250, 244, 238, .95); color: var(--flutuante-texto); padding: 11px 18px; border-radius: 14px; font-weight: 600; font-size: .9rem; box-shadow: inset 0 1px 0 #fff, 0 0 30px -10px rgba(var(--acento-claro-rgb), .55), 0 16px 40px -12px rgba(0, 0, 0, .9); transition: opacity .3s, transform .3s; animation: abrir .4s var(--suave); }
.aviso.erro { background: var(--critico); color: var(--primaria-texto); }
.aviso.saindo { opacity: 0; transform: translateY(8px); }

/* ---------- CPF / CNPJ ---------- */
.tag.titular { font-size: .62rem; letter-spacing: .06em; vertical-align: 1px; }
.tag.titular.pf { color: #B9C7FF; border-color: rgba(111, 163, 255, .35); background: rgba(111, 163, 255, .1); }
.tag.titular.pj { color: #FFCB9E; border-color: rgba(var(--acento-rgb), .4); background: rgba(var(--acento-rgb), .12); }
.tag.titular.falta { color: var(--alerta); border-color: rgba(242, 193, 78, .4); background: var(--alerta-fundo); }
.barra-periodo .titulares { margin-left: auto; }

/* ---------- Leitor de nota fiscal ---------- */
.leitor-nota { display: flex; flex-direction: column; gap: 8px; }
.leitor-alvo {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; cursor: pointer;
  border: 1px dashed rgba(var(--acento-claro-rgb), .45); background: linear-gradient(160deg, rgba(var(--acento-rgb), .12), rgba(var(--acento-rgb), .03));
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.leitor-alvo:hover, .leitor-nota.arrastando .leitor-alvo { border-color: var(--brasa); box-shadow: 0 0 26px -10px var(--brasa-a60); background: linear-gradient(160deg, rgba(var(--acento-rgb), .18), rgba(var(--acento-rgb), .05)); }
.leitor-alvo strong { display: block; font-size: .95rem; }
.leitor-alvo small { color: var(--texto-3); }
.leitor-icone { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; font-size: 1.2rem; color: var(--primaria-texto); background: linear-gradient(180deg, var(--brasa-clara), var(--brasa)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 18px -4px var(--brasa-a60); }
.leitor-nota.lendo .leitor-icone { animation: girar 1s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.leitor-status { margin: 0; padding: 10px 14px; border-radius: 14px; font-size: .86rem; background: rgba(0, 0, 0, .26); border: 1px solid var(--borda); display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.leitor-status.ok { border-color: rgba(69, 212, 154, .35); background: var(--positivo-fundo); }
.leitor-status.erro { border-color: rgba(255, 93, 115, .4); background: var(--critico-fundo); color: #FF9AA8; }

/* ---------- Relatórios em pop-up ---------- */
.relatorio { display: flex; flex-direction: column; gap: 18px; }
.rel-resumo { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.rel-total { display: block; font-family: var(--f-display); font-weight: 200; font-size: 2.6rem; letter-spacing: -.04em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rel-titulares { display: flex; gap: 16px; font-variant-numeric: tabular-nums; font-weight: 600; }
.rel-titulares span { display: inline-flex; align-items: center; gap: 6px; }
.rel-duas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 18px; }
.rel-secao { display: flex; flex-direction: column; gap: 8px; }
.rel-secao h3 { margin: 0 0 4px; display: flex; justify-content: space-between; gap: 10px; font-family: var(--f-display); font-weight: 400; font-size: 1.05rem; }
.rel-secao h3 span { font-variant-numeric: tabular-nums; color: var(--texto-2); }
.rel-grupo { border-radius: 16px; background: rgba(0, 0, 0, .24); border: 1px solid rgba(var(--claro-rgb), .07); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .4); }
.rel-grupo summary { display: grid; grid-template-columns: minmax(0, 1.4fr) auto minmax(60px, 1fr) auto 38px; align-items: center; gap: 12px; padding: 11px 14px; cursor: pointer; list-style: none; }
.rel-grupo summary::-webkit-details-marker { display: none; }
.rel-grupo summary:hover { background: rgba(var(--claro-rgb), .04); border-radius: 16px; }
.rel-grupo summary .chip { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rel-grupo summary b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rel-pct { color: var(--texto-3); text-align: right; }
.rel-duas .rel-grupo summary { grid-template-columns: minmax(0, 1fr) minmax(40px, .5fr) auto 34px; }
.rel-duas .rel-grupo summary small.sutil { display: none; }
.rel-duas .rel-itens li { grid-template-columns: 40px minmax(0, 1fr) auto; }
.rel-duas .rel-itens .selo { display: none; }
.rel-trilho { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .06); }
.rel-trilho span { display: block; height: 100%; min-width: 4px; border-radius: inherit; background: linear-gradient(90deg, var(--brasa-funda), var(--brasa), var(--brasa-quente)); box-shadow: 0 0 10px -2px var(--brasa-a60); }
.rel-itens { list-style: none; margin: 0; padding: 0 14px 10px; }
.rel-itens li { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 7px 0; border-top: 1px solid var(--borda); font-size: .85rem; }
.rel-itens b { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.rel-desc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Comprovantes ---------- */
.comprovante-caixa { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.comprovante-caixa label.btn { cursor: pointer; }
.anexo { text-decoration: none; font-size: .85rem; color: var(--brasa-clara); white-space: nowrap; }
.anexo:hover { color: var(--brasa-quente); text-shadow: 0 0 10px rgba(var(--acento-rgb), .6); }

/* ---------- Clientes e serviços ---------- */
.busca input { min-width: min(360px, 70vw); }
.grade-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.cartao-cadastro { border-radius: 24px; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; cursor: pointer; transition: --luz .45s ease, transform .3s var(--suave); }
.cartao-cadastro:hover { transform: translateY(-3px); }
.cartao-cadastro:focus-visible { outline: 2px solid var(--brasa); outline-offset: 3px; }
.cartao-cadastro > header { display: flex; align-items: center; gap: 12px; }
.cartao-cadastro > header > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cartao-cadastro > header strong { font-family: var(--f-display); font-weight: 400; font-size: 1.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cartao-cadastro > header small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cartao-cadastro .cartao-numeros { margin: 0; }
.cartao-cadastro footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cartao-cadastro .resumo { margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .85rem; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.completo { width: 70px; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.completo i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brasa-funda), var(--brasa)); }
.avatar {
  --cor: var(--brasa); width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 14px;
  font-family: var(--f-display); font-weight: 500; font-size: .95rem; color: #fff;
  background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--cor) 70%, #fff 30%), var(--cor) 55%, color-mix(in srgb, var(--cor) 60%, #000 40%));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 18px -6px var(--cor);
}
.avatar.grande { width: 64px; height: 64px; border-radius: 20px; font-size: 1.4rem; }
.avatar.pequeno { width: 32px; height: 32px; border-radius: 10px; font-size: .75rem; }
.link.voltar { margin-bottom: 10px; }
.perfil-titulo { display: flex; align-items: center; gap: 16px; }
.preco { margin: 0; font-family: var(--f-display); font-weight: 300; font-size: 1.25rem; letter-spacing: -.01em; color: var(--brasa-quente); }
.preco.grande { font-size: 1.7rem; margin-bottom: 10px; }
dl.ficha { margin: 0; display: grid; gap: 2px; }
dl.ficha > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--borda); }
dl.ficha > div:last-child { border-bottom: 0; }
dl.ficha dt { color: var(--texto-3); font-size: .8rem; }
dl.ficha dd { margin: 0; overflow-wrap: anywhere; }
dl.ficha a { color: var(--brasa-clara); }
h3.sub { margin: 18px 0 6px; font-family: var(--f-display); font-weight: 400; font-size: 1rem; }
.blocos-texto { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.blocos-texto > div { padding: 14px 16px; border-radius: 16px; background: rgba(0, 0, 0, .24); border: 1px solid rgba(var(--claro-rgb), .07); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .4); }
.blocos-texto h3 { margin: 0 0 6px; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); }
.blocos-texto p { margin: 0; color: var(--texto-2); }
.entregaveis { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.entregaveis li { position: relative; padding-left: 26px; }
.entregaveis li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 6px; font-size: .7rem; color: var(--primaria-texto); background: var(--positivo); box-shadow: 0 0 10px -2px rgba(69, 212, 154, .7); }
.transformacao { margin: 0; padding: 14px 16px; border-radius: 16px; background: linear-gradient(160deg, rgba(var(--acento-rgb), .14), rgba(var(--acento-rgb), .03)); border: 1px solid var(--brasa-a35); color: var(--texto); }
.lista li .avatar { margin-right: 2px; }
.lista li > div > small { display: block; }

/* formulário longo em seções */
.secao-form { border: 1px solid var(--borda); border-radius: 18px; padding: 14px 16px 16px; margin: 0 0 14px; background: rgba(0, 0, 0, .14); }
.secao-form legend { padding: 0 8px; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brasa-clara); }
textarea { resize: vertical; min-height: 64px; line-height: 1.5; }

/* relatório do cliente */
.rc { display: flex; flex-direction: column; gap: 12px; }
.rc-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--borda); }
.rc-topo h3 { margin: 0; font-family: var(--f-display); font-weight: 300; font-size: 1.8rem; }
.rc-topo p { margin: 4px 0 0; }
.rc-totais { display: flex; gap: 24px; }
.rc-totais div { display: flex; flex-direction: column; }
.rc-totais span { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); }
.rc-totais strong { font-family: var(--f-display); font-weight: 300; font-size: 1.4rem; }
.rc-titulo { margin: 10px 0 0; font-family: var(--f-display); font-weight: 400; font-size: 1.15rem; }
.rc-bloco h4, .rc-servico h4 { margin: 8px 0 4px; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); }
.rc-bloco p { margin: 0; }
.rc-bloco pre { margin: 0; font: inherit; white-space: pre-wrap; }
.rc-servico { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--borda); }
.rc-servico header { display: flex; justify-content: space-between; gap: 10px; }
.rc-servico ul { margin: 0; padding-left: 18px; }
.rc-total td { font-weight: 700; }

@media print {
  @page { margin: 14mm; }
  html, body { background: #fff !important; }
  body > *:not(#modal), #cosmos, .modal-topo .icone, .modal-rodape, dialog::backdrop { display: none !important; }
  body { display: block; }
  #modal { position: static; display: block; width: auto; max-width: none; max-height: none; box-shadow: none !important; background: #fff !important; color: #111 !important; border: 0; overflow: visible; backdrop-filter: none !important; }
  #modal::before, #modal::after { display: none; }
  #modal *, #modal .sutil { color: #111 !important; text-shadow: none !important; box-shadow: none !important; }
  .modal-form { max-height: none; }
  .modal-corpo { overflow: visible; }
  .rc-servico, .secao-form { border-color: #ccc; break-inside: avoid; }
  .tabela td, .tabela th { border-color: #ddd; }
}

/* ---------- Moeda, entregáveis, limite e importação ---------- */
.entrada-prefixo.moeda { flex-wrap: nowrap; }
.seletor-moeda {
  border: 0; border-right: 1px solid var(--borda); border-radius: 0; background: rgba(255, 255, 255, .04); box-shadow: none;
  padding: 0 6px 0 10px; height: 100%; min-height: 38px; color: var(--texto-2); font-weight: 600; font-size: .82rem; cursor: pointer;
}
.seletor-moeda:focus { box-shadow: none; color: var(--texto); }
.entrada-prefixo .cotacao { display: inline-flex; align-items: center; gap: 4px; padding-right: 10px; white-space: nowrap; font-size: .78rem; color: var(--texto-3); }
.entrada-prefixo .cotacao input { width: 74px; padding: 4px 6px; border: 1px solid var(--borda-forte); border-radius: 8px; background: rgba(0, 0, 0, .3); }
.entrada-prefixo .cotacao b { color: var(--texto); font-weight: 600; }
.chips-escolha { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-escolha { cursor: pointer; }
.chip-escolha input { position: absolute; opacity: 0; pointer-events: none; }
.chip-escolha span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--borda-forte); background: rgba(255, 255, 255, .03); font-size: .84rem; color: var(--texto-2); transition: background .2s, border-color .2s, color .2s; }
.chip-escolha span::before { content: "+"; font-weight: 700; color: var(--texto-3); }
.chip-escolha input:checked + span { color: var(--texto); border-color: rgba(69, 212, 154, .55); background: var(--positivo-fundo); box-shadow: 0 0 14px -6px rgba(69, 212, 154, .7); }
.chip-escolha input:checked + span::before { content: "✓"; color: var(--positivo); }
.chip-escolha input:focus-visible + span { outline: 2px solid var(--brasa); }
.popover-ancora { position: relative; align-self: flex-start; }
.popover {
  position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; width: min(340px, 80vw); display: flex; flex-direction: column; gap: 10px; padding: 14px;
  border-radius: 16px; background: var(--superficie-pop); border: 1px solid var(--borda-forte); box-shadow: 0 20px 50px -16px rgba(0, 0, 0, .95), 0 0 30px -14px var(--brasa-a60);
}
.popover .acoes-rapidas { justify-content: flex-end; }
.linha-limite { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.mapa-colunas .campo > span { font-size: .78rem; }

/* ---------- Fatura: rolagem do ano, pagamentos parciais ---------- */
.painel:has(.rolavel) { content-visibility: visible; }
.grafico-colunas.rolavel { overflow-x: auto; gap: 0; cursor: grab; scroll-snap-type: x proximity; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }
.grafico-colunas.rolavel .coluna { flex: 0 0 calc(100% / var(--visiveis)); scroll-snap-align: start; }
.grafico-colunas.rolavel.arrastando { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.coluna.atual .coluna-rotulo { color: var(--brasa-clara); font-weight: 700; }
.parciais { margin: 0 0 14px; padding: 10px 14px; border-radius: 16px; background: var(--positivo-fundo); border: 1px solid rgba(69, 212, 154, .25); }
.parciais .lista li { padding: 8px 0; }

/* ---------- Prioridades e plano de pagamento ---------- */
.tag.prioridade { font-size: .62rem; letter-spacing: .04em; }
.tag.prioridade.essencial { color: #FF9AA8; border-color: rgba(255, 93, 115, .5); background: rgba(255, 93, 115, .14); }
.tag.prioridade.alta { color: var(--brasa-quente); border-color: rgba(var(--acento-rgb), .5); background: rgba(var(--acento-rgb), .13); }
.tag.prioridade.media { color: #F7DA8C; border-color: rgba(242, 193, 78, .4); background: rgba(242, 193, 78, .1); }
.tag.prioridade.baixa { color: #B9C7FF; border-color: rgba(111, 163, 255, .35); background: rgba(111, 163, 255, .08); }
.tabela tr.grupo-prioridade td { padding: 14px 12px 6px; border-bottom: 1px solid var(--borda-forte); background: rgba(255, 255, 255, .02); }
.tabela tr.grupo-prioridade .tag { font-size: .72rem; padding: 2px 10px; }
.plano-topo { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 20px; align-items: end; margin-bottom: 14px; }
.plano-numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.plano-numeros div { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; background: rgba(0, 0, 0, .24); border: 1px solid rgba(var(--claro-rgb), .07); }
.plano-numeros span { font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); }
.plano-numeros strong { font-family: var(--f-display); font-weight: 300; font-size: 1.3rem; font-variant-numeric: tabular-nums; }

/* ---------- Nome repetido ---------- */
.opcoes-repetido { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 8px; color: var(--texto-2); }
.conflitos { display: grid; gap: 12px; }
.conflito { border: 1px solid var(--borda); border-radius: 14px; padding: 10px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.conflito legend { padding: 0 6px; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brasa-clara); }
.conflito label { display: flex; gap: 8px; align-items: flex-start; padding: 10px; border-radius: 10px; border: 1px solid var(--borda); cursor: pointer; }
.conflito label:has(input:checked) { border-color: rgba(var(--acento-claro-rgb), .6); background: var(--brasa-a12); }
.conflito label span { display: flex; flex-direction: column; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.conflito small { color: var(--texto-3); font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; }

/* ---------- Contratos: prazo e entregáveis ---------- */
.lista li.contrato { align-items: flex-start; }
.lista li.contrato > div { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.prazo-contrato { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.progresso-prazo { flex: 1; min-width: 80px; max-width: 220px; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.progresso-prazo i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brasa-funda), var(--brasa), var(--brasa-quente)); }
.cartao-cadastro > small.selo { align-self: flex-start; white-space: normal; }

/* ---------- Orçamentos ---------- */
.linha-link { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) 150px auto; gap: 8px; margin-bottom: 8px; }
.links-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: .84rem; }
.links-lista a { color: var(--brasa-clara); text-decoration: none; }
.links-lista a:hover { color: var(--brasa-quente); text-decoration: underline; }
.links-lista b { font-weight: 600; font-variant-numeric: tabular-nums; margin-left: 4px; }
.foto-campo { grid-row: span 2; }
.foto-alvo { display: grid; place-items: center; height: 120px; border-radius: 16px; border: 1px dashed var(--borda-forte); background: rgba(0, 0, 0, .25); cursor: pointer; overflow: hidden; color: var(--texto-3); }
.foto-alvo:hover { border-color: var(--brasa); color: var(--texto); }
.foto-alvo img { width: 100%; height: 100%; object-fit: cover; }
.compra-topo { display: flex; gap: 14px; align-items: center; }
.compra-topo > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.compra-topo strong { font-family: var(--f-display); font-weight: 400; font-size: 1.15rem; }
.miniatura { width: 64px; height: 64px; flex: none; border-radius: 16px; object-fit: cover; border: 1px solid var(--borda-forte); box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .8); }
.miniatura.vazia { display: grid; place-items: center; font-size: 1.6rem; background: rgba(255, 255, 255, .04); }
.etapas-progresso { display: flex; flex-direction: column; gap: 6px; }
.etapas-progresso .progresso-prazo { max-width: none; }
.cartao-cadastro footer.acoes-rapidas { justify-content: flex-start; }
.cartao-cadastro.perdida, .cartao-cadastro.desistiu { opacity: .6; }
.icone-plano { --cor: #3A2C22; font-size: 1.3rem; }
select.situacao-etapa { padding: 6px 10px; font-size: .82rem; border-radius: 999px; }
select.situacao-etapa.ok { border-color: rgba(69, 212, 154, .5); color: var(--positivo); }
select.situacao-etapa.info { border-color: rgba(111, 163, 255, .5); color: var(--info); }
select.situacao-etapa.alerta { border-color: rgba(242, 193, 78, .5); color: var(--alerta); }
.lista.ordenada { padding: 0; }
.projecao .plano-numeros { margin-bottom: 8px; }
.projecao .plano-numeros small { font-size: .74rem; }

/* =====================================================================
   TEMAS — cada um redefine as cores em :root[data-tema] e mostra sua cena de fundo.
   ===================================================================== */
#cosmos .cena { display: none; inset: 0; transition: opacity 1.2s; }
:root[data-tema="interestelar"] #cosmos .cena-interestelar, :root[data-tema="abissal"] #cosmos .cena-abissal,
:root[data-tema="digital"] #cosmos .cena-digital, :root[data-tema="maison"] #cosmos .cena-maison { display: block; }
:root:not([data-tema="interestelar"]) #cosmos .nebulosa, :root:not([data-tema="interestelar"]) .cadente { display: none; }
:root[data-tema="digital"] #cosmos .poeira, :root[data-tema="maison"] #cosmos .poeira, :root[data-tema="maison"] #cosmos .estrelas { display: none; }

/* ---------- 1. Interestelar: céu profundo, coluna da Via Láctea, planetas escuros ---------- */
:root[data-tema="interestelar"] {
  --fundo: #02040A; --superficie: #0A1020; --superficie-2: #0E1628; --superficie-3: #141E34; --superficie-pop: #0C1324;
  --texto: #EEF2F9; --texto-2: #A8B4C8; --texto-3: #74809A; --texto-forte: #F6F9FF; --titulo-2: #D3E1F6; --titulo-3: #8EA8D0;
  --brasa-clara: #A9CBFF; --brasa: #5C9DFF; --brasa-funda: #2A5BB8; --brasa-quente: #DCEBFF;
  --acento-rgb: 92, 157, 255; --acento-claro-rgb: 169, 203, 255; --claro-rgb: 226, 236, 255;
  --primaria-texto: #031024;
  --vidro-fundo: linear-gradient(165deg, rgba(222, 234, 255, .11) 0%, rgba(222, 234, 255, .045) 28%, rgba(180, 205, 255, .02) 60%, rgba(180, 205, 255, .04) 100%), rgba(5, 9, 20, .42);
  --aro: linear-gradient(162deg, rgba(235, 243, 255, .5) 0%, rgba(200, 220, 255, .14) 18%, rgba(170, 200, 255, .045) 45%, rgba(150, 185, 255, .03) 70%, rgba(120, 165, 255, .28) 100%);
  --borda: rgba(200, 220, 255, .09); --borda-forte: rgba(200, 220, 255, .16);
}
:root[data-tema="interestelar"] #cosmos { background: radial-gradient(70% 60% at 62% 100%, #0B1A3A 0%, #060D20 40%, transparent 75%), linear-gradient(180deg, #01020A 0%, #030817 55%, #061024 100%); }
:root[data-tema="interestelar"] #cosmos .nebulosa { display: none; }
.cena-interestelar i, .cena-interestelar div { position: absolute; display: block; }
/* coluna da galáxia: sobe do horizonte, larga e luminosa embaixo, fina e difusa no alto */
.via-coluna { left: 50%; width: 40vw; margin-left: -20vw; top: -10%; bottom: 13%; transform: rotate(3deg); transform-origin: bottom center; }
.via-brilho { inset: 0; filter: blur(30px);
  background: radial-gradient(42% 30% at 50% 100%, rgba(245, 248, 255, .85), rgba(170, 205, 255, .4) 40%, transparent 75%),
    radial-gradient(22% 72% at 50% 62%, rgba(205, 225, 255, .4), transparent 75%),
    radial-gradient(14% 45% at 49% 22%, rgba(185, 210, 255, .24), transparent 80%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 100%); }
.via-estrelas { inset: 0; background-size: 100% 100%; background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 100%); }
.via-poeira { inset: 10% 28% 0; filter: blur(16px); opacity: .75;
  background: radial-gradient(14% 8% at 46% 42%, rgba(255, 170, 160, .4), transparent 70%), radial-gradient(10% 7% at 55% 58%, rgba(255, 190, 170, .32), transparent 70%),
    radial-gradient(9% 5% at 50% 70%, rgba(255, 210, 200, .3), transparent 70%), radial-gradient(12% 9% at 44% 30%, rgba(180, 150, 255, .22), transparent 70%); }
.horizonte-luz { left: 10%; right: 10%; bottom: 10%; height: 22%; background: radial-gradient(40% 55% at 50% 100%, rgba(225, 236, 255, .55), rgba(120, 165, 255, .16) 45%, transparent 75%), radial-gradient(70% 30% at 50% 100%, rgba(255, 196, 160, .12), transparent 70%); filter: blur(12px); }
.chao { left: -10%; right: -10%; bottom: -2%; height: 14%; background: linear-gradient(180deg, rgba(1, 3, 8, .0), #010308 35%, #000 100%); box-shadow: 0 -1px 0 rgba(170, 200, 255, .08); }
/* bordas de nebulosa: vermelho e laranja fortes, quase fora da tela, como moldura */
.nebulosa-borda { filter: blur(50px); opacity: .62; }
.nebulosa-borda.nb1 { left: -12vw; top: -14vh; width: 40vw; height: 70vh; background: radial-gradient(closest-side, rgba(220, 70, 50, .55), rgba(160, 40, 90, .25) 50%, transparent); }
.nebulosa-borda.nb2 { right: -14vw; top: 10vh; width: 34vw; height: 60vh; background: radial-gradient(closest-side, rgba(225, 85, 60, .38), rgba(120, 50, 150, .2) 55%, transparent); }
/* nuvem com o miolo rosado, como uma região de formação de estrelas */
.nuvem-nebulosa { left: 60%; top: 16%; width: 36vw; height: 46vh; filter: blur(30px); opacity: 1;
  background: radial-gradient(22% 26% at 48% 58%, rgba(255, 165, 150, .7), rgba(205, 105, 130, .28) 45%, transparent 75%),
    radial-gradient(45% 50% at 40% 45%, rgba(40, 70, 130, .55), transparent 75%), radial-gradient(40% 45% at 70% 40%, rgba(25, 45, 95, .6), transparent 75%); }
/* planetas escuros com a borda acesa (luz vindo da galáxia) */
.planeta-escuro { border-radius: 50%; background: radial-gradient(circle at 70% 30%, #1A2236 0%, #0B1020 40%, #04060C 75%);
  box-shadow: inset -10px 8px 18px -10px rgba(190, 220, 255, .85), inset -2px 2px 3px -1px rgba(230, 242, 255, .7), 0 0 30px -10px rgba(140, 180, 255, .45); }
.planeta-escuro.p1 { width: 22vmin; height: 22vmin; left: 16vw; bottom: 16vh; }
.planeta-escuro.p1 .lua { width: 28%; height: 28%; left: 52%; top: 58%; border-radius: 50%; background: radial-gradient(circle at 70% 30%, #222A3E, #070A12 70%); box-shadow: inset -4px 3px 6px -3px rgba(200, 225, 255, .8); }
.planeta-escuro.p2 { width: 9vmin; height: 9vmin; right: 22vw; top: 9vh; box-shadow: inset 7px -2px 10px -6px rgba(200, 228, 255, .9), inset 2px 0 2px -1px rgba(235, 245, 255, .7), 0 0 20px -8px rgba(140, 180, 255, .5); }
.planeta-escuro.p3 { width: 1.6vmin; height: 1.6vmin; left: 30vw; top: 46vh; opacity: .8; }
/* estrelas azuis com o clarão horizontal das lentes */
.clarao { width: 6px; height: 6px; border-radius: 50%; background: #F2F8FF; box-shadow: 0 0 8px 3px rgba(120, 175, 255, .95), 0 0 26px 8px rgba(70, 130, 255, .45); }
.clarao::before { content: ""; position: absolute; left: -60px; right: -60px; top: 2px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(110, 170, 255, .75), transparent); filter: blur(.6px); }
.clarao.c1 { left: 40vw; top: 34vh; } .clarao.c2 { left: 63vw; top: 36vh; } .clarao.c3 { left: 38.5vw; top: 48vh; transform: scale(.8); }
:root[data-tema="interestelar"] .marca-ponto { border-radius: 50%; background: radial-gradient(circle, #FFFFFF 0 14%, #A9CBFF 24%, rgba(92, 157, 255, .25) 48%, transparent 66%), #050A18; box-shadow: 0 0 16px -2px rgba(92, 157, 255, .8), inset 0 0 0 1px rgba(169, 203, 255, .3); }

/* ---------- 2. Abissal: o fundo do mar ---------- */
:root[data-tema="abissal"] {
  --fundo: #020A12; --superficie: #071826; --superficie-2: #0A2032; --superficie-3: #0E2A40; --superficie-pop: #0A1E2E;
  --texto: #E4F0F4; --texto-2: #A2BCC7; --texto-3: #6E8C99; --texto-forte: #F2FAFC; --titulo-2: #C2DCE4; --titulo-3: #7FA6B4;
  --brasa-clara: #8FDCE6; --brasa: #3FB6C8; --brasa-funda: #1B6C80; --brasa-quente: #CFF3F7;
  --acento-rgb: 63, 182, 200; --acento-claro-rgb: 143, 220, 230; --claro-rgb: 214, 238, 244;
  --primaria-texto: #02121A;
  --vidro-fundo: linear-gradient(170deg, rgba(200, 236, 246, .11) 0%, rgba(200, 236, 246, .045) 28%, rgba(150, 205, 225, .02) 62%, rgba(150, 205, 225, .04) 100%), rgba(3, 16, 27, .45);
  --aro: linear-gradient(170deg, rgba(220, 246, 252, .45) 0%, rgba(160, 220, 235, .12) 22%, rgba(120, 190, 210, .04) 55%, rgba(63, 182, 200, .22) 100%);
  --borda: rgba(180, 225, 240, .09); --borda-forte: rgba(180, 225, 240, .16);
}
:root[data-tema="abissal"] #cosmos { background: linear-gradient(180deg, #0B3A52 0%, #072538 22%, #04172A 50%, #020B15 78%, #01060C 100%); }
.cena-abissal i { position: absolute; display: block; }
.cena-abissal .superficie { left: -10%; right: -10%; top: -12%; height: 40%; opacity: .5; filter: blur(14px);
  background: repeating-radial-gradient(ellipse 120px 34px at 30% 40%, rgba(170, 225, 240, .22) 0 6px, transparent 8px 40px), radial-gradient(60% 100% at 50% 0%, rgba(120, 200, 225, .35), transparent 70%); }
.cena-abissal .feixe { top: -15%; height: 125%; transform-origin: top center; filter: blur(16px); opacity: .8;
  background: linear-gradient(180deg, rgba(170, 225, 240, .32) 0%, rgba(120, 200, 225, .12) 40%, transparent 85%); }
.cena-abissal .f1 { left: 18%; width: 9%; transform: skewX(-14deg); }
.cena-abissal .f2 { left: 38%; width: 5%; transform: skewX(-8deg); opacity: .4; }
.cena-abissal .f3 { left: 56%; width: 12%; transform: skewX(-18deg); opacity: .35; }
.cena-abissal .f4 { left: 74%; width: 6%; transform: skewX(-10deg); opacity: .3; }
.cena-abissal .abismo { left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(180deg, transparent, rgba(0, 4, 8, .85)); }
:root[data-tema="abissal"] .marca-ponto { border-radius: 50%; background: radial-gradient(circle at 50% 30%, #8FDCE6, #1B6C80 55%, #062130 100%); box-shadow: 0 0 16px -3px rgba(63, 182, 200, .8), inset 0 -6px 8px -4px rgba(0, 0, 0, .6); }

/* ---------- 3. Grade digital: retrofuturista, neon contido ---------- */
:root[data-tema="digital"] {
  --fundo: #05030C; --superficie: #0D0A1C; --superficie-2: #120E26; --superficie-3: #18133A; --superficie-pop: #0F0B22;
  --texto: #ECEAF8; --texto-2: #ABA6CC; --texto-3: #736E96; --texto-forte: #F4FDFF; --titulo-2: #BFF6FF; --titulo-3: #8F7BD9;
  --brasa-clara: #9AF6FF; --brasa: #2EE6F2; --brasa-funda: #0E7C93; --brasa-quente: #D5FBFF;
  --acento-rgb: 46, 230, 242; --acento-claro-rgb: 154, 246, 255; --claro-rgb: 226, 222, 255;
  --primaria-texto: #031417;
  --f-display: "Space Grotesk", "Manrope", ui-sans-serif, system-ui, sans-serif;
  --raio: 14px; --raio-grande: 18px;
  --vidro-fundo: linear-gradient(165deg, rgba(150, 140, 255, .09) 0%, rgba(46, 230, 242, .035) 35%, rgba(255, 70, 170, .02) 75%, rgba(46, 230, 242, .04) 100%), rgba(8, 5, 20, .55);
  --aro: linear-gradient(160deg, rgba(46, 230, 242, .6) 0%, rgba(150, 140, 255, .18) 25%, rgba(255, 70, 170, .06) 65%, rgba(255, 70, 170, .32) 100%);
  --borda: rgba(150, 140, 255, .12); --borda-forte: rgba(150, 140, 255, .22);
}
:root[data-tema="digital"] #cosmos { background: radial-gradient(90% 60% at 50% 105%, #2A0B3A 0%, #12061F 40%, transparent 75%), linear-gradient(180deg, #04030A 0%, #07041A 60%, #0B0420 100%); }
.cena-digital i, .cena-digital div { position: absolute; display: block; }
.cena-digital .sol-digital { left: 50%; bottom: 36%; width: 34vmin; height: 34vmin; margin-left: -17vmin; border-radius: 50%; opacity: .55;
  background: linear-gradient(180deg, #FF4FB0 0%, #B03AD8 55%, #4B1C8F 100%);
  -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 10px, transparent 10px 14px), linear-gradient(180deg, #000 0%, #000 45%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: repeating-linear-gradient(180deg, #000 0 10px, transparent 10px 14px); filter: drop-shadow(0 0 30px rgba(255, 70, 170, .45)); }
.cena-digital .horizonte-digital { left: 0; right: 0; bottom: 36%; height: 1px; background: linear-gradient(90deg, transparent, rgba(46, 230, 242, .9) 30%, rgba(255, 70, 170, .9) 70%, transparent); box-shadow: 0 0 12px 2px rgba(46, 230, 242, .5), 0 0 40px 6px rgba(255, 70, 170, .25); }
.cena-digital .grade-chao { left: -60%; right: -60%; bottom: -4%; height: 40%; transform-origin: top center; transform: perspective(380px) rotateX(64deg); opacity: .55;
  background-image: linear-gradient(rgba(46, 230, 242, .5) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 70, 170, .4) 1px, transparent 1px); background-size: 70px 70px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 80%, transparent 100%); }
.cena-digital::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 3px); }
:root[data-tema="digital"] .marca-ponto { border-radius: 6px; transform: rotate(45deg) scale(.82); background: linear-gradient(135deg, rgba(46, 230, 242, .25), rgba(255, 70, 170, .25)), #0B0820; box-shadow: inset 0 0 0 1px #2EE6F2, 0 0 14px -2px rgba(46, 230, 242, .9), 0 0 24px -6px rgba(255, 70, 170, .8); }
:root[data-tema="digital"] h1, :root[data-tema="digital"] .saldo-grande, :root[data-tema="digital"] .valor-m { letter-spacing: -.02em; }
:root[data-tema="digital"] .rotulo-h, :root[data-tema="digital"] .kpi > span, :root[data-tema="digital"] .tabela th { font-family: "Space Grotesk", var(--f-ui); }
:root[data-tema="digital"] .saldo-grande { text-shadow: 0 0 24px rgba(46, 230, 242, .35), 0 0 60px rgba(255, 70, 170, .15); }

/* ---------- 4. Maison: luxo discreto ---------- */
:root[data-tema="maison"] {
  --fundo: #0A0908; --superficie: #131110; --superficie-2: #191614; --superficie-3: #211D1A; --superficie-pop: #16130F;
  --texto: #EDE6DA; --texto-2: #B7AD9D; --texto-3: #857B6C; --texto-forte: #F4EEE3; --titulo-2: #E6DCCB; --titulo-3: #B39B73;
  --brasa-clara: #E3CC9B; --brasa: #C8A970; --brasa-funda: #8C7340; --brasa-quente: #F1E4C6;
  --acento-rgb: 200, 169, 112; --acento-claro-rgb: 227, 204, 155; --claro-rgb: 241, 232, 214;
  --primaria-texto: #16110A;
  --f-display: "Cormorant Garamond", "Times New Roman", serif;
  --raio: 10px; --raio-grande: 14px; --raio-campo: 8px;
  --vidro-fundo: linear-gradient(180deg, rgba(241, 232, 214, .05), rgba(241, 232, 214, .022)), rgba(13, 11, 9, .78);
  --aro: linear-gradient(180deg, rgba(227, 204, 155, .3), rgba(227, 204, 155, .12));
  --sombra-vidro: 0 30px 60px -36px rgba(0, 0, 0, .9);
  --luz-brasa: 0 0 0 1px rgba(200, 169, 112, .35);
  --borda: rgba(227, 204, 155, .1); --borda-forte: rgba(227, 204, 155, .2);
}
:root[data-tema="maison"] #cosmos { background: radial-gradient(80% 60% at 70% 0%, #1B1712 0%, #0C0B0A 55%, #080707 100%); }
.cena-maison i { position: absolute; display: block; }
/* mostrador guilhoché: anéis finos concêntricos e raios, quase invisíveis */
.cena-maison .guilloche { width: 140vmin; height: 140vmin; right: -40vmin; top: -30vmin; border-radius: 50%; opacity: .5;
  background: repeating-radial-gradient(circle, rgba(227, 204, 155, .05) 0 1px, transparent 1px 7px), repeating-conic-gradient(rgba(227, 204, 155, .035) 0 1deg, transparent 1deg 6deg);
  -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%); mask-image: radial-gradient(circle, #000 30%, transparent 70%); }
.cena-maison .luz-vitrine { left: 10%; right: 10%; top: -30%; height: 70%; background: radial-gradient(50% 50% at 50% 0%, rgba(241, 228, 198, .07), transparent 70%); }
:root[data-tema="maison"] .marca-ponto { border-radius: 2px; background: transparent; box-shadow: inset 0 0 0 1px var(--brasa); transform: rotate(45deg) scale(.7); }
:root[data-tema="maison"] :is(.vidro, .painel, .kpi, .lateral, dialog)::after { display: none; }
:root[data-tema="maison"] :is(.vidro, .painel, .kpi, .lateral, dialog) { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
:root[data-tema="maison"] h1, :root[data-tema="maison"] h2, :root[data-tema="maison"] .saldo-grande, :root[data-tema="maison"] .valor-m, :root[data-tema="maison"] .kpi strong { font-weight: 400; letter-spacing: 0; }
:root[data-tema="maison"] .saldo-grande { text-shadow: none; font-weight: 300; }
:root[data-tema="maison"] :is(.saldo-grande, .valor-m, .kpi strong, .cf-valor, .cd-linha strong, .rel-total, h1) { font-variant-numeric: lining-nums tabular-nums; }
:root[data-tema="maison"] .ponto-brasa { text-shadow: none; }
:root[data-tema="maison"] .rotulo-h, :root[data-tema="maison"] .kpi > span, :root[data-tema="maison"] .tabela th { letter-spacing: .24em; }
:root[data-tema="maison"] .btn.primario { background: var(--brasa); box-shadow: none; border: 1px solid var(--brasa-clara); letter-spacing: .06em; }
:root[data-tema="maison"] .btn.primario:hover { background: var(--brasa-clara); box-shadow: none; }
:root[data-tema="maison"] .btn { border-radius: 4px; }
:root[data-tema="maison"] .menu a, :root[data-tema="maison"] .segmentado span, :root[data-tema="maison"] .abas button, :root[data-tema="maison"] .cont, :root[data-tema="maison"] .selo, :root[data-tema="maison"] .tag { border-radius: 4px; }
:root[data-tema="maison"] .menu a.ativo { background: rgba(200, 169, 112, .1); box-shadow: inset 0 0 0 1px rgba(200, 169, 112, .35); }
:root[data-tema="maison"] .menu a.ativo::before { box-shadow: none; background: var(--brasa); width: 2px; }
:root[data-tema="maison"] .menu a.ativo svg { filter: none; }
:root[data-tema="maison"] .barra, :root[data-tema="maison"] .limite span, :root[data-tema="maison"] .progresso span, :root[data-tema="maison"] .fluxo-linhas .linha { box-shadow: none; filter: none; }
:root[data-tema="maison"] .avatar { color: var(--fundo); }

/* ---------- Escolha de perfil ---------- */
body.tela-perfis { grid-template-columns: minmax(0, 1fr); }
body.tela-perfis .lateral { display: none; }
body.tela-perfis main { max-width: none; }
.escolha-perfil { min-height: 90vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px; padding: 40px 0; text-align: center; }
.escolha-topo { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.escolha-topo h1 { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 200; }
.marca-ponto.grande { width: 54px; height: 54px; border-radius: 16px; }
.grade-perfis { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; max-width: 980px; }
.cartao-perfil { appearance: none; border: 0; font: inherit; color: var(--texto); cursor: pointer; width: 200px; min-height: 210px; padding: 24px 18px; border-radius: var(--raio-grande); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; transition: transform .3s var(--suave), --luz .45s; }
.cartao-perfil:hover { transform: translateY(-4px); }
.cartao-perfil strong { font-family: var(--f-display); font-weight: 400; font-size: 1.2rem; }
.cartao-perfil.novo { background: transparent; border: 1px dashed var(--borda-forte); }
.cartao-perfil.novo .avatar { background: transparent; box-shadow: inset 0 0 0 1px var(--borda-forte); color: var(--texto-2); font-size: 1.6rem; }
.txt-alerta { color: var(--alerta); }
.perfil-atual { display: flex; flex-direction: column; gap: 4px; }
.perfil-chip { appearance: none; font: inherit; color: var(--texto); display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 14px; border: 1px solid var(--borda); background: rgba(0, 0, 0, .2); cursor: pointer; text-align: left; }
.perfil-chip:hover { border-color: var(--borda-forte); background: rgba(var(--claro-rgb), .04); }
.perfil-chip .rot { display: flex; flex-direction: column; min-width: 0; }
.perfil-chip strong { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perfil-chip small { color: var(--texto-3); font-size: .72rem; }
.perfil-vinculado { appearance: none; font: inherit; font-size: .78rem; color: var(--texto-2); background: none; border: 0; text-align: left; padding: 4px 10px; cursor: pointer; border-radius: 10px; }
.perfil-vinculado:hover { color: var(--texto); background: rgba(var(--claro-rgb), .05); }
.menu-recolhido .perfil-chip { justify-content: center; padding: 8px 0; }
.menu-perfil .acoes-rapidas.vertical .btn { justify-content: flex-start; }
.total-conjunto td { border-top: 1px solid var(--borda-forte); }
.grade-temas { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.cartao-tema { appearance: none; font: inherit; color: var(--texto); text-align: left; cursor: pointer; padding: 12px; border-radius: 16px; border: 1px solid var(--borda); background: rgba(0, 0, 0, .2); display: flex; flex-direction: column; gap: 8px; transition: border-color .2s, transform .2s; }
.cartao-tema:hover { transform: translateY(-2px); border-color: var(--borda-forte); }
.cartao-tema.ativo { border-color: var(--brasa); box-shadow: 0 0 0 1px var(--brasa); }
.amostra-tema { height: 92px; border-radius: 12px; position: relative; overflow: hidden; display: block; }
.amostra-tema i { position: absolute; display: block; }
.tema-interestelar { background: radial-gradient(10% 60% at 55% 85%, rgba(230, 242, 255, .9), rgba(140, 185, 255, .3) 40%, transparent 70%), radial-gradient(30% 30% at 10% 0%, rgba(220, 70, 50, .45), transparent 70%), linear-gradient(180deg, #01020A, #061024); }
.tema-interestelar i:nth-child(1) { left: 14%; bottom: 14%; width: 26px; height: 26px; border-radius: 50%; background: #05070E; box-shadow: inset -4px 3px 6px -3px rgba(200, 225, 255, .9); }
.tema-interestelar i:nth-child(2) { right: 18%; top: 22%; width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 2px #5C9DFF; }
.tema-abissal { background: linear-gradient(180deg, #0F4A64 0%, #072538 45%, #01060C 100%); }
.tema-abissal i { top: -10%; height: 120%; width: 14%; background: linear-gradient(180deg, rgba(170, 225, 240, .35), transparent 80%); transform: skewX(-14deg); filter: blur(4px); }
.tema-abissal i:nth-child(1) { left: 20%; } .tema-abissal i:nth-child(2) { left: 52%; width: 8%; } .tema-abissal i:nth-child(3) { left: 74%; width: 10%; opacity: .6; }
.tema-digital { background: linear-gradient(180deg, #04030A 0%, #0B0420 55%, #2A0B3A 100%); }
.tema-digital i:nth-child(1) { left: 0; right: 0; top: 58%; height: 1px; background: linear-gradient(90deg, #2EE6F2, #FF46AA); box-shadow: 0 0 8px #2EE6F2; }
.tema-digital i:nth-child(2) { left: -30%; right: -30%; top: 58%; bottom: 0; background-image: linear-gradient(rgba(46, 230, 242, .5) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 70, 170, .45) 1px, transparent 1px); background-size: 16px 16px; transform: perspective(60px) rotateX(50deg); transform-origin: top; }
.tema-digital i:nth-child(3) { left: 42%; top: 28%; width: 16%; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(#FF4FB0, #4B1C8F); opacity: .7; }
.tema-maison { background: repeating-radial-gradient(circle at 80% 20%, rgba(227, 204, 155, .08) 0 1px, transparent 1px 5px), linear-gradient(180deg, #17130F, #0A0908); }
.tema-maison i:nth-child(1) { left: 16px; bottom: 16px; width: 18px; height: 18px; transform: rotate(45deg); box-shadow: inset 0 0 0 1px #C8A970; }
.tema-maison i:nth-child(2) { left: 46px; bottom: 22px; width: 60px; height: 1px; background: #C8A970; opacity: .6; }

/* ---------- Pontos de quebra do Bootstrap: sm 576 · md 768 · lg 992 · xl 1200 · xxl 1400 ---------- */
/* ---------- Telas médias (abaixo de xxl) ---------- */
@media (max-width: 1399.98px) {
  .hero-grade {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1fr);
    grid-template-rows: minmax(min-content, 1fr) minmax(min-content, 1fr) auto auto;
    grid-template-areas: "saldo saldo cartao" "saldo saldo cartao" "receber pagar atraso" "prox prox prox";
  }
}
@media (max-width: 1199.98px) {
  .hero-grade {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "saldo saldo" "receber pagar" "atraso cartao" "prox cartao";
  }
  .h-saldo { min-height: 420px; }
  .grafico-barras.duas-colunas { display: flex; }
}

/* ---------- Tablet e celular (abaixo de lg): o menu lateral vira barra inferior ---------- */
@media (max-width: 991.98px) {
  body { grid-template-columns: minmax(0, 1fr); }
  .lateral {
    position: fixed; top: auto; bottom: 10px; left: 10px; right: 10px; height: auto; margin: 0; z-index: 50; flex-direction: row; padding: 6px; border-radius: 999px;
    --vidro-fundo: linear-gradient(180deg, rgba(var(--claro-rgb), .1), rgba(var(--claro-rgb), .03)), rgba(16, 13, 12, .72);
  }
  .marca, .rodape-lateral, .menu hr { display: none; }
  .menu { flex-direction: row; width: 100%; justify-content: space-around; padding: 0; background: none; border: 0; box-shadow: none; }
  .menu a { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 2px; font-size: .62rem; padding: 6px 2px; text-align: center; border-radius: 22px; }
  .menu a .rot { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .menu a.ativo::before { display: none; }
  .menu .cont { position: absolute; top: 0; right: 6px; min-width: 16px; height: 16px; padding: 0 4px; font-size: .58rem; }
  main { padding: 22px 16px 100px; }
  body[data-view="geral"] main { padding-bottom: 100px; }
  .rolar { display: none; }
  .perfil-atual { flex: none; justify-content: center; }
  .perfil-chip { width: auto; padding: 4px; border: 0; background: none; }
  .perfil-chip .rot, .perfil-vinculado { display: none; }
  .menu a { font-size: .56rem; padding: 6px 1px; }
  .menu a svg.i { width: 18px; height: 18px; }
  #avisos { bottom: 86px; }
  .menu { flex: 1 1 auto; width: auto; min-width: 0; }
  .lateral { max-width: 760px; margin-inline: auto; }
}
/* tablet (md até lg): barra inferior com nomes legíveis e mais respiro */
@media (min-width: 768px) and (max-width: 991.98px) {
  main { padding: 28px clamp(20px, 4vw, 36px) 112px; }
  .menu a { font-size: .66rem; padding: 7px 2px; }
  .menu a svg.i { width: 20px; height: 20px; }
}
/* celular pequeno (abaixo de sm): só ícones no menu e ações em grade */
@media (max-width: 575.98px) {
  .menu a .rot { display: none; }
  .menu a { padding: 10px 0; }
  .menu a svg.i { width: 20px; height: 20px; }
  .hero-topo .acoes-rapidas { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 8px; }
  .hero-topo .acoes-rapidas .btn { width: 100%; padding: 0 10px; font-size: .82rem; }
  main { padding-inline: 12px; }
}

/* ---------- Celular (abaixo de md): conteúdo em uma coluna ---------- */
@media (max-width: 767.98px) {
  h1 { font-size: 1.8rem; }
  .topo-pagina h1 { font-size: 2rem; }
  .hero { min-height: 0; padding-top: 22px; }
  .hero-topo { align-items: flex-start; }
  .saudacao h1 { font-size: 2.4rem; }
  .barra-periodo { border-radius: 24px; padding: 8px; width: 100%; }
  .barra-periodo .intervalo { width: 100%; padding: 0 2px 2px; }
  .barra-periodo .intervalo input { flex: 1; width: 0; }
  .hero-grade { grid-template-columns: minmax(0, 1fr); grid-template-areas: "saldo" "receber" "pagar" "atraso" "cartao" "prox"; }
  .h-saldo { min-height: 380px; }
  .saldo-grande { font-size: 3.2rem; }
  .saldo-partes { gap: 18px; }
  .linha-tempo li { grid-template-columns: 40px 16px minmax(0, 1fr) auto; }
  .linha-tempo::before { left: 57px; }
  .linha-tempo li .btn { grid-column: 3 / -1; justify-self: start; }
  .via-coluna { width: 80vw; margin-left: -40vw; }
  .planeta-escuro.p1 { left: 4vw; bottom: 22vh; }
  .cartao-perfil { width: calc(50% - 10px); min-height: 170px; }
  .linha-link { grid-template-columns: 1fr auto; }
  .linha-link [name=linkNota], .linha-link .entrada-prefixo { grid-column: 1 / -1; }
  .plano-topo { grid-template-columns: 1fr; }
  .plano-numeros { grid-template-columns: 1fr 1fr; }
  .meses-projetivo { gap: 4px; height: 190px; }
  .grade-assin { min-width: 820px; }
  .grade-assin .fixa { width: 128px; }
  .grade-assin .ga-acoes { flex-direction: column; gap: 0; }
  .mp-total { font-size: .6rem; white-space: nowrap; letter-spacing: -.01em; }
  .mp-partes { flex-direction: column; align-items: center; gap: 0; }
  .lista-proj li { grid-template-columns: 1fr auto; }
  .lista-proj li .acoes-rapidas { grid-column: 1 / -1; }
  .conflito { grid-template-columns: 1fr; }
  .grafico-colunas.rolavel .coluna { flex-basis: calc(100% / 6); }
  dl.ficha > div { grid-template-columns: 1fr; gap: 2px; }
  .perfil-titulo h1 { font-size: 1.6rem; }
  .fluxo-linhas { min-height: 210px; }
  .ponto-col .valor { font-size: .58rem; padding: 0 4px; }
  .ponto-col:nth-of-type(even):not(.atual) .rotulo-x { visibility: hidden; }
  .barra-periodo .titulares { margin-left: 0; }
  .rel-grupo summary { grid-template-columns: minmax(0, 1fr) auto; }
  .rel-grupo summary small.sutil, .rel-trilho, .rel-pct { display: none; }
  .rel-itens li { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .rel-itens .selo { display: none; }
  .grade-painel { grid-template-columns: minmax(0, 1fr); }
  .painel { padding: 18px; }
  .kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi { padding: 14px; }
  .kpi strong { font-size: 1.4rem; }
  .grade-2 { grid-template-columns: 1fr; }
  .cartao-numeros { grid-template-columns: 1fr; }
  .tabela:not(.itens):not(.grade-assin) thead { display: none; }
  .tabela:not(.itens):not(.grade-assin) tr { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--borda); }
  .tabela:not(.itens):not(.grade-assin) td { border: 0; padding: 2px 0; text-align: left; }
  .tabela:not(.itens):not(.grade-assin) td[data-r]::before { content: attr(data-r); display: block; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3); }
  .tabela:not(.itens):not(.grade-assin) td.acoes { grid-column: 1 / -1; text-align: left; }
  .barra-linha { grid-template-columns: 1fr auto; }
  .barra-trilho { grid-column: 1 / -1; grid-row: 2; height: 8px; }
  .barra-valor { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* grade de assinaturas: uma linha por assinatura, uma coluna por mês */
.grade-assin-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin: 4px 0 10px; }
.legenda-assin { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .74rem; color: var(--texto-3); }
.legenda-assin span { display: inline-flex; align-items: center; gap: 5px; }
.grade-assin-wrap { overflow-x: auto; }
.grade-assin { min-width: 920px; table-layout: fixed; }
.grade-assin th, .grade-assin td { padding: 6px 4px; text-align: center; vertical-align: middle; }
.grade-assin thead th { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3); }
.grade-assin .fixa { position: sticky; left: 0; z-index: 2; width: 172px; text-align: left; padding-left: 10px; background: var(--superficie-pop); box-shadow: 1px 0 0 rgba(var(--claro-rgb), .08); }
.grade-assin tbody .fixa, .grade-assin tfoot .fixa { text-transform: none; letter-spacing: normal; font-size: .84rem; font-weight: 400; color: var(--texto); }
.grade-assin tbody .fixa small { display: block; margin-top: 2px; font-size: .72rem; }
.grade-assin tfoot .fixa { font-weight: 700; color: var(--texto-2); }
.ga-nome { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.ga-acoes { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 3px; }
.grade-assin .atual { background: rgba(var(--acento-rgb), .07); }
.grade-assin thead .atual { color: var(--brasa-quente); }
.ga-cel button { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; padding: 6px 2px; border-radius: 10px; border: 1px solid transparent; background: none; color: inherit; font: inherit; cursor: pointer; position: relative; }
.ga-cel button:hover, .ga-cel button:focus-visible { background: rgba(var(--claro-rgb), .06); border-color: rgba(var(--claro-rgb), .14); outline: none; }
.ga-valor { font-size: .76rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ga-cel.naoPaga .ga-valor { text-decoration: line-through; color: var(--texto-3); }
.ga-cel.agendada .ga-valor { color: var(--texto-2); }
.ga-cel.fora span { color: var(--texto-3); opacity: .5; }
.st { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: .66rem; font-weight: 800; font-style: normal; line-height: 1; }
.st.paga { color: #0B2A1D; background: var(--positivo); }
.st.naoPaga { color: #FFFFFF; background: var(--critico, #FF6B6B); }
.st.agendada { color: var(--texto-2); border: 1px dashed rgba(var(--claro-rgb), .45); }
.st.ajuste { width: auto; height: auto; color: var(--brasa-clara); font-size: 1rem; }
.ga-cel .st.ajuste { position: absolute; top: 0; right: 4px; }
.grade-assin tfoot td, .grade-assin tfoot th { font-size: .74rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--texto-2); border-top: 1px solid rgba(var(--claro-rgb), .1); }
.grade-assin tr.inativa { opacity: .55; }
.dica-grade { font-size: .76rem; margin-top: 8px; }

/* importar fatura do cartão */
.girando { display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; border-radius: 50%; border: 2px solid rgba(var(--claro-rgb), .2); border-top-color: var(--brasa); animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.topo-importacao { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 18px; margin-bottom: 10px; }
.topo-importacao .campo { min-width: 180px; }
.resumo-importacao { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; font-size: .82rem; }
.resumo-importacao .sutil { margin-left: auto; }
.tabela-importacao select { min-width: 180px; padding: 6px 8px; font-size: .8rem; }
.tabela-importacao tr.imp-igual td, .tabela-importacao tr.imp-pagamento td { opacity: .62; }
.tabela-importacao tr.imp-parecido td:first-child { box-shadow: inset 3px 0 0 var(--alerta, #F2C14E); }
.tabela-importacao tr.imp-novo td:first-child { box-shadow: inset 3px 0 0 var(--brasa); }
.sobrando { margin-top: 14px; }
.check-inline { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--texto-2); white-space: nowrap; }

/* foto no avatar e página Meu perfil */
.avatar.com-foto { padding: 0; overflow: hidden; background: var(--superficie-2); }
.avatar.com-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.enorme { width: 132px; height: 132px; border-radius: 36px; font-size: 2.6rem; }
.perfil-pagina { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 16px; align-items: start; }
.perfil-cartao { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; position: sticky; top: 16px; }
.perfil-cartao h2 { margin: 6px 0 0; }
.perfil-cartao p { margin: 0; }
.perfil-foto { padding: 6px; border-radius: 42px; background: linear-gradient(160deg, rgba(var(--acento-claro-rgb), .5), rgba(var(--acento-rgb), .08)); }
.acoes-rapidas.centro { justify-content: center; }
.acoes-rapidas.fim { justify-content: space-between; align-items: center; margin-top: 14px; }
.perfil-dados h3.sub:first-child { margin-top: 0; }
.perfil-seguranca { grid-column: 2; }
@media (max-width: 991.98px) {
  .perfil-pagina { grid-template-columns: minmax(0, 1fr); }
  .perfil-cartao { position: static; }
  .perfil-seguranca { grid-column: auto; }
}
@media (max-width: 575.98px) {
  .seguranca-linha { flex-direction: column; align-items: flex-start; }
  .acoes-rapidas.fim { flex-direction: column-reverse; align-items: stretch; }
}
.seguranca-linha { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--borda); }
.seguranca-linha > div { display: flex; flex-direction: column; gap: 2px; }
.ajuda-recuperar { margin-top: 12px; }
.ajuda-recuperar summary { cursor: pointer; font-size: .86rem; color: var(--texto-2); }
.ajuda-recuperar code, .comando { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; background: rgba(0, 0, 0, .3); border: 1px solid var(--borda); border-radius: 8px; padding: 2px 6px; }
.comando { display: block; padding: 10px 12px; white-space: pre-wrap; word-break: break-all; margin: 8px 0; }
.codigo-recuperacao { display: flex; flex-direction: column; gap: 12px; }
.codigo-caixa { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: clamp(1.1rem, 4.6vw, 1.6rem); letter-spacing: .12em; text-align: center; padding: 16px 10px; border-radius: 14px; border: 1px dashed rgba(var(--acento-claro-rgb), .5); background: rgba(var(--acento-rgb), .08); color: var(--texto-forte); user-select: all; word-break: break-all; }
.recuperar-sem-codigo ol { padding-left: 20px; display: grid; gap: 6px; }

/* ---------- Painel de categorias com rosca 3D ---------- */
.painel-categorias > header { flex-wrap: wrap; gap: 10px 16px; }
.cat-controles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cat-controles select { max-width: 220px; }
.cat-corpo { display: grid; grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); gap: 20px 28px; align-items: center; margin-top: 8px; }
.rosca3d { display: grid; place-items: center; }
.rosca3d-palco { position: relative; width: min(100%, 360px); aspect-ratio: 320 / 300; perspective: 1100px; }
.rosca3d-svg { position: absolute; inset: -6% 0 auto; width: 100%; overflow: visible; transform: rotateX(42deg); transform-origin: 50% 47%;
  filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .55)); }
.rosca3d-trilho { fill: rgba(0, 0, 0, .28); stroke: rgba(var(--claro-rgb), .08); stroke-width: 1.5; }
.rosca3d .fatia { cursor: pointer; transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .35s; outline: none; }
.rosca3d .fatia path:first-child { transition: filter .3s; }
.rosca3d .fatia:hover path:first-child, .rosca3d .fatia:focus-visible path:first-child { filter: brightness(1.18) saturate(1.1); }
.rosca3d .fatia.apagada { opacity: .38; }
.rosca3d-miolo {
  position: absolute; left: 50%; top: 44%; width: 46%; aspect-ratio: 1 / .8; translate: -50% -50%; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; cursor: pointer; padding: 6px;
  background: radial-gradient(circle at 36% 28%, rgba(255, 255, 255, .28), transparent 42%), radial-gradient(circle at 50% 60%, var(--superficie-3), var(--fundo) 78%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .22), inset 0 -10px 22px rgba(0, 0, 0, .55), 0 0 0 6px rgba(var(--claro-rgb), .05), 0 0 0 7px rgba(var(--acento-rgb), .25), 0 14px 30px rgba(0, 0, 0, .55), 0 0 40px -10px rgba(var(--acento-rgb), .6);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.rosca3d-miolo:hover { transform: scale(1.03); }
.rosca3d-miolo span { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rosca3d-miolo strong { font-family: var(--f-display); font-weight: 400; font-size: clamp(.95rem, 2.4vw, 1.35rem); color: var(--texto-forte); font-variant-numeric: tabular-nums; }
.cat-ponto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--cor); box-shadow: 0 0 10px -1px var(--cor); flex: none; }
.cat-legenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 360px; overflow: auto; }
.cat-legenda button { width: 100%; display: grid; grid-template-columns: 12px minmax(0, 1.2fr) minmax(0, 1fr) auto 38px; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 12px; border: 1px solid transparent; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .25s, border-color .25s, transform .25s; }
.cat-legenda button:hover { background: rgba(var(--claro-rgb), .05); border-color: rgba(var(--claro-rgb), .1); transform: translateX(3px); }
.cat-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-barra { height: 6px; border-radius: 99px; background: rgba(var(--claro-rgb), .07); overflow: hidden; }
.cat-barra i { display: block; height: 100%; border-radius: inherit; background: var(--cor); opacity: .85; }
.cat-legenda .num { font-variant-numeric: tabular-nums; font-weight: 600; }
.cat-legenda small { text-align: right; }
.cat-detalhe { display: grid; gap: 12px; animation: surgirSuave .45s cubic-bezier(.2, .8, .2, 1); }
.cat-detalhe header { display: flex; align-items: center; gap: 10px; }
.cat-detalhe h3 { margin: 0; font-size: 1.15rem; }
.cat-detalhe header .link { margin-left: auto; }
.cat-numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cat-numeros div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 14px; background: rgba(0, 0, 0, .24); border: 1px solid rgba(var(--claro-rgb), .07); }
.cat-numeros span { font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3); }
.cat-numeros strong { font-family: var(--f-display); font-weight: 300; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.cat-maiores li { display: flex; justify-content: space-between; gap: 10px; }
@keyframes surgirSuave { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 991.98px) {
  .cat-corpo { grid-template-columns: minmax(0, 1fr); }
  .rosca3d-palco { width: min(100%, 320px); }
}
@media (max-width: 575.98px) {
  .cat-numeros { grid-template-columns: 1fr 1fr; }
  .cat-legenda button { grid-template-columns: 12px minmax(0, 1fr) auto; }
  .cat-legenda .cat-barra, .cat-legenda small { display: none; }
}

/* condomínio: água e gás dentro da mesma conta */
.composicao { padding: 12px 14px; border-radius: 16px; background: rgba(var(--acento-rgb), .06); border: 1px dashed rgba(var(--acento-claro-rgb), .3); }
.composicao-linha { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; }
.composicao-resto { display: flex; flex-direction: column; gap: 6px; padding-bottom: 8px; }
.composicao-resto span { font-size: .8rem; color: var(--texto-2); }
.composicao-resto strong { font-variant-numeric: tabular-nums; font-size: 1.05rem; }
@media (max-width: 575.98px) { .composicao-linha { grid-template-columns: 1fr 1fr; } .composicao-resto { grid-column: 1 / -1; } }

/* seleção e edição em massa */
.tabela.com-selecao .sel { width: 36px; text-align: center; }
.tabela.com-selecao input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--brasa); cursor: pointer; }
.tabela.com-selecao tr.selecionada td { background: rgba(var(--acento-rgb), .08); }
.barra-massa { position: sticky; top: 12px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 10px 16px; margin-bottom: 12px; border-radius: 18px; animation: surgirSuave .35s cubic-bezier(.2, .8, .2, 1); }
.massa-campos { display: grid; gap: 10px; margin-top: 10px; }
.massa-campo { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: rgba(0, 0, 0, .18); }
.massa-controle { display: flex; gap: 8px; }
.massa-controle > * { flex: 1; min-width: 0; }
@media (max-width: 767.98px) { .massa-campo { grid-template-columns: 1fr; } .tabela.com-selecao td.sel { grid-column: 1 / -1; text-align: left; } }

/* ---------- Menu inferior flutuante (todas as telas) ---------- */
body, body.menu-recolhido { grid-template-columns: minmax(0, 1fr); }
.lateral {
  position: fixed; top: auto; left: 50%; right: auto; bottom: 16px; translate: -50% 0; height: auto; width: max-content; max-width: calc(100vw - 24px);
  margin: 0; z-index: 60; flex-direction: row; align-items: center; gap: 8px; padding: 8px; border-radius: 32px; view-transition-name: menu-inferior;
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .85), 0 0 0 1px rgba(var(--claro-rgb), .06);
  animation: dockSobe .7s cubic-bezier(.2, .9, .2, 1) both;
}
@keyframes dockSobe { from { opacity: 0; translate: -50% 40px; } }
.marca, .recolher { display: none; }
.menu { position: relative; flex-direction: row; gap: 2px; padding: 4px; border-radius: 26px; }
.menu hr { display: block; align-self: center; width: 0; height: 28px; border: 0; border-left: 1px solid var(--borda); margin: 0 4px; }
.menu a { position: relative; z-index: 1; flex-direction: column; gap: 3px; min-width: 66px; padding: 8px 12px; font-size: .68rem; text-align: center; border-radius: 22px;
  transition: color .3s, background .3s, transform .25s cubic-bezier(.3, 1.4, .5, 1); }
.menu a:active { transform: scale(.92); }
.menu a .rot { max-width: 86px; overflow: hidden; text-overflow: ellipsis; }
.menu a svg.i { width: 20px; height: 20px; transition: transform .35s cubic-bezier(.3, 1.4, .5, 1), color .3s, filter .3s; }
.menu a:hover svg.i { transform: translateY(-2px); }
.menu a.ativo, .menu-recolhido .menu a.ativo { background: none; box-shadow: none; }
.menu a.ativo::before { display: none; }
.menu a.ativo svg.i { transform: translateY(-2px) scale(1.08); }
.menu .indicador {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 22px; opacity: 0; pointer-events: none;
  background: radial-gradient(120% 140% at 50% 0%, rgba(var(--acento-rgb), .38), rgba(var(--acento-rgb), .1) 50%, transparent 80%), linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02));
  box-shadow: inset 0 1px 0 rgba(var(--claro-rgb), .22), inset 0 0 0 1px rgba(var(--acento-claro-rgb), .3), 0 10px 26px -12px rgba(var(--acento-rgb), .7), 0 0 40px -12px rgba(var(--acento-rgb), .55);
  transition: transform .55s cubic-bezier(.3, 1.25, .45, 1), width .55s cubic-bezier(.3, 1.25, .45, 1), opacity .3s;
}
.menu .indicador.visivel { opacity: 1; }
.menu .cont { position: absolute; top: 2px; right: 8px; margin: 0; min-width: 16px; height: 16px; padding: 0 4px; font-size: .58rem; }
.perfil-atual { flex: none; }
.perfil-chip { width: auto; padding: 4px; border: 0; background: none; }
.perfil-chip .rot, .perfil-vinculado { display: none; }
.rodape-lateral { margin: 0; flex-direction: row; align-items: center; gap: 6px; position: relative; }
.rodape-lateral .btn { height: 46px; border-radius: 23px; padding: 0 18px; }
#status-salvo { position: absolute; bottom: calc(100% + 14px); right: 10px; font-size: .64rem; white-space: nowrap; opacity: .7; }
main, body[data-view="geral"] main { padding-bottom: 130px; }
body:not([data-view="geral"]) main { margin-inline: auto; }
#avisos { bottom: 104px; }
/* a primeira tela da Visão geral termina acima do menu flutuante */
body[data-view="geral"] .hero { min-height: calc(100vh - 92px); min-height: calc(100svh - 92px); }
.rolar { margin-bottom: 0; }
@media (max-width: 991.98px) {
  .lateral { left: 10px; right: 10px; bottom: 10px; translate: none; width: auto; animation-name: dockSobeMovel; }
  @keyframes dockSobeMovel { from { opacity: 0; transform: translateY(40px); } }
  .menu { flex: 1 1 auto; min-width: 0; }
  .menu a { min-width: 0; padding: 7px 2px; flex: 1 1 0; }
  .rodape-lateral { display: none; }
  .menu hr { display: none; }
  main, body[data-view="geral"] main { padding-bottom: 104px; }
  #avisos { bottom: 86px; }
}

/* ---------- Transições suaves entre telas e cliques ---------- */
::view-transition-old(root) { animation: telaSai .28s cubic-bezier(.4, 0, .2, 1) both; }
::view-transition-new(root) { animation: telaEntra .42s cubic-bezier(.2, .8, .2, 1) both; }
::view-transition-group(menu-inferior) { animation-duration: .45s; }
@keyframes telaSai { to { opacity: 0; transform: translateY(-6px) scale(.995); filter: blur(2px); } }
@keyframes telaEntra { from { opacity: 0; transform: translateY(10px) scale(.995); filter: blur(3px); } }
.btn, .segmentado label span, .abas button, .chip-escolha span, .icone { transition: transform .22s cubic-bezier(.3, 1.4, .5, 1), background .25s, border-color .25s, color .25s, box-shadow .25s; }
.btn:active, .abas button:active, .icone:active { transform: scale(.96); }
.segmentado label:active span { transform: scale(.96); }
.abas button.ativa { animation: abaAtiva .4s cubic-bezier(.2, .8, .2, 1); }
@keyframes abaAtiva { from { box-shadow: 0 0 0 6px rgba(var(--acento-rgb), .18); } }
@media (prefers-reduced-motion: reduce) {
  .lateral { animation: none; }
  .menu .indicador { transition: none; }
}

/* ---------- Mercado: lista de compras + "No mercado" (calculadora) ---------- */
.mercado-listas { align-items: start; }
.form-lista { display: grid; grid-template-columns: minmax(0, 2.2fr) 70px 82px minmax(0, 1.4fr) auto; gap: 8px; margin-bottom: 14px; }
.form-lista input, .form-lista select { min-width: 0; }
.tabela-lista td { padding: 4px 4px; vertical-align: middle; }
.tabela-lista input, .tabela-lista select { width: 100%; min-width: 0; background: transparent; border-color: transparent; padding: 7px 9px; }
.tabela-lista input:hover, .tabela-lista select:hover { border-color: var(--borda); }
.tabela-lista input:focus, .tabela-lista select:focus { border-color: rgba(var(--acento-rgb), .5); background: rgba(var(--claro-rgb), .04); }
.tabela-lista td:nth-child(2) { width: 72px; } .tabela-lista td:nth-child(3) { width: 86px; }
.tabela-lista tr.no-carrinho input[data-campo="nome"] { text-decoration: line-through; color: var(--texto-3); }
.tabela-lista .tag { margin-left: 6px; }

.no-mercado { padding-top: 0; overflow: visible; }
.calculadora {
  position: sticky; top: 12px; z-index: 5; margin: 0 -24px 14px; padding: 18px 24px 16px; border-radius: var(--raio-grande) var(--raio-grande) 18px 18px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(var(--acento-rgb), .22), transparent 60%), linear-gradient(180deg, rgba(var(--claro-rgb), .06), rgba(var(--claro-rgb), .02)), var(--superficie-pop, var(--superficie));
  border-bottom: 1px solid rgba(var(--acento-rgb), .25);
  box-shadow: inset 0 1px 0 rgba(var(--claro-rgb), .1), 0 18px 40px -22px rgba(0, 0, 0, .9);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.calc-topo { display: flex; justify-content: space-between; align-items: center; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--texto-2); }
.calc-total { display: block; font-family: var(--f-display); font-weight: 300; font-size: clamp(2.2rem, 5vw, 3.1rem); letter-spacing: -.03em; line-height: 1.1; margin: 4px 0 8px; color: var(--texto-forte); font-variant-numeric: tabular-nums; text-shadow: 0 0 30px rgba(var(--acento-claro-rgb), .3); }
.calc-linha { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .84rem; color: var(--texto-2); }
.calc-linha b { color: var(--texto); font-variant-numeric: tabular-nums; }
.calc-linha small { color: var(--texto-3); }
.calc-progresso { height: 6px; border-radius: 99px; background: rgba(var(--claro-rgb), .08); margin: 12px 0; overflow: hidden; }
.calc-progresso i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(var(--acento-rgb), .7), rgb(var(--acento-claro-rgb))); box-shadow: 0 0 12px rgba(var(--acento-rgb), .6); transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.calculadora .acoes-rapidas { display: flex; gap: 8px; flex-wrap: wrap; }
.no-mercado h3.sub { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--texto-3); margin: 14px 0 8px; font-weight: 600; }
.lista-carrinho { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.item-pegar, .item-comprado { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--borda); background: rgba(var(--claro-rgb), .025); color: inherit; font: inherit; text-align: left; }
.item-pegar { cursor: pointer; transition: transform .15s, border-color .2s, background .2s; }
.item-pegar:hover { border-color: rgba(var(--acento-rgb), .45); background: rgba(var(--acento-rgb), .07); }
.item-pegar:active { transform: scale(.98); }
.item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.item-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-info small { color: var(--texto-3); font-size: .78rem; }
.check-circulo { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(var(--claro-rgb), .25); display: grid; place-items: center; font-size: .8rem; font-weight: 800; }
.item-pegar:hover .check-circulo { border-color: rgb(var(--acento-rgb)); }
.check-circulo.ok { border-color: transparent; background: var(--positivo); color: #05140D; box-shadow: 0 0 12px rgba(69, 212, 154, .5); }
.item-acao { flex: none; font-size: .78rem; font-weight: 700; color: rgb(var(--acento-claro-rgb)); padding: 6px 12px; border-radius: 99px; background: rgba(var(--acento-rgb), .14); }
.comprados .item-comprado { background: rgba(69, 212, 154, .05); border-color: rgba(69, 212, 154, .18); }
.item-comprado .acoes { display: flex; gap: 2px; }
.comprei-subtotal strong { font-family: var(--f-display); font-size: 1.6rem; font-weight: 300; font-variant-numeric: tabular-nums; }
.modo-mercado-cheio { max-width: 640px; margin: 0 auto; }
.modo-mercado-cheio .no-mercado { min-height: calc(100vh - 140px); }
.modo-mercado-cheio .calculadora { top: 0; }
@media (max-width: 767.98px) {
  .form-lista { grid-template-columns: 1fr 70px 82px; }
  .form-lista select[name=cat] { grid-column: 1 / 3; }
  .calculadora { margin: 0 -16px 12px; padding: 16px; }
  .item-pegar, .item-comprado { padding: 14px 12px; }
}

/* ---------- Cartão: faturas em linha (como a Visão geral) ---------- */
.trilho-faturas { overflow-x: auto; overflow-y: hidden; padding: 30px 0 4px; scrollbar-width: thin; cursor: grab; touch-action: pan-x pan-y; }
.trilho-faturas.arrastando { cursor: grabbing; user-select: none; }
.trilho-faturas.arrastando .ponto-col { pointer-events: none; }
.linha-faturas { width: calc(100% * var(--n) / var(--visiveis)); min-width: 100%; height: 220px; flex: none; margin: 0; }
.linha-faturas .area.faturas { fill: url(#area-faturas); }
.linha-faturas .guia { stroke: rgba(var(--acento-claro-rgb), .45); stroke-width: 1; stroke-dasharray: 3 4; }
.linha-faturas .ponto-col.selecionado { background: linear-gradient(180deg, rgba(var(--acento-rgb), .16), rgba(var(--acento-rgb), .02) 80%); box-shadow: inset 0 0 0 1px rgba(var(--acento-rgb), .35); }
.linha-faturas .ponto-col.selecionado .rotulo-x { color: rgb(var(--acento-claro-rgb)); font-weight: 700; }
.linha-faturas .ponto-col.selecionado .pt { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; }
.linha-faturas .ponto-col.selecionado .valor { color: var(--flutuante-texto); background: var(--flutuante); border-color: transparent; box-shadow: 0 0 18px -4px rgba(var(--acento-claro-rgb), .6); }
.linha-faturas .valor.fatura { color: var(--brasa-quente); background: rgba(20, 14, 10, .78); border: 1px solid rgba(var(--acento-rgb), .3); }
.pt.situacao-paga { border-color: var(--positivo); box-shadow: 0 0 8px rgba(69, 212, 154, .7); }
.pt.situacao-aberta { border-color: rgb(var(--acento-claro-rgb)); background: rgb(var(--acento-rgb)); box-shadow: 0 0 10px rgba(var(--acento-rgb), .9); }
.pt.situacao-fechada { border-color: #F2C14E; box-shadow: 0 0 8px rgba(242, 193, 78, .6); }
.pt.situacao-vencida { border-color: var(--critico); background: var(--critico); box-shadow: 0 0 10px rgba(255, 93, 115, .8); }
.pt.situacao-futura { border-color: rgba(var(--claro-rgb), .45); border-style: dashed; box-shadow: none; }
.ponto-col .pt.nada { border-color: rgba(var(--claro-rgb), .18); width: 6px; height: 6px; margin: -3px 0 0 -3px; }
.legenda-faturas { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: .74rem; color: var(--texto-3); }
.legenda-faturas span { display: inline-flex; align-items: center; gap: 6px; }
.legenda-faturas .pt { position: static; display: inline-block; width: 9px; height: 9px; margin: 0; border-radius: 50%; border: 2px solid; background: var(--fundo); }
.legenda-faturas .pt.situacao-aberta, .legenda-faturas .pt.situacao-vencida { background: currentColor; }
.legenda-faturas .pt.situacao-aberta { color: rgb(var(--acento-rgb)); } .legenda-faturas .pt.situacao-vencida { color: var(--critico); }
@media (max-width: 767.98px) {
  .trilho-faturas { --visiveis: 5 !important; }
  .linha-faturas { height: 200px; }
  .linha-faturas .ponto-col:nth-of-type(even):not(.atual) .rotulo-x { visibility: visible; }
  .linha-faturas .ponto-col .valor { font-size: .62rem; }
}

/* ---------- Cartão: limite arrastável ---------- */
.painel-limite .linha-limite { align-items: flex-end; margin-bottom: 10px; }
.limite-titulo { display: flex; flex-direction: column; gap: 2px; }
.limite-titulo .sutil { font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; }
.limite-titulo strong { font-family: var(--f-display); font-weight: 300; font-size: clamp(1.6rem, 3.4vw, 2.2rem); letter-spacing: -.03em; line-height: 1.1; color: var(--texto-forte); font-variant-numeric: tabular-nums; }
.limite-titulo .tag { align-self: flex-start; }
.limite-uso { display: flex; gap: 16px; flex-wrap: wrap; font-size: .84rem; color: var(--texto-2); margin-left: auto; }
.limite-uso b { font-variant-numeric: tabular-nums; }
.limite-slider { position: relative; height: 34px; margin: 4px 0 2px; }
.limite-trilho {
  position: absolute; left: 13px; right: 13px; top: 50%; height: 10px; margin-top: -5px; border-radius: 99px;
  background: linear-gradient(90deg, var(--brasa-funda), var(--brasa) var(--uso), rgba(var(--acento-rgb), .28) var(--uso), rgba(var(--acento-rgb), .28) var(--lim), rgba(var(--claro-rgb), .06) var(--lim));
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6), 0 0 16px -4px rgba(var(--acento-rgb), .5);
}
.limite-slider.estourado .limite-trilho { background: linear-gradient(90deg, var(--brasa-funda), var(--brasa) var(--lim), var(--critico) var(--lim), var(--critico) var(--uso), rgba(var(--claro-rgb), .06) var(--uso)); }
.limite-slider input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; background: transparent; border: 0; -webkit-appearance: none; appearance: none; cursor: grab; box-shadow: none; }
.limite-slider input[type=range]:active { cursor: grabbing; }
.limite-slider input[type=range]::-webkit-slider-runnable-track { height: 34px; background: transparent; border: 0; }
.limite-slider input[type=range]::-moz-range-track { height: 34px; background: transparent; border: 0; }
.limite-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 26px; height: 26px; margin-top: 4px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--brasa-quente) 40%, var(--brasa) 100%); border: 3px solid var(--fundo);
  box-shadow: 0 0 0 2px rgb(var(--acento-rgb)), 0 0 22px rgba(var(--acento-rgb), .8); transition: transform .15s;
}
.limite-slider input[type=range]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--brasa-quente) 40%, var(--brasa) 100%); border: 3px solid var(--fundo);
  box-shadow: 0 0 0 2px rgb(var(--acento-rgb)), 0 0 22px rgba(var(--acento-rgb), .8);
}
.limite-slider input[type=range]:hover::-webkit-slider-thumb, .limite-slider input[type=range]:active::-webkit-slider-thumb { transform: scale(1.15); }
.limite-slider input[type=range]:focus-visible { outline: none; }
.limite-slider input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px rgb(var(--acento-rgb)), 0 0 0 6px rgba(var(--acento-rgb), .3), 0 0 22px rgba(var(--acento-rgb), .8); }
.limite-escala { display: flex; justify-content: space-between; font-size: .66rem; color: var(--texto-3); margin: 0 2px 10px; font-variant-numeric: tabular-nums; }
@media (max-width: 767.98px) { .limite-uso { margin-left: 0; } .painel-limite .linha-limite { align-items: flex-start; } }
@media (max-width: 1199.98px) { .grade-painel.mercado-listas { grid-template-columns: 1fr; } }
.dica-pares { display: grid; grid-template-columns: auto auto; gap: 3px 14px; margin-top: 3px; }
.dica-pares span { color: var(--texto-2); }
.dica-pares b { text-align: right; font-weight: 600; color: var(--texto-forte); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lista li .progresso { margin-top: 8px; max-width: 420px; }
.cat-resumo { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; font-size: .84rem; color: var(--texto-2); }
.cat-resumo b { font-variant-numeric: tabular-nums; }

/* ---------- Entrada: detalhes do trabalho ---------- */
.novo-entregavel { display: flex; gap: 8px; margin-top: 10px; }
.novo-entregavel input { flex: 1; min-width: 0; }
.campo textarea { width: 100%; resize: vertical; min-height: 60px; font: inherit; }
.detalhe-trabalho { color: var(--texto-2); }
.entregaveis-feitos { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.entregaveis-feitos span { font-size: .7rem; padding: 2px 8px; border-radius: 99px; background: rgba(69, 212, 154, .1); border: 1px solid rgba(69, 212, 154, .3); color: #9DF3CC; }
.anotacao { display: block; margin-top: 4px; }

/* ---------- Fiscal e notas fiscais ---------- */
.btn-nota.pendente { color: #F2C14E; border-color: rgba(242, 193, 78, .45); background: rgba(242, 193, 78, .1); }
.btn-nota.emitida { color: var(--positivo); border-color: rgba(69, 212, 154, .4); background: rgba(69, 212, 154, .08); }
.btn-nota.dispensada { color: var(--texto-3); }
.cont.alerta { background: #F2C14E; color: #1A1408; }
.dados-nota { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; padding: 14px 16px; border-radius: var(--raio-campo); border: 1px solid var(--borda); background: rgba(var(--claro-rgb), .03); }
.dados-nota > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dados-nota .larga { grid-column: 1 / -1; }
.dados-nota span { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--texto-3); }
.dados-nota strong { color: var(--texto-forte); }
.dados-nota small { color: var(--texto-2); }
.dados-nota p { margin: 2px 0 8px; color: var(--texto); line-height: 1.45; }
.aviso-fiscal { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; padding: 10px 14px; margin-bottom: 12px; border-radius: var(--raio-campo); border: 1px solid rgba(242, 193, 78, .35); background: rgba(242, 193, 78, .08); font-size: .88rem; }
.resumo-fiscal li, .calendario-fiscal li, .links-fiscais li { align-items: center; }
.limite-mei .linha-limite strong { font-variant-numeric: tabular-nums; }
.conexao-receita p { margin: 0 0 10px; }
@media (max-width: 575.98px) { .dados-nota { grid-template-columns: 1fr; } }

/* ---------- Escolha em cartões (ex.: "O que é essa entrada?") ---------- */
.escolha-cartoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.escolha-cartao { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--raio-campo); border: 1px solid var(--borda-forte); background: rgba(var(--claro-rgb), .03); cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s; }
.escolha-cartao:hover { border-color: rgba(var(--acento-rgb), .4); }
.escolha-cartao input { position: absolute; opacity: 0; pointer-events: none; }
.escolha-icone { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; font-size: 1.15rem; background: rgba(var(--claro-rgb), .06); }
.escolha-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.escolha-texto strong { font-size: .92rem; color: var(--texto); font-weight: 600; }
.escolha-texto small { font-size: .76rem; color: var(--texto-3); line-height: 1.3; }
.escolha-cartao:has(input:checked) { border-color: rgba(var(--acento-rgb), .7); background: rgba(var(--acento-rgb), .1); box-shadow: 0 0 0 1px rgba(var(--acento-rgb), .35), 0 10px 24px -14px rgba(var(--acento-rgb), .8); }
.escolha-cartao:has(input:checked) .escolha-icone { background: rgba(var(--acento-rgb), .2); }
.escolha-cartao:has(input:focus-visible) { outline: 2px solid rgba(var(--acento-rgb), .6); outline-offset: 2px; }
@media (max-width: 575.98px) { .escolha-cartoes { grid-template-columns: 1fr; } }

/* ---------- Perfil do cliente personalizado ---------- */
.perfil-cliente { position: relative; }
.perfil-cliente::before { content: ""; position: absolute; inset: -40px -20px auto; height: 220px; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 100% at 10% 0%, color-mix(in srgb, var(--cor-cliente) 28%, transparent), transparent 70%); }
.perfil-cliente .perfil-titulo { align-items: flex-start; gap: 20px; }
.avatar-editavel { position: relative; flex: none; }
.avatar-editavel .avatar { box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor-cliente) 60%, transparent), 0 18px 40px -16px var(--cor-cliente); }
.trocar-foto { position: absolute; right: -6px; bottom: -6px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  background: var(--superficie-pop, var(--superficie)); border: 1px solid var(--borda-forte); box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .8); font-size: .95rem; transition: transform .15s; }
.trocar-foto:hover { transform: scale(1.08); }
.perfil-cliente .tags { margin-top: 8px; }
.tag.etiqueta { border-color: color-mix(in srgb, var(--cor) 55%, transparent); background: color-mix(in srgb, var(--cor) 16%, transparent); color: var(--texto); }
.tag.aniver-perto { border-color: rgba(242, 193, 78, .5); background: rgba(242, 193, 78, .12); color: #F2C14E; }
.contato-rapido { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.contato-rapido .btn { padding: 7px 14px; font-size: .84rem; }
.btn-whats { color: #fff !important; background: linear-gradient(180deg, #2BD66B, #1DAA54) !important; border-color: transparent !important; box-shadow: 0 8px 20px -10px rgba(37, 211, 102, .9); }
.cores-perfil { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.ponto-cor { width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 2px solid transparent; background: var(--cor); cursor: pointer; box-shadow: 0 0 8px -2px var(--cor); transition: transform .15s; }
.ponto-cor:hover { transform: scale(1.15); }
.ponto-cor.ativa { border-color: #fff; box-shadow: 0 0 0 2px var(--cor), 0 0 14px var(--cor); }
.cartao-cadastro { border-top: 2px solid color-mix(in srgb, var(--cor-cliente, transparent) 70%, transparent); }
.cartao-cadastro footer { display: flex; align-items: center; gap: 10px; }
.whats-mini { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(37, 211, 102, .15); border: 1px solid rgba(37, 211, 102, .4); text-decoration: none; font-size: .85rem; flex: none; }
.whats-mini:hover { background: rgba(37, 211, 102, .3); }
@media (max-width: 575.98px) { .perfil-cliente .perfil-titulo { flex-direction: column; } .avatar.enorme { width: 104px; height: 104px; border-radius: 30px; } }
a.btn, a.btn:hover, .whats-mini { text-decoration: none; }

/* ---------- Visão PJ / PF / Tudo ---------- */
.seletor-visao { display: inline-flex; gap: 2px; padding: 3px; border-radius: 99px; border: 1px solid var(--borda-forte); background: rgba(var(--claro-rgb), .04); }
.seletor-visao button { appearance: none; border: 0; background: transparent; color: var(--texto-2); font: inherit; font-size: .84rem; font-weight: 600; min-width: 58px; padding: 7px 14px; border-radius: 99px; cursor: pointer; transition: background .2s, color .2s; }
.seletor-visao button:hover { color: var(--texto); }
.seletor-visao button.ativa { color: var(--primaria-texto, #111); background: linear-gradient(180deg, rgb(var(--acento-claro-rgb)), rgb(var(--acento-rgb))); box-shadow: 0 6px 18px -8px rgba(var(--acento-rgb), .9); }
.saudacao-linha { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.topo-pagina h1 + .seletor-visao { margin-top: 10px; }
/* Gráfico principal: sinal discreto no mês que fechou negativo */
.ponto-col.vermelho .rotulo-x { color: #FF8A9A; }
.ponto-col.vermelho .rotulo-x::before { content: ""; display: inline-block; width: 4px; height: 4px; margin-right: 4px; border-radius: 50%; background: var(--critico); vertical-align: middle; }
@media (max-width: 575.98px) { .fatura-acoes { flex-direction: column; } .fatura-acoes .btn { width: 100%; } }

/* ---------- Parcelas de valores diferentes e proposta ---------- */
.preencher-parcelas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.preencher-parcelas > input { width: 56px; text-align: center; }
.preencher-parcelas .entrada-prefixo { width: 150px; }
.grade-parcelas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.parcela-item { display: flex; align-items: center; gap: 8px; }
.parcela-item small { flex: none; width: 26px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.parcela-item .entrada-prefixo { flex: 1; min-width: 0; }
.campo-chance > span { display: flex; justify-content: space-between; align-items: baseline; }
.campo-chance [data-chance] { font-family: var(--f-display); font-weight: 300; font-size: 1.6rem; color: var(--texto-forte); font-variant-numeric: tabular-nums; }
.anexos-lista { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.anexo-item { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px 2px 10px; border: 1px solid var(--borda-forte); border-radius: 99px; font-size: .82rem; }
.anexar-btn { align-self: flex-start; width: fit-content; }
.anexos-cartao { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: .8rem; }

/* ---------- Pipeline ---------- */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 8px; }
.kanban-coluna { display: flex; flex-direction: column; min-height: 160px; border-radius: 16px; border: 1px solid var(--borda); background: rgba(var(--claro-rgb), .025); transition: border-color .15s, background .15s; }
.kanban-coluna.alvo { border-color: var(--cor); background: color-mix(in srgb, var(--cor) 12%, transparent); }
.kanban-coluna > header { display: flex; align-items: center; gap: 8px; padding: 12px 12px 8px; font-size: .84rem; }
.kanban-coluna > header i { width: 8px; height: 8px; border-radius: 50%; background: var(--cor); flex: none; }
.kanban-coluna > header strong { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kanban-coluna > header span { color: var(--texto-3); font-variant-numeric: tabular-nums; }
.kanban-lista { display: flex; flex-direction: column; gap: 8px; padding: 0 8px 8px; flex: 1; }
.kanban-vazio { color: var(--texto-3); text-align: center; padding: 14px 0; }
.kanban-cartao { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--borda-forte); border-left: 3px solid var(--cor); background: var(--superficie-2); cursor: grab; }
.kanban-cartao:hover { border-color: var(--cor); }
.kanban-cartao.arrastando { opacity: .45; }
.kanban-cartao strong { font-size: .9rem; font-weight: 600; }
.kanban-cartao small { font-size: .74rem; }
.kanban-valor { color: var(--texto); font-variant-numeric: tabular-nums; }
.etapa-chip { font-size: .7rem; padding: 1px 8px; border-radius: 99px; color: var(--texto); border: 1px solid color-mix(in srgb, var(--cor) 55%, transparent); background: color-mix(in srgb, var(--cor) 15%, transparent); }
.agenda-titulo { display: flex; align-items: center; gap: 8px; }
.agenda-titulo.critico { color: #FF8A9A; }
.agenda-titulo.alerta { color: #F2C14E; }
.agenda-comercial .lista li { align-items: center; }
.agenda-comercial .acoes { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.sem-passo { margin: 14px 0 0; padding: 8px 12px; border-radius: 12px; font-size: .84rem; color: #F2C14E; background: rgba(242, 193, 78, .08); border: 1px solid rgba(242, 193, 78, .3); }
.pipeline-propostas { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; border-radius: var(--raio-campo); border: 1px solid var(--borda); background: rgba(var(--claro-rgb), .03); }
.pipeline-propostas > div { display: flex; flex-direction: column; }
.pipeline-historico { max-height: 180px; overflow-y: auto; }
.ativ-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px; margin-bottom: 8px; }
.ativ-numeros > div { display: flex; flex-direction: column; gap: 3px; }
.ativ-numeros span { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3); }
.ativ-numeros strong { font-family: var(--f-display); font-weight: 300; font-size: 1.6rem; color: var(--texto-forte); font-variant-numeric: tabular-nums; }
.ativ-colunas { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 3px; height: 170px; align-items: stretch; }
.ativ-coluna { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 1px; padding: 16px 0 18px; border-radius: 6px; }
.ativ-coluna:hover, .ativ-coluna.atual { background: rgba(var(--claro-rgb), .05); }
.ativ-barra { display: block; width: 62%; max-width: 22px; margin: 0 auto; border-radius: 3px 3px 0 0; }
.ativ-barra.ok { background: rgb(var(--acento-rgb)); }
.ativ-barra.sem { background: rgba(var(--claro-rgb), .22); }
.ativ-num { position: absolute; top: 0; left: 0; right: 0; text-align: center; font-size: .68rem; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.ativ-coluna small { position: absolute; bottom: 0; left: -10px; right: -10px; text-align: center; font-size: .62rem; color: var(--texto-3); white-space: nowrap; }
.legenda-faturas .leg { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.leg.ok { background: rgb(var(--acento-rgb)); } .leg.sem { background: rgba(var(--claro-rgb), .22); }
.ativ-tabelas { margin-top: 12px; }
.ativ-mini { display: block; height: 4px; margin-top: 4px; border-radius: 99px; background: rgba(var(--claro-rgb), .08); }
.ativ-mini i { display: block; height: 100%; border-radius: inherit; background: rgb(var(--acento-rgb)); }

/* Menu inferior com todos os itens cabendo na largura da tela */
@media (min-width: 992px) {
  .lateral { max-width: calc(100vw - 24px); }
  .menu { flex: 1 1 auto; min-width: 0; }
  .menu a { min-width: 0; padding-inline: 8px; }
}
@media (min-width: 992px) and (max-width: 1299.98px) {
  .menu a { flex: 1 1 0; }
  .menu a .rot { display: none; }
}
@media (min-width: 992px) { body[data-view="pipeline"] .kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 992px) { .ativ-numeros { grid-template-columns: repeat(7, minmax(0, 1fr)); } }

/* ---------- Proposta detalhada ---------- */
.entregaveis-det { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.linha-entregavel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; gap: 8px; align-items: start; }
.linha-entregavel textarea { width: 100%; resize: vertical; font: inherit; }
@media (max-width: 575.98px) { .linha-entregavel { grid-template-columns: minmax(0, 1fr) auto; } .linha-entregavel textarea { grid-column: 1 / -1; grid-row: 2; } }

/* ---------- Metas e taxas ---------- */
.meta-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.meta-topo > div { display: flex; flex-direction: column; gap: 2px; }
.meta-valor { font-family: var(--f-display); font-weight: 300; font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: -.03em; color: var(--texto-forte); font-variant-numeric: tabular-nums; line-height: 1.1; }
.meta-barra { position: relative; height: 10px; margin: 14px 0 18px; border-radius: 99px; background: rgba(var(--claro-rgb), .08); }
.meta-barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(var(--acento-rgb), .7), rgb(var(--acento-claro-rgb))); }
.meta-barra b { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--texto); border-radius: 2px; }
.meta-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.meta-numeros > div, .meta-funil > div, .taxa-cartao { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.meta-numeros span, .meta-funil span:not(.meta-seta), .taxa-cartao > span { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); }
.meta-numeros strong { font-family: var(--f-display); font-weight: 300; font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.meta-funil { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.meta-funil > div { flex: 1 1 90px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--borda); background: rgba(var(--claro-rgb), .03); }
.meta-funil strong { font-family: var(--f-display); font-weight: 300; font-size: 1.7rem; color: var(--texto-forte); font-variant-numeric: tabular-nums; }
.meta-seta { color: var(--texto-3); }
.meta-ritmo { margin: 14px 0 4px; color: var(--texto-2); line-height: 1.5; }
.meta-ritmo b { color: var(--texto); }
.meta-aviso { margin: 16px 0 0; padding: 10px 14px; border-radius: 12px; color: var(--texto-2); background: rgba(var(--claro-rgb), .04); }
.grade-taxas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.taxa-cartao { padding: 14px; border-radius: 14px; border: 1px solid var(--borda); background: rgba(var(--claro-rgb), .025); }
.taxa-cartao strong { font-family: var(--f-display); font-weight: 300; font-size: 1.7rem; color: var(--texto-forte); font-variant-numeric: tabular-nums; }
.taxa-cartao small { font-size: .74rem; line-height: 1.35; }
.taxa-cartao em.tag { font-style: normal; }
@media (max-width: 575.98px) { .meta-seta { display: none; } .meta-funil > div { flex: 1 1 40%; } .meta-topo { flex-direction: column; } }


/* ---------- Controles do Orbe: calendário, listas, cores, marcadores e abas ---------- */
select:not([multiple]) {
  -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C2B9AF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
}
select:not([multiple]):hover { border-color: rgba(var(--claro-rgb), .26); }
select.seletor-moeda:not([multiple]) { padding: 0 20px 0 10px; background-position: right 5px center; background-size: 11px; }
select.situacao-etapa:not([multiple]) { padding-right: 26px; background-position: right 8px center; background-size: 12px; }
.tabela-lista select:not([multiple]) { padding-right: 24px; background-position: right 6px center; background-size: 12px; }
input[type=date], input[type=month] { cursor: pointer; font-variant-numeric: tabular-nums; }
input[type=date]::-webkit-datetime-edit-fields-wrapper, input[type=month]::-webkit-datetime-edit-fields-wrapper { padding: 0; }
input[type=date]::-webkit-datetime-edit-day-field:focus, input[type=date]::-webkit-datetime-edit-month-field:focus, input[type=date]::-webkit-datetime-edit-year-field:focus,
input[type=month]::-webkit-datetime-edit-month-field:focus, input[type=month]::-webkit-datetime-edit-year-field:focus { background: rgba(var(--acento-rgb), .32); color: var(--texto-forte); border-radius: 4px; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; width: 14px; height: 14px; cursor: pointer; opacity: .7;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C2B9AF' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat; }
input::-webkit-calendar-picker-indicator:not(input[type=date], input[type=month]) { display: none !important; }
@media (hover: hover) and (pointer: fine) {
  input[type=date], input[type=month] {
    padding-right: 36px; background-repeat: no-repeat; background-position: right 12px center; background-size: 15px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C2B9AF' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E");
  }
  input[type=date]:hover, input[type=month]:hover { border-color: rgba(var(--claro-rgb), .26); }
  input[type=date]::-webkit-calendar-picker-indicator, input[type=month]::-webkit-calendar-picker-indicator { display: none; }
}
input[type=color] { -webkit-appearance: none; appearance: none; width: 38px; height: 38px; padding: 0; flex: none; border-radius: 12px; cursor: pointer; overflow: hidden; background: rgba(0, 0, 0, .34); }
input[type=color]::-webkit-color-swatch-wrapper { padding: 5px; }
input[type=color]::-webkit-color-swatch { border: 0; border-radius: 8px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
input[type=color]::-moz-color-swatch { border: 0; border-radius: 8px; }

input[type=checkbox], input[type=radio] {
  -webkit-appearance: none; appearance: none; flex: none; width: 18px; height: 18px; padding: 0; margin: 0; display: inline-grid; place-content: center; cursor: pointer;
  background: rgba(0, 0, 0, .34); border: 1px solid rgba(var(--claro-rgb), .24); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5); transition: background .2s, border-color .2s, box-shadow .2s;
}
input[type=checkbox] { border-radius: 6px; }
input[type=radio] { border-radius: 50%; }
input[type=checkbox]:hover, input[type=radio]:hover { border-color: rgba(var(--acento-claro-rgb), .7); }
input[type=checkbox]::before { content: ""; width: 11px; height: 9px; background: var(--primaria-texto); clip-path: polygon(9% 50%, 0 62%, 38% 100%, 100% 16%, 89% 5%, 37% 75%); transform: scale(0); transition: transform .16s cubic-bezier(.3, 1.5, .5, 1); }
input[type=radio]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--primaria-texto); transform: scale(0); transition: transform .16s cubic-bezier(.3, 1.5, .5, 1); }
input[type=checkbox]:checked, input[type=radio]:checked { background: linear-gradient(180deg, rgb(var(--acento-claro-rgb)), rgb(var(--acento-rgb))); border-color: rgba(var(--acento-claro-rgb), .9); box-shadow: 0 0 14px -3px rgba(var(--acento-rgb), .8); }
input[type=checkbox]:checked::before, input[type=radio]:checked::before { transform: scale(1); }
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { outline: 2px solid rgba(var(--acento-claro-rgb), .8); outline-offset: 2px; }

.pop-orbe {
  position: fixed; inset: auto; margin: 0; padding: 8px; display: flex; flex-direction: column; color: var(--texto); overflow: hidden;
  border: 1px solid rgba(var(--claro-rgb), .16); border-radius: 18px;
  background: linear-gradient(165deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03) 42%, rgba(255, 255, 255, .015)), linear-gradient(var(--superficie-pop), var(--superficie-pop)), #100E14;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 26px 60px -18px rgba(0, 0, 0, .95), 0 0 54px -26px rgba(var(--acento-rgb), .75);
  animation: popEntra .17s cubic-bezier(.2, .9, .3, 1);
}
@keyframes popEntra { from { opacity: 0; transform: translateY(-5px) scale(.975); } }
@media (prefers-reduced-motion: reduce) { .pop-orbe { animation: none; } }
.pop-orbe button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.pop-lista { max-width: min(380px, calc(100vw - 16px)); }
.pop-lista ul { list-style: none; margin: 0; padding: 0; overflow-y: auto; max-height: 300px; scrollbar-width: thin; }
.pop-lista li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 11px; border-radius: 11px; font-size: .9rem; color: var(--texto-2); cursor: pointer; }
.pop-lista li small { display: block; font-size: .74rem; color: var(--texto-3); }
.pop-lista li svg { flex: none; color: rgb(var(--acento-claro-rgb)); }
.pop-lista li.ativo { background: rgba(var(--claro-rgb), .09); color: var(--texto-forte); }
.pop-lista li.escolhido { color: var(--texto-forte); font-weight: 600; background: rgba(var(--acento-rgb), .13); }
.pop-lista li.escolhido.ativo { background: rgba(var(--acento-rgb), .22); }
.pop-lista li.bloqueado { opacity: .4; cursor: default; }
.pop-lista li.pop-grupo { padding: 10px 11px 4px; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3); cursor: default; }
.pop-lista li.pop-nada { color: var(--texto-3); cursor: default; justify-content: center; }
.pop-busca { padding: 0 0 8px; margin-bottom: 6px; border-bottom: 1px solid var(--borda); }
.pop-busca input { width: 100%; padding: 8px 11px; border-radius: 11px; font-size: .88rem; }

.pop-calendario { width: 300px; max-width: calc(100vw - 16px); padding: 14px; overflow-y: auto; }
.cal-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.pop-orbe .cal-titulo { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; margin-left: -6px; border-radius: 10px; font-size: 1rem; font-weight: 600; color: var(--texto-forte); transition: background .18s; }
.pop-orbe .cal-titulo:not(:disabled):hover { background: rgba(var(--claro-rgb), .09); }
.pop-orbe .cal-titulo:disabled { cursor: default; }
.cal-titulo svg { color: var(--texto-3); }
.cal-topo > span { display: inline-flex; gap: 2px; }
.pop-orbe .cal-topo > span button { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--texto-2); transition: background .18s, color .18s; }
.pop-orbe .cal-topo > span button:hover { background: rgba(var(--claro-rgb), .09); color: var(--texto-forte); }
.cal-semana, .cal-dias { display: grid; grid-template-columns: repeat(7, 1fr); justify-items: center; }
.cal-semana span { padding: 4px 0 6px; font-size: .7rem; font-weight: 700; letter-spacing: .06em; color: var(--texto-3); }
.pop-orbe .cal-dias button { width: 36px; height: 36px; border-radius: 50%; font-size: .88rem; font-variant-numeric: tabular-nums; color: var(--texto); transition: background .15s, transform .15s; }
.pop-orbe .cal-dias button:hover:not(:disabled) { background: rgba(var(--claro-rgb), .1); transform: scale(1.06); }
.pop-orbe .cal-dias button.fora { color: var(--texto-3); opacity: .5; }
.pop-orbe .cal-dias button.hoje, .pop-orbe .cal-blocos button.hoje { box-shadow: inset 0 0 0 1px rgba(var(--acento-claro-rgb), .7); color: rgb(var(--acento-claro-rgb)); }
.pop-orbe .cal-dias button.escolhido, .pop-orbe .cal-blocos button.escolhido, .pop-orbe .cal-dias button.escolhido:hover:not(:disabled) {
  background: linear-gradient(180deg, rgb(var(--acento-claro-rgb)), rgb(var(--acento-rgb))); color: var(--primaria-texto); font-weight: 700; opacity: 1; box-shadow: 0 0 20px -4px rgba(var(--acento-rgb), .85);
}
.pop-orbe .cal-dias button:disabled, .pop-orbe .cal-blocos button:disabled { opacity: .25; cursor: default; }
.cal-blocos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pop-orbe .cal-blocos button { padding: 14px 0; border-radius: 12px; font-size: .9rem; text-transform: capitalize; transition: background .15s; }
.pop-orbe .cal-blocos button:hover:not(:disabled):not(.escolhido) { background: rgba(var(--claro-rgb), .1); }
.cal-rodape { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--borda); }
.pop-orbe .cal-rodape button { padding: 6px 12px; border-radius: 999px; font-size: .84rem; font-weight: 600; color: var(--texto-2); transition: background .18s, color .18s; }
.pop-orbe .cal-rodape button:hover:not(:disabled) { background: rgba(var(--claro-rgb), .09); color: var(--texto-forte); }
.pop-orbe .cal-rodape [data-hoje] { color: rgb(var(--acento-claro-rgb)); }
.pop-orbe .cal-rodape button:disabled { opacity: .35; cursor: default; }

.pop-cores { width: 216px; padding: 12px; gap: 10px; }
.cores-grade { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; justify-items: center; }
.pop-orbe .cores-grade button { width: 20px; height: 20px; padding: 0; border-radius: 50%; background: var(--cor); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); transition: transform .15s; }
.pop-orbe .cores-grade button:hover { transform: scale(1.2); }
.pop-orbe .cores-grade button.escolhido { box-shadow: 0 0 0 2px var(--superficie-pop), 0 0 0 4px var(--cor); }
.cores-codigo { display: flex; align-items: center; gap: 8px; }
.cores-codigo span { width: 26px; height: 26px; flex: none; border-radius: 8px; background: var(--cor); }
.cores-codigo input { width: 100%; padding: 6px 10px; border-radius: 10px; font-size: .84rem; font-variant-numeric: tabular-nums; text-transform: uppercase; }

.sugestoes-lista { border-radius: 16px; border-color: rgba(var(--claro-rgb), .16); background: linear-gradient(165deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .025) 45%), var(--superficie-pop); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 26px 60px -18px rgba(0, 0, 0, .95); }
.sugestoes-lista li { color: var(--texto-2); }
.sugestoes-lista li:hover, .sugestoes-lista li.ativo { color: var(--texto-forte); background: rgba(var(--claro-rgb), .09); }

.segmentado input:checked + span {
  color: var(--texto-forte);
  background: radial-gradient(100% 150% at 50% 130%, rgba(var(--acento-rgb), .42), rgba(var(--acento-rgb), .08) 55%, transparent 80%), linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02));
  box-shadow: inset 0 0 0 1px rgba(var(--acento-claro-rgb), .38), inset 0 1px 0 rgba(var(--claro-rgb), .25), 0 0 26px -8px rgba(var(--acento-rgb), .7);
}
* { scrollbar-width: thin; scrollbar-color: rgba(var(--claro-rgb), .2) transparent; }
::file-selector-button { font: inherit; font-weight: 600; color: var(--texto); background: rgba(var(--claro-rgb), .09); border: 1px solid var(--borda-forte); border-radius: 999px; padding: 5px 14px; margin-right: 10px; cursor: pointer; }

/* Quadro do Pipeline: criar pela etapa, recomendações e edição das etapas */
.kanban-mais { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; flex: none; border: 0; border-radius: 50%; font: inherit; font-size: 1rem; line-height: 1; color: var(--texto-3); background: rgba(var(--claro-rgb), .06); cursor: pointer; transition: background .18s, color .18s; }
.kanban-mais:hover { background: var(--cor); color: #0B0A0D; }
.kanban-lista { cursor: pointer; border-radius: 0 0 16px 16px; transition: background .18s; }
.kanban-lista:hover { background: color-mix(in srgb, var(--cor) 6%, transparent); }
.kanban-lista:hover .kanban-vazio { color: var(--texto-2); }
.kanban-indicacao { color: var(--texto-2); }
.kanban-indicacao b { color: var(--cor); font-weight: 600; }
.criar-opcoes { display: grid; gap: 10px; }
button.escolha-cartao { width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.reco-mini { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; flex: none; border-radius: 50%; font-size: .85rem; cursor: pointer; background: rgba(var(--claro-rgb), .06); border: 1px solid var(--borda-forte); transition: background .18s, border-color .18s; }
.reco-mini:hover { background: rgba(var(--acento-rgb), .2); border-color: rgba(var(--acento-rgb), .5); }
.etapas-nota { margin: 0 0 14px; }
.etapas-editor { display: grid; gap: 6px; margin-bottom: 12px; }
.etapa-linha { display: grid; grid-template-columns: auto auto minmax(0, 1fr) 130px 32px; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 14px; background: rgba(var(--claro-rgb), .03); border: 1px solid var(--borda); }
.etapa-mover { display: inline-flex; }
.etapa-mover .icone { width: 26px; height: 30px; }
.etapa-linha .etapa-nome { width: 100%; }
.etapa-grupo { font-size: .76rem; color: var(--texto-3); text-align: center; }
.etapa-fixa { font-size: .78rem; text-align: center; opacity: .55; }
.etapa-linha.removida { border-color: rgba(255, 93, 115, .35); background: var(--critico-fundo); }
.etapa-linha.removida > :not(.etapa-destino) { opacity: .4; pointer-events: none; }
.etapa-destino { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 2px 4px 4px; }
.etapa-destino select { flex: 1; min-width: 160px; }
@media (max-width: 620px) {
  .etapa-linha { grid-template-columns: auto auto minmax(0, 1fr) 32px; }
  .etapa-grupo, .etapa-linha select[data-g] { grid-column: 1 / -1; text-align: left; }
  .etapa-linha > :last-child:not(.etapa-destino) { grid-column: 4; grid-row: 1; }
}

/* Quadro de etapas do tamanho da área visível (a barra flutuante fica livre); cada coluna rola por dentro. */
.kanban { grid-auto-columns: minmax(250px, 1fr); grid-template-rows: minmax(0, 1fr); height: max(480px, calc(100dvh - 230px)); gap: 12px; }
.kanban-coluna { min-height: 0; }
.kanban-lista { overflow-y: auto; min-height: 0; }

/* Pessoas e empresas */
.chip-empresa { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 11px; border-radius: 999px; font: inherit; font-size: .78rem; color: var(--texto-2); background: rgba(var(--acento-rgb), .1); border: 1px solid rgba(var(--acento-rgb), .28); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .18s, color .18s; }
.chip-empresa:hover { background: rgba(var(--acento-rgb), .2); color: var(--texto-forte); }
.perfil-titulo .chip-empresa { margin-top: 8px; }
.socios-editor { display: grid; gap: 8px; margin-bottom: 12px; }
.socio-linha { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) 32px; align-items: center; gap: 8px; }
.socio-linha input, .socio-linha select { width: 100%; }
.socios-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 10px; }
.socio-cartao { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--borda); background: rgba(var(--claro-rgb), .03); }
.socio-dados { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.socio-dados small { overflow-wrap: anywhere; }
.socio-cartao .acoes { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.socio-cartao a.icone { text-decoration: none; display: inline-grid; place-items: center; }
.lista-linha { grid-template-columns: auto minmax(0, 1fr) 32px; }
.lista-linha.com-grupo { grid-template-columns: auto minmax(0, 1fr) 150px 32px; }
.listas-banco .tags { margin-top: 2px; }
.tabela select[data-mudar=banco-situacao] { padding-top: 6px; padding-bottom: 6px; font-size: .84rem; min-width: 150px; }
@media (max-width: 720px) {
  .socio-linha { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 32px; padding: 8px; border-radius: 14px; background: rgba(var(--claro-rgb), .03); }
  .socio-linha [data-s=nome] { grid-column: 1 / 3; }
  .socio-linha [data-tirar-socio] { grid-column: 3; grid-row: 1; }
  .socio-cartao { flex-wrap: wrap; }
}
@media (max-width: 720px) {
  .perfil-cliente { overflow-x: clip; }
  .prazo-contrato { flex-wrap: wrap; min-width: 0; }
  .prazo-contrato .selo { white-space: normal; }
}
.empresas-antigas { margin-top: 26px; }
.topo-pagina .seletor-visao + .sutil { margin-top: 8px; }

/* Círculo cromático */
.pop-cores { width: 252px; padding: 14px; gap: 12px; overflow-y: auto; }
.roda-cor { position: relative; width: 188px; height: 188px; margin: 2px auto 0; touch-action: none; }
.roda-cor canvas { display: block; width: 100%; height: 100%; border-radius: 50%; cursor: crosshair; box-shadow: 0 0 0 1px rgba(var(--claro-rgb), .16), 0 10px 30px -12px rgba(0, 0, 0, .9); }
.roda-cor i { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), 0 3px 8px rgba(0, 0, 0, .6); pointer-events: none; }
.cores-brilho { display: flex; align-items: center; gap: 10px; font-size: .76rem; color: var(--texto-3); }
.cores-brilho input { -webkit-appearance: none; appearance: none; flex: 1; height: 10px; padding: 0; border: 0; border-radius: 99px; background: linear-gradient(90deg, #000, var(--plena, #fff)); box-shadow: inset 0 0 0 1px rgba(var(--claro-rgb), .16); cursor: pointer; }
.cores-brilho input::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 3px 8px rgba(0, 0, 0, .6); }
.cores-brilho input::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: #fff; }
.cores-codigo span { background: transparent; }
.pop-orbe [data-conta-gotas] { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; color: var(--texto-2); background: rgba(var(--claro-rgb), .08); transition: background .18s, color .18s; }
.pop-orbe [data-conta-gotas]:hover { background: rgba(var(--acento-rgb), .28); color: var(--texto-forte); }
.cores-acoes { display: flex; justify-content: space-between; gap: 8px; }
.pop-orbe .cores-acoes button { padding: 7px 12px; border-radius: 999px; font-size: .84rem; font-weight: 600; color: var(--texto-2); }
.pop-orbe .cores-acoes [data-usar] { color: var(--primaria-texto); background: linear-gradient(180deg, rgb(var(--acento-claro-rgb)), rgb(var(--acento-rgb))); }
input[type=color].cor-livre { width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(var(--claro-rgb), .3); box-shadow: none; background: conic-gradient(#f33, #fc3, #3d6, #3cf, #36f, #c3f, #f33); transition: transform .15s; }
input[type=color].cor-livre:hover { transform: scale(1.14); }
input[type=color].cor-livre::-webkit-color-swatch-wrapper { padding: 0; }
input[type=color].cor-livre::-webkit-color-swatch { opacity: 0; }
input[type=color].cor-livre::-moz-color-swatch { opacity: 0; }
input[type=color].cor-livre.ativa { border-color: #fff; box-shadow: 0 0 0 2px var(--primaria, #fff); }

.virar-empresa, .trazer-dados { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 14px; border-radius: 14px; font-size: .88rem; color: var(--texto-2); background: rgba(var(--acento-rgb), .08); border: 1px solid rgba(var(--acento-rgb), .22); }

/* Lista dos cadastros */
.controles-visao { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.controles-visao .segmentado { margin: 0; }
.lista-cadastro { padding-top: 6px; }
.tabela-cadastros tbody tr[data-a] { cursor: pointer; transition: background .15s; }
.tabela-cadastros tbody tr[data-a]:hover { background: rgba(var(--claro-rgb), .05); }
.tabela-cadastros td { white-space: nowrap; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.tabela-cadastros td.acoes { overflow: visible; }
.celula-nome { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; }
.celula-nome .avatar { width: 30px; height: 30px; font-size: .72rem; border-radius: 10px; flex: none; }
.celula-nome .link { font-weight: 600; color: var(--texto); }
.th-ordenar { display: inline-flex; align-items: center; gap: 5px; padding: 2px 0; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; white-space: nowrap; }
.th-ordenar i { font-style: normal; opacity: .35; transition: opacity .15s; }
.th-ordenar:hover { color: var(--texto); }
.th-ordenar:hover i, .th-ordenar.ativa i { opacity: 1; }
.th-ordenar.ativa { color: rgb(var(--acento-claro-rgb)); }
.lista-total { margin: 10px 0 0; font-size: .8rem; }
.coluna-linha { grid-template-columns: auto minmax(0, 1fr); }
.coluna-linha .check-inline { font-size: .9rem; color: var(--texto); gap: 10px; }
@media (max-width: 720px) {
  .controles-visao { margin-left: 0; }
  .tabela-cadastros td { white-space: normal; max-width: none; }
}

/* Arrastar para ordenar */
.puxador { display: grid; place-items: center; width: 24px; height: 30px; flex: none; color: var(--texto-3); border-radius: 8px; cursor: grab; touch-action: none; transition: color .15s, background .15s; }
.puxador:hover { color: var(--texto); background: rgba(var(--claro-rgb), .08); }
.puxador:focus-visible { outline: 2px solid rgba(var(--acento-claro-rgb), .8); }
.ordenavel > * { user-select: none; -webkit-user-select: none; }
.ordenavel > * input, .ordenavel > * select { user-select: text; -webkit-user-select: text; }
.ordenavel > *:not(.removida) { cursor: grab; }
.ordenando, .ordenando * { cursor: grabbing !important; }
.ordenavel > .arrastando { position: relative; z-index: 2; border-color: rgba(var(--acento-claro-rgb), .7); background: rgba(var(--acento-rgb), .14); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .9), 0 0 24px -10px rgba(var(--acento-rgb), .8); }
.lista.ordenada[data-ordenar-etapas] > li { display: flex; align-items: center; gap: 10px; }
.lista.ordenada[data-ordenar-etapas] > li > div { flex: 1; min-width: 0; }

/* ---------- Pente fino de usabilidade ---------- */
.campo-oculto { display: none !important; }
details.secao-form.recolhida { border-top: 1px solid var(--borda); padding: 10px 0 2px; margin: 8px 0; }
details.secao-form.recolhida > summary { cursor: pointer; font-size: .86rem; font-weight: 600; color: var(--texto-2); list-style: none; display: flex; align-items: center; gap: 8px; padding: 2px 0 8px; }
details.secao-form.recolhida > summary::-webkit-details-marker { display: none; }
details.secao-form.recolhida > summary::before { content: '›'; font-size: 1.1rem; transition: transform .15s; }
details.secao-form.recolhida[open] > summary::before { transform: rotate(90deg); }
.bloco-etapa { border: 1px solid var(--borda); border-radius: 14px; padding: 12px 14px; margin-bottom: 14px; }
.bloco-etapa legend small { font-weight: 400; margin-left: 8px; }
.atividade-linha { display: grid; grid-template-columns: 1fr 1fr 2fr auto; gap: 8px; align-items: center; }
.obrig { color: var(--acento, #FF8A3D); margin-left: 3px; font-weight: 700; }
.campo-com-erro input, .campo-com-erro select, .campo-com-erro textarea { border-color: var(--critico, #FF5D73) !important; }
.erro-campo { color: var(--critico, #FF5D73); font-size: .76rem; }
.aviso-repetido { color: var(--alerta, #F2C14E); font-size: .76rem; }
.aviso-repetido:empty { display: none; }
.diferenca-valor { font-size: .8rem; color: var(--texto-3); }
.diferenca-valor.mais { color: var(--alerta, #F2C14E); }
.diferenca-valor.menos { color: var(--positivo, #45D49A); }
.dica-titular { font-size: .84rem; color: var(--texto-2); margin: 0; }
.info-campo { all: unset; cursor: pointer; display: inline-flex; margin-left: 5px; color: var(--texto-3); vertical-align: -2px; }
.info-campo:hover, .info-campo:focus-visible { color: var(--texto); }
.info-campo svg { width: 13px; height: 13px; }
.info-balao { display: block; position: absolute; z-index: 30; max-width: 260px; margin-top: 4px; padding: 8px 10px; border-radius: 10px; background: var(--superficie-pop); border: 1px solid var(--borda-forte); color: var(--texto); font-size: .8rem; font-weight: 400; line-height: 1.35; box-shadow: 0 10px 28px rgba(0, 0, 0, .45); white-space: normal; }
.campo > span { position: relative; }
.modal-confirma { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .55); border-radius: inherit; z-index: 40; }
.modal-confirma > div { background: var(--superficie-pop); border: 1px solid var(--borda-forte); border-radius: 16px; padding: 20px 22px; max-width: 420px; }
.modal-confirma p { margin: 6px 0 14px; }
.faixa-filtro { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--texto-2); padding: 3px 12px; border: 1px solid var(--borda); border-radius: 999px; margin-bottom: 10px; }
.editavel { cursor: text; border-radius: 6px; padding: 0 3px; margin: 0 -3px; display: inline-flex; align-items: center; gap: 5px; max-width: 100%; }
.editavel:hover { background: rgba(255, 255, 255, .05); }
.editavel em { font-style: normal; color: var(--texto-3); font-weight: 400; font-size: .86em; }
.editavel .lapis { width: .78em; height: .78em; opacity: 0; color: var(--texto-3); flex: none; transition: opacity .12s; }
.editavel:hover .lapis, .editavel:focus-visible .lapis { opacity: 1; }
@media (hover: none) { .editavel .lapis { opacity: .5; } }
.editavel.editando { background: none; display: inline-block; min-width: 140px; }
.editavel input, .editavel select, .editavel textarea { font: inherit; width: 100%; min-width: 120px; padding: 3px 7px; }
.foto-menu { position: relative; }
.foto-menu > summary { list-style: none; cursor: pointer; }
.foto-menu > summary::-webkit-details-marker, .redes-lista > summary::-webkit-details-marker { display: none; }
.foto-pop { position: absolute; z-index: 25; margin-top: 6px; display: flex; flex-direction: column; gap: 8px; padding: 12px; min-width: 200px; border-radius: 14px; background: var(--superficie-pop); border: 1px solid var(--borda-forte); box-shadow: 0 14px 34px rgba(0, 0, 0, .5); }
.foto-pop a { display: flex; align-items: center; gap: 8px; color: var(--texto); text-decoration: none; font-size: .88rem; }
.redes-lista { position: relative; }
.redes-lista > summary { list-style: none; cursor: pointer; }
.redes-icones { display: inline-flex; gap: 2px; align-items: center; }
.rede-linha { display: grid; grid-template-columns: 130px 1fr auto; gap: 8px; margin-bottom: 8px; }
.opcoes-proposta { display: flex; flex-direction: column; gap: 8px; }
.opcao-proposta { display: flex; gap: 10px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 12px; cursor: pointer; }
.opcao-proposta span { display: flex; flex-direction: column; }
.ligacoes { margin-top: 14px; border-top: 1px solid var(--borda); padding-top: 12px; }
.ligacao { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; flex-wrap: wrap; }
th.sel, td.sel { width: 32px; }
.barra-lote { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid var(--borda); position: sticky; bottom: 0; background: var(--superficie-pop); }
.tabela-ferramentas { display: flex; justify-content: flex-end; gap: 12px; margin-bottom: 4px; }
.col-oculta { display: none !important; }
.ordenavel-th { cursor: pointer; user-select: none; }
.ordenavel-th:hover { color: var(--texto); }
.ordenavel-th[data-seta]:not([data-seta=""])::after { content: ' ' attr(data-seta); }
.recolhivel > header h2 { cursor: pointer; }
.recolhivel > header h2::before { content: '▾'; font-size: .7em; margin-right: 7px; color: var(--texto-3); display: inline-block; transition: transform .15s; }
.recolhivel.recolhido > header h2::before { transform: rotate(-90deg); }
.recolhivel.recolhido > *:not(header) { display: none; }
.grupos-banco { margin-bottom: 10px; }
.linha-campos { display: grid; grid-template-columns: 22px 1fr 80px 90px; align-items: center; gap: 10px; }
.linha-campos.cabecalho { font-size: .76rem; color: var(--texto-3); padding: 12px 10px 2px; }
.linha-extra { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; margin-bottom: 8px; }
.busca-menu { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 8px; margin: 6px 10px; padding: 7px 10px; border: 1px solid var(--borda); border-radius: 10px; color: var(--texto-2); font-size: .84rem; }
.busca-menu:hover { color: var(--texto); }
.busca-menu kbd { margin-left: auto; font: inherit; font-size: .72rem; color: var(--texto-3); }
#busca-geral { width: min(620px, calc(100vw - 32px)); margin: 12vh auto 0; padding: 0; border: 1px solid var(--borda-forte); border-radius: 16px; background: var(--superficie-pop); color: var(--texto); overflow: hidden; }
#busca-geral::backdrop { background: rgba(0, 0, 0, .55); }
#busca-geral input { width: 100%; box-sizing: border-box; padding: 14px 16px; border: 0; border-bottom: 1px solid var(--borda); background: none; color: inherit; font: inherit; font-size: 1rem; outline: none; }
#busca-geral ul { list-style: none; margin: 0; padding: 6px; max-height: 50vh; overflow: auto; }
#busca-geral li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
#busca-geral li.ativo, #busca-geral li:hover { background: rgba(255, 255, 255, .07); }
#busca-geral li small { margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.kanban-cartao.negocio { border-left: 2px solid var(--cor, currentColor); }
@media (max-width: 640px) { .atividade-linha { grid-template-columns: 1fr; } .rede-linha { grid-template-columns: 1fr auto; } .linha-campos { grid-template-columns: 22px 1fr 60px 70px; } }
@media (max-width: 720px) { .busca-menu { margin: 0; padding: 7px; border: 0; flex: none; } .busca-menu .rot { display: none; } }
/* ---------- Entrar com o Google ---------- */
.botao-google { display: flex; justify-content: center; min-height: 44px; }
.ou-google { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 22px; }
.erro-google { text-align: center; }
.entrar-google .escolha-topo { margin-bottom: 26px; }
.google-novo { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.google-novo input { flex: 1; min-width: 200px; }
.google-linha .tags { margin-top: 8px; }
/* ---------- Saldo, partes e quatro números ---------- */
.corrigir-saldo.alerta { color: var(--alerta, #F2C14E); }
.quatro-numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 14px 0 6px; cursor: pointer; }
.quatro-numeros div { display: flex; flex-direction: column; gap: 2px; }
.quatro-numeros span { font-size: .8rem; color: var(--texto-2); }
.quatro-numeros strong { font-size: 1.1rem; font-weight: 600; }
.quatro-numeros small { font-size: .74rem; color: var(--texto-3); }
.saldo-previsto { display: block; margin-top: 4px; }
.periodo-nome { display: block; margin-bottom: 8px; }
.seletor-periodo { max-width: 240px; }
.partes-pagamento [data-lista-partes] { display: flex; flex-direction: column; gap: 8px; }
.parte-linha { display: grid; grid-template-columns: minmax(110px, 1fr) 150px minmax(140px, 1.2fr) auto auto auto; gap: 8px; align-items: center; }
.parte-parcelas { display: inline-flex; align-items: center; gap: 4px; }
.parte-parcelas input { width: 56px; }
.partes-rodape { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
@media (max-width: 720px) {
  .quatro-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .parte-linha { grid-template-columns: 1fr 1fr; padding: 10px; border: 1px solid var(--borda); border-radius: 12px; }
  .parte-linha select { grid-column: 1 / -1; }
}
/* ==================== Celular (até 767 px): layout aprovado em 11/11/2026 ==================== */
#barra-celular { display: none; }
@media (max-width: 767.98px) {
  /* Leveza: sem desfoque de vidro e sem as camadas animadas do fundo. */
  :is(.vidro, .painel, .kpi, dialog, .foto-pop, .modal-confirma > div) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  :is(.vidro, .painel, .kpi)::before, :is(.vidro, .painel, .kpi)::after { display: none !important; }
  .painel, .kpi, .vidro { background: var(--superficie-pop, #1C1815) !important; }
  #cosmos .camada:not(.nebulosa), #cosmos .grao, #cosmos .poeira { display: none !important; }
  #cosmos .camada { will-change: auto; transform: none !important; }
  dialog::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(4, 3, 6, .8); }

  /* Barra de baixo: 5 botões só com ícone; o + no meio, maior. */
  .lateral { display: none !important; }
  #barra-celular { display: flex; position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 60; justify-content: space-around; align-items: center; padding: 6px 10px; border-radius: 999px; background: rgba(22, 19, 18, .96); border: 1px solid var(--borda-forte); box-shadow: 0 14px 40px -12px rgba(0, 0, 0, .8); }
  #barra-celular button { all: unset; box-sizing: border-box; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: var(--texto-2); cursor: pointer; }
  #barra-celular button.ativo { color: var(--texto); background: rgba(255, 255, 255, .08); }
  #barra-celular button svg.i { width: 24px; height: 24px; }
  #barra-celular .mais-lancar { width: 58px; height: 58px; margin-top: -18px; background: var(--acento, #5C9DFF); color: #fff; box-shadow: 0 10px 26px -8px var(--acento, #5C9DFF); }
  #barra-celular .mais-lancar svg.i { width: 28px; height: 28px; }
  main { padding: 18px 16px calc(110px + env(safe-area-inset-bottom)) !important; }
  #avisos { bottom: calc(90px + env(safe-area-inset-bottom)); }
  .menu-celular { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
  .item-menu-celular { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--borda); cursor: pointer; font-size: 15px; }
  .item-menu-celular svg.i { width: 22px; height: 22px; flex: none; }
  .lancar-opcoes { display: flex; flex-direction: column; gap: 10px; }
  .lancar-opcoes .escolha-cartao { min-height: 64px; }

  /* Letras: nada abaixo de 13 px; rótulos sem maiúsculas forçadas. */
  body { font-size: 16px; }
  :is(small, .sutil, .tag, .selo, .chip, th, .kpi span, .rotulo-h, .campo > span, .campo > small, .menu a, .lista li small, .cat-legenda small, .legenda-fluxo, .fluxo-eixo, .cd-linha span, .nota) { font-size: max(13px, 1em) !important; }
  :is(.rotulo-h, .kpi > span, th, .tabela td[data-r]::before) { text-transform: none !important; letter-spacing: 0 !important; }
  .rs, .cent { font-size: .6em; }
  .kpi > span { font-size: 13px !important; }

  /* Topo das telas enxuto. */
  .so-desktop { display: none !important; }
  .topo-pagina { gap: 10px; margin-bottom: 14px; }
  .topo-pagina h1 { font-size: 1.7rem !important; }
  .topo-pagina .sutil { font-size: 14px; }
  .topo-pagina .acoes-rapidas { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
  .topo-pagina .acoes-rapidas > .btn { flex: 1 1 auto; min-height: 44px; }
  .mais-acoes, .filtrar { position: relative; }
  .mais-acoes > summary, .filtrar > summary { list-style: none; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
  .mais-acoes > summary::-webkit-details-marker, .filtrar > summary::-webkit-details-marker { display: none; }
  .mais-acoes .foto-pop { right: 0; left: auto; min-width: 220px; }
  .mais-acoes .foto-pop .btn { width: 100%; justify-content: flex-start; min-height: 44px; }
  .filtrar { margin-bottom: 12px; }
  .filtrar[open] > .barra-filtros { margin-top: 10px; flex-direction: column; align-items: stretch; }
  .seletor-visao { transform: scale(.88); transform-origin: left center; }
  .seletor-visao button { min-height: 36px; }
  .btn, button.link, .segmentado label span { min-height: 40px; }

  /* Números em faixa que desliza. */
  .kpis { display: grid !important; grid-auto-flow: column; grid-template-columns: none !important; grid-auto-columns: 74%; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; padding-bottom: 4px; }
  .kpi { scroll-snap-align: start; padding: 14px 16px; }
  .kpi strong { font-size: 1.5rem !important; }

  /* Listas: informações em cima, botões numa linha embaixo, sem sobrepor. */
  .lista li { flex-wrap: wrap; align-items: flex-start; gap: 8px; padding: 14px 0; }
  .lista li > div { flex: 1 1 60%; }
  .lista li > .acoes, .lista li > span.acoes { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; }
  .lista li > .acoes .btn { min-height: 40px; }

  /* Tabelas de contas: uma linha por item (nome e valor em destaque, vencimento embaixo, botão ao lado). */
  .tabela:not(.itens):not(.grade-assin) tr { grid-template-columns: minmax(0, 1fr) auto !important; gap: 2px 12px; padding: 12px 0; }
  .tabela:not(.itens):not(.grade-assin) td[data-r]::before { display: none !important; }
  .tabela:not(.itens):not(.grade-assin) td[data-r="Conta"], .tabela:not(.itens):not(.grade-assin) td[data-r="Trabalho"] { grid-column: 1; grid-row: 1; font-weight: 600; }
  .tabela:not(.itens):not(.grade-assin) td[data-r="Valor"], .tabela:not(.itens):not(.grade-assin) td[data-r="Valor hoje"] { grid-column: 2; grid-row: 1; text-align: right; font-weight: 600; font-size: 1.05rem; }
  .tabela:not(.itens):not(.grade-assin) td[data-r="Vencimento"], .tabela:not(.itens):not(.grade-assin) td[data-r="Data"] { grid-column: 1; font-size: 13px; color: var(--texto-2); }
  .tabela:not(.itens):not(.grade-assin) td[data-r="Multa"], .tabela:not(.itens):not(.grade-assin) td[data-r="Juros/dia"], .tabela:not(.itens):not(.grade-assin) td[data-r="Ordem"] { display: none; }
  .tabela:not(.itens):not(.grade-assin) td.acoes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }

  /* Janelas em tela cheia, com os botões presos embaixo. */
  dialog, dialog.largo, dialog.extra-largo { width: 100vw !important; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; inset: 0; }
  .modal-form { max-height: 100dvh; height: 100dvh; }
  .modal-topo { padding: 14px 16px; position: sticky; top: 0; z-index: 4; background: inherit; }
  .modal-corpo { flex: 1; padding: 16px; }
  .modal-rodape { position: sticky; bottom: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); flex-wrap: wrap; background: var(--superficie-pop, #1C1815); }
  .modal-rodape .btn { flex: 1 1 40%; min-height: 48px; }
  .grade-2, .grade-3 { grid-template-columns: 1fr !important; }
  .segmentado { flex-wrap: wrap; }
  .campo input, .campo select, .campo textarea { min-height: 46px; font-size: 16px; }

  /* Visão geral: atraso e saldo primeiro. */
  .hero-grade { display: flex !important; flex-direction: column; gap: 12px; }
  .h-atraso.critico { order: -2; }
  .h-saldo { order: -1; }
  .h-atraso.ok { order: 5; }
  .barra-periodo { flex-wrap: wrap; gap: 8px; }

  /* Clientes em linhas compactas. */
  body[data-view="clientes"] .grade-cartoes { grid-template-columns: 1fr !important; gap: 8px; }
  body[data-view="clientes"] .cartao-cadastro { padding: 12px 14px; gap: 6px; }
  body[data-view="clientes"] .cartao-cadastro .avatar:not(.enorme) { width: 40px; height: 40px; }
  body[data-view="clientes"] .cartao-cadastro.sem-valores .cartao-numeros { display: none; }
  body[data-view="clientes"] .cartao-cadastro .cartao-numeros { grid-template-columns: 1fr 1fr !important; gap: 4px; }
  body[data-view="clientes"] .cartao-cadastro .cartao-numeros strong { font-size: 1rem; }
  body[data-view="clientes"] .cartao-cadastro footer small:first-child, body[data-view="clientes"] .cartao-cadastro .tags { display: none; }

  /* Pipeline: etapas em abas, lista normal embaixo. */
  .etapas-celular { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 10px; }
  .etapas-celular button { flex: none; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--borda); background: none; color: var(--texto-2); }
  .etapas-celular button.ativa { color: var(--texto); border-color: var(--cor, var(--borda-forte)); background: rgba(255, 255, 255, .06); }
  .lista-etapa-celular { display: flex; flex-direction: column; gap: 10px; }
  .lista-etapa-celular .kanban-cartao { width: 100%; }

  /* Blocos recolhidos mostram só o título. */
  .recolhivel.recolhido { padding-bottom: 14px; }
}
@media (max-width: 767.98px) { body[data-view="pipeline"] .kanban { display: none; } }
@media (max-width: 767.98px) {
  .lista-carrinho, .lista-carrinho li, .item-pegar, .item-info { min-width: 0; max-width: 100%; box-sizing: border-box; }
  .item-pegar { width: 100%; }
  .item-info strong, .item-info small { overflow-wrap: anywhere; }
  body[data-view="mercado"] .painel { overflow-x: hidden; }
}
/* ==================== Celular · acabamento (vidro, alinhamento, hierarquia) ==================== */
.saldo-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.h-saldo .h-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.h-saldo .seletor-periodo { width: auto; min-height: 34px; padding: 0 30px 0 12px; border-radius: 999px; font-size: 13px; }
.saldo-grafico { margin: 10px -4px 4px; }
@media (max-width: 767.98px) {
  :root { --g: 16px; --r-card: 22px; --vidro-m: linear-gradient(180deg, rgba(var(--claro-rgb), .075), rgba(var(--claro-rgb), .025)); --borda-m: rgba(var(--claro-rgb), .11); }
  main { padding: 14px var(--g) calc(112px + env(safe-area-inset-bottom)) !important; }
  /* Vidro leve (sem desfoque, que pesa no celular). */
  .painel, .kpi, .vidro { background: var(--vidro-m) !important; border: 1px solid var(--borda-m) !important; border-radius: var(--r-card) !important; box-shadow: 0 18px 40px -28px rgba(0, 0, 0, .9) !important; }
  .painel { padding: var(--g) !important; margin-bottom: 12px; }
  .painel > header { margin-bottom: 10px; gap: 10px; align-items: center; }
  .painel > header h2 { font-size: 1.02rem; font-weight: 500; letter-spacing: 0; }
  .painel > header small { font-size: 13px; }
  .recolhivel.recolhido { padding: 14px var(--g) !important; }
  .recolhivel.recolhido > header { margin: 0; }
  /* Botões translúcidos, todos da mesma altura. */
  .btn, .mais-acoes > summary.btn, .filtrar > summary.btn { min-height: 40px; height: auto; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 500; background: rgba(var(--claro-rgb), .07) !important; border: 1px solid rgba(var(--claro-rgb), .14) !important; box-shadow: none !important; color: var(--texto) !important; }
  .btn.primario { background: rgba(var(--acento-rgb), .2) !important; border-color: rgba(var(--acento-rgb), .5) !important; }
  .btn.positivo, .btn-whats { background: rgba(69, 212, 154, .14) !important; border-color: rgba(69, 212, 154, .4) !important; }
  .btn.perigo { background: rgba(255, 93, 115, .12) !important; border-color: rgba(255, 93, 115, .4) !important; }
  .btn.pequeno { min-height: 36px; padding: 0 12px; font-size: 13.5px; }
  .btn svg.i { width: 16px; height: 16px; }
  /* Títulos e números com hierarquia clara. */
  .topo-pagina { margin-bottom: 12px; }
  .topo-pagina h1 { font-size: 1.6rem !important; font-weight: 300; }
  .topo-pagina > div > .sutil { display: none; }
  .saudacao .rotulo-h { font-size: 12px !important; color: var(--texto-3); }
  .saudacao h1 { font-size: 1.7rem !important; font-weight: 300; }
  .saudacao-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .hero { padding-top: 6px !important; }
  .hero-topo { margin-bottom: 12px; }
  .faixa-filtro { font-size: 12.5px; padding: 2px 10px; margin-bottom: 8px; }
  .kpi { padding: 14px var(--g) !important; gap: 4px; }
  .kpi > span { font-size: 12.5px !important; color: var(--texto-3); }
  .kpi strong { font-size: 1.35rem !important; font-weight: 400; }
  .kpi small { font-size: 12.5px !important; }
  /* Home: o gráfico do saldo é a estrela; o resto é apoio. */
  .h-saldo { padding: 18px var(--g) 16px !important; }
  .h-saldo .saldo-grande { font-size: 2.6rem !important; line-height: 1.05; }
  .h-saldo .saldo-grafico svg, .h-saldo .saldo-grafico canvas { min-height: 170px; }
  .h-saldo .fluxo-eixo { gap: 12px; flex-wrap: wrap; font-size: 12.5px !important; margin-bottom: 8px; }
  .quatro-numeros { gap: 10px 14px; padding-top: 12px; border-top: 1px solid var(--borda-m); }
  .quatro-numeros span { font-size: 12.5px; color: var(--texto-3); }
  .quatro-numeros strong { font-size: 1.02rem; font-weight: 500; }
  .h-mini, .h-cartao, .h-proximos { padding: 16px var(--g) !important; }
  .h-atraso.ok { display: none; }
  .corrigir-saldo { font-size: 12.5px !important; }
  /* Listas: respiro e botões numa linha só. */
  .lista li { padding: 14px 0; gap: 6px 10px; }
  .lista li strong { font-weight: 500; }
  .lista li > .acoes, .lista li > span.acoes { flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding-bottom: 2px; }
  .lista li > .acoes .btn { flex: none; min-height: 34px; padding: 0 12px; font-size: 13px; }
  .etapa-chip, .selo, .tag { font-size: 12px !important; }
  /* Formulários alinhados. */
  .modal-topo h2 { font-size: 1.15rem; font-weight: 500; }
  .campo { gap: 6px; }
  .campo > span { font-size: 13px !important; color: var(--texto-2); font-weight: 500; }
  .campo input, .campo select, .campo textarea, .entrada-prefixo { border-radius: 14px; }
  .modal-corpo .grade-2 { gap: 14px; }
  .secao-form legend, details.secao-form > summary { font-size: 13px; letter-spacing: 0; }
  /* Barra de baixo de vidro. */
  #barra-celular { background: rgba(18, 16, 15, .55); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); border: 1px solid rgba(var(--claro-rgb), .12); }
  #barra-celular .mais-lancar { background: rgba(var(--acento-rgb), .85); }
}
@media (max-width: 767.98px) {
  .menu-perfil .acoes-rapidas.vertical { display: flex; flex-direction: column; gap: 10px; width: 100%; }
  .menu-perfil .acoes-rapidas.vertical .btn { width: 100%; min-height: 48px; white-space: normal; text-align: left; padding: 10px 16px; line-height: 1.3; position: relative; z-index: 1; pointer-events: auto; }
}
@media (max-width: 767.98px) {
  .h-saldo .rotulo-h { white-space: nowrap; }
  .h-saldo .saldo-linha { flex-direction: column; align-items: flex-start; gap: 4px; }
  main:has(.h-saldo) .faixa-filtro { display: none; }
}
@media (max-width: 767.98px) { .h-saldo .saldo-linha > * { margin-left: 0 !important; align-self: flex-start; text-align: left; } }
@media (max-width: 767.98px) {
  #modal { background: rgba(14, 14, 20, .97) !important; }
  #modal::backdrop { background: rgba(0, 0, 0, .6); }
}
@media (max-width: 767.98px) {
  .lista li > .acoes, .lista li > span.acoes { scrollbar-width: none; gap: 6px; }
  .lista li > .acoes::-webkit-scrollbar { display: none; }
  .lista li > .acoes .btn { flex: 1 1 auto; min-width: 0; padding: 0 10px; font-size: 13px; gap: 6px; }
  .lista li > .acoes .btn svg.i { width: 15px; height: 15px; }
}
@media (max-width: 767.98px) { #modal .campo > select { width: 100%; } }
/* ==================== Agenda (Hoje) ==================== */
.agenda .abas-agenda { display: flex; gap: 4px; padding: 4px; margin-bottom: 14px; border-radius: 999px; background: rgba(var(--claro-rgb), .05); border: 1px solid var(--borda); width: max-content; max-width: 100%; }
.agenda .abas-agenda button { border: 0; background: transparent; color: var(--texto-2); font: inherit; font-size: 13.5px; padding: 7px 16px; border-radius: 999px; cursor: pointer; }
.agenda .abas-agenda button.ativa { background: rgba(var(--acento-rgb), .22); color: var(--texto); box-shadow: inset 0 0 0 1px rgba(var(--acento-rgb), .45); }
.ag-dia + .ag-dia { margin-top: 14px; }
.ag-dia h3 { font-size: 12.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.ag-dia h3 span { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: rgba(var(--claro-rgb), .08); color: var(--texto-2); letter-spacing: 0; }
.ag-dia.atrasado h3 { color: var(--critico, #ff5d73); }
.ag-lista { list-style: none; margin: 0; padding: 0; }
.ag-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(var(--claro-rgb), .06); }
.ag-item:first-child { border-top: 0; }
.ag-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; cursor: default; }
.ag-texto[data-a] { cursor: pointer; }
.ag-texto strong { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.ag-texto small { font-size: 12.5px; color: var(--texto-3); }
.ag-check { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid rgba(var(--claro-rgb), .3); background: transparent; color: var(--texto); font-size: 13px; cursor: pointer; display: grid; place-items: center; }
.ag-item.feita .ag-check { background: rgba(var(--acento-rgb), .3); border-color: rgba(var(--acento-rgb), .7); }
.ag-item.feita strong { text-decoration: line-through; color: var(--texto-3); }
.ag-hora { flex: none; width: 54px; font-size: 12.5px; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.ag-hora.saida { color: var(--critico, #ff5d73); } .ag-hora.entrada { color: var(--positivo, #45d49a); }
.ag-g { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 4px; font-size: 9.5px; font-weight: 700; background: rgba(var(--claro-rgb), .1); color: var(--texto-2); vertical-align: 1px; margin-left: 2px; }
.ag-vazio { margin: 2px 0 0; font-size: 13px; }
.ag-rodape { margin-top: 14px; padding-top: 10px; border-top: 1px solid rgba(var(--claro-rgb), .06); display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.ag-rodape .link { font-size: 12.5px; }
.passos { padding-left: 18px; display: grid; gap: 6px; margin: 8px 0 14px; }
.campo.check { flex-direction: row; align-items: flex-start; gap: 10px; }
.campo.check span { font-weight: 400 !important; }
@media (max-width: 767.98px) {
  .agenda .abas-agenda { width: 100%; }
  .agenda .abas-agenda button { flex: 1; padding: 8px 4px; }
  .ag-item { padding: 12px 0; }
  .ag-item .btn { flex: none; }
}
/* Convidado: sem lançar e sem atalhos de dono. */
body.convidado #barra-celular [data-a="lancar"], body.convidado .so-dono { display: none !important; }
.check-linha { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; font-weight: 400; }
.check-linha input { margin-top: 3px; }
.perfil-acesso .tags { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.check-linha input[type="checkbox"], .campo.check input[type="checkbox"] { width: 20px !important; height: 20px !important; min-height: 0 !important; flex: none; padding: 0 !important; margin: 2px 0 0; border-radius: 6px; accent-color: rgb(var(--acento-rgb)); }
fieldset.campo { border: 0; padding: 0; margin: 0; min-width: 0; }
/* Atalhos da Siri */
.siri-atalhos { display: grid; gap: 10px; margin: 6px 0 14px; }
@media (min-width: 768px) { .siri-atalhos { grid-template-columns: repeat(3, 1fr); } }
.siri-atalho { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 16px; text-decoration: none; color: var(--texto); background: rgba(var(--acento-rgb), .1); border: 1px solid rgba(var(--acento-rgb), .35); }
.siri-atalho strong { font-weight: 500; }
.siri-atalho small { font-size: 12.5px; }
.siri-codigo { padding: 14px; border-radius: 14px; background: rgba(var(--claro-rgb), .06); border: 1px solid var(--borda); word-break: break-all; margin: 10px 0; }
.siri-codigo code { font-size: 14px; user-select: all; -webkit-user-select: all; }
.siri-alternativa { font-size: 12.5px; margin: -4px 0 14px; }
.siri-alternativa a { color: var(--texto-2); }
/* Celular: janelas aparecem na hora, sem animação (evita janela invisível no iPhone). */
@media (max-width: 767.98px) { dialog[open] { animation: none !important; opacity: 1 !important; transform: none !important; } }
/* Celular: a tela nova aparece inteira na hora (sem começar invisível). */
@media (max-width: 767.98px) { #conteudo.entrando > *, #conteudo.entrando .surgir { animation: none !important; } }
.linha-menu { display: flex; align-items: center; gap: 12px; }
.linha-menu input[data-ver] { width: 20px; height: 20px; min-height: 0; padding: 0; flex: none; accent-color: rgb(var(--acento-rgb)); }
.linha-menu .nome-menu { flex: 1; min-width: 0; min-height: 40px; background: transparent; border: 1px solid transparent; border-radius: 12px; padding: 0 10px; color: var(--texto); font: inherit; }
.linha-menu .nome-menu:hover, .linha-menu .nome-menu:focus { border-color: var(--borda); background: rgba(var(--claro-rgb), .04); outline: none; }
/* ===== Tela de escolha de perfil (pedido 5) ===== */
body.tela-perfis #barra-celular { display: none !important; }
.logo-orbe { width: 84px; height: 84px; border-radius: 24px; box-shadow: 0 0 0 1px rgba(var(--claro-rgb), .12), 0 20px 50px -18px rgba(var(--acento-rgb), .7), 0 0 60px -20px rgba(var(--acento-rgb), .8); }
.escolha-perfil .escolha-topo h1 { font-size: clamp(1.9rem, 6vw, 3rem); }
.entrar-google { gap: 28px; }
.entrar-google [data-botao-google] { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; }
.escolha-pergunta { font-size: 1.15rem; font-weight: 400; color: var(--texto-2); margin: 0; }
.entrar-google.escolhendo .escolha-topo > p { display: none; }
.cartao-perfil small { font-size: 12.5px; }
.conta-google { font-size: 13px; margin: 0; }
.conta-google .link { font-size: 13px; }
.escolha-rodape { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 767.98px) {
  .escolha-perfil { min-height: 100dvh; padding: 48px 20px calc(32px + env(safe-area-inset-bottom)); gap: 26px; justify-content: center; }
  .grade-perfis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: 100%; max-width: 420px; }
  .grade-perfis > :only-child { grid-column: 1 / -1; justify-self: center; width: 60%; }
  .cartao-perfil { width: auto; min-height: 190px; padding: 22px 12px; }
  .cartao-perfil strong { font-size: 1.05rem; font-weight: 500; line-height: 1.25; }
}
/* ===== Janelas e formulários com identidade (pedidos 9 e 10) ===== */
/* Botões do rodapé por importância: principal aceso, "criar outro" com contorno, Cancelar em vermelho. */
.modal-rodape .btn.primario { background: linear-gradient(135deg, rgb(var(--acento-rgb)), rgba(var(--acento-rgb), .72)) !important; color: #fff !important; font-weight: 600; border-color: transparent !important; box-shadow: 0 12px 30px -12px rgba(var(--acento-rgb), .95), inset 0 1px 0 rgba(255, 255, 255, .3) !important; }
.modal-rodape [data-botao="__outro"] { background: rgba(var(--acento-rgb), .08) !important; border: 1px solid rgba(var(--acento-rgb), .55) !important; color: var(--brasa-clara, #A9CBFF) !important; }
.modal-rodape .btn.cancelar { background: rgba(255, 93, 115, .08) !important; border: 1px solid rgba(255, 93, 115, .45) !important; color: #FF8C9B !important; }
.modal-rodape:has(.perigo) .btn.cancelar { background: rgba(var(--claro-rgb), .06) !important; border-color: rgba(var(--claro-rgb), .16) !important; color: var(--texto) !important; }
.modal-topo .icone:focus { outline: none; box-shadow: none; }
.modal-topo .icone { width: 38px; height: 38px; border-radius: 50%; background: rgba(var(--claro-rgb), .07); border: 1px solid rgba(var(--claro-rgb), .12); }
/* Interruptor (liga/desliga) no lugar da caixinha esticada, alinhado à esquerda com o texto. */
.campo.check { flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 12px !important; text-align: left; }
.campo.check > span { font-weight: 400 !important; color: var(--texto) !important; text-align: left; }
.campo.check input[type="checkbox"] { order: -1; -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 46px !important; height: 28px !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border-radius: 999px !important; background: rgba(var(--claro-rgb), .12) !important; border: 1px solid rgba(var(--claro-rgb), .2) !important; box-shadow: none !important; cursor: pointer; transition: background .2s, box-shadow .2s; }
.campo.check input[type="checkbox"]::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .45); transition: transform .2s; }
.campo.check input[type="checkbox"]:checked { background: rgb(var(--acento-rgb)) !important; border-color: transparent !important; box-shadow: 0 0 16px -3px rgba(var(--acento-rgb), .8) !important; }
.campo.check input[type="checkbox"]:checked::after { transform: translateX(18px); }
@media (max-width: 767.98px) {
  /* Fundo do tema (nebulosa azul), não cinza. */
  #modal { background: radial-gradient(120% 55% at 85% -5%, rgba(var(--acento-rgb), .22), transparent 60%), radial-gradient(90% 45% at -10% 105%, rgba(183, 155, 255, .14), transparent 60%), linear-gradient(180deg, var(--superficie-2, #0E1628), var(--fundo, #02040A)) !important; }
  #modal .modal-topo { background: rgba(4, 8, 18, .55) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(var(--claro-rgb), .07); }
  #modal .modal-rodape { background: linear-gradient(180deg, rgba(2, 4, 10, 0), rgba(2, 4, 10, .9) 35%) !important; border-top: 0; }
  /* Janelas de escolha (sem formulário): fecha pelo X ou tocando fora, sem o botão gigante. */
  #modal .modal-rodape:has(> .btn[data-fechar]:only-child) { display: none; }
  /* Campos: largura total, respiro igual. */
  #modal .campo > select, #modal .campo > input, #modal .campo > .entrada-prefixo { width: 100%; }
  #modal .modal-corpo .grade-2, #modal .modal-corpo .grade-3 { gap: 18px; }
  /* Opções (forma de pagamento etc.): grade de botões iguais, marcador sempre dentro da caixa. */
  #modal .segmentado { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; border-radius: 16px; padding: 4px; gap: 4px; }
  #modal .segmentado:has(> label:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #modal .segmentado:has(> label:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #modal .segmentado label { min-width: 0; }
  #modal .segmentado span { border-radius: 12px; text-align: center; padding: 10px 6px; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Painel que sobe de baixo (botão + e menu). */
  dialog.folha { top: auto !important; bottom: 0 !important; height: auto !important; max-height: 88dvh !important; border-radius: 28px 28px 0 0 !important; }
  dialog.folha .modal-form { height: auto !important; max-height: 88dvh; }
  dialog.folha .modal-topo { border-radius: 28px 28px 0 0; }
  dialog.folha::before { content: ''; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: rgba(var(--claro-rgb), .25); z-index: 6; }
  /* "O que você quer lançar?": cartões de vidro em grade, cada tipo com um orbe de cor. */
  .lancar-opcoes { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .lancar-opcoes .escolha-cartao { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-height: 132px; padding: 16px; border-radius: 22px; text-align: left; background: linear-gradient(160deg, rgba(var(--claro-rgb), .09), rgba(var(--claro-rgb), .02)) !important; border: 1px solid rgba(var(--claro-rgb), .1) !important; }
  .lancar-opcoes .escolha-cartao:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; align-items: center; min-height: 0; }
  .lancar-opcoes .escolha-icone { --orbe: var(--acento-rgb); width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .55), rgba(var(--orbe), .9) 45%, rgba(var(--orbe), .35) 100%); box-shadow: 0 0 24px -4px rgba(var(--orbe), .85), inset 0 -4px 8px rgba(0, 0, 0, .3); }
  .lancar-opcoes [data-lancar="nova-receita"] .escolha-icone { --orbe: 69, 212, 154; }
  .lancar-opcoes [data-lancar="nova-conta"] .escolha-icone { --orbe: 255, 176, 72; }
  .lancar-opcoes [data-lancar="nova-compra-mercado"] .escolha-icone { --orbe: 183, 155, 255; }
  .lancar-opcoes [data-lancar="nova-tarefa"] .escolha-icone { --orbe: 120, 214, 255; }
  .lancar-opcoes .escolha-texto strong { font-size: 1rem; font-weight: 500; }
  .lancar-opcoes .escolha-texto small { font-size: 12.5px; color: var(--texto-3); }
}
@media (max-width: 767.98px) {
  #modal .linha-campo { display: flex; gap: 8px; width: 100%; }
  #modal .linha-campo > select, #modal .linha-campo > input { flex: 1; width: auto; min-width: 0; }
  #modal .segmentado span { white-space: normal; line-height: 1.2; min-height: 44px; display: grid; place-items: center; overflow: visible; }
}
/* ===== Visão geral (pedido 2) ===== */
.so-celular-inline { display: none; }
@media (max-width: 767.98px) { .so-celular-inline { display: inline-flex; } }
.periodo-botoes { flex-wrap: wrap; }
.periodo-botoes button { appearance: none; border: 0; background: transparent; font: inherit; cursor: pointer; padding: 7px 14px; border-radius: 999px; font-size: .86rem; font-weight: 600; color: var(--texto-3); transition: color .25s, background .25s, box-shadow .25s; }
.periodo-botoes button:hover { color: var(--texto-2); }
.periodo-botoes button.ativo { color: var(--texto); background: rgba(var(--acento-rgb), .22); box-shadow: inset 0 0 0 1px rgba(var(--acento-rgb), .5), 0 0 18px -6px rgba(var(--acento-rgb), .8); }
@media (min-width: 768px) {
  .saudacao-linha { display: flex; align-items: center; gap: 22px; }
  .saudacao-linha .seletor-visao { flex-direction: column; border-radius: 18px; padding: 4px; gap: 2px; }
  .saudacao-linha .seletor-visao button { min-width: 70px; padding: 5px 12px; }
  .botao-lancar { padding: 0 22px; min-height: 44px; font-size: 1rem; }
}
/* ===== Menu ☰ do celular (pedido 12) ===== */
.busca-menu-celular { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 0 18px; margin-bottom: 18px; border-radius: 16px; border: 1px solid rgba(var(--claro-rgb), .14); background: rgba(var(--claro-rgb), .06); color: var(--texto-3); font: inherit; font-size: 15px; text-align: left; cursor: text; }
.busca-menu-celular svg.i { width: 20px; height: 20px; color: var(--texto-2); }
.grupo-menu + .grupo-menu { margin-top: 18px; }
.grupo-menu h3 { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-3); margin: 0 0 8px 4px; }
.grupo-menu .menu-celular { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.item-menu-celular { --orbe: var(--acento-rgb); appearance: none; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 112px; padding: 14px; border-radius: 20px; border: 1px solid rgba(var(--claro-rgb), .1); background: linear-gradient(160deg, rgba(var(--claro-rgb), .09), rgba(var(--claro-rgb), .02)); color: var(--texto); font: inherit; text-align: left; cursor: pointer; }
.item-menu-celular.atual { border-color: rgba(var(--orbe), .7); box-shadow: 0 0 24px -8px rgba(var(--orbe), .9), inset 0 0 0 1px rgba(var(--orbe), .35); }
.orbe-menu { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .5), rgba(var(--orbe), .9) 45%, rgba(var(--orbe), .35)); box-shadow: 0 0 20px -4px rgba(var(--orbe), .85), inset 0 -4px 8px rgba(0, 0, 0, .3); }
.orbe-menu svg.i { width: 19px; height: 19px; }
.texto-menu { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.texto-menu strong { font-size: 15px; font-weight: 500; }
.texto-menu small { font-size: 12px; color: var(--texto-3); line-height: 1.3; }
.texto-menu small.vivo { color: #FFB4BE; }
.rodape-menu { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 22px; padding: 12px; border: 0; background: transparent; color: var(--texto-3); font: inherit; font-size: 13px; cursor: pointer; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
.rodape-menu svg.i { width: 16px; height: 16px; }
/* ===== Blocos alinhados e consistentes (pedido 8) ===== */
/* Regra única: o que se toca para escolher (botões, seletores, listas suspensas dos blocos) é pílula; o que se digita é retângulo arredondado. */
.painel select, .barra-filtros select, .cat-controles select, .seletor-periodo { border-radius: 999px !important; }
/* Setinha de abrir/fechar desenhada e alinhada ao título. */
.recolhivel > header h2 { display: flex; align-items: center; gap: 10px; }
.recolhivel > header h2::before { content: '' !important; flex: none; width: 7px; height: 7px; margin: -3px 2px 0 1px !important; border-right: 2px solid var(--texto-3); border-bottom: 2px solid var(--texto-3); transform: rotate(45deg); transition: transform .2s; }
.recolhivel.recolhido > header h2::before { transform: rotate(-45deg); margin-top: 0 !important; }
.recolhivel.recolhido > header h2[data-qtd]::after { content: attr(data-qtd); font-size: 11.5px; font-weight: 500; padding: 2px 8px; border-radius: 999px; background: rgba(var(--claro-rgb), .08); color: var(--texto-2); }
@media (max-width: 767.98px) {
  .painel > header { flex-wrap: wrap; row-gap: 4px; }
  .painel > header > h2 + small, .painel > header > small { flex-basis: 100%; font-size: 12.5px !important; color: var(--texto-3); }
  /* Controles do bloco de categorias: seletor de ponta a ponta e as duas listas lado a lado. */
  .painel-categorias > header { flex-direction: column; align-items: stretch; }
  .cat-controles { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; margin-top: 8px; }
  .cat-controles .segmentado { grid-column: 1 / -1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; margin: 0; }
  .cat-controles .segmentado span { text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cat-controles select { width: 100%; min-width: 0; min-height: 42px; }
  .cat-controles > :not(.segmentado):not(select) { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) { .cat-controles .segmentado span { font-size: 12.5px; padding: 7px 4px; } }
/* ===== Conexões (pedido 15) ===== */
.conexoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px; }
.conexao { appearance: none; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px 14px; border-radius: 20px; border: 1px solid rgba(var(--claro-rgb), .1); background: linear-gradient(160deg, rgba(var(--claro-rgb), .08), rgba(var(--claro-rgb), .02)); color: var(--texto); font: inherit; cursor: pointer; text-align: center; }
.conexao strong { font-size: 14px; font-weight: 500; }
.conexao-icone { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: rgba(var(--claro-rgb), .06); box-shadow: 0 10px 26px -12px rgba(var(--acento-rgb), .8); }
.conexao-icone svg { width: 40px; height: 40px; }
.conexao-icone.grande { width: 72px; height: 72px; border-radius: 22px; }
.conexao-icone.grande svg { width: 54px; height: 54px; }
.conexao-estado { font-size: 11.5px; padding: 2px 10px; border-radius: 999px; background: rgba(var(--claro-rgb), .08); color: var(--texto-2); }
.conexao-estado.ok { background: rgba(69, 212, 154, .15); color: #6FE3B3; }
.conexao-topo { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; margin-bottom: 18px; }
.conexao-topo p { margin: 0; color: var(--texto-2); }
.passos-progresso { height: 6px; border-radius: 6px; background: rgba(var(--claro-rgb), .08); overflow: hidden; }
.passos-progresso span { display: block; height: 100%; width: var(--p); border-radius: 6px; background: linear-gradient(90deg, rgb(var(--acento-rgb)), #6FE3B3); box-shadow: 0 0 12px rgba(var(--acento-rgb), .7); }
.passos-contagem { font-size: 12.5px; margin: 8px 0 14px; }
.tarefas-conexao { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tarefas-conexao li { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border-radius: 18px; border: 1px solid rgba(var(--claro-rgb), .08); background: rgba(var(--claro-rgb), .03); }
.tarefas-conexao li.agora { border-color: rgba(var(--acento-rgb), .55); background: rgba(var(--acento-rgb), .08); box-shadow: 0 0 22px -10px rgba(var(--acento-rgb), .9); }
.tarefas-conexao li.feito { opacity: .75; }
.tarefas-conexao .marca { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600; border: 1.5px solid rgba(var(--claro-rgb), .25); color: var(--texto-2); }
.tarefas-conexao li.agora .marca { border-color: rgb(var(--acento-rgb)); color: #fff; background: rgba(var(--acento-rgb), .35); }
.tarefas-conexao li.feito .marca { border-color: transparent; background: #45D49A; color: #04130D; }
.tarefas-conexao strong { display: block; font-weight: 500; }
.tarefas-conexao small { display: block; color: var(--texto-3); font-size: 12.5px; margin-top: 2px; }
.acao-passo { margin-top: 10px; }
.sub-conexao { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-3); font-weight: 500; margin: 22px 0 6px; }
/* ===== Estilo "luz" (pedido 16): vidro escuro com aro de luz colorido que gira devagar ===== */
@property --giro { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes girar-luz { to { --giro: 360deg; } }
:root { --aro-luz: conic-gradient(from var(--giro), #FF6A88, #FFB25C, #FFF4D6, #7FB4FF, #5C9DFF, #B79BFF, #5CE0B5, #FF6A88); --vidro-escuro: linear-gradient(160deg, #262A36, #0D0F16); }
/* Opção escolhida em seletores e abas. */
.segmentado input:checked + span,
.periodo-botoes button.ativo,
.seletor-visao button.ativa,
.abas-agenda button.ativa,
.grupos-banco button.ativa {
  border: 1.5px solid transparent !important;
  background: var(--vidro-escuro) padding-box, var(--aro-luz) border-box !important;
  color: #fff !important;
  box-shadow: 0 0 14px -3px rgba(127, 180, 255, .65), 0 0 22px -10px rgba(255, 140, 90, .6) !important;
  animation: girar-luz 7s linear infinite;
}
/* Botão + : círculo de vidro escuro com aro iridescente aceso. */
#barra-celular .mais-lancar {
  border: 2.5px solid transparent !important;
  background: radial-gradient(circle at 35% 28%, #3A3F4E, #12141C 70%) padding-box, var(--aro-luz) border-box !important;
  box-shadow: 0 0 22px -2px rgba(127, 180, 255, .7), 0 0 34px -6px rgba(255, 150, 90, .55), 0 12px 26px -10px rgba(0, 0, 0, .9) !important;
  animation: girar-luz 6s linear infinite;
  color: #fff;
}
#barra-celular .mais-lancar svg.i { filter: drop-shadow(0 0 6px rgba(255, 255, 255, .6)); }
/* Item ativo da barra de baixo: aro de luz fino. */
#barra-celular button.ativo:not(.mais-lancar) {
  border: 1.5px solid transparent !important;
  background: var(--vidro-escuro) padding-box, var(--aro-luz) border-box !important;
  box-shadow: 0 0 14px -3px rgba(127, 180, 255, .6) !important;
  animation: girar-luz 7s linear infinite;
}
/* Interruptor: trilho escuro, bolinha de vidro; ligado, a bolinha ganha aro azul aceso. */
.campo.check input[type="checkbox"] { width: 52px !important; height: 30px !important; background: #05070C !important; border: 1px solid rgba(var(--claro-rgb), .12) !important; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .8) !important; }
.campo.check input[type="checkbox"]::after { top: 2px; left: 2px; width: 24px; height: 24px; background: radial-gradient(circle at 35% 30%, #4A505F, #171A22 70%); border: 1.5px solid rgba(var(--claro-rgb), .18); box-shadow: 0 3px 8px rgba(0, 0, 0, .7); }
.campo.check input[type="checkbox"]:checked { background: #05070C !important; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .8), 0 0 0 1px rgba(127, 180, 255, .35), 0 0 18px -4px rgba(92, 157, 255, .7) !important; }
.campo.check input[type="checkbox"]:checked::after { transform: translateX(22px); border-color: #8CBCFF; box-shadow: 0 0 8px rgba(127, 180, 255, .95), 0 0 20px rgba(92, 157, 255, .6), inset 0 0 6px rgba(127, 180, 255, .5); }
@media (prefers-reduced-motion: reduce) { .segmentado input:checked + span, .periodo-botoes button.ativo, .seletor-visao button.ativa, .abas-agenda button.ativa, #barra-celular .mais-lancar, #barra-celular button.ativo { animation: none; } }

/* ---------- Abertura animada da logo (js/abertura.js) ---------- */
#abertura { position: fixed; inset: 0; z-index: 10000; background: #02040A; cursor: pointer; transition: opacity .7s ease; }
#abertura video { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s ease; }
#abertura.tocando video { opacity: 1; }
#abertura.saindo { opacity: 0; pointer-events: none; }
#abertura video { position: relative; z-index: 1; }
#abertura .abertura-camada { position: absolute; z-index: 0; max-width: none; transform-origin: 0 0; pointer-events: none; will-change: transform, opacity; }
#abertura.transicao { pointer-events: none; }
#abertura:not(.camadas-prontas) .abertura-camada { visibility: hidden; }
#abertura.camadas .abertura-camada, #abertura.transicao .abertura-camada { z-index: 2; }
/* ===== Listas limpas (pedido 7) ===== */
.lista-limpa { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.grupo-limpo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 10px 4px 2px; }
.grupo-limpo strong { font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-2); }
.grupo-limpo small { font-size: 12.5px; color: var(--texto-3); }
.item-limpo { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 20px; border: 1px solid rgba(var(--claro-rgb), .08); background: linear-gradient(160deg, rgba(var(--claro-rgb), .06), rgba(var(--claro-rgb), .015)); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .2s, border-color .2s; }
.item-limpo:active { background: rgba(var(--claro-rgb), .09); }
.item-orbe { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 600; color: #fff; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .45), var(--cor) 55%, color-mix(in srgb, var(--cor) 40%, #000)); box-shadow: 0 0 18px -6px var(--cor); }
.item-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.item-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.item-linha strong { font-size: 15.5px; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-valor { flex: none; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.item-valor.positivo { color: #6FE3B3; }
.item-linha.sub small { font-size: 12.5px; color: var(--texto-3); }
.item-limpo.atrasado .quando { color: #FF9AA8; }
.item-limpo .juros { color: #FF9AA8; opacity: .85; }
.item-acoes { display: flex; gap: 8px; margin-top: 10px; }
.btn-acao { appearance: none; min-height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(var(--claro-rgb), .14); background: rgba(var(--claro-rgb), .06); color: var(--texto); font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; }
.btn-acao.principal { border: 1.5px solid transparent; background: var(--vidro-escuro, #151821) padding-box, var(--aro-luz, linear-gradient(90deg, #5C9DFF, #B79BFF)) border-box; box-shadow: 0 0 14px -4px rgba(127, 180, 255, .6); animation: girar-luz 7s linear infinite; }
.btn-acao.principal.positivo { background: linear-gradient(160deg, #1B3A30, #0C1914) padding-box, conic-gradient(from var(--giro, 0deg), #5CE0B5, #B6F5DD, #45D49A, #2FA97C, #5CE0B5) border-box; box-shadow: 0 0 14px -4px rgba(69, 212, 154, .6); }
/* Ficha de detalhe */
.ficha-valor { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 18px; text-align: center; }
.ficha-valor small { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-3); }
.ficha-valor strong { font-size: 2.2rem; font-weight: 300; font-variant-numeric: tabular-nums; }
.ficha-valor.atrasado strong { color: #FF9AA8; }
.ficha-valor.positivo strong { color: #6FE3B3; }
.ficha-valor span { font-size: 13px; color: var(--texto-2); }
.ficha-aviso { margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 93, 115, .07); border: 1px solid rgba(255, 93, 115, .2); color: var(--texto-2); font-size: 13.5px; }
.ficha { display: grid; border-radius: 18px; border: 1px solid rgba(var(--claro-rgb), .08); overflow: hidden; }
.ficha-linha { display: flex; justify-content: space-between; gap: 16px; padding: 12px 14px; font-size: 14px; }
.ficha-linha + .ficha-linha { border-top: 1px solid rgba(var(--claro-rgb), .06); }
.ficha-linha span { color: var(--texto-3); }
.ficha-linha strong { font-weight: 500; text-align: right; }
@media (max-width: 767.98px) { dialog.folha .modal-rodape:has(.btn:not([data-fechar])) .btn[data-fechar] { display: none; } }
.lista-limpa { grid-template-columns: minmax(0, 1fr); }
.item-limpo { min-width: 0; }
/* ===== Mercado (pedido 13) ===== */
.item-qtd { flex: none; font-size: 14px; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.lista-compras .item-limpo { padding: 12px 14px; align-items: center; }
.lista-compras .item-limpo.no-carrinho { opacity: .55; }
.no-carrinho-tag { color: #6FE3B3 !important; }
.limite-mercado { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0 8px; font-size: 14px; color: var(--texto-2); }
.entrada-limite { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; min-height: 42px; border-radius: 999px; border: 1px solid rgba(var(--claro-rgb), .16); background: rgba(0, 0, 0, .25); color: var(--texto-3); }
.entrada-limite input { width: 96px; border: 0; background: transparent; color: var(--texto); font: inherit; font-size: 16px; font-weight: 600; text-align: right; outline: none; min-height: 0; padding: 0; }
.calc-total.ok { color: #EAF6FF; }
.calc-total.perto { color: #FFC977; }
.calc-total.passou { color: #FF9AA8; }
.calc-progresso.limite { position: relative; height: 10px; overflow: visible; }
.calc-progresso.limite i { background: linear-gradient(90deg, #45D49A, #5C9DFF); box-shadow: 0 0 12px rgba(92, 157, 255, .6); }
.calc-progresso.limite.perto i { background: linear-gradient(90deg, #5C9DFF, #FFB048); box-shadow: 0 0 12px rgba(255, 176, 72, .6); }
.calc-progresso.limite.passou i { background: linear-gradient(90deg, #FFB048, #FF5D73); box-shadow: 0 0 14px rgba(255, 93, 115, .7); }
.calc-progresso.limite b { position: absolute; top: -4px; width: 2px; height: 18px; margin-left: -1px; border-radius: 2px; background: rgba(255, 255, 255, .7); }
.calc-aviso { margin: 8px 0 10px; font-size: 13.5px; color: var(--texto-2); }
.calc-aviso.passou { color: #FF9AA8; }
.calc-aviso.perto { color: #FFC977; }
.calc-nota { display: block; font-size: 12px; color: var(--texto-3); margin: -2px 0 10px; }
@media (max-width: 767.98px) {
  .form-lista { display: grid !important; grid-template-columns: 72px 92px minmax(0, 1fr); gap: 10px; margin-bottom: 16px; }
  .form-lista [name="nome"], .form-lista button { grid-column: 1 / -1; }
  .form-lista input, .form-lista select { width: 100%; min-width: 0; }
  .form-lista button { min-height: 44px; }
  body[data-view="mercado"] .kpis { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible !important; gap: 10px; }
  body[data-view="mercado"] .kpis .kpi { min-width: 0 !important; width: auto !important; }
  .calc-linha { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; }
}
@media (max-width: 767.98px) { .form-lista [name="cat"] { grid-column: auto !important; } .form-lista [name="qtd"], .form-lista [name="un"] { grid-column: auto !important; } }
/* ===== Edição em massa nos Registros (pedido 3) ===== */
.barra-massa-reg { position: sticky; top: 10px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 6px 0 14px; padding: 10px 12px; border-radius: 18px; border: 1px solid rgba(var(--claro-rgb), .1); background: rgba(10, 14, 26, .82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.barra-massa-reg.ativa { border-color: rgba(var(--acento-rgb), .5); box-shadow: 0 0 24px -10px rgba(var(--acento-rgb), .9); }
.massa-conta { font-size: 14px; color: var(--texto-2); margin-right: auto; }
.massa-dica { font-size: 12.5px; }
.btn-acao.perigo { border-color: rgba(255, 93, 115, .45); background: rgba(255, 93, 115, .08); color: #FF9AA8; }
.massa-check { width: 20px !important; height: 20px !important; min-height: 0 !important; padding: 0 !important; margin: 0; accent-color: rgb(var(--acento-rgb)); cursor: pointer; }
th.sel, td.sel { width: 34px; text-align: center; }
tr.selecionada td, .item-limpo.selecionada { background: rgba(var(--acento-rgb), .08); }
.massa-sel-celular { display: grid; place-items: center; align-self: center; padding-right: 2px; }
@media (max-width: 767.98px) { .barra-massa-reg { top: 6px; } .barra-massa-reg .btn-acao { min-height: 38px; } }
/* ===== Agenda em calendário (pedido 1) ===== */
.ag-nav { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.ag-nav strong { font-size: 1.05rem; font-weight: 500; min-width: 0; }
.ag-nav .link { margin-left: auto; }
.ag-seta { appearance: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(var(--claro-rgb), .14); background: rgba(var(--claro-rgb), .05); color: var(--texto); font-size: 18px; line-height: 1; cursor: pointer; flex: none; }
/* Itens: o item inteiro é botão; ao lado, o botão de feito. */
.ag-item { cursor: pointer; border-radius: 14px; padding: 10px 12px; border-top: 0; background: rgba(var(--claro-rgb), .035); border: 1px solid rgba(var(--claro-rgb), .06); margin-bottom: 6px; }
.ag-item:active { background: rgba(var(--claro-rgb), .08); }
.ag-item.evento { border-left: 3px solid #B79BFF; }
.ag-item.tarefa { border-left: 3px solid #5C9DFF; }
.ag-item.saida { border-left: 3px solid #FF7A8E; }
.ag-item.entrada { border-left: 3px solid #45D49A; }
.ag-feita { appearance: none; flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px 0 6px; border-radius: 999px; border: 1px solid rgba(var(--claro-rgb), .16); background: rgba(var(--claro-rgb), .05); color: var(--texto-2); font: inherit; font-size: 13px; cursor: pointer; }
.ag-feita span { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(var(--claro-rgb), .35); display: grid; place-items: center; font-size: 12px; color: #fff; }
.ag-feita.ok { border-color: rgba(69, 212, 154, .5); color: #6FE3B3; }
.ag-feita.ok span { background: #45D49A; border-color: transparent; color: #04130D; }
/* Dia: linhas das horas. */
.ag-grade-horas { border-top: 1px solid rgba(var(--claro-rgb), .06); }
.ag-hora-linha { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; min-height: 46px; border-bottom: 1px solid rgba(var(--claro-rgb), .05); }
.ag-h { font-size: 12px; color: var(--texto-3); padding-top: 8px; font-variant-numeric: tabular-nums; }
.ag-slot { padding: 6px 0 0; min-width: 0; }
.ag-slot .ag-lista { margin: 0; }
.ag-hora-linha.agora { position: relative; }
.ag-hora-linha.agora::before { content: ''; position: absolute; left: 52px; right: 0; top: 0; height: 2px; background: #FF6A88; box-shadow: 0 0 10px #FF6A88; }
.ag-hora-linha.agora .ag-h { color: #FF9AA8; font-weight: 600; }
/* Mês: grade com pontinhos. */
.ag-mes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.ag-sem { text-align: center; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); padding-bottom: 4px; }
.ag-cel { appearance: none; aspect-ratio: 1 / 1; min-height: 40px; border-radius: 12px; border: 1px solid transparent; background: rgba(var(--claro-rgb), .03); color: var(--texto); font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 2px; }
.ag-cel.vazia { background: transparent; cursor: default; }
.ag-cel b { font-size: 14px; font-weight: 500; }
.ag-cel.hoje b { color: #fff; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--acento-rgb), .45); box-shadow: 0 0 12px rgba(var(--acento-rgb), .7); }
.ag-cel.sel { border: 1.5px solid transparent; background: var(--vidro-escuro, #151821) padding-box, var(--aro-luz, linear-gradient(90deg, #5C9DFF, #B79BFF)) border-box; animation: girar-luz 7s linear infinite; }
.ag-pontos { display: flex; gap: 3px; }
.ag-pontos i, .ag-legenda i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.p-tarefa { background: #5C9DFF; box-shadow: 0 0 6px #5C9DFF; }
.p-evento { background: #B79BFF; box-shadow: 0 0 6px #B79BFF; }
.p-conta { background: #FF7A8E; box-shadow: 0 0 6px #FF7A8E; }
.p-entrada { background: #45D49A; box-shadow: 0 0 6px #45D49A; }
.ag-legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0 6px; font-size: 12px; color: var(--texto-3); }
.ag-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.ag-dia-escolhido { margin-top: 14px; }
/* Ano: doze mesinhos. */
.ag-ano { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.ag-mini-titulo { font-size: 13px; text-transform: capitalize; margin-bottom: 6px; color: var(--texto); }
.ag-mes.pequena { gap: 2px; }
.ag-mes.pequena .ag-cel { min-height: 0; border-radius: 6px; background: transparent; padding: 0; }
.ag-mes.pequena .ag-cel b { font-size: 10.5px; font-weight: 400; color: var(--texto-3); }
.ag-mes.pequena .ag-cel.tem b { color: #fff; font-weight: 600; text-decoration: underline 2px rgba(var(--acento-rgb), .9); text-underline-offset: 2px; }
.ag-mes.pequena .ag-cel.hoje b { width: 18px; height: 18px; font-size: 10px; }
@media (max-width: 767.98px) {
  .ag-ano { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .ag-cel { min-height: 0; border-radius: 10px; }
  .ag-item { padding: 10px; }
}

/* Brilho que aparece no primeiro instante, enquanto o vídeo da abertura carrega (é o mesmo ponto de luz do começo do vídeo) */
#abertura .abertura-brilho { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; z-index: 3; pointer-events: none;
  background: #fff; box-shadow: 0 0 10px 3px rgba(200, 222, 255, .9), 0 0 40px 10px rgba(92, 157, 255, .45), 0 0 90px 30px rgba(42, 91, 184, .25);
  animation: abertura-pulso 1.6s ease-in-out infinite; transition: opacity .35s ease; }
#abertura .abertura-brilho::after { content: ""; position: absolute; left: 50%; top: 50%; width: 46vmin; height: 2px; margin: -1px 0 0 -23vmin; border-radius: 2px;
  background: linear-gradient(90deg, rgba(92, 157, 255, 0), rgba(225, 236, 255, .7), rgba(92, 157, 255, 0)); }
@keyframes abertura-pulso { 50% { transform: scale(1.35); box-shadow: 0 0 14px 4px rgba(200, 222, 255, 1), 0 0 56px 14px rgba(92, 157, 255, .55), 0 0 120px 40px rgba(42, 91, 184, .3); } }
#abertura.tocando .abertura-brilho, #abertura.saindo .abertura-brilho { opacity: 0; }

/* Prévia "fantasma" enquanto o sistema carrega */
.esqueleto .f-avatar, .esqueleto .f-linha, .esqueleto .f-botao, .esqueleto .f-titulo, .esqueleto .f-bloco {
  display: block; border-radius: 12px; background: linear-gradient(100deg, rgba(var(--claro-rgb), .05) 30%, rgba(var(--claro-rgb), .13) 50%, rgba(var(--claro-rgb), .05) 70%);
  background-size: 300% 100%; animation: fantasma 1.5s ease-in-out infinite; }
@keyframes fantasma { from { background-position: 100% 0; } to { background-position: 0 0; } }
.cartao-perfil.fantasma { cursor: default; justify-content: center; gap: 14px; }
.cartao-perfil.fantasma:hover { transform: none; }
.esqueleto .f-avatar { width: 64px; height: 64px; border-radius: 20px; }
.esqueleto .f-linha { width: 70%; height: 12px; border-radius: 6px; }
.esqueleto .f-linha.curta { width: 42%; height: 9px; }
.esqueleto .f-botao { width: 118px; height: 32px; border-radius: 99px; }
.esqueleto-painel { display: flex; flex-direction: column; gap: 14px; padding-top: 26px; }
.esqueleto-painel[hidden] { display: none; }
.esqueleto-painel .f-linha.curta { width: 180px; }
.esqueleto-painel .f-titulo { width: min(420px, 70%); height: 44px; border-radius: 14px; margin-bottom: 10px; }
.esqueleto-painel .f-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 150px; gap: 16px; }
.esqueleto-painel .f-bloco { border-radius: 26px; }
.esqueleto-painel .f-bloco.grande { grid-column: span 2; grid-row: span 2; }
.esqueleto-painel .f-bloco.largo { grid-column: span 2; }
@media (max-width: 767.98px) { .esqueleto-painel .f-grade { grid-template-columns: 1fr 1fr; grid-auto-rows: 110px; } }
@media (prefers-reduced-motion: reduce) { .esqueleto i, #abertura .abertura-brilho { animation: none; } }
details.ag-dia.atrasado { border: 1px solid rgba(255, 93, 115, .25); background: rgba(255, 93, 115, .05); border-radius: 16px; padding: 10px 12px; margin-bottom: 14px; }
details.ag-dia.atrasado summary { list-style: none; cursor: pointer; }
details.ag-dia.atrasado summary::-webkit-details-marker { display: none; }
details.ag-dia.atrasado summary h3 { margin: 0; }
details.ag-dia.atrasado summary h3::after { content: 'ver ›'; margin-left: auto; font-size: 12px; text-transform: none; letter-spacing: 0; color: var(--texto-3); }
details.ag-dia.atrasado[open] summary h3::after { content: 'esconder'; }
details.ag-dia.atrasado[open] summary { margin-bottom: 8px; }
.ag-dia.atrasado h3 small { font-size: 12px; text-transform: none; letter-spacing: 0; color: #FF9AA8; font-weight: 400; }
/* ===== Home do celular com impacto (pedido 6) ===== */
main:has(.home-celular) .faixa-filtro { display: none; }
.home-celular { display: flex; flex-direction: column; gap: 14px; }
.hc-topo { display: flex; align-items: center; gap: 12px; }
.hc-avatar { appearance: none; flex: none; width: 46px; height: 46px; border-radius: 50%; padding: 0; overflow: hidden; display: grid; place-items: center; font: inherit; font-size: 18px; font-weight: 600; color: #fff; border: 2px solid transparent; background: radial-gradient(circle at 35% 30%, #4A6FB3, #142040) padding-box, var(--aro-luz) border-box; box-shadow: 0 0 18px -4px rgba(127, 180, 255, .7); animation: girar-luz 8s linear infinite; cursor: pointer; }
.hc-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.hc-ola { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hc-ola small { font-size: 12px; color: var(--texto-3); text-transform: capitalize; }
.hc-ola strong { font-size: 1.35rem; font-weight: 300; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-icone { appearance: none; flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(var(--claro-rgb), .14); background: rgba(var(--claro-rgb), .06); color: var(--texto); cursor: pointer; }
.hc-icone svg.i { width: 19px; height: 19px; }
.hc-visao .seletor-visao { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
/* Herói: saldo sobre um arco de luz, como um horizonte de planeta. */
@keyframes respirar { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
.hc-heroi { position: relative; overflow: hidden; border-radius: 28px; padding: 20px 18px 16px; border: 1px solid rgba(var(--claro-rgb), .1); background: radial-gradient(120% 60% at 50% -5%, rgba(92, 157, 255, .30), transparent 62%), radial-gradient(80% 40% at 90% 100%, rgba(183, 155, 255, .14), transparent 60%), linear-gradient(180deg, rgba(14, 22, 42, .95), rgba(4, 8, 18, .96)); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9), 0 0 50px -25px rgba(92, 157, 255, .8); }
.hc-arco { position: absolute; left: 50%; top: -790px; width: 960px; height: 960px; margin-left: -480px; border-radius: 50%; pointer-events: none; box-shadow: 0 0 0 1.5px rgba(190, 215, 255, .6), 0 0 28px 4px rgba(92, 157, 255, .55), 0 0 90px 20px rgba(92, 157, 255, .25), inset 0 -40px 70px -30px rgba(120, 170, 255, .45); animation: respirar 6s ease-in-out infinite; }
.hc-heroi > :not(.hc-arco) { position: relative; z-index: 1; }
.hc-heroi-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hc-heroi-topo .seletor-periodo { width: auto; min-height: 34px; font-size: 13px; padding: 0 30px 0 12px; background-color: rgba(0, 0, 0, .3); }
.hc-saldo { text-align: center; margin: 26px 0 2px; font-size: 2.9rem; font-weight: 200; letter-spacing: -.02em; font-variant-numeric: tabular-nums; text-shadow: 0 0 30px rgba(127, 180, 255, .55); }
.hc-saldo.negativo { color: #FFB4BE; text-shadow: 0 0 30px rgba(255, 93, 115, .45); }
.hc-conferir { display: flex; justify-content: center; }
.hc-conferir .corrigir-saldo { font-size: 12.5px; }
.hc-previsto { text-align: center; margin: 6px 0 0; font-size: 13px; color: var(--texto-2); }
.hc-grafico { margin: 14px -6px 6px; }
.hc-grafico svg { min-height: 160px; }
.hc-legenda { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; font-size: 12px; color: var(--texto-3); }
.hc-legenda i { display: inline-block; width: 12px; height: 3px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
.hc-legenda i.ent { background: #45D49A; } .hc-legenda i.sai { background: #5C9DFF; } .hc-legenda i.proj { background: #B79BFF; }
/* Blocos 2×2: ícone em orbe, número grande, barrinha e seta. */
.hc-blocos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hc-bloco { --orbe: 92, 157, 255; appearance: none; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; padding: 14px; border-radius: 22px; text-align: left; font: inherit; color: var(--texto); cursor: pointer; border: 1px solid rgba(var(--claro-rgb), .09); background: radial-gradient(90% 70% at 0% 0%, rgba(var(--orbe), .16), transparent 60%), linear-gradient(160deg, rgba(var(--claro-rgb), .07), rgba(var(--claro-rgb), .015)); }
.hc-bloco.receber, .hc-bloco.em-dia { --orbe: 69, 212, 154; }
.hc-bloco.pagar { --orbe: 255, 176, 72; }
.hc-bloco.atraso { --orbe: 255, 93, 115; border-color: rgba(255, 93, 115, .3); }
.hc-bloco.cartao { --orbe: 183, 155, 255; }
.hc-bloco-topo { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 6px; }
.hc-orbe { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .5), rgba(var(--orbe), .9) 45%, rgba(var(--orbe), .35)); box-shadow: 0 0 18px -3px rgba(var(--orbe), .85); }
.hc-orbe svg.i { width: 17px; height: 17px; }
.hc-seta { color: var(--texto-3); font-size: 20px; line-height: 1; }
.hc-rotulo { font-size: 12.5px; color: var(--texto-2); display: inline-flex; align-items: center; gap: 6px; }
.hc-valor { font-size: 1.3rem; font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.hc-bloco small { font-size: 11.5px; color: var(--texto-3); }
.hc-barra { width: 100%; height: 5px; border-radius: 5px; background: rgba(var(--claro-rgb), .08); overflow: hidden; margin: 4px 0 2px; }
.hc-barra i { display: block; height: 100%; border-radius: 5px; background: rgb(var(--orbe)); box-shadow: 0 0 10px rgba(var(--orbe), .8); }
@keyframes pulso { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.6); opacity: .45; } }
.hc-pulso { width: 8px; height: 8px; border-radius: 50%; background: #FF5D73; box-shadow: 0 0 10px #FF5D73; animation: pulso 1.8s ease-in-out infinite; }
.hc-mais { appearance: none; border: 0; background: transparent; color: var(--texto-2); font: inherit; font-size: 14px; padding: 10px; cursor: pointer; }
.home-celular .h-proximos, .home-celular .h-areceber { margin: 0; }
@media (prefers-reduced-motion: reduce) { .hc-arco, .hc-pulso, .hc-avatar { animation: none; } }
.hc-ola small { text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-arco { top: -872px; }
.hc-saldo { margin-top: 34px; }
.hc-conferir .corrigir-saldo, .hc-conferir > * { margin: 0 !important; text-align: center; }
/* ===== Livro aplicado (pedido 11) ===== */
.impacto-credito { display: block; margin-top: 8px; padding: 10px 12px; border-radius: 14px; background: rgba(var(--acento-rgb), .08); border: 1px solid rgba(var(--acento-rgb), .25); color: var(--texto-2); font-size: 13px; line-height: 1.45; }
.impacto-credito.perto { background: rgba(255, 176, 72, .08); border-color: rgba(255, 176, 72, .35); }
.impacto-credito.passa { background: rgba(255, 93, 115, .08); border-color: rgba(255, 93, 115, .35); color: #FFB4BE; }
.selo.critico { background: rgba(255, 93, 115, .1) !important; color: #FF9AA8 !important; border-color: transparent !important; }
/* ===== Base: padrão único no Mac e no celular ===== */
.marcar-todos { margin: 0 0 10px; }
/* Botões: o mesmo vidro translúcido em toda tela, de qualquer tamanho. */
.btn { border-radius: 999px; background: rgba(var(--claro-rgb), .07); border: 1px solid rgba(var(--claro-rgb), .14); box-shadow: none; color: var(--texto); font-weight: 500; }
.btn:hover { background: rgba(var(--claro-rgb), .11); }
.btn.primario { background: rgba(var(--acento-rgb), .22); border-color: rgba(var(--acento-rgb), .55); color: #fff; }
.btn.primario:hover { background: rgba(var(--acento-rgb), .32); }
.btn.positivo { background: rgba(69, 212, 154, .14); border-color: rgba(69, 212, 154, .45); }
.btn.perigo { background: rgba(255, 93, 115, .1); border-color: rgba(255, 93, 115, .45); color: #FF9AA8; }
/* Lista limpa no Mac: duas colunas quando há espaço, ações ao lado. */
@media (min-width: 1100px) {
  .grade-painel .lista-limpa, .painel .lista-limpa { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
  .lista-limpa .grupo-limpo { grid-column: 1 / -1; }
}
@media (min-width: 768px) {
  .item-limpo { align-items: center; }
  .item-limpo .item-corpo { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center; }
  .item-limpo .item-linha:not(.sub) { grid-column: 1; }
  .item-limpo .item-linha.sub { grid-column: 1; }
  .item-limpo .item-acoes { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}
@media (min-width: 1100px) { .grade-painel .lista-limpa, .painel .lista-limpa { grid-template-columns: repeat(auto-fill, minmax(min(100%, 560px), 1fr)); } }
/* ===== Acesso detalhado e convite (pedido 14) ===== */
.areas-acesso h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-3); font-weight: 500; margin: 14px 0 6px; }
.linha-area { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid rgba(var(--claro-rgb), .06); }
.linha-area strong { font-weight: 400; font-size: 14px; min-width: 0; }
.linha-area .segmentado { flex: none; display: inline-grid !important; grid-template-columns: repeat(3, auto) !important; width: auto !important; }
.areas-acesso.desligado { opacity: .35; pointer-events: none; }
.acesso-resumo { display: block; font-size: 12px; color: var(--texto-3); margin-top: 2px; }
.convite-opcoes { display: grid; gap: 10px; margin-top: 12px; }
.convite-opcoes .escolha-cartao { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 20px; text-decoration: none; color: var(--texto); border: 1px solid rgba(var(--claro-rgb), .12); background: linear-gradient(160deg, rgba(var(--claro-rgb), .08), rgba(var(--claro-rgb), .02)); }
.convite-opcoes .escolha-icone { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; background: rgba(var(--acento-rgb), .25); }
.entrar-codigo { font-size: 13.5px; color: var(--texto-2); margin-top: 6px; }
.codigo-entrada { font-size: 26px !important; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; }
.ranking-unico { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0; font-size: 15px; color: var(--texto-2); }
.ranking-unico i { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 10px currentColor; }
.ranking-unico b { color: var(--texto); font-weight: 500; }
body.gerenciando-perfis .cartao-perfil { box-shadow: 0 0 0 1.5px rgba(var(--acento-rgb), .7), 0 0 24px -6px rgba(var(--acento-rgb), .9); }
/* Base, parte 2: plano de pagamento, pagos no cartão e contas pagas na lista limpa. */
.item-limpo.inativa { opacity: .6; }
.plano-lista .item-orbe { font-size: 12px; }
.sugestao-critico { color: #FF9AA8 !important; }
.sugestao-alerta { color: #FFC977 !important; }
.sugestao-ok, .sugestao-positivo { color: #6FE3B3 !important; }
.item-linha.sub .selo { font-size: 11.5px; padding: 1px 8px; }
/* ===== Identidade: nada de arco-íris. Só a luz azul do tema (como o interruptor de referência). ===== */
:root { --aro-luz: conic-gradient(from var(--giro), rgba(var(--acento-rgb), .22), rgba(var(--acento-rgb), .22) 50%, rgba(var(--acento-rgb), .7) 66%, var(--brasa-clara, #A9CBFF) 74%, #FFFFFF 78%, var(--brasa-clara, #A9CBFF) 82%, rgba(var(--acento-rgb), .6) 90%, rgba(var(--acento-rgb), .22)); }
.btn-acao.principal.positivo { background: linear-gradient(160deg, #13261F, #0A1410) !important; border: 1px solid rgba(69, 212, 154, .45) !important; animation: none !important; box-shadow: 0 0 12px -5px rgba(69, 212, 154, .6) !important; }
#barra-celular .mais-lancar { box-shadow: 0 0 18px -2px rgba(var(--acento-rgb), .75), 0 12px 26px -10px rgba(0, 0, 0, .9) !important; }
.hc-avatar { box-shadow: 0 0 16px -4px rgba(var(--acento-rgb), .7); }
/* Seletor PJ / PF / Tudo discreto: trilho escuro, opção escolhida como bolinha de vidro com aro azul aceso. */
.seletor-visao { display: inline-flex !important; flex-direction: row !important; gap: 2px !important; padding: 3px !important; border-radius: 999px !important; background: #04060C !important; border: 1px solid rgba(var(--claro-rgb), .08) !important; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .8) !important; }
.seletor-visao button { min-width: 0 !important; padding: 5px 14px !important; border-radius: 999px !important; font-size: 13px !important; font-weight: 500 !important; color: var(--texto-3) !important; background: transparent !important; border: 1.5px solid transparent !important; box-shadow: none !important; animation: none !important; }
.seletor-visao button.ativa { color: var(--brasa-clara, #A9CBFF) !important; background: radial-gradient(circle at 35% 30%, #2B303D, #0E1118 75%) !important; border-color: var(--brasa-clara, #A9CBFF) !important; box-shadow: 0 0 8px rgba(var(--acento-rgb), .9), 0 0 20px -4px rgba(var(--acento-rgb), .6), inset 0 0 6px rgba(var(--acento-rgb), .35) !important; }
@media (min-width: 768px) { .hero-topo .acoes-rapidas { align-items: center; gap: 12px; } .saudacao-linha .seletor-visao { display: none !important; } }
.hc-visao { display: flex; justify-content: flex-end; }
.hc-visao .seletor-visao { display: inline-flex !important; width: auto !important; }