/* LifeOS v1.1. Uma fonte, tokens por papel, grade de 8 px, destaque verde ou ciano. */

@font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/jakarta-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/jakarta-600.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/jakarta-700.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/jakarta-ext-700.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/jakarta-ext-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/jakarta-ext-600.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Cores (claro) ---------- */
:root {
  --fundo: #F6F8F6;
  --texto: #1B2420;
  --card: #FFFFFF;
  --card-borda: color-mix(in srgb, var(--texto) 12%, var(--fundo));
  --destaque: #276E50;
  --destaque-suave: #D9E6DD;
  --topo-fundo: #EAEFEB;
  color-scheme: light;
}
:root[data-accent="ciano"] { --destaque: #0B7285; --destaque-suave: #D6EEF2; }

/* ---------- Cores (escuro) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) { --topo-fundo: #0B0E0D; --fundo: #121615; --texto: #E6ECE8; --card: #1B211F; --card-borda: transparent; --destaque: #45B887; --destaque-suave: #1E3A2D; color-scheme: dark; }
  :root:not([data-tema="claro"])[data-accent="ciano"] { --destaque: #3CCFE0; --destaque-suave: #17343A; }
}
:root[data-tema="escuro"] { --topo-fundo: #0B0E0D; --fundo: #121615; --texto: #E6ECE8; --card: #1B211F; --card-borda: transparent; --destaque: #45B887; --destaque-suave: #1E3A2D; color-scheme: dark; }
:root[data-tema="escuro"][data-accent="ciano"] { --destaque: #3CCFE0; --destaque-suave: #17343A; }

/* ---------- Tokens derivados ---------- */
:root {
  --apoio: color-mix(in srgb, var(--texto) 66%, var(--fundo));
  --linha: color-mix(in srgb, var(--texto) 12%, var(--fundo));
  --superficie: color-mix(in srgb, var(--texto) 5%, var(--fundo));
  --superficie2: color-mix(in srgb, var(--texto) 9%, var(--fundo));

  /* Tipografia: tamanho e peso por papel. --fator acompanha o tamanho de texto do sistema. */
  --fator: 1;
  --escala: 1;
  --f: calc(var(--fator) * var(--escala));
  --t-num: calc(2rem * var(--f));
  --t-titulo: calc(1.75rem * var(--f));
  --t-secao: calc(1.25rem * var(--f));
  --t-card: calc(1rem * var(--f));
  --t-texto: calc(1rem * var(--f));
  --t-apoio: calc(0.875rem * var(--f));
  --t-botao: calc(0.875rem * var(--f));
  --t-micro: calc(0.75rem * var(--f));

  /* Espaço */
  --margem: 16px;
  --pad-card: 16px;
  --gap-cards: 8px;
  --gap-rotulo: 8px;
  --gap-grupo: 24px;
  --gap-secao: 32px;

  /* Forma */
  --raio: 16px;
  --raio-campo: 12px;
  --pilula: 999px;

  --abas-h: 64px;
  --topo-h: 56px;
  --minifoco-h: 0px;
  --seg-topo: env(safe-area-inset-top, 0px);
  --seg-baixo: env(safe-area-inset-bottom, 0px);
  --seg-esq: env(safe-area-inset-left, 0px);
  --seg-dir: env(safe-area-inset-right, 0px);
  --fonte: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
:root[data-fonte="grande"] { --escala: 1.125; }
:root[data-densidade="compacta"] { --pad-card: 12px; --gap-cards: 6px; --gap-grupo: 18px; --gap-secao: 24px; }

/* Respeita o tamanho de texto do iPhone (Ajustes, Tela e Brilho, Tamanho do Texto). */
@supports (font: -apple-system-body) {
  html { font: -apple-system-body; }
  :root { --fator: 0.9412; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; background: var(--fundo); color: var(--texto); }
body {
  font-family: var(--fonte);
  font-size: var(--t-texto);
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
  min-height: 100dvh;
  overscroll-behavior-y: none;
}
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
input, select, textarea { font-size: max(16px, var(--t-texto)); }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }

/* Papéis de texto */
.num-grande { font-size: var(--t-num); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
h1, .titulo-tela { font-size: var(--t-titulo); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
h2, .titulo-secao { font-size: var(--t-secao); font-weight: 700; line-height: 1.3; }
h3, .titulo-card { font-size: var(--t-card); font-weight: 600; line-height: 1.4; }
.p, small, .apoio-txt { font-size: var(--t-apoio); }
.suave, .apoio-txt { color: var(--apoio); }
.rotulo { font-size: var(--t-apoio); font-weight: 600; }
.micro { font-size: var(--t-micro); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--destaque); }
.forte { font-weight: 600; }
.num { font-variant-numeric: tabular-nums; }
.dir { text-align: right; }
.oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.uma-linha { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--texto); outline-offset: 2px; border-radius: 8px; }

.ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic.p { width: 20px; height: 20px; }
.ic.pp { width: 16px; height: 16px; }
.marca-svg { display: block; flex: none; color: var(--texto); }

/* ---------- Estrutura ---------- */
.app { min-height: 100dvh; }
.coluna { min-width: 0; }
.topo {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 4px;
  min-height: calc(var(--topo-h) + var(--seg-topo));
  padding: var(--seg-topo) calc(var(--margem) + var(--seg-dir) - 10px) 0 calc(var(--margem) + var(--seg-esq) - 10px);
  background: var(--topo-fundo);
  /* A faixa do topo vai de ponta a ponta, mesmo quando o conteúdo é centralizado no PC. */
  box-shadow: 0 0 0 100vmax var(--topo-fundo);
  clip-path: inset(0 -100vmax);
}
.topo .titulo { flex: 1; min-width: 0; font-size: var(--t-titulo); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 10px; line-height: 1.2; }
.topo .titulo.com-voltar { padding-left: 0; font-size: var(--t-secao); }
.botao-ic { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--texto); flex: none; position: relative; }
.botao-ic:active { background: var(--superficie2); }
.botao-ic .ponto { position: absolute; right: 9px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--texto); }
.botao-ic.sync-ok { color: var(--destaque); }

.tela {
  padding: 14px calc(var(--margem) + var(--seg-dir)) calc(var(--abas-h) + var(--seg-baixo) + var(--minifoco-h) + 40px) calc(var(--margem) + var(--seg-esq));
  max-width: 100%;
  outline: none;
}
body.com-foco { --minifoco-h: 56px; }
body.sem-abas .abas, body.sem-abas .minifoco { display: none; }
body.sem-abas .tela { padding-bottom: calc(var(--seg-baixo) + 40px); }

/* ---------- Barra inferior ---------- */
.abas {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
  height: calc(var(--abas-h) + var(--seg-baixo));
  padding: 0 var(--seg-dir) var(--seg-baixo) var(--seg-esq);
  background: var(--fundo);
  border-top: 1px solid var(--linha);
}
.aba { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; font-size: var(--t-micro); font-weight: 400; color: var(--apoio); }
.aba .ic-pilula { display: grid; place-items: center; width: 56px; height: 30px; border-radius: var(--pilula); transition: background .15s; }
.aba[aria-current="page"] { color: var(--texto); font-weight: 600; }
.aba[aria-current="page"] .ic-pilula { background: var(--superficie2); }
.aba-mais { justify-self: center; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 20px; background: var(--texto); color: var(--fundo); }
.aba-mais .ic { width: 28px; height: 28px; }
.aba-mais:active { transform: scale(0.96); }

.lateral { display: none; }

/* ---------- Mini barra de foco ---------- */
.minifoco {
  position: fixed; left: 8px; right: 8px; z-index: 29;
  bottom: calc(var(--abas-h) + var(--seg-baixo) + 6px);
  display: flex; align-items: center; gap: 0;
  height: 48px; padding: 0 2px 0 14px;
  border-radius: 14px;
  background: var(--texto); color: var(--fundo);
}
.minifoco .mf-abrir { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 44px; text-align: left; color: inherit; }
.minifoco .mf-tempo { font-size: var(--t-botao); font-weight: 600; font-variant-numeric: tabular-nums; flex: none; }
.minifoco .mf-txt { flex: 1; min-width: 0; font-size: var(--t-apoio); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .85; }
.minifoco .botao-ic { color: var(--fundo); }

/* ---------- Seções e cartões ---------- */
.secao { margin-top: var(--gap-secao); }
.secao:first-child { margin-top: 0; }
.secao-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; margin-bottom: 8px; }
.secao-cab h2 { font-size: var(--t-secao); }
.cartao { background: var(--card); border: 1px solid var(--card-borda); border-radius: var(--raio); padding: var(--pad-card); }
.cartao.apoio { background: var(--superficie); border-color: transparent; }
.cartao + .cartao { margin-top: var(--gap-cards); }
.cartao h3 + p, .cartao h3 + .p { margin-top: 4px; }
.cartao-acao { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--card-borda); border-radius: var(--raio); padding: 12px var(--pad-card); min-height: 56px; }
.cartao-acao .ic-bolha { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--superficie2); flex: none; }
.cartao-acao .meio { flex: 1; min-width: 0; }
.cartao-acao .meio .forte, .cartao-acao .meio > .t { display: block; font-size: var(--t-card); font-weight: 600; }
.cartao-acao + .cartao-acao { margin-top: var(--gap-cards); }
.compacto { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px var(--pad-card); min-height: 56px; background: var(--card); border: 1px solid var(--card-borda); border-radius: var(--raio); }
.compacto .meio { flex: 1; min-width: 0; }
.compacto .meio .t { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vazio { padding: 24px var(--pad-card); text-align: left; color: var(--apoio); border: 1px dashed var(--linha); border-radius: var(--raio); }
.vazio .btn { margin-top: 16px; }
.vazio-grande { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 32px var(--pad-card); border-radius: var(--raio); background: var(--superficie); }
.vazio-grande .ic-grande { width: 48px; height: 48px; color: var(--apoio); stroke-width: 1.5; }
.vazio-grande p { color: var(--apoio); }
.pilha > * + * { margin-top: var(--gap-cards); }
.pilha-2 > * + * { margin-top: 16px; }
.pilha-3 > * + * { margin-top: var(--gap-grupo); }
.linha { display: flex; align-items: center; gap: 8px; }
.linha.entre { justify-content: space-between; }
.linha.quebra { flex-wrap: wrap; }
.cresce { flex: 1; min-width: 0; }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.grade-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
hr { border: 0; border-top: 1px solid var(--linha); margin: 16px 0; }
.intro { margin-bottom: 16px; }

/* ---------- Bloco recolhível ---------- */
.recolhe { background: var(--card); border: 1px solid var(--card-borda); border-radius: var(--raio); }
.recolhe.sem-cartao { background: transparent; border: 0; }
.recolhe + .recolhe { margin-top: var(--gap-cards); }
.recolhe-cab { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 12px 8px var(--pad-card); text-align: left; border-radius: var(--raio); }
.recolhe.sem-cartao > .recolhe-cab { padding-left: 0; padding-right: 0; }
.recolhe-tit { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.recolhe-tit .t { font-size: var(--t-card); font-weight: 600; line-height: 1.35; }
.recolhe-tit .t.secao-t { font-size: var(--t-secao); font-weight: 700; }
.recolhe-tit .r { font-size: var(--t-apoio); color: var(--apoio); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recolhe-cab > .ic { color: var(--apoio); transition: transform .2s ease; }
.recolhe[data-aberto="true"] > .recolhe-cab > .ic { transform: rotate(180deg); }
.recolhe-corpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease; }
.recolhe[data-aberto="true"] > .recolhe-corpo { grid-template-rows: 1fr; }
.recolhe-dentro { overflow: hidden; min-height: 0; }
.recolhe-dentro > .recolhe-pad { padding: 0 var(--pad-card) var(--pad-card); }
.recolhe.sem-cartao .recolhe-dentro > .recolhe-pad { padding: 0 0 8px; }
.recolhe[data-aberto="false"] .recolhe-dentro { visibility: hidden; transition: visibility 0s .22s; }

/* ---------- Faixa de números ---------- */
.data-hoje { margin: 0 0 12px; }
.faixa { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 8px 4px; border-radius: var(--raio); background: var(--card); border: 1px solid var(--card-borda); }
.faixa > button, .faixa > div { display: flex; flex-direction: column; align-items: flex-start; padding: 4px 10px; min-height: 48px; border-radius: 12px; text-align: left; }
.faixa.tres { grid-template-columns: repeat(3, 1fr); }
.faixa .v { font-size: var(--t-secao); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.25; }
.faixa .r { font-size: var(--t-micro); color: var(--apoio); line-height: 1.3; }
.faixa .ok .v { color: var(--destaque); }

/* Meu porquê em uma linha */
.porque { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; margin-top: 8px; padding: 0 4px; text-align: left; color: var(--apoio); font-size: var(--t-apoio); }
.porque .txt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.porque.aberto .txt { white-space: normal; }

/* ---------- Botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 14px; font-size: var(--t-botao); font-weight: 600; background: var(--texto); color: var(--fundo); text-decoration: none; white-space: nowrap; }
.btn:active { transform: scale(0.98); }
.btn.sec { background: var(--superficie2); color: var(--texto); }
.btn.vazado { background: transparent; color: var(--texto); border: 1px solid var(--linha); }
.btn.txt { background: transparent; color: var(--texto); padding: 0 12px; }
.btn.destaque { background: var(--destaque); color: var(--fundo); }
:root[data-tema="escuro"] .btn.destaque { color: #0E1311; }
.btn.bloco { display: flex; width: 100%; }
.btn.peq { min-height: 44px; padding: 0 14px; }
.btn[disabled] { opacity: 0.5; pointer-events: none; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.acoes .btn { flex: 1 1 140px; }
.acoes-fim { position: sticky; bottom: 0; z-index: 5; margin-top: 16px; padding: 16px 0 calc(12px + var(--seg-baixo)); background: linear-gradient(to bottom, transparent, var(--fundo) 20px); }
.gaveta .acoes-fim { background: linear-gradient(to bottom, transparent, var(--fundo) 20px); padding-bottom: 12px; box-shadow: 0 32px 0 var(--fundo); }

/* ---------- Chips e etiquetas ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: var(--pilula); border: 1px solid var(--linha); font-size: var(--t-botao); font-weight: 600; background: transparent; white-space: nowrap; }
.chip[aria-pressed="true"], .chip.ativo { background: var(--texto); color: var(--fundo); border-color: var(--texto); }
.chip .cont { font-weight: 400; opacity: .75; font-variant-numeric: tabular-nums; }
.etiqueta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-micro); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 8px; border-radius: var(--pilula); background: var(--superficie2); color: var(--texto); white-space: nowrap; }
.etiqueta.destaque { background: transparent; color: var(--destaque); padding: 0; }
.etiqueta.feito { background: var(--destaque-suave); color: var(--texto); }
.temp { font-size: var(--t-micro); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: var(--pilula); border: 1px solid var(--linha); color: var(--texto); }

/* Linha rolável (abas internas e filtros) */
.rolagem { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin: 0 calc(-1 * var(--margem)); padding: 2px var(--margem); -webkit-overflow-scrolling: touch; }
.rolagem::-webkit-scrollbar { display: none; }
.rolagem > * { scroll-snap-align: start; flex: none; }
.segmentos { margin-bottom: var(--gap-grupo); }
.segmentos button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: var(--pilula); font-size: var(--t-botao); font-weight: 600; color: var(--apoio); background: var(--superficie); white-space: nowrap; }
.segmentos button .ic { width: 18px; height: 18px; }
.segmentos button[aria-selected="true"] { background: var(--texto); color: var(--fundo); }
/* Seletor fixo: todas as opções sempre à vista, sem rolar */
.segmentos.fixos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; padding: 4px; border-radius: 16px; background: var(--superficie); }
.segmentos.fixos button { flex-direction: column; justify-content: center; gap: 2px; min-height: 56px; padding: 6px 2px; border-radius: 12px; background: transparent; font-size: var(--t-micro); line-height: 1.2; white-space: normal; text-align: center; }
.segmentos.fixos button[aria-selected="true"] { background: var(--card); color: var(--texto); box-shadow: 0 0 0 1px var(--linha), 0 1px 3px rgba(0,0,0,.12); }
.segmentos.fixos .seg-ic { position: relative; display: inline-grid; }
.segmentos.fixos .seg-ic .ic { width: 20px; height: 20px; }
.segmentos.fixos .seg-t { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.segmentos.fixos .seg-num { position: absolute; top: -6px; left: 14px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--texto); color: var(--fundo); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.seletor-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: var(--pilula); background: var(--superficie); }
.seletor-2 button { min-height: 44px; border-radius: var(--pilula); font-size: var(--t-botao); font-weight: 600; color: var(--apoio); }
.seletor-2 button[aria-pressed="true"] { background: var(--card); color: var(--texto); box-shadow: 0 0 0 1px var(--card-borda); }

/* ---------- Campos ---------- */
.campo { display: block; margin-top: var(--gap-grupo); }
.campo:first-child { margin-top: 0; }
.campo > span:first-child, .campo > .rot-campo { display: block; font-size: var(--t-apoio); font-weight: 600; margin-bottom: var(--gap-rotulo); }
.campo .dica { display: block; font-size: var(--t-apoio); color: var(--apoio); margin-top: 8px; font-weight: 400; }
.entrada, .campo input, .campo select, .campo textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  border: 1px solid var(--linha); border-radius: var(--raio-campo);
  background: var(--card); color: var(--texto); line-height: 1.5;
  appearance: none; -webkit-appearance: none;
}
.campo textarea, textarea.entrada { min-height: 96px; resize: none; }
textarea.cresce-sozinho { overflow: hidden; }
.campo select, select.entrada { background-image: linear-gradient(45deg, transparent 50%, var(--apoio) 50%), linear-gradient(135deg, var(--apoio) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.entrada:focus, .campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--texto); }
.campos-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: var(--gap-grupo); }
.campos-2 .campo { margin-top: 0; }
.campos-2:first-child { margin-top: 0; }
.senha { position: relative; }
.senha input { padding-right: 52px; }
.senha .botao-ic { position: absolute; right: 2px; top: 2px; color: var(--apoio); }
.interruptor { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; }
.interruptor input, .campo .interruptor input { appearance: none; -webkit-appearance: none; width: 48px; height: 28px; min-height: 0; border-radius: 14px; background: var(--superficie2); position: relative; flex: none; margin: 0; border: 0; padding: 0; }
.interruptor input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--fundo); transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.interruptor input:checked, .campo .interruptor input:checked { background: var(--texto); }
.interruptor input:checked::after { left: 23px; }

/* Escalas e contadores */
.escala { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.escala button { min-height: 48px; border-radius: 12px; border: 1px solid var(--linha); font-weight: 600; font-variant-numeric: tabular-nums; }
.escala button[aria-pressed="true"] { background: var(--texto); color: var(--fundo); border-color: var(--texto); }
.escala.dez { display: flex; gap: 4px; }
.escala.dez button { flex: 1; min-width: 0; min-height: 48px; padding: 0; border-radius: var(--pilula); }
.circulos { display: flex; gap: 8px; }
.circulos button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linha); font-weight: 600; font-variant-numeric: tabular-nums; flex: none; }
.circulos button[aria-pressed="true"] { background: var(--texto); color: var(--fundo); border-color: var(--texto); }
.contador { display: flex; align-items: center; gap: 8px; }
.contador button { width: 52px; height: 52px; border-radius: 14px; background: var(--superficie2); display: grid; place-items: center; }
.contador output { min-width: 72px; text-align: center; font-size: var(--t-num); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Listas ---------- */
.lista { list-style: none; margin: 0; padding: 0; }
.item { position: relative; border-radius: var(--raio-campo); overflow: hidden; }
.item + .item { margin-top: 2px; }
.item-corpo { position: relative; display: flex; align-items: center; gap: 4px; min-height: 56px; padding: 4px 4px 4px 0; background: var(--fundo); touch-action: pan-y; transition: transform .2s; }
.cartao .item-corpo, .recolhe .item-corpo, .principal .item-corpo, .compacto .item-corpo { background: var(--card); }
.gaveta .item-corpo { background: var(--fundo); }
.item-corpo.arrastando { transition: none; }
.item-fundo { visibility: hidden; position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; font-size: var(--t-botao); font-weight: 600; background: var(--superficie2); }
.item:has(.arrastando) .item-fundo { visibility: visible; }
.item-fundo .esq, .item-fundo .dir2 { display: flex; align-items: center; gap: 8px; opacity: 0; }
.item-fundo.mostra-esq .esq, .item-fundo.mostra-dir .dir2 { opacity: 1; }
.item-fundo.mostra-esq { background: var(--destaque-suave); }
.item-txt { flex: 1; min-width: 0; padding: 8px 0; text-align: left; display: block; }
.item-txt .t { display: block; font-weight: 600; overflow-wrap: anywhere; line-height: 1.4; }
.item-txt .m { display: flex; flex-wrap: nowrap; gap: 12px; align-items: center; font-size: var(--t-apoio); color: var(--apoio); margin-top: 2px; white-space: nowrap; overflow: hidden; }
.item-txt .m .ic { width: 16px; height: 16px; }
.item-txt .m .atraso { color: var(--texto); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.item-txt .m .mais { flex: none; }
.item-txt .prev { display: block; font-size: var(--t-apoio); color: var(--apoio); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.item.feito .item-txt .t { color: var(--apoio); font-weight: 400; text-decoration: line-through; text-decoration-color: var(--linha); }
.item .botao-ic { color: var(--apoio); }
.lista.com-linhas .item + .item { margin-top: 0; border-top: 1px solid var(--linha); border-radius: 0; }
.item-dir { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; padding-left: 8px; max-width: 38%; }
.item-dir .prazo { font-size: var(--t-apoio); color: var(--apoio); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.item-dir .prazo.vencido { color: var(--texto); font-weight: 600; }
.lista-largura { max-width: 720px; }

.marcador { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; color: var(--apoio); }
.marcador .bola { width: 22px; height: 22px; border-radius: 50%; border: 1.75px solid currentColor; display: grid; place-items: center; transition: background .15s, border-color .15s; }
.marcador .bola .ic { width: 16px; height: 16px; stroke-width: 2.5; opacity: 0; }
.marcador.on { color: var(--destaque); }
.marcador.on .bola { background: var(--destaque); border-color: var(--destaque); }
.marcador.on .bola .ic { opacity: 1; color: var(--card); }
.marcador.prio-alta .bola { border-width: 2.5px; }

/* ---------- Âncora (bloco principal) ---------- */
.principal { background: var(--card); border: 1px solid var(--card-borda); border-radius: var(--raio); padding: var(--pad-card); }
.ancora { position: relative; padding-left: 14px; }
.ancora::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 4px; border-radius: 4px; background: var(--texto); }
.ancora.feito::before { background: var(--destaque); }
.ancora .rot { display: flex; align-items: center; gap: 6px; }
.ancora .tt { display: block; font-size: var(--t-secao); font-weight: 700; line-height: 1.3; margin: 6px 0 12px; overflow-wrap: anywhere; text-align: left; }
.ancora.feito .tt { color: var(--apoio); }
.principal .top3-cab { display: flex; align-items: center; justify-content: space-between; margin-top: var(--gap-grupo); padding-top: 16px; border-top: 1px solid var(--linha); }

/* ---------- Hábitos ---------- */
.habitos-hoje { display: flex; flex-wrap: wrap; gap: 8px; }
.hab-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 10px; border-radius: var(--pilula); border: 1px solid var(--linha); font-size: var(--t-botao); font-weight: 600; background: var(--card); max-width: 100%; }
.hab-chip .ic { width: 20px; height: 20px; color: var(--apoio); }
.hab-chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hab-chip.on { background: var(--destaque-suave); border-color: transparent; }
.hab-chip.on .ic { color: var(--destaque); }
.hab-linha .seq { display: inline-flex; align-items: center; gap: 4px; }
.hab-linha .seq.on .ic { color: var(--destaque); }

/* Mapa de calor */
.calor { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 1fr); gap: 3px; width: 100%; }
.calor i { display: block; aspect-ratio: 1; border-radius: 3px; background: var(--superficie2); }
.calor i.n1 { background: color-mix(in srgb, var(--destaque) 35%, var(--card)); }
.calor i.n2 { background: color-mix(in srgb, var(--destaque) 65%, var(--card)); }
.calor i.n3 { background: var(--destaque); }
.calor i.fora { background: transparent; }
.calor-ano { gap: 2px; }
.calor-ano i { border-radius: 2px; }
.meses { display: grid; font-size: var(--t-micro); color: var(--apoio); margin-bottom: 4px; }
.legenda { display: flex; align-items: center; gap: 4px; justify-content: flex-end; font-size: var(--t-micro); color: var(--apoio); margin-top: 8px; }
.legenda i { width: 12px; height: 12px; border-radius: 3px; background: var(--superficie2); display: inline-block; }
.legenda i.n1 { background: color-mix(in srgb, var(--destaque) 35%, var(--card)); }
.legenda i.n2 { background: color-mix(in srgb, var(--destaque) 65%, var(--card)); }
.legenda i.n3 { background: var(--destaque); }

/* ---------- Gráficos ---------- */
.graf { width: 100%; display: block; overflow: visible; }
.graf .base { stroke: var(--linha); stroke-width: 1; }
.graf .barra { fill: color-mix(in srgb, var(--destaque) 45%, var(--card)); }
.graf .barra.hoje { fill: var(--destaque); }
.graf .media { stroke: var(--destaque); stroke-width: 1.25; stroke-dasharray: 4 4; }
.graf .faixa-media { fill: var(--destaque-suave); }
.graf .curva { fill: none; stroke: var(--destaque); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.graf .ponto { fill: var(--destaque); }
.graf text { fill: var(--apoio); font-size: 11px; font-family: var(--fonte); }
.graf-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.graf-cab .v { font-weight: 600; font-variant-numeric: tabular-nums; font-size: var(--t-apoio); }
.pontos-dia { display: flex; gap: 3px; flex-wrap: nowrap; }
.pontos-dia i { flex: 1; aspect-ratio: 1; max-width: 14px; border-radius: 50%; background: transparent; border: 1px dashed var(--linha); }
.pontos-dia i.b3 { background: var(--destaque); border: 0; }
.pontos-dia i.b2 { background: color-mix(in srgb, var(--destaque) 50%, var(--card)); border: 0; }
.pontos-dia i.b1 { background: color-mix(in srgb, var(--texto) 30%, var(--card)); border: 0; }
.barra-h { display: grid; grid-template-columns: minmax(80px, 34%) 1fr auto; gap: 8px; align-items: center; min-height: 32px; font-size: var(--t-apoio); }
.barra-h .trilho { height: 10px; border-radius: var(--pilula); background: var(--superficie2); overflow: hidden; }
.barra-h .trilho i { display: block; height: 100%; background: var(--destaque); border-radius: var(--pilula); }
.barra-h .v { font-variant-numeric: tabular-nums; color: var(--apoio); white-space: nowrap; }

.radar { width: 100%; max-width: 340px; display: block; margin: 0 auto; }
.radar .grade { fill: none; stroke: var(--linha); stroke-width: 1; }
.radar .area { fill: color-mix(in srgb, var(--destaque) 18%, transparent); stroke: var(--destaque); stroke-width: 1.75; stroke-linejoin: round; }
.radar text { fill: var(--apoio); font-size: 12px; font-family: var(--fonte); font-weight: 600; }

.tabela { width: 100%; border-collapse: collapse; font-size: var(--t-apoio); }
.tabela th, .tabela td { padding: 10px 4px; border-bottom: 1px solid var(--linha); text-align: right; font-variant-numeric: tabular-nums; }
.tabela th:first-child, .tabela td:first-child { text-align: left; }
.tabela th { font-weight: 600; color: var(--apoio); }

.progresso { height: 8px; border-radius: var(--pilula); background: var(--superficie2); overflow: hidden; }
.progresso i { display: block; height: 100%; background: var(--destaque); border-radius: var(--pilula); }

/* ---------- Gaveta ---------- */
.fundo-camada { position: fixed; inset: 0; z-index: 50; background: color-mix(in srgb, #000 40%, transparent); opacity: 0; transition: opacity .2s; }
.fundo-camada.aberto { opacity: 1; }
.gaveta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 51;
  max-height: calc(100dvh - var(--seg-topo) - 24px);
  display: flex; flex-direction: column;
  background: var(--fundo); color: var(--texto);
  border-radius: 24px 24px 0 0;
  transform: translateY(100%); transition: transform .24s cubic-bezier(.2,.8,.2,1);
  padding-bottom: var(--seg-baixo);
}
.gaveta.aberto { transform: translateY(0); }
.gaveta .alca { width: 40px; height: 4px; border-radius: 2px; background: var(--linha); margin: 8px auto 0; flex: none; }
.gaveta-cab { display: flex; align-items: center; gap: 8px; padding: 8px 8px 0 var(--margem); flex: none; }
.gaveta-cab h2 { flex: 1; font-size: var(--t-secao); }
.gaveta-corpo { overflow-y: auto; padding: 8px var(--margem) 16px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.gaveta.cheia { top: 0; max-height: none; border-radius: 0; padding-top: var(--seg-topo); }

/* ---------- Avisos ---------- */
.avisos { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 80; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.aviso { pointer-events: auto; display: flex; align-items: center; gap: 12px; max-width: 420px; width: 100%; min-height: 48px; padding: 6px 6px 6px 16px; border-radius: 14px; background: var(--texto); color: var(--fundo); font-size: var(--t-apoio); animation: sobe .2s ease-out; box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.aviso .cresce { padding: 6px 0; }
.aviso button { color: var(--fundo); font-weight: 600; min-height: 40px; padding: 0 12px; border-radius: 10px; font-size: var(--t-botao); }
@keyframes sobe { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }

.xp-voa { position: fixed; z-index: 90; pointer-events: none; font-size: var(--t-botao); font-weight: 600; color: var(--destaque); animation: voa .9s ease-out forwards; }
@keyframes voa { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-40px); opacity: 0; } }
.pulsa { animation: pulsa .35s ease-out; }
@keyframes pulsa { 0% { transform: scale(1); } 50% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* ---------- Telas cheias ---------- */
.cheia-tela { min-height: calc(100dvh - var(--topo-h) - var(--seg-topo) - 40px); display: flex; flex-direction: column; }
.cheia-tela .meio { flex: 1; }
.passos { display: flex; gap: 4px; margin-bottom: var(--gap-grupo); }
.passos i { flex: 1; height: 4px; border-radius: 2px; background: var(--superficie2); }
.passos i.on { background: var(--texto); }
.grande { font-size: var(--t-titulo); font-weight: 700; line-height: 1.25; }
.relogio-grande { font-size: calc(var(--t-num) * 2); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1; }

.foco-tela { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 16px; }
body.foco-escuro { --fundo: #0B0F0D; --texto: #E6ECE8; --card: #141917; color-scheme: dark; }
body.foco-escuro .topo, body.foco-escuro .abas, body.foco-escuro .lateral, body.foco-escuro .minifoco { display: none !important; }
body.foco-escuro .coluna { margin-left: 0 !important; }
body.foco-escuro .tela { min-height: 100dvh; display: grid; place-items: center; }

.pin { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: calc(var(--seg-topo) + 40px) 16px 32px; min-height: 100dvh; background: var(--fundo); }
.pin-pontos { display: flex; gap: 16px; }
.pin-pontos i { width: 14px; height: 14px; border-radius: 50%; border: 1.75px solid var(--texto); }
.pin-pontos i.on { background: var(--texto); }
.teclado { display: grid; grid-template-columns: repeat(3, 72px); gap: 16px; }
.teclado button { width: 72px; height: 72px; border-radius: 50%; background: var(--superficie2); font-size: var(--t-titulo); font-weight: 400; display: grid; place-items: center; }
.teclado button[disabled] { opacity: .4; }
.camada-pin { position: fixed; inset: 0; z-index: 100; background: var(--fundo); overflow: auto; }
.boas { max-width: 560px; margin: 0 auto; padding: calc(var(--seg-topo) + 32px) var(--margem) 0; min-height: 100dvh; display: flex; flex-direction: column; }
.boas .meio { flex: 1; }

.passo-num { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--superficie2); font-weight: 600; font-size: var(--t-apoio); flex: none; }

.busca-campo { position: relative; }
.busca-campo .ic { position: absolute; left: 14px; top: 12px; color: var(--apoio); }
.busca-campo input { padding-left: 46px; }

.puxar { height: 0; overflow: hidden; display: grid; place-items: center; color: var(--apoio); font-size: var(--t-apoio); transition: height .2s; }
.banner { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 16px; border-radius: var(--raio); background: var(--texto); color: var(--fundo); font-weight: 600; font-size: var(--t-botao); margin-bottom: 16px; min-height: 52px; }

.zona-dia { border-radius: var(--raio-campo); transition: background .15s; }
.zona-dia.sobre { background: var(--superficie2); }
.item[draggable="true"] .item-corpo { cursor: grab; }

/* Faixa calma da janela de risco */
.faixa-calma { border-radius: var(--raio); padding: var(--pad-card); background: var(--card); border: 1px solid var(--destaque); }
.faixa-calma .chips .chip { background: transparent; }
.checkin { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.checkin button { min-height: 48px; padding: 6px 10px; border-radius: var(--pilula); border: 1px solid var(--linha); font-weight: 600; font-size: var(--t-apoio); line-height: 1.2; white-space: normal; text-align: center; }
.checkin button[aria-pressed="true"] { background: var(--texto); color: var(--fundo); border-color: var(--texto); }

/* Primeiros passos */
.pp-lista { list-style: none; margin: 0; padding: 0; }
.pp-lista li { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.pp-lista li .bola { width: 22px; height: 22px; border-radius: 50%; border: 1.75px solid var(--apoio); display: grid; place-items: center; flex: none; }
.pp-lista li.ok .bola { background: var(--destaque); border-color: var(--destaque); color: var(--card); }
.pp-lista li.ok .bola .ic { width: 14px; height: 14px; stroke-width: 2.5; }
.pp-lista li.ok span.t { color: var(--apoio); text-decoration: line-through; text-decoration-color: var(--linha); }
.pp-lista li button { flex: 1; text-align: left; min-height: 44px; }

/* Reordenar */
.alca { display: grid; place-items: center; width: 44px; height: 44px; color: var(--apoio); touch-action: none; cursor: grab; flex: none; }
.reordenando { opacity: .6; }

.divisao { display: block; }
.divisao .painel-detalhe { display: none; }
.boas-logo { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding-top: 24px; }
.boas-logo p { max-width: 280px; }
.topo-marca { display: grid; place-items: center; padding-left: 8px; flex: none; }
.topo .titulo.com-marca { padding-left: 8px; font-size: calc(var(--t-titulo) * .78); letter-spacing: -0.01em; }
.logo-topo { display: flex; align-items: center; gap: 10px; margin-bottom: var(--gap-grupo); }
.logo-topo .palavra { font-size: var(--t-secao); font-weight: 700; }

@media (min-width: 600px) {
  .segmentos.fixos button { flex-direction: row; gap: 8px; min-height: 44px; font-size: var(--t-botao); }
  .tela { padding-left: calc(24px + var(--seg-esq)); padding-right: calc(24px + var(--seg-dir)); }
  .rolagem { margin: 0 -24px; padding: 2px 24px; }
  .gaveta { left: 50%; right: auto; width: 560px; margin-left: -280px; }
  .gaveta.cheia { left: 0; right: 0; width: auto; margin-left: 0; }
}

@media (min-width: 1024px) {
  :root { --margem: 24px; }
  .abas { display: none; }
  .minifoco { left: auto; right: 24px; bottom: 24px; width: 360px; }
  body.com-foco { --minifoco-h: 64px; }
  .tela { padding: 16px 32px calc(48px + var(--minifoco-h)); max-width: 1184px; margin: 0 auto; }
  .topo { max-width: 1184px; margin: 0 auto; padding-left: 22px; padding-right: 22px; }
  .rolagem { margin: 0; padding: 2px 0; flex-wrap: wrap; overflow: visible; }
  .lateral {
    display: flex; flex-direction: column; gap: 2px;
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 25;
    width: 232px; padding: 16px 12px;
    border-right: 1px solid var(--linha); background: var(--fundo);
    overflow-y: auto; overflow-x: visible;
  }
  .coluna { margin-left: 232px; }
  body.lateral-recolhida .lateral { width: 72px; overflow: visible; }
  body.lateral-recolhida .coluna { margin-left: 72px; }
  body.lateral-recolhida .lateral .txt { display: none; }
  body.lateral-recolhida .lateral .marca { padding: 0; justify-content: center; flex-direction: column; gap: 8px; }
  .lateral .marca { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px 0 12px; margin-bottom: 12px; }
  .lateral .marca .palavra { font-size: var(--t-secao); font-weight: 700; flex: 1; }
  .lat-item { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 12px; font-weight: 600; font-size: var(--t-botao); color: var(--apoio); text-align: left; white-space: nowrap; }
  .lat-item:hover { background: var(--superficie); color: var(--texto); }
  .lat-item[aria-current="page"] { color: var(--texto); background: var(--superficie2); }
  .lat-item.novo { background: var(--texto); color: var(--fundo); margin-bottom: 12px; }
  body.lateral-recolhida .lat-item { justify-content: center; padding: 0; }
  body.lateral-recolhida .lat-item:hover::after, body.lateral-recolhida .lat-item:focus-visible::after {
    content: attr(data-dica); position: absolute; left: 60px; top: 50%; transform: translateY(-50%);
    background: var(--texto); color: var(--fundo); padding: 6px 10px; border-radius: 8px; font-size: var(--t-apoio); white-space: nowrap; z-index: 40;
  }
  .lat-sep { height: 1px; background: var(--linha); margin: 8px 12px; }
  .hoje-topo { max-width: 640px; }
  .hoje-grade { display: grid; grid-template-columns: 9fr 6fr 5fr; gap: 24px; align-items: start; margin-top: var(--gap-secao); }
  .hoje-grade > .col > .secao:first-child { margin-top: 0; }
  .hoje-grade .habitos-hoje { flex-direction: column; align-items: stretch; }
  .divisao { display: grid; grid-template-columns: minmax(320px, 720px) minmax(360px, 1fr); gap: 32px; align-items: start; }
  .divisao .painel-detalhe { display: block; position: sticky; top: calc(var(--topo-h) + 8px); max-height: calc(100dvh - var(--topo-h) - 24px); overflow-y: auto; padding: var(--pad-card); border-radius: var(--raio); background: var(--card); border: 1px solid var(--card-borda); }
  .divisao .painel-detalhe .item-corpo { background: var(--card); }
  .gaveta { bottom: auto; top: 50%; border-radius: 24px; transform: translateY(-40%) scale(.98); opacity: 0; transition: transform .2s, opacity .2s; max-height: 86dvh; }
  .gaveta.aberto { transform: translateY(-50%); opacity: 1; }
  .gaveta .alca { display: none; }
  .gaveta-cab { padding-top: 16px; }
  .item .acoes-pc { display: flex; opacity: 0; transition: opacity .12s; }
  .item:hover .acoes-pc, .item:focus-within .acoes-pc { opacity: 1; }
  .so-celular { display: none !important; }
  .lista-pc { max-width: 720px; }
}
@media (max-width: 1023px) {
  .so-pc { display: none !important; }
  .item .acoes-pc { display: none; }
}
@media (max-width: 359px) {
  .faixa { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
.hab-linha .item-txt .m { flex-wrap: wrap; white-space: normal; row-gap: 2px; }

/* ---------- 1.2: captura, acesso rápido e notas ---------- */
.segmentos.fixos.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 16px; }
.segmentos.fixos.quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.alterna .cont { font-weight: 400; opacity: .75; margin-left: 2px; }
.gaveta .segmentos.fixos { background: var(--superficie); }
.gaveta .segmentos.fixos button[aria-selected="true"] { background: var(--texto); color: var(--fundo); box-shadow: none; }
.campos-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.acoes-fim.grade-2 { display: grid; }

.atalhos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.atalho { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 72px; padding: 10px 4px; border-radius: var(--raio); background: var(--card); border: 1px solid var(--card-borda); font-size: var(--t-micro); font-weight: 600; color: var(--texto); text-align: center; line-height: 1.2; }
.atalho:active { transform: scale(.97); }
.atalho .t { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atalho-ic { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--superficie2); }
.atalho-ic .ic { width: 20px; height: 20px; }
.atalho-n { position: absolute; top: -6px; right: -10px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--destaque); color: var(--fundo); font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; }
.atalhos.todos .atalho { background: var(--superficie); border-color: transparent; }
.cartao-acao.escolha .bola-escolha { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--linha); flex: none; color: transparent; }
.cartao-acao.escolha[aria-pressed="true"] { border-color: var(--texto); }
.cartao-acao.escolha[aria-pressed="true"] .bola-escolha { background: var(--texto); border-color: var(--texto); color: var(--fundo); }

:root { --nota-verde: #2F8F5B; --nota-azul: #2F6FB0; --nota-amarelo: #C99A06; --nota-rosa: #C2477A; --nota-roxo: #7A55C2; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --nota-verde: #5CC48A; --nota-azul: #6FA8E6; --nota-amarelo: #E8C04A; --nota-rosa: #E57FA8; --nota-roxo: #A98AE8; } }
:root[data-tema="escuro"] { --nota-verde: #5CC48A; --nota-azul: #6FA8E6; --nota-amarelo: #E8C04A; --nota-rosa: #E57FA8; --nota-roxo: #A98AE8; }
.cor-verde { --cor-nota: var(--nota-verde); } .cor-azul { --cor-nota: var(--nota-azul); } .cor-amarelo { --cor-nota: var(--nota-amarelo); } .cor-rosa { --cor-nota: var(--nota-rosa); } .cor-roxo { --cor-nota: var(--nota-roxo); }

.notas-lista { display: grid; gap: var(--gap-cards, 8px); list-style: none; margin: 0; padding: 0; }
.nota-card { display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left; padding: 14px var(--pad-card); border-radius: var(--raio); background: var(--card); border: 1px solid var(--card-borda); }
.nota-card[class*="cor-"] .t::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--cor-nota); flex: none; }
.nota-card .t { display: flex; align-items: center; gap: 6px; font-size: var(--t-card); font-weight: 600; }
.nota-card .prev { color: var(--apoio); font-size: var(--t-apoio); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nota-card .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--t-micro); color: var(--apoio); font-variant-numeric: tabular-nums; }
.nota-card .meta i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }
.chip.peq { min-height: 36px; padding: 0 12px; font-size: var(--t-apoio); }
.nota-titulo { font-weight: 700; font-size: var(--t-secao); }
.nota-itens { list-style: none; margin: 0; padding: 0; }
.nota-itens li { display: flex; align-items: center; gap: 8px; min-height: 48px; border-bottom: 1px solid var(--linha); }
.nota-check { display: grid; place-items: center; width: 44px; height: 44px; flex: none; }
.nota-check .ic { width: 16px; height: 16px; padding: 2px; border-radius: 6px; border: 2px solid var(--linha); color: transparent; box-sizing: content-box; }
.nota-check[aria-pressed="true"] .ic { background: var(--destaque); border-color: var(--destaque); color: var(--fundo); }
.nota-item-t { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--texto); font: inherit; padding: 8px 0; outline: none; }
.nota-itens li.feito .nota-item-t { text-decoration: line-through; color: var(--apoio); }
.cores-nota { display: flex; flex-wrap: wrap; gap: 10px; }
.cor-bola { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--cor-nota); color: var(--fundo); border: 2px solid transparent; }
.cor-bola.sem-cor { background: var(--superficie2); color: var(--texto); }
.cor-bola[aria-checked="true"] { outline: 2px solid var(--texto); outline-offset: 2px; }

/* ---------- Calendário (7 dias e mês) ---------- */
.alterna { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 3px; border-radius: var(--pilula); background: var(--superficie); margin-bottom: 16px; }
.alterna button { min-height: 36px; padding: 0 18px; border-radius: var(--pilula); font-size: var(--t-botao); font-weight: 600; color: var(--apoio); }
.alterna button[aria-selected="true"] { background: var(--texto); color: var(--fundo); }
.cal-cab { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.cal-titulo { flex: 1; text-align: center; font-size: var(--t-secao); font-weight: 700; }
.cal-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; padding: 8px 4px; border-radius: var(--raio); background: var(--card); border: 1px solid var(--card-borda); }
.cal-sem { text-align: center; color: var(--apoio); padding: 4px 0 6px; font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .04em; }
.cal-dia { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; min-height: 52px; padding-top: 6px; border-radius: 12px; }
.cal-dia .n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: var(--t-texto); font-weight: 600; }
.cal-dia.fora .n { color: var(--apoio); opacity: .55; }
.cal-dia.hoje .n { background: var(--destaque-suave); color: var(--destaque); font-weight: 700; }
.cal-dia[aria-pressed="true"] .n { background: var(--texto); color: var(--fundo); box-shadow: none; }
.cal-dia .pontos { display: flex; align-items: center; gap: 3px; height: 6px; }
.cal-dia .pontos i { width: 5px; height: 5px; border-radius: 50%; background: var(--apoio); }
.cal-dia .pontos i.alta { background: var(--destaque); }
.cal-dia .pontos i.feita { background: transparent; box-shadow: inset 0 0 0 1.5px var(--destaque); }
.cal-dia .pontos b { font-size: 10px; line-height: 6px; color: var(--apoio); }
.cal-dia.atraso .pontos i:not(.alta) { background: var(--texto); }
@media (min-width: 1024px) {
  .cal-grade { max-width: 720px; }
  .cal-dia { min-height: 72px; }
  .cal-cab { max-width: 720px; }
}

/* ---------- 1.4: modos de Hoje e semana ---------- */
.data-linha { gap: 8px; margin-bottom: 12px; }
.data-linha .data-hoje { margin: 0; }
.modo-hoje { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 12px; border-radius: var(--pilula); background: var(--superficie); font-size: var(--t-apoio); font-weight: 600; color: var(--texto); flex: none; }
.semana-tira { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; padding: 6px 4px; border-radius: var(--raio); background: var(--card); border: 1px solid var(--card-borda); }
.semana-tira .cal-dia { padding-top: 4px; min-height: 64px; }
.semana-tira .cal-sem { padding: 0; }
.pilha-blocos .interruptor { border-bottom: 1px solid var(--linha); }
.pilha-blocos .interruptor:last-child { border-bottom: 0; }
.data-hoje { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.data-hoje .saudacao { font-size: var(--t-card); font-weight: 600; color: var(--texto); }
.semana-tira .cal-dia.hoje { background: var(--destaque-suave); }
.semana-tira .cal-dia.hoje .n { background: transparent; }
.semana-tira .cal-dia.hoje .cal-sem { color: var(--destaque); font-weight: 700; }
.login h3 { font-size: var(--t-card); }
.erro-login { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--superficie); font-size: var(--t-apoio); }
.bloco-ordem { display: flex; align-items: center; gap: 4px; min-height: 52px; border-bottom: 1px solid var(--linha); }
.bloco-ordem:last-child { border-bottom: 0; }
.bloco-ordem .nome { flex: 1; min-width: 0; }
.bloco-ordem.desligado .nome { color: var(--apoio); }
.bloco-ordem .botao-ic:disabled { opacity: .3; }
.campo .bloco-ordem input, .bloco-ordem input { min-height: 0; padding: 0; appearance: none; -webkit-appearance: none; width: 48px; height: 28px; border-radius: 14px; background: var(--superficie2); position: relative; flex: none; margin: 0 0 0 8px; border: 0; }
.bloco-ordem input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--fundo); transition: transform .15s; }
.campo .bloco-ordem input:checked, .bloco-ordem input:checked { background: var(--texto); }
.bloco-ordem input:checked::after { transform: translateX(20px); }
.frase-dia { margin-top: 16px; padding: 2px 0 2px 12px; border-left: 3px solid var(--destaque); font-size: var(--t-card); font-weight: 600; line-height: 1.4; color: var(--texto); text-wrap: pretty; }

/* ---------- SOS com a Palavra ---------- */
.sos-escape { padding: var(--pad-card); border-radius: var(--raio); background: var(--destaque-suave); }
.sos-escape .rotulo { color: var(--destaque); }
.sos-verso { font-size: var(--t-card); font-weight: 600; line-height: 1.45; margin-top: 4px; text-wrap: pretty; }
.sos-ref { margin-top: 8px; font-size: var(--t-apoio); font-weight: 700; color: var(--destaque); }
.sos-oracao p { line-height: 1.55; font-style: italic; }
.sos-acoes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sos-acoes button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--card-borda); text-align: left; }
.sos-acoes .bola { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--linha); color: transparent; flex: none; }
.sos-acoes button[aria-pressed="true"] { color: var(--apoio); }
.sos-acoes button[aria-pressed="true"] .bola { background: var(--destaque); border-color: var(--destaque); color: var(--fundo); }

/* ---------- Assistente ---------- */
.ia-tela { display: flex; flex-direction: column; gap: 12px; min-height: calc(100dvh - var(--topo-h) - var(--abas-h) - 80px); }
.ia-lista { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.ia-vazio { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 32px 16px 8px; }
.ia-av { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--destaque-suave); color: var(--destaque); flex: none; }
.ia-av.grande { width: 64px; height: 64px; }
.ia-av.grande .ic { width: 32px; height: 32px; }
.ia-msg { display: flex; gap: 8px; align-items: flex-end; max-width: 100%; }
.ia-msg.eu { justify-content: flex-end; }
.ia-bolha { position: relative; max-width: min(85%, 560px); padding: 10px 14px; border-radius: 18px; line-height: 1.5; overflow-wrap: anywhere; }
.ia-msg.ia .ia-bolha { background: var(--card); border: 1px solid var(--card-borda); border-bottom-left-radius: 6px; padding-bottom: 28px; }
.ia-msg.eu .ia-bolha { background: var(--texto); color: var(--fundo); border-bottom-right-radius: 6px; }
.ia-msg.aviso .ia-bolha { background: var(--superficie); color: var(--apoio); font-size: var(--t-apoio); margin: 0 auto; text-align: center; }
.ia-msg.pensando .ia-bolha { padding-bottom: 10px; }
.ia-ouvir { position: absolute; right: 8px; bottom: 4px; display: grid; place-items: center; width: 28px; height: 24px; color: var(--apoio); }
.ia-pontos { display: inline-flex; gap: 4px; }
.ia-pontos i { width: 6px; height: 6px; border-radius: 50%; background: var(--apoio); animation: ia-pulo 1s infinite ease-in-out; }
.ia-pontos i:nth-child(2) { animation-delay: .15s; } .ia-pontos i:nth-child(3) { animation-delay: .3s; }
@keyframes ia-pulo { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.ia-sugestoes { justify-content: center; }
.ia-caixa { position: sticky; bottom: calc(var(--abas-h) + var(--seg-baixo) + 8px); display: flex; align-items: flex-end; gap: 4px; padding: 6px; border-radius: 24px; background: var(--card); border: 1px solid var(--linha); box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.ia-caixa textarea { flex: 1; min-height: 44px; max-height: 160px; border: 0; background: transparent; padding: 10px 8px; resize: none; }
.ia-caixa textarea:focus { border: 0; }
.ia-enviar { background: var(--texto); color: var(--fundo); border-radius: 50%; }
.ia-caixa [data-mic].gravando { background: var(--destaque); color: var(--fundo); border-radius: 50%; animation: ia-pulso 1.2s infinite; }
@keyframes ia-pulso { 50% { box-shadow: 0 0 0 6px var(--destaque-suave); } }
.botao-ic.ia-topo { color: var(--destaque); }
.ia-recado { display: block; max-width: 240px; padding: 10px 14px; border-radius: 16px; background: var(--texto); color: var(--fundo); font-size: var(--t-apoio); font-weight: 600; line-height: 1.35; text-align: left; box-shadow: 0 6px 20px rgba(0,0,0,.18); opacity: 0; transform: translateY(-4px); transition: opacity .25s, transform .25s; }
.ia-recado.visivel { opacity: 1; transform: none; }
.ia-recado-topo { position: fixed; z-index: 35; top: calc(var(--topo-h) + var(--seg-topo) - 4px); right: calc(12px + var(--seg-dir)); pointer-events: none; }
.ia-recado-topo .ia-recado { pointer-events: auto; }
.ia-recado-topo .ia-recado::before { content: ''; position: absolute; top: -6px; right: 18px; width: 12px; height: 12px; background: var(--texto); transform: rotate(45deg); border-radius: 2px; }
.ia-recado-topo .ia-recado { position: relative; }
.ia-fab { position: fixed; z-index: 28; right: calc(16px + var(--seg-dir)); bottom: calc(var(--abas-h) + var(--seg-baixo) + var(--minifoco-h) + 16px); display: flex; align-items: center; gap: 8px; }
.ia-botao { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--card); color: var(--destaque); border: 1px solid var(--linha); box-shadow: 0 4px 14px rgba(0,0,0,.15); }
@media (min-width: 1024px) { .ia-fab { bottom: 24px; right: 24px; } .ia-caixa { bottom: 16px; } .ia-tela { max-width: 720px; } }
.ia-topo.novo::after, .ia-botao.novo::after { content: ''; position: absolute; top: 8px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--destaque); box-shadow: 0 0 0 2px var(--topo-fundo); }
.ia-botao { position: relative; }
@media (max-width: 1023px) {
  .ia-tela { padding-bottom: 76px; }
  .ia-caixa { position: fixed; z-index: 25; left: calc(var(--margem) + var(--seg-esq)); right: calc(var(--margem) + var(--seg-dir)); bottom: calc(var(--abas-h) + var(--seg-baixo) + var(--minifoco-h) + 16px); }
}
.ia-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; max-width: min(85%, 560px); }
.ia-col .ia-bolha { max-width: 100%; }
.ia-msg.eu .ia-col { align-items: flex-end; }
.ia-acoes { display: flex; flex-direction: column; gap: 6px; }
.ia-acao { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 8px 8px 8px 12px; border-radius: 14px; border: 1px dashed var(--destaque); background: var(--destaque-suave); }
.ia-acao .t { font-size: var(--t-apoio); font-weight: 600; min-width: 0; flex: 1 1 160px; }
.ia-acao .b { display: flex; gap: 4px; }
.ia-acao.feito, .ia-acao.ignorado, .ia-acao.falhou { border-style: solid; border-color: var(--linha); background: transparent; }
.ia-trabalhando { display: flex; align-items: center; gap: 12px; padding: 16px 0; color: var(--apoio); }
.ia-resultado { padding: 12px 14px; border-radius: 14px; background: var(--superficie); line-height: 1.55; max-height: 50dvh; overflow-y: auto; }
.ia-itens { list-style: none; margin: 0; padding: 0; }
.ia-itens li label { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--linha); }
.ia-itens input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--destaque); flex: none; }
.nota-texto { min-height: 52dvh; font-size: var(--t-texto); line-height: 1.6; }
.nota-texto.com-lista { min-height: 22dvh; }
.nota-barra { margin-top: 8px; gap: 6px; }
.nota-detalhes { margin-top: 20px; }
.nota-detalhes .recolhe-cab .t { font-size: var(--t-apoio); }
.nota-info { margin-top: 8px; font-size: var(--t-micro); color: var(--apoio); }
.ia-caixa { padding: 3px 4px 3px 6px; gap: 0; border-radius: 22px; align-items: center; }
.ia-caixa textarea { min-height: 38px; padding: 8px 6px; font-size: var(--t-apoio); line-height: 1.4; }
.ia-caixa .botao-ic { width: 38px; height: 38px; }
.ia-caixa .botao-ic .ic { width: 20px; height: 20px; }
.ia-sugestoes { justify-content: flex-start; }
.ia-sugestoes .chip { flex: none; }
@media (max-width: 1023px) { .ia-sugestoes { position: fixed; z-index: 25; left: 0; right: 0; margin: 0; bottom: calc(var(--abas-h) + var(--seg-baixo) + var(--minifoco-h) + 72px); } }
@media (max-width: 1023px) { .ia-tela:has(.ia-sugestoes) { padding-bottom: 132px; } }

/* ================= Movimento ================= */
/* Curvas: saída suave para quase tudo e mola para o que volta ao lugar. */
:root { --ease-suave: cubic-bezier(.2, .8, .2, 1); --ease-mola: cubic-bezier(.34, 1.45, .64, 1); }

/* Telas: avançar entra pela direita, voltar pela esquerda, trocar de aba sobe. Blocos em cascata. */
@keyframes entra-dir { from { opacity: 0; transform: translateX(20px); } }
@keyframes entra-esq { from { opacity: 0; transform: translateX(-20px); } }
@keyframes entra-cima { from { opacity: 0; transform: translateY(12px); } }
@keyframes aparece { from { opacity: 0; } }
.tela.entra-ir > * { animation: entra-dir .34s var(--ease-suave) both; }
.tela.entra-volta > * { animation: entra-esq .34s var(--ease-suave) both; }
.tela.entra-aba > *, .tela.entra-troca > * { animation: entra-cima .32s var(--ease-suave) both; }
.tela[class*="entra-"] > *:nth-child(2) { animation-delay: 35ms; }
.tela[class*="entra-"] > *:nth-child(3) { animation-delay: 70ms; }
.tela[class*="entra-"] > *:nth-child(4) { animation-delay: 105ms; }
.tela[class*="entra-"] > *:nth-child(5) { animation-delay: 140ms; }
.tela[class*="entra-"] > *:nth-child(6) { animation-delay: 175ms; }
.tela[class*="entra-"] > *:nth-child(7) { animation-delay: 210ms; }
.tela[class*="entra-"] > *:nth-child(n+8) { animation-delay: 240ms; }
/* A conversa tem elementos fixos na tela: ela só aparece, sem deslizar. */
.tela[class*="entra-"] > .ia-tela { animation-name: aparece; }
/* Itens de lista entram em cascata, só na entrada da tela. */
.tela[class*="entra-"] .lista > .item { animation: entra-cima .3s var(--ease-suave) both; }
.tela[class*="entra-"] .lista > .item:nth-child(2) { animation-delay: 40ms; }
.tela[class*="entra-"] .lista > .item:nth-child(3) { animation-delay: 80ms; }
.tela[class*="entra-"] .lista > .item:nth-child(4) { animation-delay: 120ms; }
.tela[class*="entra-"] .lista > .item:nth-child(n+5) { animation-delay: 160ms; }

/* Gráficos: barras crescem, linha se desenha, radar abre, progresso enche. */
@keyframes cresce-barra { from { transform: scaleY(0); } }
@keyframes desenha { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes abre { from { transform: scale(.2); opacity: 0; } }
@keyframes enche { from { transform: scaleX(0); } }
.graf .barra { transform-box: fill-box; transform-origin: 50% 100%; animation: cresce-barra .6s var(--ease-suave) both; animation-delay: calc(var(--i, 0) * 12ms); }
.graf .curva { stroke-dasharray: 1; animation: desenha 1.1s var(--ease-suave) both; }
.graf .ponto { animation: aparece .3s ease-out .9s both; }
svg .area { transform-box: fill-box; transform-origin: center; animation: abre .7s var(--ease-mola) both; }
.progresso i, .barra-h .trilho i { transform-origin: left center; animation: enche .8s var(--ease-suave) both; }
.calor { animation: aparece .5s ease-out both; }
/* Ao redesenhar a mesma tela (marcar um hábito, por exemplo), o progresso não recomeça do zero. */
.tela:not([class*="entra-"]) .progresso i, .tela:not([class*="entra-"]) .barra-h .trilho i { animation: none; transition: width .5s var(--ease-suave); }

/* Avisos sobem com mola e descem ao sair. */
.aviso { animation: sobe .32s var(--ease-mola); }
.aviso.saindo { animation: desce .22s ease-in forwards; }
@keyframes desce { to { transform: translateY(14px); opacity: 0; } }

/* Gavetas: o conteúdo entra em cascata logo depois da gaveta. */
.gaveta.aberto .gaveta-corpo > * { animation: entra-cima .3s var(--ease-suave) both; animation-delay: 60ms; }
.gaveta.aberto .gaveta-corpo > *:nth-child(2) { animation-delay: 95ms; }
.gaveta.aberto .gaveta-corpo > *:nth-child(n+3) { animation-delay: 130ms; }
.gaveta { transition: transform .32s var(--ease-suave); }
.gaveta .cartao-acao { animation: entra-cima .28s var(--ease-suave) both; }
.gaveta .pilha > .cartao-acao:nth-child(2) { animation-delay: 30ms; }
.gaveta .pilha > .cartao-acao:nth-child(3) { animation-delay: 60ms; }
.gaveta .pilha > .cartao-acao:nth-child(4) { animation-delay: 90ms; }
.gaveta .pilha > .cartao-acao:nth-child(n+5) { animation-delay: 120ms; }

/* Arrasto: o item volta ao lugar com mola. */
.item-corpo { transition: transform .38s var(--ease-mola); }
.item-corpo.arrastando { transition: none; }

/* Toque: botões e cartões afundam de leve. */
.btn, .chip, .cartao-acao, .atalho, .botao-ic, .aba, .cal-dia, .nota-card, .segmentos button { transition: transform .12s ease, background-color .15s, color .15s, opacity .15s; }
.btn:active, .chip:active, .cartao-acao:active, .atalho:active, .nota-card:active, .cal-dia:active, .segmentos button:active { transform: scale(.97); }

/* Marcar: a bolinha cresce com mola. */
.marcador .bola { transition: background-color .2s, border-color .2s, transform .3s var(--ease-mola); }
.marcador.on .bola { transform: scale(1); }
.marcador:active .bola { transform: scale(.85); }

/* Blocos que abrem: o conteúdo aparece suave. */
.recolhe[data-aberto="true"] .recolhe-pad { animation: aparece .25s ease-out; }

/* Conversa: a última mensagem desliza para cima. */
.ia-msg:last-child { animation: entra-cima .3s var(--ease-suave) both; }
.ia-topo.novo::after, .ia-botao.novo::after { animation: pinga 1.8s ease-out 2; }
@keyframes pinga { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--destaque) 60%, transparent), 0 0 0 2px var(--topo-fundo); } 100% { box-shadow: 0 0 0 10px transparent, 0 0 0 2px var(--topo-fundo); } }

/* Frase do dia e saudação entram com calma. */
.frase-dia { animation: aparece .6s ease-out .15s both; }

/* Confete das grandes vitórias. */
.confete { position: fixed; inset: 0; pointer-events: none; z-index: 95; overflow: hidden; }
.confete i { position: absolute; width: 7px; height: 11px; border-radius: 2px; animation: confete 1s cubic-bezier(.15, .7, .3, 1) forwards; }
@keyframes confete { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) + 90px)) rotate(var(--rot)); opacity: 0; } }

/* Desligado em Ajustes ou pelo Reduzir Movimento do iPhone: nada se mexe. */
:root[data-movimento="reduzido"] *, :root[data-movimento="reduzido"] *::before, :root[data-movimento="reduzido"] *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-delay: 0s !important; } }
/* Fileiras que rolam para o lado: o encaixe respeita a margem, então o primeiro item não gruda na borda. */
.rolagem { scroll-padding-inline: var(--margem); }
@media (min-width: 600px) { .rolagem { scroll-padding-inline: 24px; } }

/* ---------- Seleção que desliza e glow ---------- */
.pilula-desliza { position: absolute !important; z-index: 0 !important; pointer-events: none; transition: transform .38s var(--ease-mola); will-change: transform; }
.segmentos, .alterna, .chips { position: relative; }  /* .abas e .lateral já são fixas, e isso basta */
.abas > *, .lateral > *, .segmentos > button, .alterna > button, .chips > .chip { position: relative; z-index: 1; }
.abas .ic-pilula { position: relative; z-index: 1; }
.sel-chegando { background: transparent !important; box-shadow: none !important; transition: none !important; }
.chips .chip.sel-chegando { border-color: transparent !important; }
.aba .ic-pilula + span, .aba .ic-pilula .ic { position: relative; z-index: 2; }

/* Anel de luz: sai do elemento e se dissolve. */
/* A luz acompanha a borda e os cantos do próprio elemento, sem moldura solta. */
.brilhando { animation: brilho 1.05s var(--ease-suave) both; }
@keyframes brilho {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--destaque) 0%, transparent), 0 0 0 0 color-mix(in srgb, var(--destaque) 0%, transparent); }
  22% { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--destaque) 85%, transparent), 0 0 22px 2px color-mix(in srgb, var(--destaque) 45%, transparent); }
  100% { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--destaque) 0%, transparent), 0 0 30px 6px color-mix(in srgb, var(--destaque) 0%, transparent); }
}

/* Glow que respira: o foco rodando e a Âncora do dia. */
@keyframes respira { 0%, 100% { box-shadow: 0 6px 20px rgba(0,0,0,.18), 0 0 0 0 color-mix(in srgb, var(--destaque) 0%, transparent); } 50% { box-shadow: 0 6px 20px rgba(0,0,0,.18), 0 0 18px 2px color-mix(in srgb, var(--destaque) 35%, transparent); } }
.minifoco:not([hidden]) { animation: respira 3.2s ease-in-out infinite; }
.ancora:not(.feito) { box-shadow: -6px 0 18px -10px color-mix(in srgb, var(--destaque) 70%, transparent); }
.frase-dia { box-shadow: -8px 0 16px -12px color-mix(in srgb, var(--destaque) 80%, transparent); }

/* Botão principal: um brilho rápido ao tocar. */
.btn:not(.sec):not(.txt):not(.vazado):active { box-shadow: 0 0 0 4px color-mix(in srgb, var(--destaque) 25%, transparent); }
/* Selecionados ganham um leve halo na cor de destaque. */
.segmentos.fixos button[aria-selected="true"] { box-shadow: 0 0 0 1px var(--linha), 0 2px 10px -2px color-mix(in srgb, var(--destaque) 35%, transparent); }
.tags-editar { color: var(--apoio); }
.ia-caixa { padding: 4px 5px 4px 8px; border-radius: 24px; }
.ia-caixa textarea { min-height: 42px; padding: 10px 6px; font-size: var(--t-texto); }
.ia-caixa .botao-ic { width: 42px; height: 42px; }
.ia-caixa .botao-ic .ic { width: 22px; height: 22px; }
.ia-msg.sistema { justify-content: center; }
.ia-nota { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 6px 8px; max-width: 92%; padding: 8px 12px; border-radius: 14px; border: 1px dashed var(--linha); color: var(--apoio); font-size: var(--t-apoio); text-align: center; line-height: 1.4; }
.ia-nota .btn.txt { color: var(--destaque); padding: 0 6px; min-height: 32px; }