/* Asten Gestão: sistema visual. Paleta Verde e Bege, com fundo branco ou preto; padrões de interface da Apple. */
:root {
  color-scheme: light;
  --degrade: linear-gradient(170deg, #006B2D 0%, #00873A 100%);
  --heroi: radial-gradient(60% 70% at 92% 4%, rgb(243 233 214 / 0.2) 0%, rgb(243 233 214 / 0) 100%), linear-gradient(150deg, #006B2D 0%, #00873A 100%);
  --cartao-foto: linear-gradient(165deg, #F3E9D6 0%, #A9C9B5 44%, #00873A 76%);
  --acento: #F3E9D6; --sobre-acento: #0F1F1A; --acao: #00873A; --acao-2: #006B2D; --pilula: #FFFFFF;
  --sobre: #FFFFFF; --o: 17 32 27; --s: 20 40 30; --c: 14 107 80; --i: 6 30 23;
  /* cor */
  --borda: rgb(17 32 27 / 0.42); --traco: #0F1F1A; --cream: #FFFFFF; --beige: #DDEEE6; --ocean: #00873A; --ocean-2: #006B2D; --slate: #0E8A68;
  --sup: #FFFFFF; --sup-forte: #FFFFFF; --vidro: rgb(255 255 255 / 0.92);
  --tinta: #0F1F1A; --suave: #4F5A55; --linha: rgb(var(--o) / 0.2); --preench: rgb(var(--o) / 0.09); --contorno: rgb(var(--o) / 0.54); --hover: rgb(var(--c) / 0.14); --hover-forte: rgb(var(--c) / 0.26);
  --ok: #06653A; --ok-fundo: rgb(10 150 85 / 0.18); --ok-sombra: rgb(10 150 85 / 0.32); --ok-chave: #0E9A58;
  --cai: #B0140C; --cai-fundo: rgb(214 40 30 / 0.15); --cai-sombra: rgb(214 40 30 / 0.3);
  /* forma */
  --r-g: 22px; --r-m: 14px; --r-p: 12px;
  --sombra-1: 0 1px 2px rgb(var(--s) / 0.05), 0 8px 24px rgb(var(--s) / 0.05);
  --sombra-2: 0 2px 6px rgb(var(--s) / 0.07), 0 22px 48px rgb(var(--s) / 0.16);
  --sombra-vidro: 0 1px 1px rgb(var(--s) / 0.04), 0 12px 32px rgb(var(--s) / 0.14);
  /* movimento */
  --ios: cubic-bezier(0.32, 0.72, 0, 1); --suave-sai: cubic-bezier(0.16, 1, 0.3, 1);
  /* tipo */
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  --alvo: 44px;
}
/* tema escuro: automático, ou escolhido no perfil */
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --borda: rgb(255 255 255 / 0.14); --traco: rgb(255 255 255 / 0.6); --cream: #000000; --beige: #2C2C2E; --ocean: #30D158; --ocean-2: #8DF0AE; --slate: #30D158; --sup: #1C1C1E; --sup-forte: #1C1C1E; --pilula: #3A3A3C; --vidro: rgb(28 28 30 / 0.86); --tinta: #F5F5F7; --suave: #A1A1A6; --sobre: #05290F; --o: 245 245 247; --s: 0 0 0; --c: 63 191 151; --ok: #30D158; --ok-fundo: rgb(60 200 130 / 0.16); --ok-sombra: rgb(60 200 130 / 0.22); --ok-chave: #34C759; --cai: #FF7A70; --cai-fundo: rgb(255 110 95 / 0.16); --cai-sombra: rgb(255 110 95 / 0.22); --hover: rgb(var(--c) / 0.16); --hover-forte: rgb(var(--c) / 0.28); color-scheme: dark; } }
:root[data-tema="escuro"] { --borda: rgb(255 255 255 / 0.14); --traco: rgb(255 255 255 / 0.6); --cream: #000000; --beige: #2C2C2E; --ocean: #30D158; --ocean-2: #8DF0AE; --slate: #30D158; --sup: #1C1C1E; --sup-forte: #1C1C1E; --pilula: #3A3A3C; --vidro: rgb(28 28 30 / 0.86); --tinta: #F5F5F7; --suave: #A1A1A6; --sobre: #05290F; --o: 245 245 247; --s: 0 0 0; --c: 63 191 151; --ok: #30D158; --ok-fundo: rgb(60 200 130 / 0.16); --ok-sombra: rgb(60 200 130 / 0.22); --ok-chave: #34C759; --cai: #FF7A70; --cai-fundo: rgb(255 110 95 / 0.16); --cai-sombra: rgb(255 110 95 / 0.22); --hover: rgb(var(--c) / 0.16); --hover-forte: rgb(var(--c) / 0.28); color-scheme: dark; }
/* menos transparência e mais contraste, quando o aparelho pede */
@media (prefers-reduced-transparency: reduce) {
  :root { --vidro: var(--sup); }
  .lateral__menu, .lateral__cartao, .busca input, .redondo, .baixo { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
@media (prefers-contrast: more) { :root { --suave: var(--tinta); --linha: rgb(var(--o) / 0.5); --vidro: var(--sup); } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--cream); scrollbar-gutter: stable; scroll-padding-top: 80px; }
body { margin: 0; color: var(--tinta); background: var(--cream); font: 400 1rem/1.47 var(--sans); letter-spacing: -0.011em; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
body:has(dialog[open]) { overflow: hidden; }
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--ocean); outline-offset: 2px; }
.lado :focus-visible { outline-color: #FFFFFF; }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ✳ da marca: sempre girando */
.asten { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; animation: gira 12s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* tipografia */
.t1 { font-size: clamp(1.75rem, 2.6vw, 2.125rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.024em; }
.t2 { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.016em; }
.t3 { font-size: 0.9375rem; font-weight: 600; line-height: 1.3; }
.suave { color: var(--suave); }
.pequeno { font-size: 0.8125rem; letter-spacing: -0.004em; }
.valor { font-variant-numeric: tabular-nums; }

/* botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--alvo); padding: 0 20px; border: 0; border-radius: 999px; background: var(--ocean); color: var(--sobre); font-size: 0.9375rem; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color 180ms ease, transform 180ms var(--ios); }
.btn:hover { background: var(--ocean-2); }
.btn:active { transform: scale(0.97); }
.btn[disabled] { background: var(--preench); color: var(--suave); cursor: not-allowed; transform: none; }
.btn--linha, .btn--suave { background: var(--preench); color: var(--tinta); }
.btn--linha:hover, .btn--suave:hover { background: var(--hover-forte); }
.btn--perigo { background: var(--cai-fundo); color: var(--cai); }
.btn--perigo:hover { background: var(--cai-sombra); }
.btn--perigo-forte, .btn--perigo-forte:hover { background: #B0140C; color: #fff; }
.btn--contorno { background: none; box-shadow: inset 0 0 0 1.5px var(--ocean); color: var(--tinta); }
.btn--contorno:hover { background: var(--hover); }
.btn--grande { min-height: 50px; padding: 0 24px; font-size: 1rem; }
.link { padding: 0; border: 0; background: none; color: var(--ocean); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgb(var(--o) / 0.35); }
.link:hover { text-decoration-color: currentColor; }

/* formulários */
.campo { display: grid; gap: 6px; font-size: 0.8125rem; font-weight: 500; }
.campo input, .campo select, .campo textarea { width: 100%; min-height: var(--alvo); padding: 10px 14px; border: 1px solid var(--contorno); border-radius: var(--r-p); background: var(--sup-forte); font-weight: 400; font-size: 1rem; transition: background-color 160ms ease, box-shadow 160ms ease; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 0; background: var(--sup-forte); box-shadow: 0 0 0 2px var(--ocean); }
.grade-form { display: grid; gap: 14px; }
@media (min-width: 640px) { .grade-form--2 { grid-template-columns: 1fr 1fr; } .grade-form--2 .inteiro { grid-column: 1 / -1; } }
.erro { font-size: 0.875rem; font-weight: 500; color: var(--cai); }
.erro:empty { display: none; }
/* interruptor */
.marca-caixa, .confirma { display: flex; gap: 12px; align-items: center; min-height: var(--alvo); font-size: 0.9375rem; font-weight: 400; cursor: pointer; }
.confirma { font-weight: 500; }
.marca-caixa input, .confirma input { position: relative; flex: none; width: 46px; height: 28px; margin: 0; border-radius: 14px; background: var(--contorno); appearance: none; -webkit-appearance: none; cursor: pointer; transition: background-color 220ms ease; }
.marca-caixa input::before, .confirma input::before { content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: var(--sup-forte); box-shadow: 0 2px 5px rgb(var(--i) / 0.25); transition: transform 260ms var(--ios); }
.marca-caixa input:checked, .confirma input:checked { background: var(--ok-chave); }
.marca-caixa input:checked::before, .confirma input:checked::before { transform: translateX(18px); }

/* mostrar senha */
.senha { position: relative; display: block; }
.senha input { padding-right: 48px; }
.senha button { position: absolute; right: 0; top: 0; display: grid; place-items: center; width: 44px; height: 100%; padding: 0; border: 0; border-radius: 0 var(--r-p) var(--r-p) 0; background: none; color: var(--suave); }
.senha button[aria-pressed="true"] { color: var(--ocean); }

.pular { position: fixed; left: 12px; top: 8px; z-index: 100; min-height: var(--alvo); padding: 0 16px; border: 0; border-radius: 999px; background: var(--ocean); color: var(--sobre); transform: translateY(-80px); }
.pular:focus-visible { transform: none; }

/* selo da demonstração */
.faixa-demo { padding: 6px 16px; background: #0F1F1A; color: #FFFFFF; font-size: 0.8125rem; text-align: center; }

/* entrada: quadro com o painel do formulário curvado sobre a cor */
.entrada { min-height: calc(100svh - 32px); display: grid; }
.entrada__quadro { display: grid; width: 100%; min-height: 100%; background: var(--sup); }
.lado { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px 20px 52px; background: var(--degrade); background-size: 100% 165%; background-repeat: no-repeat; color: #FFFFFF; }
.lado .t1 { font-size: clamp(1.875rem, 3.5vw, 3rem); max-width: 12ch; line-height: 1.06; }
.lado p { max-width: 36ch; margin-top: 12px; color: #FFFFFF; }
.lado__texto { margin-top: 14px; }
.marca { display: inline-flex; align-items: center; gap: 7px; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1; text-decoration: none; }
.entrada__form { position: relative; display: flex; flex-direction: column; gap: 18px; margin-top: -30px; padding: 18px 20px 28px; border-radius: 30px 30px 0 0; background: var(--sup); }
.entrada__topo { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.entrada__topo .btn { padding: 0 16px; font-size: 0.875rem; }
.entrada__miolo { display: grid; gap: 22px; width: 100%; max-width: 520px; margin: auto; }
.entrada__tit { display: grid; gap: 6px; }
.entrada__acao { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 4px; }
.entrada__acao .btn { min-width: 190px; }
.sociais { display: grid; gap: 8px; }
.social { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 0 12px; border: 1px solid var(--linha); border-radius: 999px; background: var(--sup-forte); font-size: 0.9375rem; font-weight: 500; transition: border-color 160ms ease, transform 180ms var(--ios); }
.social:hover { border-color: var(--ocean); }
.social:active { transform: scale(0.97); }
.social svg { width: 19px; height: 19px; flex: none; }
.social--email { display: none; color: var(--tinta); }
.ou { display: flex; align-items: center; gap: 12px; color: var(--suave); font-size: 0.8125rem; }
.ou::before, .ou::after { content: ""; flex: 1; height: 1px; background: var(--linha); }
@media (max-width: 899px) {
  .sociais { display: flex; justify-content: center; gap: 14px; }
  .social { width: 58px; height: 58px; padding: 0; border-radius: 50%; }
  .social svg { width: 23px; height: 23px; }
  .social__nome { display: none; }
}
@media (min-width: 560px) and (max-width: 899px) and (max-height: 500px) {
  .entrada__quadro { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); }
  .lado { padding-bottom: 22px; }
  .lado p { display: none; }
  .entrada__form { margin: 0 0 0 -30px; border-radius: 30px 0 0 30px; }
  .sociais { display: flex; justify-content: center; gap: 14px; }
  .social { width: 54px; height: 54px; min-height: 0; padding: 0; border-radius: 50%; }
  .social__nome { display: none; }
}
.contas { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--linha); }
.contas__lista { display: flex; flex-wrap: wrap; gap: 8px; }
.conta { min-height: var(--alvo); padding: 0 14px; border: 0; border-radius: 999px; background: var(--preench); font-size: 0.8125rem; font-weight: 500; transition: background-color 160ms ease, transform 180ms var(--ios); }
.conta:hover { background: var(--hover-forte); }
.conta:active { transform: scale(0.97); }
@media (min-width: 900px) {
  .entrada__quadro { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .lado { padding: clamp(28px, 3vw, 48px) 110px clamp(28px, 3vw, 48px) clamp(30px, 3.4vw, 56px); }
  .lado { background-size: 100% 100%; }
  .lado__fim { display: block; color: #0F1F1A; }
  .entrada__form { z-index: 1; margin: 0 0 0 -76px; padding: 26px clamp(24px, 3vw, 48px) 34px clamp(48px, 6vw, 88px); border-radius: 76px 0 0 76px; }
}

/* telas de entrada: voltar, botões e aviso */
.entrada__voltar { display: none; }
.entrada__aviso { display: none; }
.entrada__duas { display: grid; justify-items: center; gap: 10px; }
.entrada__duas .btn { width: min(280px, 100%); }
.entrada__tit--centro { justify-items: center; text-align: center; }
.entra-seq > * { animation: seq-entra 480ms var(--suave-sai) backwards; }
.entra-seq > *:nth-child(2) { animation-delay: 70ms; }
.entra-seq > *:nth-child(3) { animation-delay: 130ms; }
.entra-seq > *:nth-child(4) { animation-delay: 190ms; }
.entra-seq > *:nth-child(5) { animation-delay: 250ms; }
@keyframes seq-entra { from { opacity: 0; transform: translate3d(0, 14px, 0); } }
.sociais .social { animation: logo-surge 520ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
.sociais .social:nth-child(1) { animation-delay: 120ms; }
.sociais .social:nth-child(2) { animation-delay: 170ms; }
.sociais .social:nth-child(3) { animation-delay: 220ms; }
.sociais .social:nth-child(4) { animation-delay: 270ms; }
@keyframes logo-surge { from { opacity: 0; transform: scale(0.55) translate3d(0, 14px, 0); } }
/* login do celular: só o degradê em cima e o painel curvo embaixo */
@media (max-width: 899px) and (min-height: 501px), (max-width: 559px) {
  .faixa-demo:has(+ .entrada) { display: none; }
  .entrada { position: fixed; inset: 0; display: block; min-height: 0; overflow: hidden; }
  .entrada__quadro { position: absolute; inset: 0; display: block; background: none; }
  .lado { position: absolute; inset: 0; padding: 0; background-size: 100% 100%; }
  .lado > * { display: none; }
  .entrada__form { position: absolute; left: 0; right: 0; bottom: 0; max-height: 92dvh; margin: 0; padding: 36px 24px calc(18px + env(safe-area-inset-bottom)); gap: 16px; border-radius: 50% 50% 0 0 / 46px; overflow-y: auto; box-shadow: 0 100vh 0 var(--sup); animation: painel-sobe 720ms var(--ios) 120ms backwards; }
  #abertura.ve ~ #app .entrada__form { animation-delay: 900ms; }
  .entrada__miolo { width: 100%; max-width: 420px; margin: 0 auto; }
  .entrada__tit:not(.entrada__tit--centro) { padding: 0 34px; }
  .entrada__tit { justify-items: center; text-align: center; }
  .entrada__voltar { position: absolute; left: 20px; top: 30px; z-index: 1; display: grid; place-items: center; width: var(--alvo); height: var(--alvo); padding: 0; border: 0; border-radius: 50%; background: var(--preench); color: var(--tinta); }
  .entrada__voltar .ic { rotate: 90deg; }
  .entrada__topo { order: 2; justify-content: center; }
  .entrada__miolo { order: 1; }
  .entrada__aviso { display: block; order: 3; color: var(--suave); font-size: 0.8125rem; text-align: center; }
  .social--email { display: flex; }
  .entrada__email, .ou { display: none; }
  .com-email .entrada__email { display: block; animation: seq-entra 420ms var(--suave-sai) backwards; }
  .com-email .ou { display: flex; }
  .com-email .social--email { display: none; }
  .contas__lista { justify-content: center; }
  .contas > p { text-align: center; }
  .entrada__acao { justify-content: center; }
}
@keyframes painel-sobe { from { transform: translate3d(0, 100%, 0); } }

/* abertura: nome, logo girando e linha carregando */
#abertura { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--degrade); background-size: 100% 100%; color: #FFFFFF; opacity: 0; visibility: hidden; transition: opacity 340ms ease, visibility 340ms; }
#abertura.ve { opacity: 1; visibility: visible; transition-duration: 180ms; }
.abertura__in { display: grid; justify-items: center; gap: 16px; padding-bottom: 12vh; }
.ve .abertura__in { animation: abertura-entra 620ms var(--suave-sai) backwards; }
.sai .abertura__in { transform: scale(1.05); transition: transform 340ms ease; }
@keyframes abertura-entra { from { opacity: 0; transform: translate3d(0, 16px, 0) scale(0.96); } }
.abertura__logo { width: 46px; height: 46px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; animation: gira 2.6s linear infinite; }
.abertura__nome { font-size: clamp(1.75rem, 6vw, 2.5rem); font-weight: 700; letter-spacing: -0.03em; }
.abertura__linha { width: min(190px, 50vw); height: 2px; border-radius: 1px; background: rgb(241 240 238 / 0.24); overflow: hidden; }
.abertura__linha b { display: block; height: 100%; background: #FFFFFF; transform: scaleX(0); transform-origin: left; }
.ve .abertura__linha b { animation: abertura-carrega 1040ms cubic-bezier(0.65, 0, 0.35, 1) forwards; }
@keyframes abertura-carrega { to { transform: scaleX(1); } }

/* entrada no SaaS: menu, conteúdo e barra chegam em sequência */
.casca--entra .lateral__menu, .casca--entra .lateral__cartao { animation: entra-lado 620ms var(--ios) backwards; }
.casca--entra .lateral__cartao { animation-delay: 80ms; }
.casca--entra .lateral__cartao--mini { animation-delay: 150ms; }
.casca--entra .conteudo > * { animation: seq-entra 620ms var(--suave-sai) 120ms backwards; }
@keyframes entra-lado { from { opacity: 0; transform: translate3d(-28px, 0, 0); } }

/* casca: menu lateral flutuante e translúcido */
.casca { min-height: calc(100svh - 32px); display: grid; }
@media (min-width: 960px) {
  .casca { grid-template-columns: 252px minmax(0, 1fr); transition: grid-template-columns 320ms var(--ios); }
  .casca--fechada { grid-template-columns: 0px minmax(0, 1fr); }
}
.lateral { display: none; }
@media (min-width: 960px) {
  .lateral { position: sticky; top: 10px; align-self: start; width: 242px; max-height: calc(100svh - 20px); margin: 10px 0 10px 10px; display: flex; flex-direction: column; gap: 10px; transition: transform 320ms var(--ios), opacity 200ms ease, visibility 320ms; overflow-y: auto; scrollbar-width: none; }
  .lateral__menu, .lateral__cartao { flex: none; border: 1px solid rgb(255 255 255 / 0.6); border-radius: var(--r-g); background: var(--vidro); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); box-shadow: var(--sombra-1); }
  .lateral__menu { display: flex; flex-direction: column; gap: 12px; padding: 14px 10px 10px; }
}
.casca--fechada .lateral { transform: translateX(-266px); opacity: 0; visibility: hidden; }
.lateral .marca { padding: 2px 8px 4px; }
.lateral .btn { width: 100%; flex: none; }
.menu { display: grid; gap: 2px; }
.menu a { display: flex; align-items: center; gap: 11px; min-height: 38px; padding: 0 10px; border-radius: var(--r-p); color: var(--tinta); font-size: 0.875rem; text-decoration: none; transition: background-color 140ms ease; }
.menu a .ic { color: var(--ocean); }
.menu a:hover { background: var(--hover); }
.menu a[aria-current="page"] { background: var(--ocean); color: var(--sobre); font-weight: 500; }
.menu a[aria-current="page"] .ic { color: var(--sobre); }
.conteudo { min-width: 0; padding: 0 max(clamp(14px, 2.2vw, 28px), env(safe-area-inset-right)) calc(112px + env(safe-area-inset-bottom)) max(clamp(14px, 2.2vw, 28px), env(safe-area-inset-left)); }
#conteudo:focus { outline: 0; }
.conteudo.entra > :not(.topo-app) { animation: vista-entra 340ms var(--ios) backwards; }
@keyframes vista-entra { from { opacity: 0; transform: translateY(10px); } }

/* barra do topo */
.topo-app { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; margin: 0 -4px 12px; padding: 10px 4px; pointer-events: none; }
.topo-app > * { pointer-events: auto; }
.busca { position: relative; flex: 0 1 340px; min-width: 0; }
.busca .ic { z-index: 1; position: absolute; left: 14px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--suave); pointer-events: none; }
.busca input { width: 100%; min-height: var(--alvo); padding: 0 16px 0 40px; border: 1px solid rgb(255 255 255 / 0.6); border-radius: 999px; background: var(--vidro); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); box-shadow: var(--sombra-vidro); font-size: 1rem; }
.busca input:focus { outline: 2px solid var(--ocean); outline-offset: 0; }
.busca input::placeholder { color: var(--suave); }
.busca { z-index: 2; }
.busca__lista { position: absolute; left: 0; right: 0; top: calc(100% + 6px); max-height: 60dvh; overflow-y: auto; padding: 6px; border-radius: 18px; background: var(--sup-forte); box-shadow: var(--sombra-2); }
.busca__lista[hidden] { display: none; }
.busca__lista a { display: flex; align-items: center; min-height: var(--alvo); padding: 0 12px; border-radius: 12px; color: inherit; font-size: 0.9375rem; text-decoration: none; }
.busca__lista a:hover, .busca__lista a:focus-visible { background: var(--hover); }
.busca__tit { padding: 8px 12px 2px; color: var(--suave); font-size: 0.8125rem; font-weight: 500; }
.busca__nada { padding: 12px; color: var(--suave); font-size: 0.875rem; }
.topo-app__dir { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.redondo { position: relative; display: grid; place-items: center; width: var(--alvo); height: var(--alvo); flex: none; padding: 0; border: 1px solid rgb(255 255 255 / 0.6); border-radius: 50%; background: var(--vidro); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); box-shadow: var(--sombra-vidro); transition: transform 180ms var(--ios); }
.redondo:active { transform: scale(0.94); }
.redondo[disabled] { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.redondo b { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--ocean); color: var(--sobre); font-size: 0.8125rem; font-weight: 600; line-height: 18px; text-align: center; }
.avatar { display: grid; place-items: center; width: var(--alvo); height: var(--alvo); flex: none; overflow: hidden; border-radius: 50%; background: var(--ocean); color: var(--sobre); font-size: 0.875rem; font-weight: 600; letter-spacing: 0; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.topo-app__conta { display: none; border-radius: 50%; text-decoration: none; }
body:not(:has(.baixo)) .topo-app__conta { display: block; }
@media (min-width: 960px) { body:not(:has(.baixo)) .casca:not(.casca--fechada) .topo-app__conta { display: none; } }
.alterna-menu { display: none; }
@media (min-width: 960px) { .alterna-menu { display: grid; } }

/* conta no topo do menu, como nos Ajustes do iPhone */
.perfil { display: flex; align-items: center; gap: 10px; flex: none; min-height: 56px; padding: 6px 8px 6px 6px; border-radius: 16px; background: var(--sup-forte); box-shadow: 0 1px 3px rgb(var(--s) / 0.08); color: inherit; text-decoration: none; transition: transform 180ms var(--ios), box-shadow 180ms ease; }
.perfil:hover { box-shadow: 0 2px 10px rgb(var(--s) / 0.14); }
.perfil:active { transform: scale(0.98); }
.perfil[aria-current="page"] { box-shadow: 0 0 0 2px var(--ocean); }
.perfil .avatar { width: 44px; height: 44px; font-size: 0.875rem; }
.perfil__txt { display: grid; flex: 1; min-width: 0; }
.perfil__txt b { font-size: 0.9375rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perfil__txt span { color: var(--suave); font-size: 0.8125rem; letter-spacing: 0; line-height: 1.2; }

/* tela da conta */
.minha { display: grid; gap: 22px; width: 100%; max-width: 620px; margin: 0 auto; }
.minha__valor { flex: 0 1 auto; min-width: 0; color: var(--suave); font-size: 0.9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voltar { display: inline-flex; align-items: center; gap: 4px; min-height: var(--alvo); margin: -6px 0 2px -4px; color: var(--ocean); font-size: 0.9375rem; font-weight: 500; text-decoration: none; }
.voltar .ic { width: 18px; height: 18px; rotate: 90deg; }
.voltar:hover { color: var(--ocean-2); }

.topo-tela { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 18px; }
.topo-tela p { margin-top: 4px; color: var(--suave); max-width: 60ch; }
.acoes { display: flex; flex-wrap: wrap; gap: 8px; }

/* menu do celular: barra flutuante de vidro */
.baixo { position: fixed; left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 40; padding: 5px; border: 1px solid rgb(255 255 255 / 0.6); border-radius: 30px; background: var(--vidro); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8); box-shadow: var(--sombra-vidro); transition: transform 380ms var(--ios), opacity 220ms ease, background-color 240ms ease; }
.baixo--toque { transform: scale(1.018); }
.baixo__abas { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; transition: opacity 200ms ease, transform 380ms var(--ios); }
.baixo__abas > :not(.lente) { position: relative; z-index: 1; will-change: transform; }
@media (min-width: 960px) { .baixo { left: 0; right: 0; width: min(460px, calc(100% - 24px)); margin-inline: auto; } }
.baixo--oculta { transform: translate3d(0, calc(100% + 28px), 0); opacity: 0; pointer-events: none; }
.baixo__abas a, .baixo__abas button { display: grid; justify-items: center; align-content: center; gap: 1px; min-height: 52px; padding: 4px 2px; border: 0; border-radius: 24px; background: none; color: var(--suave); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0; text-decoration: none; transition: background-color 160ms ease, transform 180ms var(--ios); }
.baixo__abas a:active, .baixo__abas button:active { transform: scale(0.95); }
.baixo__abas a[aria-current="page"] { color: var(--ocean); font-weight: 600; }
dialog::backdrop { background: rgb(var(--i) / 0.36); }

/* status */
body { --st: var(--ok-chave); }
body[data-status="atendimento"] { --st: #D9A400; }
body[data-status="ocupado"] { --st: #D6281E; }
body[data-status="ausente"] { --st: #8A90A6; }
body[data-status="ocupado"] .sino-num { display: none; }
.ponto-status { position: absolute; right: -1px; bottom: -1px; width: 13px; height: 13px; border: 2.5px solid var(--sup-forte); border-radius: 50%; background: var(--st); transition: background-color 200ms ease; }
.perfil__foto { position: relative; flex: none; display: block; }

/* lente de vidro da barra: em repouso marca a tela atual; com o dedo, flutua por cima */
.lente { position: absolute; top: 0; bottom: 0; left: 0; z-index: 0; border-radius: 24px; background: var(--preench); pointer-events: none; transform-origin: center; will-change: transform; transition: background-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease; }
.baixo--toque .lente { z-index: 2; background: radial-gradient(120% 100% at 50% 50%, rgb(255 255 255 / 0.02) 0%, rgb(255 255 255 / 0.05) 58%, rgb(255 255 255 / 0.26) 100%); -webkit-backdrop-filter: saturate(1.7) brightness(1.04); backdrop-filter: saturate(1.7) brightness(1.04); box-shadow: inset 0 1.5px 1px rgb(255 255 255 / 0.95), inset 0 -1.5px 2px rgb(255 255 255 / 0.55), inset 1px 0 1px rgb(255 255 255 / 0.4), inset -1px 0 1px rgb(255 255 255 / 0.4), inset 0 0 0 0.5px rgb(var(--c) / 0.28), 0 6px 18px rgb(var(--s) / 0.2); }
@media (prefers-reduced-transparency: reduce) { .baixo--toque .lente { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--hover-forte); } }

/* barra do celular que se transforma, com clínica e conta */
.ilha__barra { position: relative; height: 54px; }
.baixo--aberta .baixo__abas { opacity: 0; transform: translateX(-20px) scale(0.96); pointer-events: none; }
.ilha__conta { position: absolute; inset: 0; display: flex; gap: 6px; opacity: 0; transform: translateX(20px) scale(0.96); pointer-events: none; touch-action: none; transition: opacity 200ms ease, transform 380ms var(--ios); }
.baixo--aberta .ilha__conta { opacity: 1; transform: none; pointer-events: auto; }
.ilha__painel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 420ms var(--ios); }
.baixo--aberta .ilha__painel { grid-template-rows: 1fr; }
.ilha__painel-in { min-height: 0; overflow: hidden; }
.baixo--aberta .ilha__painel-in { max-height: 58dvh; padding: 6px 8px 8px; overflow-y: auto; }
.ilha__painel .linha { min-height: 50px; padding: 7px 8px; font-size: 0.9375rem; }
.ilha__painel .linha > .ic { color: var(--ocean); }
.ilha__painel .linha[disabled] { cursor: default; }
.ilha__pilha { position: relative; display: flex !important; align-items: center; justify-content: center; }
.ilha__redondo { position: relative; display: grid; place-items: center; flex: none; width: 54px; height: 54px; padding: 0; border: 0; border-radius: 50%; background: var(--preench); color: var(--tinta); }
.ilha__redondo b { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--ocean); color: var(--sobre); font-size: 0.8125rem; line-height: 18px; text-align: center; }
.ilha__chip { display: flex; align-items: center; flex: 0 0 54px; min-width: 0; height: 54px; padding: 0; border: 0; border-radius: 27px; background: var(--preench); overflow: hidden; text-align: left; transition: flex-grow 420ms var(--ios), flex-basis 420ms var(--ios); }
.baixo[data-modo="clinica"] .ilha__chip--clinica, .baixo[data-modo="conta"] .ilha__chip--conta { flex: 1 1 0; }
.ilha__logo { display: grid; place-items: center; flex: none; width: 42px; height: 42px; margin: 6px; border-radius: 50%; background: var(--beige); color: var(--tinta); font-size: 0.8125rem; font-weight: 700; }
.ilha__txt { display: grid; min-width: 0; opacity: 0; transition: opacity 200ms ease; }
.baixo[data-modo="clinica"] .ilha__chip--clinica .ilha__txt, .baixo[data-modo="conta"] .ilha__chip--conta .ilha__txt { opacity: 1; transition-delay: 120ms; }
.ilha__txt b, .ilha__txt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ilha__txt b { font-size: 0.875rem; font-weight: 600; line-height: 1.2; }
.ilha__txt span { color: var(--suave); font-size: 0.8125rem; letter-spacing: 0; }
.ilha__quem { display: flex; align-items: center; flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; text-align: left; }
.ilha__quem .avatar { flex: none; width: 42px; height: 42px; margin: 6px; font-size: 0.8125rem; }
.ilha__status { display: none; place-items: center; flex: none; width: 44px; height: 44px; margin-right: 5px; padding: 0; border: 0; border-radius: 50%; background: var(--st); color: #fff; transition: background-color 200ms ease; }
body[data-status="atendimento"] .ilha__status { color: var(--tinta); }
.ilha__status .ic { width: 18px; height: 18px; }
.baixo[data-modo="conta"] .ilha__status { display: grid; }
.ilha__op { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 4px 8px 4px 4px; border: 0; border-radius: 18px; background: none; font-size: 0.9375rem; text-align: left; }
.ilha__op:hover { background: var(--hover); }
.ilha__op-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; }
.ilha__op-ic .ic { width: 16px; height: 16px; }
.ilha__op[data-status="disponivel"] .ilha__op-ic { background: var(--ok-chave); }
.ilha__op[data-status="atendimento"] .ilha__op-ic { background: #D9A400; color: var(--tinta); }
.ilha__op[data-status="ocupado"] .ilha__op-ic { background: #D6281E; }
.ilha__op[data-status="ausente"] .ilha__op-ic { background: #8A90A6; }

/* cartões abaixo do menu lateral */
.lateral__cartao { display: none; }
@media (min-width: 960px) { .lateral__cartao { display: block; } }
.lateral__cartao--mini { padding: 12px; }
.mini__topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; padding-left: 4px; font-size: 0.875rem; }
.mini__topo b { font-weight: 600; }
.mini__topo b::first-letter { text-transform: uppercase; }
.mini__nav { display: flex; }
.mini__nav button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ocean); }
.mini__nav button:hover:not([disabled]) { background: var(--hover); }
.mini__nav button[disabled] { opacity: 0.35; cursor: not-allowed; }
.mini__nav .ic { width: 14px; height: 14px; }
.mini__nav .seta-esq { rotate: 90deg; }
.mini__nav .seta-dir { rotate: -90deg; }
.mini__grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 1px; text-align: center; }
.mini__sem { color: var(--suave); font-size: 0.8125rem; font-weight: 500; line-height: 20px; }
.mini__dia { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; color: inherit; font-size: 0.8125rem; letter-spacing: 0; text-decoration: none; transition: background-color 140ms ease; }
a.mini__dia:hover { background: var(--hover); }
.mini__dia--futuro { color: var(--suave); opacity: 0.55; }
.mini__dia--tem::after { content: ""; position: absolute; bottom: 2px; width: 3px; height: 3px; border-radius: 50%; background: var(--ocean); }
.mini__dia--hoje { background: var(--ocean); color: var(--sobre); font-weight: 600; }
a.mini__dia--hoje:hover { background: var(--ocean-2); }
.mini__dia--hoje::after { background: var(--cream); }
@media (max-height: 780px) { .lateral__cartao--mini { display: none; } }

/* painéis e grupos */
.faixa, .q-ocean, .q-papel { padding: clamp(16px, 1.8vw, 22px); border-radius: var(--r-g); background: var(--sup); box-shadow: var(--sombra-1); }
.q-beige { padding: clamp(16px, 1.8vw, 22px); border-radius: var(--r-g); background: rgb(var(--c) / 0.55); box-shadow: none; }
.faixas { display: grid; gap: 14px; }
.faixa__alto { display: grid; gap: 18px; }
@media (min-width: 900px) { .faixa__alto { grid-template-columns: 0.8fr 1.2fr; align-items: center; } }
.numero-gigante { font-size: clamp(2rem, 3.2vw, 2.75rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.linha-numeros { display: grid; gap: 16px; }
@media (min-width: 640px) { .linha-numeros { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }
.linha-numeros b { display: block; font-size: clamp(1.25rem, 2vw, 1.625rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
.linha-numeros > div + div { border-top: 1px solid var(--linha); padding-top: 14px; }
@media (min-width: 640px) { .linha-numeros > div + div { border-top: 0; padding-top: 0; border-left: 1px solid var(--linha); padding-left: 18px; } }
.duas { display: grid; gap: 14px; }
@media (min-width: 1000px) { .duas { grid-template-columns: 1fr 1fr; } }

/* lista agrupada: linhas como nos Ajustes e na Carteira */
.lista { display: grid; }
.lista > li + li { box-shadow: 0 -1px 0 var(--linha); }
.linha { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 8px; border: 0; border-radius: var(--r-m); background: none; color: inherit; text-align: left; text-decoration: none; }
a.linha, button.linha { cursor: pointer; transition: background-color 140ms ease; }
a.linha:hover, button.linha:hover { background: var(--hover); }
a.linha:active, button.linha:active { background: var(--hover-forte); }
.linha__ic { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--preench); color: var(--ocean); font-size: 0.8125rem; font-weight: 600; }
.linha__ic .ic { width: 18px; height: 18px; }
.linha__txt { display: grid; flex: 1; min-width: 0; gap: 1px; }
.linha__txt b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha__txt span { color: var(--suave); font-size: 0.8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha__txt a { color: inherit; text-decoration: none; text-underline-offset: 3px; }
.linha__txt a:hover { color: var(--ocean-2); }
.linha__fim { display: grid; flex: none; gap: 1px; text-align: right; }
.linha__fim b { font-weight: 500; font-variant-numeric: tabular-nums; }
.linha__fim span { color: var(--suave); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.linha__seta { width: 16px; height: 16px; flex: none; color: var(--suave); rotate: -90deg; }

/* faixa de números do painel */
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 4px 0; background: var(--sup-forte); box-shadow: var(--sombra-2); }
.kpi { position: relative; isolation: isolate; display: block; min-width: 0; padding: 12px 14px; color: inherit; text-decoration: none; }
.kpi::before { content: ""; position: absolute; inset: 5px; z-index: -1; border-radius: 14px; background: transparent; transition: background-color 180ms ease; }
.kpi:hover::before { background: var(--hover); }
.kpi:focus-visible { outline-offset: -5px; border-radius: 14px; }
.kpi:nth-child(even) { border-left: 1px solid var(--linha); }
.kpi:nth-child(n+3) { border-top: 1px solid var(--linha); }
.kpi:last-child { grid-column: 1 / -1; }
@media (min-width: 1100px) {
  .kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .kpi { padding: 12px 18px; }
  .kpi:nth-child(n) { border-top: 0; border-left: 1px solid var(--linha); }
  .kpi:first-child { border-left: 0; }
  .kpi:last-child { grid-column: auto; }
}
.kpi__rot { color: var(--suave); font-size: 0.8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi__linha { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 7px; margin-top: 2px; }
.kpi__num { font-size: clamp(1.1875rem, 1.7vw, 1.5rem); font-weight: 600; line-height: 1.25; letter-spacing: -0.022em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi__delta { display: inline-flex; gap: 2px; padding: 1px 8px; border-radius: 999px; background: var(--ok-fundo); box-shadow: 0 3px 10px var(--ok-sombra); color: var(--ok); font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi__delta--cai { background: var(--cai-fundo); box-shadow: 0 3px 10px var(--cai-sombra); color: var(--cai); }
.kpi__delta--neutro { padding: 0; background: none; box-shadow: none; color: var(--suave); font-weight: 500; }
.kpis--anima .kpi { animation: kpi-entra 520ms var(--suave-sai) backwards; }
.kpis--anima .kpi__delta { animation: delta-sobe 480ms var(--suave-sai) 820ms backwards; }
.kpis--anima .kpi:nth-child(2) { animation-delay: 90ms; }
.kpis--anima .kpi:nth-child(2) .kpi__delta { animation-delay: 910ms; }
.kpis--anima .kpi:nth-child(3) { animation-delay: 180ms; }
.kpis--anima .kpi:nth-child(3) .kpi__delta { animation-delay: 1000ms; }
.kpis--anima .kpi:nth-child(4) { animation-delay: 270ms; }
.kpis--anima .kpi:nth-child(5) { animation-delay: 360ms; }
.kpis--anima .kpi:nth-child(5) .kpi__delta { animation-delay: 1180ms; }
@keyframes kpi-entra { from { opacity: 0; transform: translateY(8px); } }
@keyframes delta-sobe { from { opacity: 0; transform: translateY(7px); } }

/* gráfico + lateral */
.grafico-linha { display: grid; gap: 14px; }
@media (min-width: 1100px) { .grafico-linha { grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); } }
.grafico-linha > * { min-width: 0; }
.painel-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.segmento { display: inline-flex; padding: 2px; border-radius: 10px; background: var(--preench); }
.segmento button { min-height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--tinta); font-size: 0.8125rem; transition: background-color 180ms ease; }
.segmento button[aria-pressed="true"] { background: var(--sup-forte); font-weight: 600; box-shadow: 0 1px 3px rgb(var(--i) / 0.16); }
@media (pointer: coarse) {
  .segmento button { min-height: 44px; }
  .menu a { min-height: var(--alvo); }
  a.barra-h { min-height: var(--alvo); }
  .tabela-grafico summary { padding: 10px 0; }
  .mini__nav button { width: var(--alvo); height: var(--alvo); }
}
.lg { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; padding-top: 50px; }
.revela .lg__area > svg { animation: grafico-revela 560ms var(--ios); }
@keyframes grafico-revela { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.lg__y { display: flex; flex-direction: column; justify-content: space-between; height: 230px; color: var(--suave); font-size: 0.8125rem; text-align: right; font-variant-numeric: tabular-nums; }
.lg__y span { line-height: 1; }
.lg__area { position: relative; height: 230px; touch-action: pan-y; -webkit-user-select: none; user-select: none; cursor: pointer; background: repeating-linear-gradient(to bottom, var(--linha) 0 1px, transparent 1px 25%); border-bottom: 1px solid var(--linha); }
.lg__area:focus-visible { outline-offset: 6px; }
.lg__area > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lg__fill { fill: rgb(var(--c) / 0.22); }
.lg__line { fill: none; stroke: var(--ocean); stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.lg__cruz { position: absolute; left: 0; top: -6px; bottom: 0; width: 1px; background: var(--ocean); opacity: 0.45; pointer-events: none; will-change: transform; }
.lg__ponto { position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 3px solid var(--sup-forte); border-radius: 50%; background: var(--ocean); box-shadow: 0 2px 8px rgb(var(--s) / 0.4); pointer-events: none; will-change: transform; }
.lg__tip { position: absolute; left: 0; top: -50px; z-index: 2; display: flex; align-items: center; gap: 6px; min-height: 42px; padding: 4px 8px 4px 12px; border-radius: 12px; background: var(--sup-forte); box-shadow: 0 3px 14px rgb(var(--s) / 0.16); font-size: 0.8125rem; letter-spacing: 0; white-space: nowrap; will-change: transform; }
.lg__tip-txt { display: grid; }
.lg__tip b { font-size: 0.875rem; font-weight: 600; letter-spacing: -0.012em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.lg__tip-txt > span { color: var(--suave); line-height: 1.25; }
.lg__tip .linha__seta { width: 14px; height: 14px; }
.lg__x { grid-column: 2; position: relative; height: 22px; margin-top: 6px; color: var(--suave); font-size: 0.8125rem; }
.lg__x span { position: absolute; translate: -50% 0; white-space: nowrap; }
.lg__x span:first-child { translate: 0 0; }
.lg__x span:last-child { translate: -100% 0; }
.tabela-grafico { margin-top: 8px; font-size: 0.8125rem; }
.tabela-grafico summary { width: max-content; color: var(--suave); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.tabela-grafico table { margin-top: 8px; }
.barras-h { display: grid; grid-template-columns: minmax(0, 1fr); gap: 15px; }
.barra-h { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; font-size: 0.875rem; }
a.barra-h { margin: -6px -8px; padding: 6px 8px; border-radius: 12px; color: inherit; text-decoration: none; transition: background-color 160ms ease, transform 180ms var(--ios); }
a.barra-h:hover { background: var(--hover); }
a.barra-h:active { transform: scale(0.985); }
a.barra-h:hover .barra-h__fundo { background: rgb(var(--o) / 0.2); }
a.barra-h .barra-h__fundo i { transition: background-color 160ms ease; }
a.barra-h:hover .barra-h__fundo i { background: var(--ocean); }
.barra-h__topo { display: flex; justify-content: space-between; gap: 10px; }
.barra-h__topo span { min-width: 0; line-height: 1.25; }
.barra-h__topo b { flex: none; }
.barra-h__topo b { font-weight: 600; font-variant-numeric: tabular-nums; }
.barra-h__fundo { height: 6px; border-radius: 3px; background: rgb(var(--o) / 0.14); }
.barra-h__fundo i { display: block; height: 100%; border-radius: 3px; background: var(--slate); }

/* abas sobre o painel */
.abas { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.abas button { flex: none; min-height: var(--alvo); padding: 0 16px; border: 0; border-radius: 14px 14px 0 0; background: none; color: var(--suave); font-size: 0.9375rem; }
.abas button:hover { color: var(--tinta); }
.abas button[aria-pressed="true"] { background: var(--sup); color: var(--tinta); font-weight: 600; }
.abas button b { margin-left: 5px; padding: 1px 7px; border-radius: 9px; background: var(--ocean); color: var(--sobre); font-size: 0.8125rem; font-weight: 600; }
.painel-abas { border-top-left-radius: 0; }
.titulo-link { color: inherit; text-decoration: none; }
.titulo-link:hover { color: var(--ocean-2); }