/* pedem atenção: cada assunto com a sua cor, do urgente ao que pode esperar */
.at2-tudo { display: grid; gap: 28px; }
.at2-grupo { display: grid; gap: 12px; }
.at2-grupo__topo { display: flex; align-items: center; gap: 10px; }
.at2-ponto { flex: none; width: 12px; height: 12px; border-radius: 50%; }
.at2-ponto--cai { background: #C42B1C; } .at2-ponto--atencao { background: #E5A100; } .at2-ponto--calma { background: #0A6CF0; }
.at2-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--gap); align-items: start; }
.at2 { --f: #F1EEE6; --g: #3E4B46; overflow: hidden; border-radius: var(--r-g); background: var(--sup-forte); box-shadow: var(--sombra-1); }
.at2--atraso { --f: #FFD3D0; --g: #A81F12; } .at2--vence { --f: #FFEDB0; --g: #7A5300; } .at2--estoque { --f: #FFD6EA; --g: #C2185B; } .at2--retorno { --f: #D5ECF3; --g: #005BD1; } .at2--neutro { --f: #E8E6E0; --g: #3E4B46; }
.at2__topo { display: flex; align-items: center; gap: 14px; padding: 18px var(--pad); background: var(--f); color: #0F1F1A; }
.at2__ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; background: #FFFFFF; color: var(--g); }
.at2__tit { flex: 1; min-width: 0; }
.at2__tit h3 { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }
.at2__tit p { margin-top: 2px; color: #3E4B46; font-size: 0.875rem; line-height: 1.3; }
.at2__num { flex: none; color: var(--g); font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.at2__lista { padding: 4px var(--pad); }
.at2-linha { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 0; }
.at2-linha + .at2-linha { box-shadow: 0 -1px 0 var(--linha); }
.at2-linha a.linha__txt { color: inherit; text-decoration: none; }
.at2-linha a.linha__txt:hover b { text-decoration: underline; text-underline-offset: 3px; }
.at2-fim { display: flex; flex: none; align-items: center; gap: 12px; font-variant-numeric: tabular-nums; }
.at2-fim b { font-weight: 700; }
.at2-zap { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--acao); color: #FFFFFF; font-size: 0.875rem; font-weight: 500; text-decoration: none; transition: background-color 150ms ease; }
.at2-zap:hover { background: var(--acao-2); }
.at2__mais { padding: 0 var(--pad) 8px; }
.at2__ver { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 var(--pad); border-top: 1px solid var(--linha); color: var(--ocean); font-size: 0.9375rem; font-weight: 600; text-decoration: none; transition: background-color 150ms ease; }
.at2__ver:hover { background: var(--hover); }
.at2__ver .linha__seta { color: inherit; }

/* clientes: filtros, colunas e separação */
.cli-filtros { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: var(--gap); }
.cli-filtros__datas { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 12px; }
.cli-filtros__datas[hidden] { display: none; }
.cli-corpo { padding: 0; overflow: hidden; }
.cli-res { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 16px var(--pad); }
.cli-res b { font-weight: 700; font-variant-numeric: tabular-nums; }
.cli-t__cab, .cli-t__linha { display: grid; grid-template-columns: minmax(220px, 2fr) minmax(110px, 1fr) 110px minmax(100px, 0.9fr) minmax(110px, 1fr) 120px 20px; align-items: center; gap: 14px; padding-inline: var(--pad); }
.cli-t__cab { min-height: 40px; background: var(--preench); color: var(--suave); font-size: 0.8125rem; font-weight: 500; }
.cli-t .num { text-align: right; font-variant-numeric: tabular-nums; }
.cli-t__linha { min-height: 68px; color: inherit; text-decoration: none; border-top: 1px solid var(--linha); transition: background-color 130ms ease; }
.cli-t__linha:hover { background: var(--hover); }
.cli-t__quem { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cli-t__foto { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: #E3F1EA; color: #0F1F1A; font-size: 0.8125rem; font-weight: 600; }
.cli-t__linha:nth-child(4n+3) .cli-t__foto { background: #EEF7B5; } .cli-t__linha:nth-child(4n) .cli-t__foto { background: #FFD9C7; } .cli-t__linha:nth-child(4n+1) .cli-t__foto { background: #CFEBF5; }
.cli-t__data, .cli-t__prox { display: grid; line-height: 1.3; }
.cli-t__data b, .cli-t__prox b { font-weight: 500; font-variant-numeric: tabular-nums; }
.cli-t__data span, .cli-t__prox span { color: var(--suave); font-size: 0.8125rem; }
.cli-t__tot { font-weight: 700; }
@media (max-width: 1099px) {
  .cli-filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cli-filtros__busca { grid-column: 1 / -1; }
  .cli-t__cab { display: none; }
  .cli-t__linha { grid-template-columns: minmax(0, 1fr) auto 18px; grid-template-areas: "quem tot seta" "quem data seta"; column-gap: 12px; row-gap: 0; padding-block: 8px; }
  .cli-t__quem { grid-area: quem; } .cli-t__tot { grid-area: tot; } .cli-t__data { grid-area: data; text-align: right; } .cli-t__data b { display: none; } .cli-t__linha > .linha__seta { grid-area: seta; }
  .cli-t__at, .cli-t__prox, .cli-t__sit { display: none; }
}

/* chips do mesmo tamanho nas perguntas */
.pg__chip { min-height: 52px; padding: 6px 12px; border-radius: var(--r-m); line-height: 1.2; text-align: center; }
.pg__local .pg__chip { min-height: var(--ctl); }

/* separação: todo bloco tem contorno próprio, e o menu tem uma linha entre as categorias */
.faixa, .q-ocean, .q-papel, .q-beige, .ag-cal, .ag-lista, .pf-grupo, .ind-kpi, .at2, .lateral__menu, .lateral__cartao, .fin__esq, .kpis, .fin-grupo ul { box-shadow: 0 0 0 1px var(--borda), 0 6px 18px rgb(var(--s) / 0.07); border-color: transparent; }
.cli-corpo { box-shadow: 0 0 0 1px var(--borda), 0 6px 18px rgb(var(--s) / 0.07); }
.ag-card, .rk__cartao { box-shadow: 0 0 0 1px var(--borda); }
.ag-saldo { box-shadow: 0 0 0 1px var(--borda); }
.kpi + .kpi { box-shadow: -1px 0 0 var(--linha); }
.at2__topo { border-bottom: 1px solid var(--borda); }
.menu2 > * + * { position: relative; margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--linha); }
.lateral__menu > .btn { margin-bottom: 4px; }
.cli-t__cab { background: var(--beige); color: var(--tinta); }
:root[data-tema="escuro"] .cli-t__cab { background: var(--beige); }
.fin-grupo li + li .fin-linha { box-shadow: inset 0 1px 0 var(--borda); }
/* filtros recolhidos no celular */
.filtros-botao { display: none; }
@media (max-width: 759px) {
  .filtros-recolhe { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-items: end; }
  .filtros-recolhe > .filtros-botao { display: inline-flex; }
  .filtros-recolhe:not(.aberto) > :not(.filtros-fica):not(.filtros-botao) { display: none; }
  .filtros-recolhe.aberto > .campo:not(.filtros-fica) { grid-column: 1 / -1; }
  .ig__x span { font-size: 0.75rem; }
}
.ig__y span { white-space: nowrap; }
.ig__y { font-size: 0.75rem; }

/* texto do cartão do perfil */
.pfc__papel { justify-self: start; padding: 5px 12px; border-radius: 999px; background: rgb(255 255 255 / 0.18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 0.875rem; font-weight: 500; }
.pfc__meta { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: clamp(1rem, 1.25vw, 1.125rem); }
.pfc__meta li { display: inline-flex; align-items: center; gap: 8px; color: rgb(255 255 255 / 0.92); }
.pfc__meta b { font-weight: 600; color: #FFFFFF; }
.pfc__meta .ic { width: 19px; height: 19px; opacity: 0.85; }
.pfc__meta img { width: 26px; height: 26px; border-radius: 8px; object-fit: cover; }
.pfc__pe { display: flex; align-items: stretch; gap: 10px; margin-top: 12px; }
.pfc__pe a { display: grid; align-content: center; gap: 1px; min-width: 0; padding: 10px 18px; border-radius: 16px; background: rgb(255 255 255 / 0.13); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #FFFFFF; text-decoration: none; transition: background-color 160ms ease, transform 200ms var(--ios); }
.pfc__pe a:hover { background: rgb(255 255 255 / 0.22); transform: translateY(-2px); }
.pfc__pe a b { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pfc__pe a span { color: rgb(255 255 255 / 0.86); font-size: 0.8125rem; line-height: 1.2; }
.pfc__pe .pfc__btn { align-self: center; margin-left: auto; }
.pfc__txt > :nth-child(4) { animation-delay: 480ms; }
@media (max-width: 559px) { .pfc__meta { flex-direction: column; } .pfc__pe a { padding: 8px 12px; } .pfc__pe a b { font-size: 1.25rem; } .pfc__btn { min-height: 48px; padding: 0 16px; } }

/* tempo sempre à vista */
.tempo-chip { display: inline-flex; flex: none; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgb(var(--c) / 0.12); color: var(--ocean); font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
.tempo-chip .ic { width: 14px; height: 14px; stroke-width: 2.2; }
.pg__info { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.pg__info .tempo-chip { margin-left: auto; }
.pg__info:has(> .tempo-chip:only-child) .tempo-chip { margin-left: 0; }
.entrada__tempo { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--suave); }
.entrada__tempo .ic { width: 14px; height: 14px; }
.pg-pronto .tempo-chip { margin-bottom: 10px; }
.pg-pronto__fim { display: inline-flex; flex: none; align-items: center; gap: 8px; }
.pg-pronto__fim .tempo-chip { margin: 0; }

/* complete seu perfil */
.pc-cartao { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin: var(--gap) 0 0; padding: var(--pad); border-radius: var(--r-g); background: #00873A; color: #FFFFFF; --suave: #E3EFE8; }
.pc-cartao .suave { color: #E3EFE8; }
.pc-cartao__txt { display: grid; flex: 1 1 280px; gap: 4px; }
.pc-barra { display: block; height: 8px; margin-top: 8px; overflow: hidden; border-radius: 4px; background: rgb(255 255 255 / 0.22); }
.pc-barra i { display: block; height: 100%; border-radius: 4px; background: #F3E9D6; transition: width 600ms var(--suave-sai); }
.pc-cartao .btn:not(.btn--linha) { background: #F3E9D6 !important; color: #0F1F1A !important; }
@media (max-width: 959px) { .pc-cartao { margin-inline: var(--m-pag); } }
.pc-lista { display: grid; margin-top: 20px; border-radius: var(--r-m); background: var(--sup-forte); box-shadow: 0 0 0 1px var(--borda); }
.pc-lista li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 8px 16px; font-weight: 500; animation: seq-entra 420ms var(--suave-sai) backwards; animation-delay: calc(var(--k, 0) * 50ms + 80ms); }
.pc-lista li + li { border-top: 1px solid var(--linha); }
.pc-lista small { flex: none; color: var(--suave); font-size: 0.875rem; font-weight: 500; }
.pc-card { grid-template-columns: minmax(0, 1fr); }
.pc-card__topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 1.25rem; }
.pc-card .tempo-chip { background: #FFFFFF; color: #00873A; }
.pc-card__num { font-size: 1.5rem !important; font-weight: 700 !important; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pc-itens { display: grid; }
.pc-itens li { display: flex; align-items: center; gap: 12px; min-height: 48px; border-top: 1px solid rgb(15 31 26 / 0.14); font-weight: 500; }
.pc-itens li.agora { font-weight: 700; }
.pc-itens small { margin-left: auto; color: #3E4B46; font-size: 0.8125rem; font-weight: 500; }
.pc-itens__m { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border: 1.5px solid rgb(15 31 26 / 0.34); border-radius: 50%; color: transparent; transition: background-color 200ms ease; }
.pc-itens__m .ic { width: 14px; height: 14px; stroke-width: 2.6; }
.pc-itens .feito .pc-itens__m { border-color: #00873A; background: #00873A; color: #FFFFFF; }
.pc-itens .agora .pc-itens__m { border-color: #00873A; border-width: 2px; }
.pc-fotos { display: grid; gap: 12px; }
.pc-foto { position: relative; display: flex; align-items: center; gap: 16px; min-height: 104px; padding: 12px 16px; border: 1.5px dashed var(--contorno); border-radius: var(--r-m); background: var(--sup-forte); cursor: pointer; transition: border-color 160ms ease; }
.pc-foto:hover, .pc-foto:focus-within { border-color: var(--ocean); }
.pc-foto img, .pc-foto__ic { flex: none; width: 76px; height: 76px; border-radius: 18px; object-fit: cover; }
.pc-foto__ic { display: grid; place-items: center; background: rgb(var(--c) / 0.12); color: var(--ocean); }
.pc-foto__txt { display: grid; gap: 2px; }
.pc-foto__txt b { font-weight: 600; }
.pc-foto__txt span { color: var(--suave); font-size: 0.875rem; }
.pc-foto input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pc-cod { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; max-width: 400px; }
.pc-cod input { min-width: 0; height: 64px; padding: 0; border: 1.5px solid var(--contorno); border-radius: var(--r-m); background: var(--pilula); color: var(--tinta); font-size: 1.625rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.pc-cod input:focus { border-color: var(--ocean); outline: 2px solid var(--ocean); outline-offset: 1px; }
.pc-cod ~ .erro { margin-top: 8px; }
.pc-cod ~ .suave { margin-top: 8px; }
.pc-custos { display: grid; }
.pc-custo { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; border-bottom: 1px solid var(--linha); font-weight: 500; }
.pc-valor { display: inline-flex; flex: none; align-items: center; gap: 6px; width: 150px; padding: 0 12px; border: 1px solid var(--contorno); border-radius: 12px; background: var(--pilula); color: var(--suave); }
.pc-valor:focus-within { border-color: var(--ocean); }
.pc-valor input { width: 100%; min-width: 0; height: 42px; border: 0; background: none; color: var(--tinta); text-align: right; outline: 0; font-variant-numeric: tabular-nums; }
.pc-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 14px; font-weight: 500; }
.pc-total b { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pc-sug { margin-bottom: 16px; }
.pc-sug .pg__op b { font-variant-numeric: tabular-nums; }
.pc-frase { margin-top: 12px; }
@media (min-width: 760px) { .mini-nums--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ==========================================================================
   Abertura: cor que desce do topo, logo que se desenha, nome que surge,
   tudo sobe até o lugar da marca e o texto de boas-vindas é digitado.
   Toda a sequência roda em CSS desde o primeiro quadro; o app só decide a saída.
   ========================================================================== */
#intro { position: fixed; inset: 0; z-index: 300; display: none; overflow: hidden; background: var(--cream); color: #FFFFFF; animation: intro-reserva 0ms 6.5s forwards; }
html.intro-ativa #intro, html.intro-saiu #intro { display: block; }
@keyframes intro-reserva { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.intro__cor { position: absolute; inset: 0 0 auto 0; height: 88%; background: radial-gradient(95% 78% at 50% 0%, #006B2D 0%, #00873A 42%, rgb(0 135 58 / 0.6) 68%, rgb(0 135 58 / 0) 100%); transform-origin: 50% 0; animation: intro-cor 1150ms cubic-bezier(0.22, 1, 0.36, 1) 240ms backwards; }
.intro__cor--fundo { background: radial-gradient(80% 62% at 50% 0%, #86C7B0 0%, rgb(134 199 176 / 0.55) 55%, rgb(134 199 176 / 0) 100%); animation: intro-claro 1300ms ease 240ms both; }
@keyframes intro-cor { from { transform: scaleY(0.04); opacity: 0; } 35% { opacity: 1; } }
@keyframes intro-claro { 0% { opacity: 0; transform: scaleY(0.04); } 25% { opacity: 1; } 100% { opacity: 0; transform: scaleY(1); } }
.intro__grupo { position: absolute; left: 50%; top: 46%; translate: -50% -50%; display: grid; justify-items: center; gap: 16px; will-change: transform; transition: transform 950ms cubic-bezier(0.32, 0.72, 0, 1), color 650ms ease; }
.intro__logo { width: 72px; height: 72px; overflow: visible; }
.intro__gira { transform-box: fill-box; transform-origin: center; animation: gira 12s linear infinite; }
.intro__logo path { stroke-dasharray: 1 1.02; stroke-dashoffset: 1.01; opacity: 0; animation: intro-traco 620ms cubic-bezier(0.65, 0, 0.35, 1) forwards; }
.intro__logo path:nth-child(1) { animation-delay: 700ms; } .intro__logo path:nth-child(2) { animation-delay: 790ms; } .intro__logo path:nth-child(3) { animation-delay: 880ms; } .intro__logo path:nth-child(4) { animation-delay: 970ms; }
@keyframes intro-traco { 0% { opacity: 1; stroke-dashoffset: 1.01; } 100% { opacity: 1; stroke-dashoffset: 0; } }
.intro__nome { font-size: clamp(1.875rem, 7vw, 2.5rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; animation: intro-nome 700ms cubic-bezier(0.22, 1, 0.36, 1) 1250ms backwards; }
@keyframes intro-nome { from { opacity: 0; filter: blur(10px); transform: translate3d(0, 10px, 0); } }
#intro.saindo { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 750ms ease 200ms, visibility 0s 950ms; }
#intro.saindo .intro__grupo { color: var(--tinta); transform: translate(var(--dx, 0px), var(--dy, -30vh)) scale(var(--k, 0.5)); }
/* a tela de entrada espera a abertura terminar para começar a se mexer */
html.intro-ativa .entrada__form, html.intro-ativa .lado > *, html.intro-ativa .entrada__duas > *, html.intro-ativa .entrada__tempo { animation-play-state: paused !important; }
html.intro-ativa .marca { opacity: 0; }
html.intro-saiu .marca { animation: seq-entra 560ms var(--suave-sai) 560ms backwards; }
html.intro-saiu .entrada__duas > :nth-child(1) { animation: seq-entra 560ms var(--suave-sai) 1250ms backwards; }
html.intro-saiu .entrada__duas > :nth-child(2) { animation: seq-entra 560ms var(--suave-sai) 1400ms backwards; }
html.intro-saiu .entrada__tempo { animation: seq-entra 560ms var(--suave-sai) 1550ms backwards; }
.digita { display: inline-block; animation: digita 1000ms steps(37, end) 1000ms backwards; }
@keyframes digita { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { #intro { display: none !important; } .digita { animation: none; } }

/* ==========================================================================
   Celular: menos informação, mais ação (plano mobile, etapas 2 a 5)
   ========================================================================== */
.folha-reg__lista { display: grid; margin: 4px 0 8px; }
.folha-reg__lista > li + li { border-top: 1px solid var(--linha); }
.folha-reg__op { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 68px; padding: 8px 4px; border: 0; background: none; color: inherit; text-align: left; text-decoration: none; }
.folha-reg__op:hover { background: var(--hover); border-radius: var(--r-m); }
.folha-reg__ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; background: var(--acao); color: #FFFFFF; }
.folha-reg__lista > li:not(:first-child) .folha-reg__ic { background: var(--beige); color: var(--tinta); }
.folha-reg__op b { font-size: 1.0625rem; font-weight: 600; }
.at2__rodape { display: flex; align-items: stretch; border-top: 1px solid var(--borda); }
.at2__rodape .at2__ver { flex: 1; border-top: 0; }
.at2__disp { flex: none; min-height: 52px; padding: 0 var(--pad); border: 0; border-left: 1px solid var(--borda); background: none; color: var(--suave); font-size: 0.9375rem; font-weight: 500; }
.at2__disp:hover { background: var(--hover); color: var(--tinta); }
.hist-mais { margin-top: 12px; }
@media (min-width: 960px) { .hist-mais { display: none; } }
.nota-desk { color: var(--suave); font-size: 0.875rem; text-align: center; }
#rede { position: fixed; left: 12px; right: 12px; top: calc(8px + env(safe-area-inset-top)); z-index: 320; padding: 12px 16px; border-radius: var(--r-m); background: #0F1F1A; color: #FFFFFF; font-size: 0.9375rem; text-align: center; box-shadow: 0 8px 28px rgb(0 0 0 / 0.3); }
#rede[hidden] { display: none; }
@media (max-width: 959px) {
  .link, a.link { display: inline-flex; align-items: center; min-height: 44px; }
  .segmento button, .ganho__seg button, .pg-hor__dia { min-height: 44px; }
  .sel--mes .sel__btn, .sel--titulo .sel__btn { min-height: 44px; }
  .at2-zap, .ag-seta, .ind-dia, .ag-card__acoes .btn { min-height: 44px; }
  .ag-seta { min-width: 44px; }
  .cli__mais, .ind-grade > .ind-col, .ig { display: none; }
  .hist-curto:not(.aberto) li:nth-child(n+6) { display: none; }
  .faixas:has(> .duas) > .duas { display: none; }
  .faixas:has(> .duas)::after { content: "As tabelas completas ficam melhores no computador."; display: block; padding: 4px 0 12px; color: var(--suave); font-size: 0.875rem; text-align: center; }
}
@media (max-width: 759px) {
  .ag-legenda, .ag-conta .btn { display: none; }
  .ag-cal__fim { justify-content: flex-end; }
}

/* topo do celular: só o ícone da busca, o + e o sino */
.busca__icone { display: none; }
@media (max-width: 959px) {
  .busca { flex: none; width: var(--alvo); }
  .busca__lupa, .busca input { display: none; }
  .busca__icone { display: grid; }
  .busca.aberta { position: absolute; left: 4px; right: 4px; z-index: 5; width: auto; }
  .busca.aberta input { display: block; padding-left: 48px; }
  .busca.aberta .busca__icone { position: absolute; left: 0; top: 0; z-index: 2; border: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  
}

/* tela cheia do sino: tudo num cartão, no estilo do menu de perfil de referência */
dialog.central { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--cream); color: var(--tinta); overflow-y: auto; overscroll-behavior: contain; animation: central-abre 340ms var(--ios); }
dialog.central::backdrop { background: var(--cream); }
@keyframes central-abre { from { opacity: 0; transform: translate3d(0, -18px, 0); } }
@media (prefers-reduced-motion: reduce) { dialog.central { animation: none; } }

/* cartão do sino: pequeno e branco, como a referência. Perfil, plano, dados e aparência ficam atrás do nome e da foto */
dialog.central { inset: auto 16px auto auto; top: 72px; width: min(344px, calc(100vw - 32px)); height: auto; max-height: calc(100dvh - 96px); margin: 0; border-radius: 28px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--borda), 0 24px 60px rgb(0 0 0 / 0.22); transform-origin: top right; animation: central-pop 240ms var(--ios); }
dialog.central::backdrop { background: rgb(0 0 0 / 0.26); }
@keyframes central-pop { from { opacity: 0; transform: scale(0.92) translate3d(0, -6px, 0); } }
:root[data-tema="escuro"] dialog.central { background: #1C1C1E; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) dialog.central { background: #1C1C1E; } }
@media (max-width: 959px) {
  .topo-app__conta { display: block; }
  .topo-app__conta .avatar { width: var(--alvo); height: var(--alvo); }
}

/* topo do celular: busca e sino à esquerda, foto sozinha à direita */
@media (max-width: 959px) {
  .novo { order: 1; }
  .topo-app__dir { display: contents; }
  .busca { display: none; }
  .topo-app__dir > [data-acao="ver-pendentes"] { order: 2; }
  .topo-app__conta { order: 3; margin-left: auto; padding: 0; border: 0; background: none; }
  .topo-app__conta .avatar { box-shadow: 0 0 0 2px var(--cream), 0 0 0 3.5px var(--acao); }
}

/* ilha das notificações: pílula preta que cresce e mostra o que importa */
dialog.ilha-n { position: fixed; inset: calc(env(safe-area-inset-top) + 8px) 0 auto 0; width: min(390px, calc(100vw - 24px)); height: auto; max-height: calc(100dvh - 24px); margin: 0 auto; padding: 0; overflow: hidden; border: 0; border-radius: 32px; background: #000000; color: #FFFFFF; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.12), 0 24px 60px rgb(0 0 0 / 0.4); }
dialog.ilha-n::backdrop { background: rgb(0 0 0 / 0.32); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.ilha-n__in { display: grid; gap: 10px; padding: 16px 14px 14px; }
.ilha-n__topo { display: flex; align-items: center; justify-content: space-between; padding: 0 6px; }
.ilha-n__tit { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9375rem; font-weight: 600; color: rgb(255 255 255 / 0.82); }
.ilha-n__tit .ic { width: 18px; height: 18px; }
.ilha-n__cont { min-width: 26px; padding: 2px 9px; border-radius: 13px; background: #FF5F52; color: #FFFFFF; font-size: 0.8125rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.ilha-n__lista { display: grid; gap: 6px; max-height: calc(100dvh - 190px); overflow-y: auto; overscroll-behavior: contain; }
.ilha-n__item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 8px 10px; border: 0; border-radius: 20px; background: rgb(255 255 255 / 0.09); color: #FFFFFF; font: inherit; text-align: left; text-decoration: none; transition: background-color 150ms ease, transform 200ms var(--ios); }
.ilha-n__item:hover, .ilha-n__item:active { background: rgb(255 255 255 / 0.16); }
.ilha-n__item:active { transform: scale(0.985); }
.ilha-n__ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; }
.ilha-n__ic .ic { width: 19px; height: 19px; }
.ilha-n__ic--cai { background: rgb(255 95 82 / 0.22); color: #FF8A80; }
.ilha-n__ic--atencao { background: rgb(255 193 69 / 0.22); color: #FFB340; }
.ilha-n__ic--ok { background: rgb(80 220 160 / 0.2); color: #30D158; }
.ilha-n__txt { display: grid; flex: 1; min-width: 0; gap: 2px; }
.ilha-n__txt b { font-size: 0.9375rem; font-weight: 600; line-height: 1.3; }
.ilha-n__txt span { display: none; color: rgb(255 255 255 / 0.62); font-size: 0.8125rem; line-height: 1.3; }
dialog.ilha-n--todas .ilha-n__txt span { display: block; }
.ilha-n__item .linha__seta { color: rgb(255 255 255 / 0.5); }
.ilha-n__mais { min-height: 48px; border: 0; border-radius: 24px; background: #FFFFFF; color: #000000; font-size: 0.9375rem; font-weight: 600; }
.ilha-n__mais:active { transform: scale(0.98); }
.ilha-n__vazio { padding: 14px 10px 8px; color: rgb(255 255 255 / 0.7); font-size: 0.9375rem; }
@media (prefers-reduced-motion: reduce) { .ilha-n__item { transition: none; } }

/* busca em tela cheia */
dialog.busca-tela { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--cream); color: var(--tinta); overflow: hidden; animation: busca-abre 300ms var(--ios); }
dialog.busca-tela::backdrop { background: var(--cream); }
@keyframes busca-abre { from { opacity: 0; transform: translate3d(0, 14px, 0); } }
.bt { display: flex; flex-direction: column; height: 100%; max-width: 640px; margin: 0 auto; padding: calc(10px + env(safe-area-inset-top)) 16px 0; }
.bt__campo { display: flex; align-items: center; gap: 8px; }
.bt__campo input { flex: 1; min-width: 0; height: 52px; padding: 0 16px 0 48px; border: 0; border-radius: 999px; background: var(--preench); color: var(--tinta); font-size: 1.0625rem; outline: 0; }
.bt__campo input:focus { box-shadow: 0 0 0 2px var(--ocean); }
.bt__campo input::-webkit-search-cancel-button { display: none; }
.bt__lupa { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; margin-left: 0; color: var(--suave); pointer-events: none; }
.bt__lupa .ic { width: 22px; height: 22px; }
.bt__cancelar { flex: none; min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--ocean); font-size: 1.0625rem; font-weight: 500; }
.bt__abas { display: flex; gap: 8px; margin-top: 14px; padding-bottom: 4px; overflow-x: auto; scrollbar-width: none; }
.bt__abas::-webkit-scrollbar { display: none; }
.bt__abas button { flex: none; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: none; color: var(--suave); font-size: 1.0625rem; font-weight: 500; transition: background-color 160ms ease, color 160ms ease; }
.bt__abas button[aria-selected="true"] { background: var(--preench); color: var(--tinta); font-weight: 600; }
.bt__corpo { flex: 1; min-height: 0; margin: 6px -16px 0; padding: 0 16px calc(24px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }
.bt__cab { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin-top: 4px; color: var(--suave); font-size: 0.875rem; font-weight: 500; }
.bt__nota { margin-bottom: 4px; color: var(--suave); font-size: 0.875rem; }
.bt__lista { display: grid; }
.bt__li { display: flex; align-items: center; }
.bt__item { display: flex; flex: 1; align-items: center; gap: 14px; min-width: 0; min-height: 68px; padding: 8px 0; border: 0; border-radius: 14px; background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; }
.bt__item:hover { background: var(--hover); }
.bt__ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--preench); color: var(--suave); }
.bt__ic .ic { width: 20px; height: 20px; }
.bt__txt { display: grid; flex: 1; min-width: 0; gap: 2px; }
.bt__txt b { font-size: 1.125rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt__txt span { color: var(--suave); font-size: 0.875rem; }
.bt__x { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--suave); }
.bt__x:hover { background: var(--hover); color: var(--tinta); }
.bt__x .ic { width: 16px; height: 16px; }
.bt__vazio { padding: 28px 8px; color: var(--suave); text-align: center; }
.bt__res .busca__tit { padding: 14px 0 4px; color: var(--suave); font-size: 0.875rem; font-weight: 500; }
.bt__item--res { min-height: 56px; padding: 0 4px; font-size: 1.125rem; }
.busca__nada { padding: 28px 8px; color: var(--suave); text-align: center; }
@media (prefers-reduced-motion: reduce) { dialog.busca-tela { animation: none; } }

/* menu da foto: igual ao Ajustes do iPhone. Perfil grande, categorias em blocos separados e a busca flutuando embaixo */
dialog.ajustes { --aj-bg: #FFFFFF; --aj-card: #F2F2F7; --aj-sep: rgb(60 60 67 / 0.2); --aj-txt: #000000; --aj-sub: #636366; --aj-seta: #AEAEB2; --aj-vidro: rgb(242 242 247 / 0.78); position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--aj-bg); color: var(--aj-txt); transform-origin: top right; }
dialog.ajustes::backdrop { background: #FFFFFF; }
:root[data-tema="escuro"] dialog.ajustes { --aj-bg: #000000; --aj-card: #1C1C1E; --aj-sep: rgb(84 84 88 / 0.65); --aj-txt: #FFFFFF; --aj-sub: #98989D; --aj-seta: #636366; --aj-vidro: rgb(58 58 60 / 0.72); }
:root[data-tema="escuro"] dialog.ajustes::backdrop { background: #000000; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) dialog.ajustes { --aj-bg: #000000; --aj-card: #1C1C1E; --aj-sep: rgb(84 84 88 / 0.65); --aj-txt: #FFFFFF; --aj-sub: #98989D; --aj-seta: #636366; --aj-vidro: rgb(58 58 60 / 0.72); } :root:not([data-tema="claro"]) dialog.ajustes::backdrop { background: #000000; } }
.aj { width: 100%; max-width: 560px; margin: 0 auto; padding: calc(10px + env(safe-area-inset-top)) 16px 130px; }
.aj__topo { display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.aj__tit { font-size: 2.125rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; }
.aj__fechar { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--aj-card); color: var(--aj-txt); }
.aj__fechar .ic { width: 17px; height: 17px; stroke-width: 2.2; }
.aj__perfil { display: flex; align-items: center; gap: 16px; margin-top: 10px; padding: 22px 18px 22px 20px; border-radius: 26px; background: var(--aj-card); color: inherit; text-decoration: none; }
.aj__foto .avatar { width: 84px; height: 84px; font-size: 1.75rem; }
.aj__quem { display: grid; flex: 1; min-width: 0; gap: 3px; }
.aj__quem b { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aj__quem span { color: var(--aj-sub); font-size: 1.0625rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aj__seta { display: grid; place-items: center; flex: none; color: var(--aj-seta); }
.aj__seta .ic { width: 15px; height: 15px; rotate: -90deg; stroke-width: 2.6; }
.aj__grupo { margin-top: 22px; overflow: hidden; border-radius: 26px; background: var(--aj-card); }
.aj__linha { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 0 14px 0 16px; border: 0; background: none; color: inherit; font: inherit; font-size: 1.0625rem; text-align: left; text-decoration: none; transition: background-color 120ms ease; }
.aj__linha:active { background: rgb(128 128 128 / 0.2); }
.aj__grupo li + li .aj__linha::before { content: ""; position: absolute; top: 0; left: 62px; right: 0; border-top: 1px solid var(--aj-sep); }
.aj__ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 9px; color: #FFFFFF; }
.aj__ic .ic { width: 20px; height: 20px; stroke-width: 1.9; }
.aj__ic--roxo { background: #5B3FD6; } .aj__ic--laranja { background: #F2541B; } .aj__ic--azul { background: #0A6CF0; } .aj__ic--vermelho { background: #FF3B30; } .aj__ic--verde { background: #00873A; } .aj__ic--rosa { background: #D93C93; } .aj__ic--amarelo { background: #F7B733; color: #3A2A00; } .aj__ic--azulclaro { background: #0A84FF; } .aj__ic--cinza { background: #636366; }
.aj__rot { flex: 1; min-width: 0; letter-spacing: -0.02em; }
.aj__linha:has(.aj__badge) .aj__rot { font-size: 1rem; white-space: nowrap; }
.aj__val { color: var(--aj-sub); font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.aj__badge { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 9px; border-radius: 15px; background: #FF3B30; color: #FFFFFF; font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.aj__fade { position: fixed; left: 0; right: 0; bottom: 0; height: 110px; background: linear-gradient(to top, var(--aj-bg) 40%, transparent); pointer-events: none; }
.aj__busca { position: fixed; left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom)); max-width: 528px; margin: 0 auto; display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--aj-vidro); -webkit-backdrop-filter: blur(26px) saturate(1.8); backdrop-filter: blur(26px) saturate(1.8); box-shadow: 0 0 0 1px rgb(128 128 128 / 0.18), 0 12px 32px rgb(0 0 0 / 0.2); color: var(--aj-sub); font: inherit; font-size: 1.125rem; text-align: left; }
.aj__busca .ic { width: 22px; height: 22px; color: var(--aj-txt); stroke-width: 2; }
.aj__busca:active { transform: scale(0.985); }
.aj__perfil, .aj__grupo { animation: seq-entra 440ms var(--suave-sai) backwards; animation-delay: calc(var(--i, 0) * 55ms + 80ms); }
@media (prefers-reduced-motion: reduce) { .aj__perfil, .aj__grupo { animation: none; } }

/* Painel do celular: números grandes, cartões brancos com linha preta e um gráfico de barras */
.pm { gap: 14px; }
.pm .faixa { border: 1.5px solid var(--traco); box-shadow: none; background: var(--sup-forte); }
@keyframes pm-cresce { from { transform: scaleY(0); } }
.pm__barras:has(.pm__b--sel) .pm__b--hoje:not(.pm__b--sel) i { background: #E1E7E4; } :root[data-tema="escuro"] .pm__barras:has(.pm__b--sel) .pm__b--hoje:not(.pm__b--sel) i { background: #3A3A3C; }

/* página Oportunidades e alertas */
.op-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 12px; }
.op { --cor: #00873A; display: flex; align-items: center; gap: 14px; min-height: 84px; padding: 14px 16px; border: 1.5px solid var(--cor); border-radius: 22px; background: var(--sup-forte); color: inherit; text-decoration: none; transition: transform 200ms var(--ios), background-color 150ms ease; }
.op:hover { transform: translateY(-2px); background: var(--hover); }
.op--cai { --cor: #C42B1C; } .op--atencao { --cor: #D69A00; }
.op__ic { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: color-mix(in srgb, var(--cor) 14%, transparent); color: var(--cor); }
.op__ic .ic { width: 22px; height: 22px; }
.op__txt { display: grid; flex: 1; min-width: 0; gap: 3px; }
.op__txt b { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; }
.op__txt span { color: var(--suave); font-size: 0.875rem; line-height: 1.3; }
.op__seta { display: grid; flex: none; color: var(--suave); }
.op__seta .ic { width: 16px; height: 16px; rotate: -90deg; stroke-width: 2.4; }
.at2-ponto--ok { background: #00873A; }

/* ilha: resumo curto e "Ver mais" */
.ilha-n__lista { max-height: none; overflow: visible; }

/* Painel do celular no estilo do app de finanças: cabeçalho, saldo verde, dois cartões, gráfico de linha e listas */
@media (max-width: 959px) { .conteudo:has(.pm) .topo-app { display: none; } }
.pm { gap: 16px; }