/* ============================================================
   Nossa Bússola — CSS do app, direto do design system (Claude Design, 17/09/2026).
   Tokens copiados de tokens/*.css; componentes traduzidos de components/core/*.jsx.
   Mobile-first: largura de projeto 390, fluido 360–430; em tela grande centraliza.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400;1,6..72,500&display=swap");

:root {
  --nb-blue-900:#0F3A57; --nb-blue-700:#154B70; --nb-blue-600:#1B5E8C; --nb-blue-400:#4F8DB8; --nb-blue-300:#6FA8D4; --nb-blue-100:#E3EEF6;
  --nb-coral-600:#C24F2C; --nb-coral-500:#D9603B; --nb-coral-100:#FBE9E2;
  --nb-sand-50:#FBFAF7; --nb-sand-100:#F6F3EE; --nb-sand-200:#EFEAE2; --nb-sand-300:#E2DCD2; --nb-sand-400:#CFC7BA;
  --nb-ink-900:#1E2126; --nb-ink-700:#3A3F47; --nb-ink-500:#5B6068; --nb-ink-300:#8A9099; --nb-white:#FFFFFF;

  --nb-primary:var(--nb-blue-600); --nb-primary-strong:var(--nb-blue-700); --nb-primary-soft:var(--nb-blue-100); --nb-on-primary:var(--nb-white);
  --nb-accent:var(--nb-coral-500); --nb-accent-strong:var(--nb-coral-600); --nb-accent-soft:var(--nb-coral-100); --nb-on-accent:var(--nb-white);
  --nb-bg:var(--nb-sand-100); --nb-surface:var(--nb-white); --nb-surface-2:var(--nb-sand-200); --nb-surface-raised:var(--nb-white);
  --nb-border:var(--nb-sand-300); --nb-border-strong:var(--nb-sand-400);
  --nb-text:var(--nb-ink-900); --nb-text-2:var(--nb-ink-500); --nb-text-3:var(--nb-ink-300); --nb-text-inverse:var(--nb-sand-50);
  --nb-overlay:rgba(30,33,38,0.48);
  --nb-success:#2F8F6B; --nb-success-soft:#E1F2EA; --nb-warning:#C98A1B; --nb-warning-soft:#FBF0D9; --nb-danger:#C6453A; --nb-danger-soft:#FAE3E0;
  --nb-info:var(--nb-blue-600); --nb-info-soft:var(--nb-blue-100);

  /* cor de cada módulo (do DS) + as três que o app tem a mais, no mesmo espírito */
  --nb-mod-saude:#2F8F6B; --nb-mod-saude-soft:#E1F2EA;
  --nb-mod-financas:#1B5E8C; --nb-mod-financas-soft:#E3EEF6;
  --nb-mod-agenda:#7A4FB3; --nb-mod-agenda-soft:#EEE7F7;
  --nb-mod-documentos:#B07A2A; --nb-mod-documentos-soft:#F8EDDA;
  --nb-mod-metas:#D9603B; --nb-mod-metas-soft:#FBE9E2;
  --nb-mod-listas:#2A8FA0; --nb-mod-listas-soft:#E0F1F4;
  --nb-mod-projetos:#5D6B7A; --nb-mod-projetos-soft:#E8ECF0;
  --nb-mod-casa:#5D6B7A; --nb-mod-casa-soft:#E8ECF0;
  --nb-mod-filhos:#B3487F; --nb-mod-filhos-soft:#F7E4EE;
  --nb-mod-cofre:#3A3F47; --nb-mod-cofre-soft:#E8E9EC;
  --nb-mod-familia:#1B5E8C; --nb-mod-familia-soft:#E3EEF6;

  --nb-font-ui:"Outfit",system-ui,-apple-system,sans-serif; --nb-font-display:"Newsreader",Georgia,serif;
  --nb-text-xs:12px; --nb-text-sm:13px; --nb-text-base:15px; --nb-text-md:17px; --nb-text-lg:20px; --nb-text-xl:24px; --nb-text-2xl:32px; --nb-text-3xl:40px;
  --nb-tracking-caps:0.08em; --nb-tracking-tight:-0.01em;
  --nb-space-1:4px; --nb-space-2:8px; --nb-space-3:12px; --nb-space-4:16px; --nb-space-5:20px; --nb-space-6:24px; --nb-space-7:32px; --nb-space-8:40px;
  --nb-radius-xs:6px; --nb-radius-sm:10px; --nb-radius-md:16px; --nb-radius-lg:24px; --nb-radius-full:999px;
  --nb-screen-pad:20px; --nb-tabbar-h:64px; --nb-touch:44px; --nb-control-h:48px; --nb-control-h-sm:36px;
  --nb-shadow-card:0 1px 2px rgba(30,33,38,0.05),0 4px 14px rgba(30,33,38,0.06);
  --nb-shadow-raised:0 2px 6px rgba(30,33,38,0.08),0 12px 32px rgba(30,33,38,0.12);
  --nb-shadow-sheet:0 -8px 40px rgba(30,33,38,0.18);
  --nb-ease:cubic-bezier(0.2,0.8,0.2,1); --nb-dur-fast:120ms; --nb-dur:200ms; --nb-dur-slow:320ms;
  --nb-blur-bar:saturate(1.4) blur(16px);
  color-scheme:light;
}
[data-theme="dark"] {
  --nb-primary:var(--nb-blue-300); --nb-primary-strong:var(--nb-blue-400); --nb-primary-soft:rgba(111,168,212,0.16); --nb-on-primary:var(--nb-blue-900);
  --nb-accent:#E8795A; --nb-accent-strong:var(--nb-coral-500); --nb-accent-soft:rgba(232,121,90,0.16); --nb-on-accent:#2A140C;
  --nb-bg:#12151A; --nb-surface:#1B1F26; --nb-surface-2:#242932; --nb-surface-raised:#242932; --nb-border:#303641; --nb-border-strong:#3E4552;
  --nb-text:#F2EFE9; --nb-text-2:#A9AEB7; --nb-text-3:#737983; --nb-text-inverse:var(--nb-ink-900); --nb-overlay:rgba(0,0,0,0.6);
  --nb-success:#4FB08C; --nb-success-soft:rgba(79,176,140,0.16); --nb-warning:#E0A53A; --nb-warning-soft:rgba(224,165,58,0.16); --nb-danger:#E2675C; --nb-danger-soft:rgba(226,103,92,0.16);
  --nb-info:var(--nb-blue-300); --nb-info-soft:rgba(111,168,212,0.16);
  --nb-mod-saude:#4FB08C; --nb-mod-saude-soft:rgba(79,176,140,0.16); --nb-mod-financas:#6FA8D4; --nb-mod-financas-soft:rgba(111,168,212,0.16);
  --nb-mod-agenda:#A88AD6; --nb-mod-agenda-soft:rgba(168,138,214,0.16); --nb-mod-documentos:#D2A25A; --nb-mod-documentos-soft:rgba(210,162,90,0.16);
  --nb-mod-metas:#E8795A; --nb-mod-metas-soft:rgba(232,121,90,0.16); --nb-mod-listas:#5BB6C6; --nb-mod-listas-soft:rgba(91,182,198,0.16);
  --nb-mod-projetos:#98A4B2; --nb-mod-projetos-soft:rgba(152,164,178,0.16); --nb-mod-casa:#98A4B2; --nb-mod-casa-soft:rgba(152,164,178,0.16);
  --nb-mod-filhos:#D98AB5; --nb-mod-filhos-soft:rgba(217,138,181,0.16); --nb-mod-cofre:#A9AEB7; --nb-mod-cofre-soft:rgba(169,174,183,0.16); --nb-mod-familia:#6FA8D4; --nb-mod-familia-soft:rgba(111,168,212,0.16);
  --nb-shadow-card:0 1px 2px rgba(0,0,0,0.3),0 4px 14px rgba(0,0,0,0.3); --nb-shadow-raised:0 2px 6px rgba(0,0,0,0.4),0 12px 32px rgba(0,0,0,0.5); --nb-shadow-sheet:0 -8px 40px rgba(0,0,0,0.6);
  color-scheme:dark;
}

/* ---- base ---- */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;overflow-x:clip;background:var(--nb-bg);color:var(--nb-text);font-family:var(--nb-font-ui);font-size:var(--nb-text-base);line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100%}
body{overscroll-behavior-y:none}
/* iPhone: campo com fonte menor que 16px faz o Safari dar zoom ao focar e a barra fixa sai do lugar. Vale pra todo campo, dentro ou fora de .campo */
input,select,textarea{font-size:16px} input[type=checkbox],input[type=radio]{font-size:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
h1,h2,h3{margin:0;font-weight:600}
.display{font-family:var(--nb-font-display);font-weight:500;letter-spacing:var(--nb-tracking-tight);line-height:1.15}
.caps{font-size:var(--nb-text-xs);font-weight:600;letter-spacing:var(--nb-tracking-caps);text-transform:uppercase;color:var(--nb-text-2)}
.num{font-variant-numeric:tabular-nums}
.t2{color:var(--nb-text-2)} .t3{color:var(--nb-text-3)} .sm{font-size:var(--nb-text-sm)}
svg.lucide{width:20px;height:20px;stroke-width:1.75}
.caixa:not(.campo .caixa){display:inline-flex;align-items:center;gap:6px;border-radius:var(--nb-radius-sm);background:var(--nb-surface);border:1.5px solid var(--nb-border);flex:none}
.caixa:not(.campo .caixa) input{flex:1;min-width:0;width:0;border:0;outline:0;background:transparent;font-size:16px;height:100%;text-align:right}
.caixa:not(.campo .caixa) .fixo{color:var(--nb-text-3);font-size:var(--nb-text-xs);flex:none}
.caixa:not(.campo .caixa):focus-within{border-color:var(--nb-primary)}
.col-cab{display:flex;justify-content:space-between;padding:0 8px 6px} .col-cab span:last-child{text-align:right}
.card .linha.plano-item,.linha.plano-item{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:12px 0;text-align:left}
.plano-item .cab{display:flex;align-items:center;gap:12px;width:100%} .plano-item .cab .txt{flex:1;min-width:0} .plano-item .cab .val{display:flex;align-items:baseline;gap:3px;flex:none} .plano-item .cab .val b{font-size:18px;font-weight:600}
[hidden]{display:none!important}
.plano-item .ops{margin-top:10px;display:flex;flex-direction:column;gap:12px;width:100%} .plano-item .ops .op{display:block;font-size:var(--nb-text-sm);color:var(--nb-text-2);line-height:1.45;white-space:normal} .plano-item .ops .op .n{color:var(--nb-mod-saude);font-weight:700;margin-right:2px} .plano-item .ops .op.evitar{color:#8A5A0A;background:var(--nb-warning-soft);border-left:3px solid var(--nb-warning);padding:6px 10px;border-radius:0 8px 8px 0;margin-top:2px}
/* agenda */
.ag-faixa{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.ag-dia{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0 6px;border-radius:14px;color:var(--nb-text-2);background:transparent}
.ag-dia small{font-size:11px;text-transform:lowercase} .ag-dia b{font-size:18px;font-weight:600;color:var(--nb-text);line-height:1.2}
.ag-dia.hoje b{color:var(--nb-accent)} .ag-dia.on{background:var(--nb-primary);color:var(--nb-on-primary)} .ag-dia.on b,.ag-dia.on.hoje b{color:var(--nb-on-primary)}
.pts{display:flex;gap:3px;height:5px;margin-top:2px} .pts i{width:5px;height:5px;border-radius:50%;display:block;background:var(--nb-primary)} .ag-dia.on .pts i{background:var(--nb-on-primary)}
.ag-item{padding-left:0;padding-right:2px} .ag-item .ag-hora{width:60px;margin-right:-10px;flex:none;display:flex;align-items:center;justify-content:center;text-align:center;font-size:var(--nb-text-sm);color:var(--nb-text-2);line-height:1.15} .ag-item .ag-hora small{font-size:var(--nb-text-sm);text-transform:lowercase} .ag-item .ag-cor{width:4px;align-self:stretch;border-radius:2px;flex:none;min-height:32px}
.ag-check{width:24px;height:24px;accent-color:var(--nb-success);flex:none;margin:0;border-radius:7px}
.ag-item.feita .txt b{text-decoration:line-through;color:var(--nb-text-3)} .ag-item.feita .ag-cor{opacity:.35}
.ag-item.atrasada .txt small{color:var(--nb-warning)}
.ag-grade{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center} .ag-grade small{padding:4px 0} .ag-cel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:46px;border-radius:12px;color:var(--nb-text)} .ag-cel b{font-weight:500} .ag-cel.hoje b{color:var(--nb-accent);font-weight:700} .ag-cel.on{background:var(--nb-primary-soft)}
.gd-fase{text-align:center;font-size:var(--nb-text-sm);font-weight:600;letter-spacing:var(--nb-tracking-caps);text-transform:uppercase;margin-top:8px}
.gd-cont{text-align:center;font-size:72px;line-height:1;margin-top:4px}
.gd-video{width:100%;aspect-ratio:16/9;border-radius:16px;background:#000;display:block;object-fit:cover}
.gd-fotos{display:grid;grid-template-columns:1fr 1fr;gap:8px} .gd-fotos img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:16px;background:var(--nb-surface-2)}
.gd-nome{text-align:center;font-size:var(--nb-text-xl);margin-top:14px;text-wrap:balance}
.gd-meta{text-align:center;color:var(--nb-text-2);font-size:var(--nb-text-sm);margin-top:4px} .gd-meta b{color:var(--nb-text)}
.gd-dots{display:flex;justify-content:center;gap:8px;margin-top:10px} .gd-dots i{width:10px;height:10px;border-radius:50%;background:var(--nb-border);display:block} .gd-dots i.on{background:var(--nb-accent);transform:scale(1.25)} .gd-dots i.ok{background:var(--nb-success)}
.gd-acoes{display:flex;gap:10px;margin-top:18px} .gd-acoes>.btn{flex:1} .gd-acoes.sec{margin-top:10px;justify-content:center} .gd-acoes.sec>.btn{flex:none}
.prog{height:8px;border-radius:var(--nb-radius-full);background:var(--nb-border);overflow:hidden}.prog>i{display:block;height:100%;width:0;background:var(--nb-primary);border-radius:var(--nb-radius-full);transition:width .25s linear}
.spin{width:28px;height:28px;border:3px solid var(--nb-border);border-top-color:var(--nb-primary);border-radius:50%;animation:g .8s linear infinite;margin:40px auto}
@keyframes g{to{transform:rotate(360deg)}}
.carregando{min-height:100dvh;display:grid;place-items:center}

/* ---- shell: appbar + conteúdo + tabbar ---- */
.app{max-width:430px;margin:0 auto;min-height:100dvh;position:relative;background:var(--nb-bg)}
@media (min-width:431px){.app{box-shadow:0 0 0 1px var(--nb-border)}}
.tela{padding:0 var(--nb-screen-pad) calc(var(--nb-tabbar-h) + 40px + env(safe-area-inset-bottom,0px));min-height:100dvh}
.tela.sem-tab{padding-bottom:40px}
.appbar{display:flex;align-items:center;gap:12px;min-height:56px;padding:calc(8px + env(safe-area-inset-top,0px)) 0 8px;position:sticky;top:0;z-index:5;background:var(--nb-bg);box-shadow:calc(-1 * var(--nb-screen-pad)) 0 0 var(--nb-bg), var(--nb-screen-pad) 0 0 var(--nb-bg)} /* duas sombras sólidas deslocadas pros lados cobrem só as margens laterais (sem spread, pra não invadir o que vem abaixo): barras de chips que sangram até a borda passam por baixo */ /* fixa no topo: conteúdo rola por baixo, não por cima do relógio */
.appbar .miolo{flex:1;min-width:0}
.appbar .sub{font-size:var(--nb-text-sm);color:var(--nb-text-2)}
.appbar .tit{font-size:var(--nb-text-md);font-weight:600}
.appbar.grande{padding-top:calc(12px + env(safe-area-inset-top,0px));padding-bottom:16px}
.appbar.grande .tit{font-family:var(--nb-font-display);font-size:var(--nb-text-2xl);font-weight:500;line-height:1.15;letter-spacing:var(--nb-tracking-tight)}
.tabbar{position:fixed;left:0;right:0;bottom:0;margin:0 auto;max-width:430px;height:calc(var(--nb-tabbar-h) + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);display:flex;justify-content:space-around;align-items:stretch;background:color-mix(in srgb,var(--nb-surface) 86%,transparent);backdrop-filter:var(--nb-blur-bar);-webkit-backdrop-filter:var(--nb-blur-bar);border-top:1px solid var(--nb-border);z-index:10}
.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--nb-text-3)}
.tabbar button.on{color:var(--nb-primary)}
.tabbar .pill{display:grid;place-items:center;width:48px;height:28px;border-radius:var(--nb-radius-full);transition:background var(--nb-dur)}
.tabbar button.on .pill{background:var(--nb-primary-soft)}
.tabbar .lucide{width:22px;height:22px}
.tabbar span.rot{font-size:11px;font-weight:500} .tabbar button.on span.rot{font-weight:600}

/* ---- componentes ---- */
.card{border-radius:var(--nb-radius-md);padding:16px;background:var(--nb-surface);box-shadow:var(--nb-shadow-card)}
.card.lista{padding:4px 16px}
.card.tinted{background:var(--nb-surface-2);box-shadow:none}
.card.outlined{box-shadow:none;border:1px solid var(--nb-border)}
.card.primary{background:var(--nb-primary);color:var(--nb-on-primary);box-shadow:none}
[data-theme="dark"] .card{box-shadow:none;border:1px solid var(--nb-border)} [data-theme="dark"] .card.primary{border:0}
.card.toque{cursor:pointer;transition:transform var(--nb-dur-fast) var(--nb-ease),filter var(--nb-dur-fast)} .card.toque:active{transform:scale(.98);filter:brightness(.96)}
.secao{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:24px 0 10px}
.secao h2{font-size:var(--nb-text-lg);font-weight:600;letter-spacing:var(--nb-tracking-tight)}
.secao button{color:var(--nb-primary);font-size:var(--nb-text-sm);font-weight:600}
.grade2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px} .grade2>*{min-width:0}
.campo{min-width:0} .campo .caixa{min-width:0;max-width:100%} .campo input,.campo select,.campo textarea{width:100%}
.campo .caixa{overflow:hidden} .campo input[type=date],.campo input[type=time],.campo input[type=datetime-local]{-webkit-appearance:none;appearance:none;min-width:0;width:100%;text-align:left;display:flex;align-items:center;height:100%;padding:0;white-space:nowrap;overflow:hidden} /* iOS: o campo de data tem largura própria e vazava */
.campo input::-webkit-date-and-time-value{text-align:left;margin:0;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile{border-radius:var(--nb-radius-md);background:var(--nb-surface);box-shadow:var(--nb-shadow-card);padding:14px;display:flex;flex-direction:column;gap:12px;min-height:116px;text-align:left;color:var(--nb-text);width:100%;transition:transform var(--nb-dur-fast) var(--nb-ease),filter var(--nb-dur-fast)}
[data-theme="dark"] .tile{box-shadow:none;border:1px solid var(--nb-border)}
.tile:active{transform:scale(.97);filter:brightness(.94)}
.tile.breve{opacity:.55}
.tile b{font-size:var(--nb-text-base);font-weight:600;display:block}
.tile small{font-size:var(--nb-text-sm);color:var(--nb-text-2);display:block;margin-top:2px;text-wrap:pretty}
.icone-mod{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--soft,var(--nb-surface-2));color:var(--cor,var(--nb-text-2))}
.linha{display:flex;align-items:center;gap:14px;min-height:60px;padding:10px 0;border-bottom:1px solid var(--nb-border);width:100%;text-align:left;color:var(--nb-text)}
.linha:last-child{border-bottom:0}
.linha .txt{flex:1;min-width:0}
.linha .txt b{display:block;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.linha .txt small{display:block;font-size:var(--nb-text-sm);color:var(--nb-text-2);margin-top:2px}
.linha .val{font-weight:600;font-variant-numeric:tabular-nums}
.linha .chev{color:var(--nb-text-3)} .linha .chev .lucide{width:18px;height:18px}
.badge{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:var(--nb-radius-full);font-size:var(--nb-text-xs);font-weight:600;white-space:nowrap;background:var(--nb-surface-2);color:var(--nb-text-2)}
.badge.success{background:var(--nb-success-soft);color:var(--nb-success)} .badge.warning{background:var(--nb-warning-soft);color:#8A5A0A} .badge.danger{background:var(--nb-danger-soft);color:var(--nb-danger)} .badge.info{background:var(--nb-info-soft);color:var(--nb-info)} .badge.accent{background:var(--nb-accent-soft);color:var(--nb-accent-strong)}
.chip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:var(--nb-radius-full);font-size:var(--nb-text-sm);font-weight:500;white-space:nowrap;border:1.5px solid var(--nb-border);background:var(--nb-surface);color:var(--nb-text);transition:all var(--nb-dur-fast)}
.chip.on{border-color:var(--nb-primary);background:var(--nb-primary);color:var(--nb-on-primary)}
.avatar{border-radius:var(--nb-radius-full);flex:none;display:inline-grid;place-items:center;color:#fff;font-family:var(--nb-font-display);font-weight:500;width:40px;height:40px;font-size:17px;overflow:hidden;position:relative}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.avatar.g{width:72px;height:72px;font-size:30px} .avatar.p{width:32px;height:32px;font-size:13px}
.avatar.foto{background:var(--nb-surface-2);overflow:hidden} .avatar.foto img{width:100%;height:100%;object-fit:cover;display:block}
.recorte{position:relative;border-radius:var(--nb-radius-md);overflow:hidden;touch-action:none;background:#000;user-select:none;-webkit-user-select:none}
.recorte canvas{display:block}
.recorte-mascara{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle closest-side at center, transparent 99%, rgba(0,0,0,.55) 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
input[type=range]{accent-color:var(--nb-primary);height:32px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--nb-control-h);padding:0 20px;border-radius:var(--nb-radius-sm);border:1.5px solid transparent;background:var(--nb-primary);color:var(--nb-on-primary);font-weight:600;transition:transform var(--nb-dur-fast) var(--nb-ease),filter var(--nb-dur-fast)}
.btn:active{transform:scale(.97);filter:brightness(.94)} .btn:disabled{opacity:.45}
.btn.cheio{width:100%} .btn.pq{height:var(--nb-control-h-sm);padding:0 14px;font-size:var(--nb-text-sm)}
.btn.accent{background:var(--nb-accent);color:var(--nb-on-accent)} .btn.secundario{background:var(--nb-primary-soft);color:var(--nb-primary-strong)} .btn.outline{background:transparent;color:var(--nb-text);border-color:var(--nb-border-strong)} .btn.ghost{background:transparent;color:var(--nb-primary)} .btn.danger{background:var(--nb-danger-soft);color:var(--nb-danger)}
.btn .lucide{width:18px;height:18px}
.ibtn{width:44px;height:44px;border-radius:var(--nb-radius-full);display:inline-grid;place-items:center;background:var(--nb-surface-2);color:var(--nb-text);flex:none}
.ibtn.primary{background:var(--nb-primary);color:#fff;box-shadow:var(--nb-shadow-raised)} .ibtn.accent{background:var(--nb-accent);color:#fff;box-shadow:var(--nb-shadow-raised)} .ibtn.plano{background:transparent}
.fab{position:fixed;right:max(20px,calc(50% - 215px + 20px));bottom:calc(var(--nb-tabbar-h) + 16px + env(safe-area-inset-bottom,0px));width:56px;height:56px;z-index:9}
.fab .lucide{width:26px;height:26px}
.campo{display:flex;flex-direction:column;gap:6px}
.campo>span{font-size:var(--nb-text-sm);font-weight:500;color:var(--nb-text-2)}
.campo .caixa{display:flex;align-items:center;gap:10px;height:var(--nb-control-h);padding:0 14px;border-radius:var(--nb-radius-sm);background:var(--nb-surface);border:1.5px solid var(--nb-border);transition:box-shadow var(--nb-dur)}
.campo .caixa:focus-within{border-color:var(--nb-primary);box-shadow:0 0 0 3px var(--nb-primary-soft)}
.campo .caixa.erro{border-color:var(--nb-danger)}
.campo input,.campo select{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:16px;height:100%} /* 16px: abaixo disso o Safari do iPhone dá zoom ao focar */
.campo .fixo{color:var(--nb-text-2);font-size:var(--nb-text-sm)}
.campo input.pin{letter-spacing:.45em;text-align:center;font-family:var(--nb-font-display);font-size:26px}
.campo .dica{font-size:var(--nb-text-xs);color:var(--nb-text-3)} .campo .dica.erro{color:var(--nb-danger)}
.switch{width:50px;height:30px;border-radius:var(--nb-radius-full);flex:none;position:relative;background:var(--nb-border-strong);transition:background var(--nb-dur)}
.switch.on{background:var(--nb-primary)}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left var(--nb-dur) var(--nb-ease)}
.switch.on::after{left:23px}
.vazio{text-align:center;padding:40px 24px;display:flex;flex-direction:column;align-items:center;gap:8px}
.vazio .ic{width:56px;height:56px;border-radius:18px;background:var(--nb-surface-2);color:var(--nb-text-2);display:grid;place-items:center;margin-bottom:6px} .vazio .ic .lucide{width:26px;height:26px}
.vazio h3{font-family:var(--nb-font-display);font-size:var(--nb-text-xl);font-weight:500}
.vazio p{margin:0;color:var(--nb-text-2);max-width:260px;text-wrap:pretty}
.sd-ex summary::-webkit-details-marker{display:none} .sd-ex[open] summary .chev{color:var(--nb-primary)}
.campo .caixa:has(textarea){height:auto;align-items:stretch;padding:0 14px} .campo textarea{font-family:inherit;color:inherit;border:0;outline:0;background:transparent;font-size:16px;padding:12px 0;resize:none;line-height:1.4;-webkit-appearance:none;appearance:none;border-radius:0}
.dc-fotos{display:grid;gap:10px} .dc-fotos.lado{grid-template-columns:1fr 1fr} .dc-fotos img{width:100%;height:auto;border-radius:12px;background:var(--nb-surface-2);display:block}
.linha .txt small.op,.pp-item .op{display:block;white-space:normal;margin-top:8px;line-height:1.45} .linha .txt small.op:first-of-type{margin-top:6px}
.op .n{display:inline;font-weight:700;color:var(--nb-mod-saude);margin-right:2px} .op.evitar{color:var(--nb-danger);margin-top:10px}
.pp-item .op{font-size:var(--nb-text-sm)}
.sd-grupo{border:1px solid var(--nb-border);border-radius:12px;padding:10px 12px} .sd-grupo summary{list-style:none;display:flex;align-items:center;gap:10px;cursor:pointer} .sd-grupo summary::-webkit-details-marker{display:none}
.sd-grupo summary b{font-weight:600} .sd-grupo summary small{flex:1;color:var(--nb-text-3);font-size:var(--nb-text-xs)} .sd-grupo summary .lucide{transition:transform var(--nb-dur)} .sd-grupo[open] summary .lucide{transform:rotate(180deg)}
.sd-grupo .campo>span:first-child{font-size:var(--nb-text-xs)}
.val .est{text-decoration:underline dotted;text-decoration-color:var(--nb-text-3);cursor:pointer}
.ex-thumb{width:56px;height:44px;border-radius:10px;background:var(--nb-surface-2) center/cover no-repeat;flex:none;position:relative;overflow:hidden}
.ex-thumb .play{position:absolute;right:4px;bottom:4px;width:16px;height:16px;border-radius:50%;background:var(--nb-mod-saude);display:block} .ex-thumb .play::after{content:"";position:absolute;left:6px;top:4px;border-style:solid;border-width:4px 0 4px 6px;border-color:transparent transparent transparent #fff}
.ex-midia video{width:100%;aspect-ratio:16/9;border-radius:12px;background:#000;display:block}
.ex-fotos{display:grid;grid-template-columns:1fr 1fr;gap:8px} .ex-fotos img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;background:var(--nb-surface-2)}
.ex-lista{margin:6px 0 0;padding-left:20px;color:var(--nb-text-2);font-size:var(--nb-text-sm);line-height:1.5} .ex-lista li{margin-bottom:4px}
.ex-sug{position:absolute;left:0;right:52px;top:100%;z-index:30;background:var(--nb-surface);border:1px solid var(--nb-border);border-radius:10px;box-shadow:var(--nb-shadow-raised);overflow:hidden} .ex-sug button{display:block;width:100%;text-align:left;padding:10px 12px;border-bottom:1px solid var(--nb-border);font-size:var(--nb-text-sm);color:var(--nb-text)} .ex-sug button small{color:var(--nb-text-3)} .ex-sug button:last-child{border-bottom:0}
.opcao{display:flex;flex-direction:column;gap:2px;text-align:left;padding:10px 12px;border-radius:12px;border:1.5px solid var(--nb-border);background:var(--nb-surface);color:var(--nb-text);font-size:var(--nb-text-sm);line-height:1.4}
.opcao b{color:var(--nb-mod-saude);font-size:var(--nb-text-xs);text-transform:uppercase;letter-spacing:.06em} .opcao.on{border-color:var(--nb-mod-saude);background:var(--nb-mod-saude-soft)}
.sd-chat{display:flex;flex-direction:column;gap:10px;padding-bottom:80px}
.bolha{max-width:88%;padding:10px 14px;border-radius:18px;font-size:var(--nb-text-base);line-height:1.45;word-wrap:break-word}
.bolha.eu{align-self:flex-end;background:var(--nb-primary);color:var(--nb-on-primary);border-bottom-right-radius:6px}
.bolha.ia{align-self:flex-start;background:var(--nb-surface);box-shadow:var(--nb-shadow-card);border-bottom-left-radius:6px}
[data-theme="dark"] .bolha.ia{box-shadow:none;border:1px solid var(--nb-border)}
.bolha.pensando{color:var(--nb-text-3);font-style:italic}
.plano-prop{margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--nb-mod-saude-soft);font-size:var(--nb-text-sm)}
.pp-item{padding:6px 0;border-bottom:1px solid rgba(0,0,0,.06)} .pp-item:last-of-type{border-bottom:0} .pp-item b{display:block;color:var(--nb-mod-saude)}
.sd-chat-form .caixa{flex:1;display:flex;align-items:center;min-width:0;height:46px;padding:0 16px;border-radius:23px;background:var(--nb-surface);border:1.5px solid var(--nb-border);transition:box-shadow var(--nb-dur)} .sd-chat-form .caixa:focus-within{border-color:var(--nb-primary);box-shadow:0 0 0 3px var(--nb-primary-soft)}
.sd-chat-form input{flex:1;min-width:0;width:100%;border:0;outline:0;background:transparent;font-size:16px;color:var(--nb-text)} .sd-chat-form input::placeholder{color:var(--nb-text-3)}
.sd-chat-form .ibtn{width:46px;height:46px}
.sd-chat-form{position:fixed;left:0;right:0;bottom:calc(var(--nb-tabbar-h) + env(safe-area-inset-bottom,0px));margin:0 auto;max-width:430px;display:flex;gap:8px;align-items:center;padding:8px var(--nb-screen-pad);background:color-mix(in srgb,var(--nb-bg) 92%,transparent);backdrop-filter:var(--nb-blur-bar);-webkit-backdrop-filter:var(--nb-blur-bar);z-index:9}
.progresso{height:6px;border-radius:3px;background:var(--nb-surface-2);overflow:hidden} .progresso i{display:block;height:100%;border-radius:3px;background:var(--nb-primary);transition:width var(--nb-dur-slow) var(--nb-ease)}
.stat .valor{display:flex;align-items:baseline;gap:6px;margin-top:6px} .stat .valor b{font-family:var(--nb-font-display);font-size:32px;font-weight:500;line-height:1.1;letter-spacing:-.01em}
.stat .delta{margin-left:auto;font-size:var(--nb-text-sm);font-weight:600;color:var(--nb-success)} .stat .delta.ruim{color:var(--nb-danger)}

/* ---- sheet (bottom sheet) ---- */
.sheet-fundo{position:fixed;inset:0;background:var(--nb-overlay);display:flex;align-items:flex-end;justify-content:center;z-index:20;animation:fade var(--nb-dur) var(--nb-ease)}
.sheet{width:100%;max-width:430px;background:var(--nb-surface);border-radius:var(--nb-radius-lg) var(--nb-radius-lg) 0 0;box-shadow:var(--nb-shadow-sheet);padding:8px var(--nb-screen-pad) calc(20px + env(safe-area-inset-bottom,0px));max-height:92dvh;overflow:auto;animation:sobe var(--nb-dur-slow) var(--nb-ease)}
.sheet .alca{width:40px;height:4px;border-radius:2px;background:var(--nb-border-strong);margin:0 auto 14px}
.sheet h3{font-size:var(--nb-text-lg);font-weight:600;margin-bottom:14px}
.sheet .corpo{display:flex;flex-direction:column;gap:14px}
.sheet .rodape{margin-top:20px;display:flex;gap:10px}
@keyframes sobe{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- entrada (perfis) ---- */
.perfis{padding:calc(60px + env(safe-area-inset-top,0px)) var(--nb-screen-pad) 40px;min-height:100dvh;display:flex;flex-direction:column;align-items:center;text-align:center}
.perfis .logo{width:56px;height:56px}
.perfis h1{font-family:var(--nb-font-display);font-size:32px;font-weight:500;line-height:1.15;margin-top:24px}
.perfis p{color:var(--nb-text-2);margin:6px 0 0}
.perfis .grade{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px;width:100%}
.perfil{display:flex;flex-direction:column;align-items:center;gap:12px;padding:22px 12px;border-radius:var(--nb-radius-md);background:var(--nb-surface);box-shadow:var(--nb-shadow-card);color:var(--nb-text);transition:transform var(--nb-dur-fast) var(--nb-ease)}
.perfil:active{transform:scale(.97)}
.perfil b{font-weight:600;font-size:var(--nb-text-md)} .perfil small{font-size:var(--nb-text-sm);color:var(--nb-text-2)}
[data-theme="dark"] .perfil{box-shadow:none;border:1px solid var(--nb-border)}
.toast{position:fixed;left:50%;bottom:calc(var(--nb-tabbar-h) + 20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--nb-ink-900);color:var(--nb-sand-50);padding:10px 16px;border-radius:var(--nb-radius-sm);font-size:var(--nb-text-sm);box-shadow:var(--nb-shadow-raised);z-index:50;max-width:calc(100% - 40px);text-align:center}
.toast.erro{background:var(--nb-danger)} .toast.ok{background:var(--nb-success)}
.mini-lista{display:flex;flex-direction:column} .norte{display:flex;align-items:center;gap:14px}
.norte .ic{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.16);display:grid;place-items:center;flex:none}
.norte .caps{color:inherit;opacity:.8} .norte b{display:block;font-size:var(--nb-text-md);font-weight:600;margin-top:2px} .norte small{display:block;font-size:var(--nb-text-sm);opacity:.85;margin-top:2px}

/* central de notificações */
.sino{position:relative} .sino-n{position:absolute;top:4px;right:4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--nb-danger,#dc2626);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;line-height:1}
.notif{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--nb-outline,rgba(0,0,0,.08));align-items:flex-start} .notif:last-child{border-bottom:0} .notif .pt{width:10px;height:10px;border-radius:50%;background:var(--nb-primary);flex:none;margin-top:6px} .notif.lida .pt{background:transparent;border:2px solid var(--nb-outline,rgba(0,0,0,.15))} .notif .tx{flex:1;min-width:0} .notif b{display:block;font-size:var(--nb-text-md,15px)} .notif.lida b{font-weight:500;color:var(--nb-text-2)} .notif small{display:block;color:var(--nb-text-2);white-space:pre-wrap} .notif .qd{font-size:var(--nb-text-xs,12px);color:var(--nb-text-3);margin-top:2px} .notif .acs{display:flex;gap:4px;flex:none}

.campo .caixa:has(.dc-limpar) input[type=date]{width:auto;flex:1;min-width:0} .dc-limpar{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:var(--nb-text-3);background:var(--nb-surface-2)} .dc-limpar .lucide{width:14px;height:14px} .campo input[type=date]:placeholder-shown + .dc-limpar, .campo input[type=date][value='']:not(:focus) + .dc-limpar{opacity:.5}

.avatar.m{width:40px;height:40px;font-size:15px}

/* ícone dentro do texto pequeno das linhas (link, olho): do tamanho da letra, alinhado à linha */
.linha .txt small .lucide,.linha .txt b .lucide{width:1em;height:1em;vertical-align:-0.15em;margin-right:1px}

/* botão de ação da seção com ícone (Família: + Adicionar) */
.secao button{display:inline-flex;align-items:center;gap:4px}.secao button .lucide{width:1em;height:1em}

/* puxar pra atualizar */
#nb-puxar{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 8px);transform:translate(-50%,-140%) scale(.9);display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--nb-surface);color:var(--nb-text-2);box-shadow:var(--nb-shadow-md, 0 6px 20px rgba(0,0,0,.12));font-size:var(--nb-text-sm);font-weight:600;z-index:1900;opacity:0;pointer-events:none;transition:transform .15s,opacity .15s}
#nb-puxar.ativo{opacity:1;transform:translate(-50%,calc(-120% + var(--p,0) * 130%)) scale(calc(.9 + var(--p,0) * .1))}
#nb-puxar .lucide{width:18px;height:18px;transition:transform .15s;transform:rotate(calc(var(--p,0) * 180deg))}
#nb-puxar.pronto{color:var(--nb-primary)}

/* módulos: chavinha no canto do cartão; desligado fica opaco */
.tile{position:relative} .tile .switch.pq{position:absolute;top:12px;right:12px;width:40px;height:24px} .tile .switch.pq::after{width:18px;height:18px;top:3px;left:3px} .tile .switch.pq.on::after{left:19px}
.tile.desligado{opacity:.55} .tile.desligado .switch.pq{opacity:1}

/* corpo da notificação respeita quebras de linha (resumo do dia, um tópico por linha) */
.notif .tx small{white-space:pre-line}

/* treino guiado: prévia do próximo exercício, discreta */
.gd-prox{display:flex;align-items:center;gap:12px;margin:14px auto 0;padding:10px 12px;border-radius:14px;background:var(--nb-surface-2);opacity:.85;max-width:420px}
.gd-prox-midia{width:72px;height:48px;border-radius:10px;overflow:hidden;background:#000;flex:none;display:grid;place-items:center}
.gd-prox-midia video,.gd-prox-midia img{width:100%;height:100%;object-fit:cover;display:block}
.gd-prox .txt{min-width:0;flex:1} .gd-prox .txt b{display:block;font-size:var(--nb-text-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .gd-prox .txt small{display:block;color:var(--nb-text-2);font-size:var(--nb-text-xs)} .gd-prox .txt small.caps{margin-bottom:2px}
/* editor de treino: cartões numerados (22/09) */
#tr-ex{counter-reset:ex} .sd-exrow{counter-increment:ex} .ex-num{width:26px;height:26px;border-radius:50%;background:var(--nb-primary-soft);color:var(--nb-primary-strong);display:inline-flex;align-items:center;justify-content:center;font-size:var(--nb-text-xs);font-weight:700;flex:none} .ex-num::before{content:counter(ex)}
/* treino guiado compacto: cabe numa tela sem rolar (22/09) */
.gd-fase{margin-top:0} .gd-cont{font-size:clamp(44px,8vh,64px)}
.gd-video,.gd-fotos{max-height:28vh} .gd-video{aspect-ratio:auto;height:28vh;object-fit:contain;background:var(--nb-surface)} .gd-fotos img{aspect-ratio:auto;height:28vh;object-fit:contain}
.gd-nome{font-size:var(--nb-text-lg);margin-top:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap}
.gd-meta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 4px}
.gd-edit{display:inline-flex;align-items:center;gap:3px;color:inherit;padding:2px 2px;border-radius:6px;font:inherit}
.gd-edit svg{width:13px;height:13px;opacity:.55} .gd-edit.rec b{color:var(--nb-success)} .gd-edit.rec svg:first-child{opacity:1;color:var(--nb-success)}
.gd-edit:active{background:var(--nb-surface-2)}
.gd-dots{margin-top:8px} .gd-como{text-align:center;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gd-prox{margin-top:10px;max-width:none;padding:8px;gap:14px}
.gd-prox-midia{width:34%;max-width:140px;height:auto;aspect-ratio:1;background:var(--nb-surface)}
.gd-prox .txt b{font-size:var(--nb-text-md);white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.gd-prox-det{font-size:var(--nb-text-sm)!important;margin-top:2px}
.gd-acoes{margin-top:12px} .gd-acoes.sec{margin-top:4px}