/* tabelas */
.tabela-caixa { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
th { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--linha); color: var(--suave); font-size: 0.8125rem; font-weight: 400; text-align: left; white-space: nowrap; }
td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--linha); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-right: 0; }
@media (max-width: 720px) {
  .tabela-cartoes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabela-cartoes, .tabela-cartoes tbody, .tabela-cartoes tr, .tabela-cartoes td { display: block; }
  .tabela-cartoes tr { padding: 12px 0; border-bottom: 1px solid var(--linha); }
  .tabela-cartoes tr:last-child { border-bottom: 0; }
  .tabela-cartoes td { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; border: 0; text-align: right; white-space: normal; }
  .tabela-cartoes td::before { content: attr(data-r); color: var(--suave); text-align: left; flex: none; }
  .tabela-cartoes td[data-r=""]::before { display: none; }
}
.etiqueta { display: inline-flex; align-items: center; gap: 5px; width: max-content; padding: 2px 9px; border-radius: 999px; background: var(--preench); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0; white-space: nowrap; }
.etiqueta .ic { width: 13px; height: 13px; }
.filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 12px; }
.filtros .campo { flex: 1 1 170px; }
.vazio { display: grid; justify-items: start; gap: 12px; padding: 16px 0; }

/* (legado) */
.soltar { position: relative; display: grid; place-items: center; align-content: center; gap: 8px; min-height: 280px; padding: 26px; border-radius: var(--r-g); background: var(--sup); box-shadow: var(--sombra-1); text-align: center; cursor: pointer; transition: transform 220ms var(--ios); }
.soltar:hover { transform: scale(1.005); }
.soltar:active { transform: scale(0.99); }
.soltar > .ic { width: 64px; height: 64px; padding: 18px; border-radius: 50%; background: var(--ocean); color: var(--sobre); box-sizing: border-box; }
.soltar input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.soltar:focus-within { outline: 2px solid var(--ocean); outline-offset: 2px; }

/* cliente */
.ficha { display: grid; gap: 14px; }
@media (min-width: 900px) { .ficha { grid-template-columns: 0.75fr 1.25fr; align-items: start; } }
.dados-lista { display: grid; gap: 10px; margin-top: 14px; }
.dados-lista dt { font-size: 0.8125rem; color: var(--suave); }

/* planos */
.planos { display: grid; gap: 14px; }
@media (min-width: 760px) { .planos { grid-template-columns: repeat(2, 1fr); } }
.plano-c { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: var(--r-g); background: var(--sup); box-shadow: var(--sombra-1); }
.plano-c.atual { box-shadow: 0 0 0 2px var(--ocean), var(--sombra-1); }
.plano-c .btn { margin-top: auto; }
.plano-c ul { display: grid; gap: 6px; margin: 4px 0 10px; font-size: 0.875rem; }

/* textos longos */
details.pergunta { border-bottom: 1px solid var(--linha); }
details.pergunta:last-child { border-bottom: 0; }
details.pergunta summary { display: flex; justify-content: space-between; align-items: center; gap: 14px; min-height: 48px; padding: 10px 0; font-weight: 500; cursor: pointer; list-style: none; }
details.pergunta summary::-webkit-details-marker { display: none; }
details.pergunta summary::after { content: "+"; font-size: 1.25rem; font-weight: 400; line-height: 1; color: var(--suave); }
details.pergunta[open] summary::after { content: "−"; }
details.pergunta p { padding-bottom: 14px; color: var(--suave); max-width: 66ch; }

/* janela: folha que sobe no celular, centrada no computador */
dialog.janela { width: min(calc(100% - 16px), 540px); max-height: calc(100dvh - 32px); margin: auto auto 8px; padding: clamp(20px, 3vw, 28px); border: 0; border-radius: 28px; background: var(--sup); color: var(--tinta); box-shadow: var(--sombra-2); }
dialog.janela[open] { animation: folha-sobe 380ms var(--ios); }
@media (min-width: 640px) { dialog.janela { margin: auto; } dialog.janela[open] { animation-name: janela-abre; } }
@keyframes janela-abre { from { opacity: 0; transform: scale(0.95); } }
.janela__alca { display: none; }
@media (max-width: 639px) { .janela__alca { display: block; width: 36px; height: 5px; margin: -8px auto 12px; border-radius: 3px; background: rgb(var(--o) / 0.25); } .janela h2 { touch-action: none; } .detalhe__topo, .detalhe__alca { touch-action: none; } }
.janela h2 { margin-bottom: 14px; font-size: 1.375rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.022em; }
.janela__fim { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 18px; }

/* aviso */
#aviso { position: fixed; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 95; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; width: max-content; max-width: calc(100% - 24px); padding: 12px 18px; border-radius: 999px; background: var(--tinta); color: var(--sobre); font-size: 0.875rem; box-shadow: var(--sombra-2); animation: aviso-sobe 320ms var(--ios); }
#aviso[hidden] { display: none; }
@keyframes aviso-sobe { from { opacity: 0; transform: translate(-50%, 12px); } }
#aviso button { min-height: 28px; padding: 0; border: 0; background: none; color: var(--sobre); font-weight: 600; flex: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; }
  .pc-lista li, .pg-hor, .pg__surge, .pg__hor-lista li, .pg__corpo, .pg__op, .pg__chip, .pg-card__bloco, .pg-fim__passos li, .pg-pronto__in, .pfc__foto, .pfc__iniciais, .pfc__txt > *, .pfc::after, .fin__cur, .fin-grupo, .sel__menu:popover-open, #abertura, .abertura__in, .entrada__form, .entra-seq > *, .sociais .social, .casca--entra * { animation: none !important; }
  .anima .entra-lista > *, .fila2__pulso::after { animation: none !important; }
  .anima .entra-lista > .ag-card, .revela .lg__area > svg, .kpis--anima .kpi, .kpis--anima .kpi__delta, dialog[open], .conteudo.entra > *, #aviso { animation: none !important; }
}

/* alegria com papel definido: lima é a ação de fotografar e o que está escolhido no herói; cada área tem sua cor */
.ed__rot { letter-spacing: 0; }
.faixa-demo { background: #000000; color: #FFFFFF; }
.q-beige { background: var(--beige); }
.lateral .btn[href="#/foto"] { background: var(--acao); color: #FFFFFF; box-shadow: 0 6px 18px rgb(var(--s) / 0.2); }
.lateral .btn[href="#/foto"]:hover { background: var(--acao-2); }
.baixo__abas a, .baixo__abas button { font-size: 0.75rem; }
.ganho__seg button[aria-pressed="true"] { background: var(--acento); color: var(--sobre-acento); }
.ed__pontos i.cheio { background: var(--acento); }
.asten { color: inherit; }
.menu2__topo { min-height: 42px; font-size: 0.9375rem; }
/* cor forte só na área em que a pessoa está; as outras ficam em tom claro da própria cor */
.menu2 > :nth-child(1) { --f: #E0D9FF; --g: #4A2FC2; --t: #5B3FD6; --tg: #FFFFFF; }
.menu2 > :nth-child(2) { --f: #FBE3DC; --g: #B5350F; --t: #F2541B; --tg: #FFFFFF; }
.menu2 > :nth-child(3) { --f: #CFE8FF; --g: #005BD1; --t: #0A6CF0; --tg: #FFFFFF; }
.menu2 > :nth-child(4) { --f: #F4FAC9; --g: #566100; --t: #DDF04F; --tg: #0F1F1A; }
.menu2 > :nth-child(5) { --f: #FFD6EA; --g: #C2185B; --t: #D93C93; --tg: #FFFFFF; }
.menu2 > :nth-child(6) { --f: #FFEDB0; --g: #7A5200; --t: #F7B733; --tg: #0F1F1A; }
.menu2__topo .ic:first-child { box-sizing: border-box; width: 30px; height: 30px; padding: 6px; border-radius: 9px; background: var(--f); color: var(--g); stroke-width: 1.9; transition: background-color 160ms ease, color 160ms ease; }
a.menu2__topo[aria-current="page"] .ic:first-child, .menu2__grupo.ativo > .menu2__topo .ic:first-child { background: var(--t); color: var(--tg); }
a.menu2__topo[aria-current="page"], .menu2__grupo.ativo:not(.aberto) > .menu2__topo, .menu2__dentro a[aria-current="page"] { background: var(--beige); color: var(--tinta); }
.baixo__abas a[aria-current="page"]:not(.foto-cta) .ic { stroke-width: 2.3; }
.t1 { text-wrap: balance; }
/* iniciais e ícones de lista em tons de fundo, como os retratos da referência */
.linha__ic, .ag-card__foto { background: #E3F1EA; color: #0F1F1A; }
li:nth-child(4n+2) > * > .linha__ic, .ag-card:nth-child(4n+2) .ag-card__foto { background: #EEF7B5; }
li:nth-child(4n+3) > * > .linha__ic, .ag-card:nth-child(4n+3) .ag-card__foto { background: #FFD9C7; }
li:nth-child(4n+4) > * > .linha__ic, .ag-card:nth-child(4n+4) .ag-card__foto { background: #CFEBF5; }

/* ==========================================================================
   Padrão de tamanho e proporção. Toda tela segue estes números.
   Largura: 100% da área, sem limite (só texto corrido e formulário têm limite).
   Margem da página 24 (celular 16). Espaço entre blocos 16 (celular 12).
   Bloco: raio 22, recheio 20 (celular 16). Dentro do bloco: raio 14. Campo: raio 12.
   Controle: altura 44. Linha de lista: altura 60.
   Texto: título 32 (celular 28), seção 18, corpo 15, apoio 13. Número grande 40, médio 24.
   ========================================================================== */
:root { --m-pag: 24px; --gap: 16px; --pad: 20px; --ctl: 44px; }
@media (max-width: 959px) { :root { --m-pag: 16px; --gap: 12px; --pad: 16px; } }
.conteudo { padding-left: max(var(--m-pag), env(safe-area-inset-left)); padding-right: max(var(--m-pag), env(safe-area-inset-right)); }
.t1 { font-size: 2rem; line-height: 1.12; letter-spacing: -0.024em; }
@media (max-width: 959px) { .t1 { font-size: 1.75rem; } }
.t2 { font-size: 1.125rem; }
.topo-tela { margin-bottom: 20px; }
.perf, .pf, .ed, .ag, .fin { max-width: none; }
.faixa, .q-ocean, .q-papel, .q-beige, .ag-cal, .ag-lista, .pf-grupo, .painel-abas2 { padding: var(--pad); border-radius: var(--r-g); }
.kpis { padding: 4px 0; }
.ag-cal { border: 0; background: var(--sup-forte); }
.ed__cartao { padding: var(--pad); border-radius: var(--r-g); }
.ganho { padding: var(--pad); border-radius: var(--r-g); }
.pf .ganho { border-radius: var(--r-g); padding-top: var(--pad); }
.ag-card { border-radius: var(--r-m); }
.faixas, .duas, .grafico-linha, .ficha, .pf-col, .pf-pag, .pf, .secao-abas, .ag, .cli, .cli__col { gap: var(--gap); }
.btn, .btn--grande, .sel__btn, .campo input:not([type="checkbox"]):not([type="file"]), .sel--titulo .sel__btn { min-height: var(--ctl); }
.painel-topo { margin-bottom: 14px; }
.painel-topo .link { font-size: 0.875rem; }
.linha { min-height: 60px; }
.numero-gigante { font-size: 2.5rem; }
.segmento { padding: 3px; border-radius: 12px; }
.segmento button { min-height: 36px; padding: 0 14px; font-size: 0.875rem; border-radius: 9px; }
.faixa > p, .faixa li > p { max-width: 75ch; }

/* colunas reaproveitadas pelas telas */
.grade-12 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); margin-top: var(--gap); align-items: start; }
.grade-12 { margin-top: 0; }
@media (min-width: 1100px) {
  .grade-12 { grid-template-columns: minmax(320px, 1fr) minmax(0, 2fr); }
}
.mini-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; }
.mini-nums dt { color: var(--suave); font-size: 0.8125rem; }
.mini-nums dd { margin: 2px 0 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; font-variant-numeric: tabular-nums; }
@media (min-width: 760px) { .mini-nums--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mini-nums--4 > div + div { padding-left: 0; }
@media (min-width: 760px) { .mini-nums--4 > div + div { padding-left: 16px; box-shadow: -1px 0 0 var(--linha); } }

/* menu do celular: sair à esquerda, claro e escuro à direita */
.tema-chave { display: inline-flex; flex: none; gap: 2px; padding: 3px; border-radius: 999px; background: var(--preench); }
.tema-chave button { display: grid; place-items: center; width: 44px; height: 38px; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--suave); transition: background-color 160ms ease, color 160ms ease; }
.tema-chave button[aria-pressed="true"] { background: var(--sup-forte); color: var(--tinta); box-shadow: 0 1px 3px rgb(var(--s) / 0.2); }

/* clientes que mais gastaram */
.rk-topo { display: grid; gap: 2px; margin-bottom: 16px; }
.rk { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.rk__cartao { display: grid; gap: 12px; height: 100%; padding: 16px; border-radius: var(--r-m); background: var(--preench); color: inherit; text-decoration: none; transition: background-color 160ms ease, transform 200ms var(--ios); }
a.rk__cartao:hover { background: var(--beige); transform: translateY(-2px); }
.rk > li:first-child .rk__cartao { background: var(--beige); }
.rk__alto { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rk__quem { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.rk__quem b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk__quem span { color: var(--suave); font-size: 0.8125rem; }
.rk__pos { flex: none; color: var(--suave); font-size: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.rk__total { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rk__parte { display: flex; align-items: center; gap: 8px; color: var(--suave); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.rk__barra { flex: 1; height: 6px; overflow: hidden; border-radius: 3px; background: rgb(var(--o) / 0.12); }
.rk__barra i { display: block; height: 100%; border-radius: 3px; background: var(--slate); }

/* entradas e saídas */
.es { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.es li { display: grid; justify-items: center; gap: 3px; min-width: 0; font-size: 0.8125rem; }
.es li span { color: var(--suave); margin-top: 4px; }
.es li { align-content: start; }
.es li b { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 959px) { .es { gap: 4px; } .es li b { font-size: 0.75rem; letter-spacing: -0.02em; } }

/* pedem atenção */
.at-lista { display: grid; }
.at-lista > li + li { box-shadow: 0 -1px 0 var(--linha); }
.at-linha { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 4px; color: inherit; text-decoration: none; }
a.at-linha:hover { background: var(--hover); border-radius: 10px; }
.at-linha__val { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ficha do cliente */
.cli { display: grid; grid-template-columns: minmax(0, 1fr); }
.cli__topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.cli__quem { display: flex; align-items: center; gap: 16px; min-width: 0; }
.cli__foto { width: 72px; height: 72px; font-size: 1.375rem; }
.cli__col { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
.cli .dados-lista { margin-top: 12px; }
.cli__tit { margin-bottom: 12px; }
.cli__vazio { margin-top: 8px; }
.cli__excluir { margin-top: 16px; }

/* agenda em tela cheia */
.ag-lista__cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 12px; }
.ag-filtros__botao { display: none; }
@media (min-width: 1400px) {
  .ag { grid-template-columns: 400px minmax(0, 1fr); align-items: start; }
  .ag__titulo { grid-column: 1 / -1; }
  .ag-cal { position: sticky; top: 76px; }
}
.ag-filtros > .campo:first-child { grid-column: auto; }
.ag-filtros { align-items: end; }
@media (max-width: 719px) {
  .ag-filtros__botao { display: inline-flex; }
  .ag-filtros:not(.aberto) > .campo:not(:first-child) { display: none; }
}

/* financeiro em tela cheia: resumo de um lado, lista do outro */
.fin__esq { min-width: 0; }
@media (min-width: 1100px) {
  .fin { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(380px, 1fr); gap: var(--gap); align-items: start; padding-bottom: 0; }
  .fin__esq { position: sticky; top: 76px; padding: var(--pad); border-radius: var(--r-g); background: var(--sup-forte); box-shadow: var(--sombra-1); }
  .fin__resumo { margin-top: 12px; }
  .fin__graf { height: 300px; margin-top: 24px; }
  .fin__lista { margin-top: 0; }
}

/* painel: no celular só o essencial, o completo fica no computador */
.so-celular { display: none; }
@media (max-width: 959px) {
  .so-grande { display: none; }
  .so-celular { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
  .so-celular .ganho { margin: 0; }
  .so-celular .ganho__seg { margin-top: 12px; }
}
.so-celular > ul.faixa { padding: 4px var(--pad); }

/* perfil em tela cheia: a imagem vai de ponta a ponta e o degradê sustenta o texto */
.pf { position: relative; }
.pf-trilho { position: absolute; top: 12px; left: 50%; z-index: 5; width: min(calc(100% - 32px), 340px); transform: translateX(-50%); background: rgb(255 255 255 / 0.55); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); box-shadow: 0 4px 18px rgb(var(--s) / 0.16); }
:root[data-tema="escuro"] .pf-trilho { background: rgb(28 28 30 / 0.6); }
.pf-pag:nth-child(2) { padding-top: 68px; }
.pfc { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: max(560px, calc(100svh - 116px)); overflow: hidden; border-radius: var(--r-g); background: var(--cartao-foto); color: #fff; box-shadow: var(--sombra-2); isolation: isolate; }
.pfc::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgb(var(--i) / 0.97) 0%, rgb(var(--i) / 0.82) 24%, rgb(var(--i) / 0.34) 48%, rgb(var(--i) / 0) 68%), linear-gradient(to bottom, rgb(var(--i) / 0.28) 0%, rgb(var(--i) / 0) 20%); animation: pfc-degrade 900ms ease backwards; }
@keyframes pfc-degrade { from { opacity: 0; } }
.pfc__midia { position: absolute; inset: -6% 0 -6% 0; will-change: transform; }
.pfc__foto { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; animation: pfc-zoom 1500ms var(--suave-sai) backwards; }
@keyframes pfc-zoom { from { transform: scale(1.1); } }
.pfc__iniciais { position: absolute; top: 24%; left: 0; right: 0; color: rgb(255 255 255 / 0.9); font-size: clamp(7rem, 22vw, 15rem); font-weight: 300; letter-spacing: -0.03em; line-height: 1; text-align: center; animation: pfc-zoom 1500ms var(--suave-sai) backwards, seq-entra 900ms var(--suave-sai) backwards; }
.pfc__alto { position: absolute; top: 68px; left: 16px; right: 16px; z-index: 2; display: flex; justify-content: space-between; gap: 8px; }
.pfc__txt { position: relative; z-index: 2; display: grid; gap: 10px; width: 100%; padding: 0 clamp(20px, 3vw, 40px) clamp(24px, 3vw, 40px); }
.pfc__txt > * { animation: seq-entra 760ms var(--suave-sai) backwards; }
.pfc__txt > :nth-child(1) { animation-delay: 180ms; } .pfc__txt > :nth-child(2) { animation-delay: 280ms; } .pfc__txt > :nth-child(3) { animation-delay: 380ms; }
.pfc__txt h1 { display: flex; align-items: center; gap: 12px; font-size: clamp(2.25rem, 5vw, 4rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
.pfc__btn { display: inline-flex; flex: none; align-items: center; gap: 6px; min-height: 52px; padding: 0 22px; border-radius: 999px; background: var(--acento); color: var(--sobre-acento); font-size: 1.0625rem; font-weight: 600; cursor: pointer; transition: transform 180ms var(--ios); }
.pfc__btn:hover { transform: translateY(-2px); }
.pfc__btn:active { transform: scale(0.96); }
.pfc__btn:focus-within { outline: 2px solid #fff; outline-offset: 2px; }
.pfc__btn .ic { width: 18px; height: 18px; }
.pfc__btn input { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* parte de baixo do perfil */
.pf-baixo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); margin-top: var(--gap); align-items: start; }
@media (min-width: 1100px) { .pf-baixo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pf-rev { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity 620ms var(--suave-sai), transform 720ms var(--suave-sai); }
.pf-rev.visto { opacity: 1; transform: none; }
.pf-grupo .t2 { margin-bottom: 2px; }
.pv { display: grid; margin-top: 10px; }
.pv > li + li { box-shadow: 0 -1px 0 var(--linha); }
.pv a { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 4px; border-radius: 10px; color: inherit; text-decoration: none; transition: background-color 160ms ease; }
.pv a:hover { background: var(--hover); }
.pv__n { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--beige); font-size: 0.875rem; font-weight: 700; }
.pv__txt { display: grid; flex: 1; gap: 6px; min-width: 0; }
.pv__txt b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv__barra { display: block; height: 6px; overflow: hidden; border-radius: 3px; background: rgb(var(--o) / 0.1); }
.pv__barra i { display: block; height: 100%; border-radius: 3px; background: var(--slate); transform: scaleX(0); transform-origin: left; transition: transform 900ms var(--suave-sai); transition-delay: calc(var(--k, 0) * 90ms + 180ms); }
.visto .pv__barra i { transform: none; }
.pv__val { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.pa { display: grid; margin-top: 8px; }
.pa > li + li { box-shadow: inset 0 1px 0 var(--linha); }
.pa__item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 8px 4px; border: 0; border-radius: 10px; background: none; color: inherit; font-size: 1rem; text-align: left; text-decoration: none; transition: background-color 160ms ease; }
a.pa__item:hover, button.pa__item:hover { background: var(--hover); }
.pa__ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 11px; background: var(--f); color: var(--g); transition: transform 260ms var(--ios); }
.pa__ic .ic { width: 19px; height: 19px; }
a.pa__item:hover .pa__ic, button.pa__item:hover .pa__ic { transform: scale(1.08); }
.pa__rot { flex: none; font-weight: 500; }
.pa__val { flex: 1; min-width: 0; color: var(--suave); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa__item .linha__seta { transition: translate 200ms var(--ios); }
a.pa__item:hover .linha__seta, button.pa__item:hover .linha__seta { translate: 3px 0; }
.pf-sair { width: 100%; min-height: var(--ctl); border: 0; border-radius: var(--r-m); background: var(--cai-fundo); color: var(--cai); font-size: 1rem; font-weight: 600; transition: background-color 160ms ease, opacity 620ms var(--suave-sai), transform 720ms var(--suave-sai); }
.pf-sair:hover { background: var(--cai-sombra); }
@media (max-width: 959px) {
  .conteudo:has(.pf) { padding-top: 0; }
  .pf { width: auto; margin-inline: calc(-1 * var(--m-pag)); gap: 0; }
  .pf-trilho { top: 10px; }
  .pfc { min-height: calc(100svh - 50px); border-radius: 0 0 28px 28px; box-shadow: none; }
  .pfc__txt { padding-bottom: 104px; }
  .pf-baixo { padding-inline: var(--m-pag); }
  .pf-pag:nth-child(2) { padding: 66px var(--m-pag) 0; }
  /* indicadores cabem em duas colunas no celular */
}

/* verde e bege: botão principal sempre no verde da marca; escolhas em branco ou cinza Apple */
.btn:not(.btn--linha):not(.btn--suave):not(.btn--perigo):not(.btn--perigo-forte):not(.btn--contorno):not([disabled]) { background: var(--acao); color: #FFFFFF; }
.btn:not(.btn--linha):not(.btn--suave):not(.btn--perigo):not(.btn--perigo-forte):not(.btn--contorno):not([disabled]):hover { background: var(--acao-2); }
.segmento button[aria-pressed="true"], .tema-chave button[aria-pressed="true"] { background: var(--pilula); }
.sel__btn, .campo input:not([type="checkbox"]):not([type="file"]), .campo textarea { background: var(--pilula); }
.sel--titulo .sel__btn, .sel--mes .sel__btn { background: none; }
.menu2 { color: var(--tinta); }

/* entrada: bege de um lado, verde do outro */
.lado { background: #F3E9D6; background-size: auto; color: #0F1F1A; }
.lado p, .lado__fim { color: #0F1F1A; }
.lado :focus-visible { outline-color: #00873A; }
.entrada__quadro { background: #F3E9D6; }
.entrada__form { --sup: #00873A; --sup-forte: #FBF6EA; --tinta: #FFFFFF; --suave: #E3EFE8; --linha: rgb(255 255 255 / 0.26); --preench: rgb(255 255 255 / 0.14); --contorno: rgb(255 255 255 / 0.6); --hover: rgb(255 255 255 / 0.1); --hover-forte: rgb(255 255 255 / 0.2); --ocean: #F3E9D6; --ocean-2: #FFFFFF; --acao: #F3E9D6; --acao-2: #FFFFFF; --sobre: #0F1F1A; --cai: #FFE3DE; color: #FFFFFF; }
.entrada__form .btn:not(.btn--linha):not(.btn--suave):not(.btn--perigo):not(.btn--perigo-forte):not(.btn--contorno):not([disabled]) { color: #0F1F1A; }
.entrada__form .social, .entrada__form .social--email { background: #FBF6EA; color: #0F1F1A; border-color: transparent; }
.entrada__form .campo input:not([type="checkbox"]):not([type="file"]) { background: #FBF6EA; border-color: transparent; color: #0F1F1A; }
.entrada__form .senha button { color: #0F1F1A; }
.entrada__form :focus-visible { outline-color: #FFFFFF; }

/* no celular, a marca enche o bege acima do painel verde */
@media (max-width: 899px) {
  .lado > .marca { position: absolute; top: 24px; left: 0; right: 0; display: flex; justify-content: center; font-weight: 600; }
}

/* perguntas da criação de conta: uma por tela */
.pg { display: grid; grid-template-columns: minmax(0, 1fr); min-height: calc(100svh - 32px); background: var(--cream); }
@media (min-width: 1000px) { .pg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pg__q { display: flex; flex-direction: column; min-width: 0; padding: 16px var(--m-pag) 24px; }
@media (min-width: 1000px) { .pg__q { padding: 24px clamp(32px, 5vw, 72px) 32px; } }
.pg__topo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: var(--ctl); }
.pg__topo .marca { color: var(--tinta); font-weight: 600; }
.pg__voltar, .pg__pular { min-height: var(--ctl); padding: 0 10px; border: 0; border-radius: 12px; background: none; color: var(--suave); font-size: 0.9375rem; }
.pg__voltar { display: inline-flex; align-items: center; gap: 4px; justify-self: start; }
.pg__voltar .ic { width: 16px; height: 16px; rotate: 90deg; }
.pg__voltar[hidden] { display: inline-flex; visibility: hidden; }
.pg__pular { justify-self: end; }
.pg__voltar:hover, .pg__pular:hover { background: var(--hover); color: var(--tinta); }
.pg__prog { height: 6px; margin-top: 10px; overflow: hidden; border-radius: 3px; background: var(--preench); }
.pg__prog i { display: block; height: 100%; border-radius: 3px; background: var(--acao); transition: width 520ms var(--suave-sai); }
:root[data-tema="escuro"] .pg__prog i { background: var(--ocean); }
.pg__corpo { display: flex; flex: 1; flex-direction: column; width: 100%; max-width: 560px; margin: 0 auto; padding-top: clamp(24px, 6vh, 64px); animation: pg-entra 460ms var(--suave-sai) backwards; }
@keyframes pg-entra { from { opacity: 0; transform: translate3d(calc(var(--dir, 1) * 28px), 0, 0); } }
.pg__passo { color: var(--suave); font-size: 0.875rem; font-weight: 500; }
.pg__corpo h1 { margin-top: 6px; font-size: clamp(1.75rem, 3.4vw, 2.5rem); font-weight: 700; letter-spacing: -0.028em; line-height: 1.1; text-wrap: balance; outline: 0; }
.pg__ajuda { margin-top: 10px; color: var(--suave); }
.pg__form { display: flex; flex: 1; flex-direction: column; margin-top: 24px; }
.pg__ops { display: grid; gap: 10px; }
.pg__op { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 60px; padding: 10px 16px; border: 1.5px solid var(--linha); border-radius: var(--r-m); background: var(--sup-forte); color: var(--tinta); font-size: 1.0625rem; font-weight: 500; text-align: left; animation: seq-entra 420ms var(--suave-sai) backwards; animation-delay: calc(var(--k, 0) * 45ms + 90ms); transition: border-color 160ms ease, background-color 160ms ease, transform 200ms var(--ios); }
.pg__op:hover { border-color: var(--ocean); }
.pg__op:active { transform: scale(0.985); }
.pg__op[aria-pressed="true"] { border-color: var(--ocean); background: rgb(var(--c) / 0.12); }
.pg__marca { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border: 1.5px solid var(--contorno); border-radius: 50%; color: transparent; transition: background-color 160ms ease, transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.pg__marca .ic { width: 14px; height: 14px; stroke-width: 2.6; }
.pg__op[aria-pressed="true"] .pg__marca { border-color: var(--ocean); background: var(--ocean); color: var(--sobre); transform: scale(1.08); }
.pg__chip { min-height: var(--ctl); padding: 0 16px; border: 1.5px solid var(--linha); border-radius: 999px; background: var(--sup-forte); color: var(--tinta); font-size: 0.9375rem; font-weight: 500; animation: seq-entra 380ms var(--suave-sai) backwards; animation-delay: calc(var(--k, 0) * 28ms + 60ms); transition: border-color 160ms ease, background-color 160ms ease, transform 200ms var(--ios); }
.pg__chip:hover { border-color: var(--ocean); }
.pg__chip[aria-pressed="true"] { border-color: var(--acao); background: var(--acao); color: #FFFFFF; }
.pg__campos { display: grid; gap: 16px; }
.pg__pe { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding: 20px 0 calc(4px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--cream) 72%, transparent); }
.pg__pe .btn { flex: 0 1 180px; min-width: 0; min-height: 52px; font-size: 1.0625rem; }
.pg__pe > .btn--linha { flex: 1 1 0; }
.pg__pe > .btn--linha + .btn { flex: 1 1 0; }
.pg__conta { color: var(--suave); font-size: 0.875rem; }
.pg__local { gap: 22px; }
.pg__grupo { display: grid; gap: 8px; }
.pg__rot { color: var(--tinta); font-size: 0.875rem; font-weight: 500; }
.pg__local .pg__chip { animation: none; }
.pg__surge { animation: seq-entra 360ms var(--suave-sai) backwards; }
.pg__hor { position: relative; }
.pg__hor-campo { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: var(--ctl); padding: 0 14px; border: 1px solid var(--contorno); border-radius: 12px; background: var(--pilula); color: var(--tinta); font-size: 1rem; text-align: left; transition: border-color 160ms ease; }
.pg__hor-campo:hover, .pg__hor-campo[aria-expanded="true"] { border-color: var(--ocean); }
.pg__hor-campo .ic { color: var(--ocean); }
.pg__hor-lista { display: grid; gap: 6px; }
.pg__hor-lista li { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: var(--ctl); padding-left: 14px; border-radius: 12px; background: rgb(var(--c) / 0.12); font-weight: 500; animation: seq-entra 320ms var(--suave-sai) backwards; }
.pg__hor-lista button { display: grid; place-items: center; width: var(--ctl); height: var(--ctl); padding: 0; border: 0; border-radius: 12px; background: none; color: var(--suave); }
.pg__hor-lista button:hover { background: var(--hover); color: var(--tinta); }
.pg__hor-lista .ic { width: 16px; height: 16px; }
.pg-hor--cima { top: auto !important; bottom: calc(100% + 8px); transform-origin: bottom left !important; }
.pg-hor { position: absolute; left: 0; top: calc(100% + 8px); z-index: 30; display: grid; gap: 14px; width: min(100%, 380px); padding: 16px; border-radius: 18px; background: var(--pilula); box-shadow: 0 0 0 1px rgb(var(--o) / 0.1), 0 18px 48px rgb(var(--s) / 0.28); transform-origin: top left; animation: pg-hor-abre 240ms var(--ios); }
:root[data-tema="escuro"] .pg-hor { background: #2C2C2E; }
@keyframes pg-hor-abre { from { opacity: 0; transform: scale(0.95) translateY(6px); } }
.pg-hor__topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pg-hor__topo b { font-size: 1.0625rem; font-weight: 600; }
.pg-hor__topo span { flex: none; color: var(--suave); font-size: 0.8125rem; }
.pg-hor__dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.pg-hor__dia { min-height: var(--ctl); padding: 0; border: 0; border-radius: 12px; background: var(--preench); color: var(--tinta); font-size: 0.875rem; font-weight: 500; transition: background-color 140ms ease, transform 180ms var(--ios); }
.pg-hor__dia:hover:not([disabled]) { background: var(--hover-forte); }
.pg-hor__dia:active:not([disabled]) { transform: scale(0.94); }
.pg-hor__dia[aria-pressed="true"] { background: var(--acao); color: #FFFFFF; }
.pg-hor__dia[disabled] { opacity: 0.35; cursor: not-allowed; }
.pg-hor__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pg-hor__col { display: grid; gap: 6px; min-width: 0; }
.pg-hor__col > span { color: var(--suave); font-size: 0.8125rem; font-weight: 500; }
.pg-hor__lista { position: relative; display: grid; gap: 2px; max-height: 196px; padding: 4px; overflow-y: auto; border-radius: 12px; background: var(--preench); overscroll-behavior: contain; }
.pg-hor__lista button { min-height: 38px; padding: 0; border: 0; border-radius: 9px; background: none; color: var(--tinta); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.pg-hor__lista button:hover:not([disabled]) { background: var(--hover-forte); }
.pg-hor__lista button[aria-pressed="true"] { background: var(--acao); color: #FFFFFF; font-weight: 600; }
.pg-hor__lista button[disabled] { opacity: 0.3; cursor: not-allowed; }
.pg-hor__pe { display: flex; justify-content: space-between; gap: 8px; }
.pg-hor__pe .btn { flex: 1; }
.pg__prev { display: none; }
@media (min-width: 1000px) {
  .pg__prev { position: sticky; top: 0; display: grid; place-items: safe center; height: calc(100svh - 32px); overflow-y: auto; padding: clamp(24px, 3vw, 48px); background: #00873A; color: #FFFFFF; }
}
.pg-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 16px 20px; width: min(100%, 600px); padding: clamp(24px, 2.6vw, 36px); border-radius: 28px; background: #F3E9D6; color: #0F1F1A; box-shadow: 0 24px 60px rgb(0 0 0 / 0.26); }
.pg-card__bloco--largo { grid-column: 1 / -1; }
.pg-card__bloco { display: grid; align-content: start; gap: 6px; padding-top: 14px; border-top: 1px solid rgb(15 31 26 / 0.14); animation: seq-entra 480ms var(--suave-sai) backwards; }
.pg-card__rot { color: #3E4B46; font-size: 0.875rem; }
.pg-card__bloco b { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; }
.pg-fim { display: grid; place-content: center; justify-items: center; gap: 20px; min-height: calc(100svh - 32px); padding: 32px var(--m-pag); background: #00873A; color: #FFFFFF; text-align: center; }
.pg-fim .asten { width: 44px; height: 44px; }
.pg-fim h1 { font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 700; letter-spacing: -0.028em; line-height: 1.1; text-wrap: balance; }
.pg-fim__passos { display: grid; gap: 10px; text-align: left; }
.pg-fim__passos li { display: flex; align-items: center; gap: 10px; animation: seq-entra 420ms var(--suave-sai) backwards; animation-delay: calc(var(--k) * 420ms + 150ms); }
.pg-fim__passos .ic { box-sizing: border-box; width: 24px; height: 24px; padding: 5px; border-radius: 50%; background: #F3E9D6; color: #00873A; stroke-width: 2.6; }
.pg-pronto { display: grid; align-items: center; min-height: calc(100svh - 32px); padding: 24px var(--m-pag) 32px; background: var(--cream); }
.pg-pronto__in { display: grid; gap: 16px; width: min(100%, 720px); margin: 0 auto; animation: seq-entra 620ms var(--suave-sai) backwards; }
.pg-pronto h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.06; }
.pg-pronto__lista { display: grid; }
.pg-pronto__lista > li + li { box-shadow: 0 -1px 0 var(--linha); }
.pg-pronto__acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.pg-pronto__acoes .btn { min-height: 52px; }
.pg-pronto__lista button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 60px; padding: 8px 4px; border: 0; background: none; color: var(--tinta); font-weight: 500; text-align: left; }
.pg-pronto__lista button:hover { background: var(--hover); border-radius: 10px; }

/* indicadores */
.ind-filtros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: var(--gap); }
.ind { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
.ind-aviso { padding: 10px 14px; border-radius: var(--r-m); background: rgb(var(--c) / 0.12); }
.ind-aviso .link { margin-left: 6px; }
.ind-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ind-kpi { display: grid; align-content: start; gap: 4px; min-height: 132px; padding: var(--pad); border: 2px solid transparent; border-radius: var(--r-g); background: var(--sup-forte); color: var(--tinta); text-align: left; transition: background-color 180ms ease, border-color 180ms ease, transform 220ms var(--ios); }
.ind-kpi:hover:not([disabled]) { border-color: var(--ocean); transform: translateY(-2px); }
.ind-kpi[aria-pressed="true"] { background: var(--acao); color: #FFFFFF; }
.ind-kpi[disabled] { cursor: default; opacity: 0.72; }
.ind-kpi__rot { font-size: 0.9375rem; font-weight: 500; }
.ind-kpi__num { font-size: clamp(1.5rem, 2.3vw, 2.125rem); font-weight: 700; letter-spacing: -0.028em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.ind-kpi[disabled] .ind-kpi__num { font-size: 1.125rem; }
.ind-kpi__det { color: var(--suave); font-size: 0.8125rem; line-height: 1.3; }
.ind-kpi__det.ok { color: var(--ok); font-weight: 500; }
.ind-kpi__det.cai { color: var(--cai); font-weight: 500; }
.ind-kpi[aria-pressed="true"] .ind-kpi__det { color: #E3EFE8; }
.ig__leg { display: flex; gap: 16px; color: var(--suave); font-size: 0.8125rem; }
.ig__leg li { display: flex; align-items: center; gap: 7px; }
.ig__leg li::before { content: ""; width: 18px; height: 0; border-top: 3px solid var(--ocean); }
.ig__leg .prev::before { border-top: 2px dashed var(--suave); }
.ig__corpo { display: grid; grid-template-columns: 76px minmax(0, 1fr); grid-template-rows: 280px 26px; }
.ig__y { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding-right: 10px; color: var(--suave); font-size: 0.8125rem; text-align: right; font-variant-numeric: tabular-nums; }
.ig__y span { line-height: 1; transform: translateY(-50%); }
.ig__y span:last-child { transform: translateY(50%); }
.ig__area { position: relative; background: repeating-linear-gradient(to bottom, var(--linha) 0, var(--linha) 1px, transparent 1px, transparent 25%); border-bottom: 1px solid var(--linha); touch-action: pan-y; cursor: crosshair; }
.ig__area svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ig__fill { fill: rgb(var(--c) / 0.14); }
.ig__cur, .ig__prev { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ig__cur { stroke: var(--ocean); stroke-width: 3; }
.ig__prev { stroke: var(--suave); stroke-width: 2; stroke-dasharray: 5 6; opacity: 0.7; }
.ig__cruz { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid var(--contorno); pointer-events: none; }
.ig__ponto { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border: 2px solid var(--sup-forte); border-radius: 50%; background: var(--ocean); pointer-events: none; }
.ig__tip { position: absolute; top: 4px; display: grid; gap: 1px; padding: 8px 12px; border-radius: 12px; background: var(--pilula); box-shadow: 0 6px 24px rgb(var(--s) / 0.2); font-size: 0.8125rem; white-space: nowrap; pointer-events: none; font-variant-numeric: tabular-nums; }
.ig__tip span { color: var(--suave); }
.ig__x { position: relative; grid-column: 2; color: var(--suave); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.ig__x span { position: absolute; top: 8px; transform: translateX(-50%); white-space: nowrap; }
.ig__x span:last-child { transform: translateX(-100%); }
.ind-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); align-items: start; }
.ind-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
@media (min-width: 1100px) { .ind-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ind-q { display: grid; gap: 4px; }
.ind-q a { display: grid; gap: 6px; padding: 10px 8px; border-radius: var(--r-m); color: inherit; text-decoration: none; transition: background-color 150ms ease; }
.ind-q a:hover { background: var(--hover); }
.ind-q__topo { display: flex; justify-content: space-between; gap: 12px; font-weight: 500; }
.ind-q__topo b { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }
.ind-q__barra { height: 8px; overflow: hidden; border-radius: 4px; background: rgb(var(--o) / 0.1); }
.ind-q__barra i { display: block; height: 100%; border-radius: 4px; background: var(--slate); }
.ind-q__pe { color: var(--suave); font-size: 0.8125rem; }
.ind-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.ind-dia { display: grid; justify-items: center; gap: 2px; padding: 10px 2px; border-radius: var(--r-m); background: var(--preench); color: inherit; font-size: 0.8125rem; text-decoration: none; transition: transform 200ms var(--ios); }
.ind-dia:hover { transform: translateY(-2px); }
.ind-dia b { font-size: 1.375rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ind-dia span { color: var(--suave); }
.ind-dia--hoje { background: var(--acao); color: #FFFFFF; }
.ind-dia--hoje span { color: #E3EFE8; }
.ind-acomp { margin-top: 6px; }
.ind-acomp > li + li { box-shadow: 0 -1px 0 var(--linha); }
.ind-acomp a { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 4px; color: inherit; text-decoration: none; }
.ind-acomp a:hover { background: var(--hover); border-radius: 10px; }
.ind-acomp__val { flex: none; font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ind-acomp__val.cai { color: var(--cai); }
@media (max-width: 759px) {
  .ind-filtros { grid-template-columns: minmax(0, 1fr); }
  .ind-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ind-kpi { min-height: 116px; padding: 14px; }
  .ig__corpo { grid-template-columns: 62px minmax(0, 1fr); grid-template-rows: 220px 26px; }
  .ig .painel-topo { display: grid; }
}