/* FitNutriPro UI v3: tokens e componentes (fn-*). Fonte: docs/redesign-2026-10/design-system. */
:root {
  --brand: #12854a;
  --brand-deep: #12653a;
  --brand-bright: #22a35c;
  --brand-soft: #e8f5ec;
  --brand-line: #cfe9d8;
  --on-brand: #ffffff;
  --bg-app: #f5f7f4;
  --surface: #ffffff;
  --surface-2: #f4f6f4;
  --line: #e3e8e4;
  --ink: #17251d;
  --ink-body: #3d4a43;
  --ink-muted: #5f6d65;
  --danger: #c8373c;
  --warning: #a15f00;
  --info: #2f6fdb;
  --danger-soft: #fdecec;
  --warning-soft: #fff4e0;
  --info-soft: #eaf1fd;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 24px;  /* design: 26px; 24px mantido para nao mexer nas telas atuais */
  --radius-pill: 999px;
  --shadow-xs: 0 1px 2px rgba(20,40,26,0.05);
  --shadow-md: 0 4px 16px rgba(20,40,26,0.08);
  --shadow-brand: 0 10px 26px rgba(18,101,58,0.22);
  --content-max: 680px;
  --reading-max: 640px;
  --tap-min: 44px;
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Tema do funil (escuro). Aplicar em qualquer elemento: <div data-fn-theme="night">. */
[data-fn-theme="night"] {
  --brand: #2bd47a;
  --brand-deep: #0f3d25;
  --brand-bright: #4be08f;
  --brand-soft: #12301f;
  --brand-line: #1d4a31;
  --on-brand: #04130b;
  --bg-app: #07110c;
  --surface: #0e1a13;
  --surface-2: #14231a;
  --line: #21352a;
  --ink: #eef5f0;
  --ink-body: #c6d3cb;
  --ink-muted: #8fa197;
  --danger: #ff6b6f;
  --warning: #f0a43a;
  --info: #6ea2ff;
  --danger-soft: #2e1414;
  --warning-soft: #2e2210;
  --info-soft: #121e33;
}

/* Compatibilidade com as variaveis antigas do _LayoutMobile (:root inline). :root:root vence a
   especificidade do bloco inline independentemente da ordem. --text-muted antigo (#8d9a92) reprovava contraste. */
:root:root {
  --primary: var(--brand);
  --bg-app: #f5f7f4;
  --text-muted: var(--ink-muted);
}

.fn-num{font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.fn-ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Button */
.fn-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap-min);padding:0 18px;border-radius:var(--radius-md);font:650 14px/1 var(--font-sans);border:1px solid transparent;cursor:pointer;transition:filter .15s,background .15s}
.fn-btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.fn-btn-primary{background:var(--brand);color:var(--on-brand);box-shadow:var(--shadow-brand)}
.fn-btn-primary:hover{filter:brightness(1.06)}
.fn-btn-secondary{background:var(--surface);color:var(--ink);border-color:var(--line)}
.fn-btn-ghost{background:transparent;color:var(--brand)}
.fn-btn-block{width:100%}
.fn-btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}

/* Card */
.fn-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);padding:var(--space-4)}
.fn-card-title{font:700 17px/22px var(--font-sans);color:var(--ink);margin:0}
.fn-card-sub{font:500 12px/17px var(--font-sans);color:var(--ink-muted);margin:4px 0 0}
.fn-card-hero{background:linear-gradient(160deg,var(--brand-deep),var(--brand) 55%,var(--brand-bright));color:var(--on-brand);border:0;box-shadow:var(--shadow-brand)}
.fn-card-hero .fn-card-title,.fn-card-hero .fn-card-sub{color:var(--on-brand)}
.fn-card-hero .fn-card-sub{opacity:.82}
.fn-card-done{background:var(--brand-soft);border-color:var(--brand-line)}
.fn-card-done .fn-card-title{color:var(--brand-deep)}
.fn-overline{font:700 10px/14px var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted)}
.fn-card-hero .fn-overline{color:var(--on-brand);opacity:.75}

/* Chip */
.fn-chip{display:inline-flex;align-items:center;gap:var(--space-1);height:30px;padding:0 12px;border-radius:var(--radius-pill);background:var(--surface);border:1px solid var(--line);font:600 12px/1 var(--font-sans);color:var(--ink-body)}
.fn-chip.is-on{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand-deep)}
.fn-chip .fn-ico{width:14px;height:14px}
.fn-badge{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--radius-pill);font:700 10px/1 var(--font-sans);letter-spacing:.04em;text-transform:uppercase}
.fn-badge-brand{background:var(--brand-soft);color:var(--brand-deep)}
.fn-badge-warning{background:var(--warning-soft);color:var(--warning)}
.fn-badge-danger{background:var(--danger-soft);color:var(--danger)}

/* StatTile */
.fn-stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:14px}
.fn-stat-value{font:750 26px/30px var(--font-sans);color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.fn-stat-value small{font-size:14px;font-weight:650;color:var(--ink-muted);margin-left:2px}
.fn-stat-label{font:500 12px/17px var(--font-sans);color:var(--ink-muted);margin-top:2px}
.fn-stat-delta{font:650 12px/1 var(--font-sans);color:var(--brand);margin-top:8px;display:inline-flex;gap:4px;align-items:center}
.fn-stat-delta.is-down{color:var(--danger)}

/* EmptyState */
.fn-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-2);padding:32px var(--space-4)}
.fn-empty-icon{width:56px;height:56px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;margin-bottom:var(--space-2)}
.fn-empty-icon .fn-ico{width:26px;height:26px}
.fn-empty h3{font:700 17px/22px var(--font-sans);color:var(--ink);margin:0}
.fn-empty p{font:400 14px/21px var(--font-sans);color:var(--ink-muted);margin:0 0 var(--space-2);max-width:300px}

/* CookieBanner */
.fn-cookie{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--space-4);display:flex;flex-direction:column;gap:12px;max-width:440px}
.fn-cookie p{font:400 13px/19px var(--font-sans);color:var(--ink-body);margin:0}
.fn-cookie a{color:var(--brand);font-weight:600}
.fn-cookie-actions{display:flex;gap:8px}
.fn-cookie-actions .fn-btn{flex:1;min-height:40px;box-shadow:none}

/* Page shell */
.fn-page{max-width:var(--content-max);margin:0 auto;padding:0 var(--space-4);display:flex;flex-direction:column;gap:var(--space-3)}

/* CookieBanner: dock fixo (o JS de cada superficie so alterna display) */
.fn-cookie-dock{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:99999}
.fn-cookie-dock .fn-cookie{margin:0 auto;font-family:var(--font-sans)}
.fn-cookie strong{display:block;font:700 14px/20px var(--font-sans);color:var(--ink)}
/* Acima da barra inferior flutuante (64px + 12px de margem) quando ela existe */
body:has(.menubar-area.footer-fixed) .fn-cookie-dock{bottom:calc(64px + 24px + env(safe-area-inset-bottom,0px))}

/* Cabecalho minimo das telas de autenticacao (_LayoutMobile, FnAuthChrome) */
.fn-authbar{display:flex;justify-content:center;padding:calc(18px + env(safe-area-inset-top,0px)) var(--space-4) 4px}
.fn-authbar-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:750 20px/1 var(--font-sans);letter-spacing:-.02em}
.fn-authbar-brand img{border-radius:10px}
.fn-authbar-pro{font-weight:400;opacity:.6}

/* ===========================================================================
   v3: tokens, utilitarios e shell do cliente (docs/redesign-2026-10/v3)
   Tokens e v3-* sao globais; o shell so vale com <body class="fn-v3"> (cliente
   logado, nao Admin/Professional/Academia), ligado em Views/Shared/_LayoutMobile.
   =========================================================================== */
:root {
  --v3-ground: #f2f4ef;
  --v3-surface: #fff;
  --v3-line: #dfe5df;
  --v3-ink: #0f1f16;
  --v3-ink-2: #3a4a40;
  --v3-muted: #5c6b62;
  --v3-forest: #0b2b1b;
  --v3-forest-2: #12442c;
  --v3-forest-3: #1d4a31;
  --v3-forest-line: #2a5a40;
  --v3-on-forest: #eef5f0;
  --v3-on-forest-2: #b9cbbf;
  --v3-on-forest-3: #9fb5a7;
  --v3-mint: #3ddc84;
  --v3-mint-ink: #04130b;
  --v3-mint-2: #7be3a9;
  --v3-brand: #12854a;
  --v3-brand-deep: #12653a;
  --v3-brand-soft: #e8f5ec;
  --v3-amber: #a15f00;
  --v3-amber-soft: #fff1d6;
  --v3-water: #2f6fdb;
  --v3-water-soft: #eaf1fd;
  --v3-display: "Bricolage Grotesque", "Geist", -apple-system, "Segoe UI", sans-serif;
  --v3-text: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.v3-display { font-family: var(--v3-display); font-weight: 800; letter-spacing: -0.03em; }
.v3-kicker { font-family: var(--v3-text); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--v3-muted); }
.v3-card { background: var(--v3-surface); border: 1px solid var(--v3-line); border-radius: 24px; padding: 18px; color: var(--v3-ink); }
.v3-card-forest { background: var(--v3-forest); border: 1px solid var(--v3-forest-3); border-radius: 24px; padding: 18px; color: var(--v3-on-forest); }
.v3-card-forest .v3-kicker { color: var(--v3-mint-2); }
.v3-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 16px; border: 1px solid transparent; font-family: var(--v3-text); font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; }
.v3-btn-primary { background: var(--v3-brand); color: #fff; }
.v3-btn-primary:hover { background: var(--v3-brand-deep); color: #fff; }
.v3-btn-mint { background: var(--v3-mint); color: var(--v3-mint-ink); }
.v3-btn-ghost { background: transparent; color: var(--v3-ink); border-color: var(--v3-line); }
.v3-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--v3-line); background: var(--v3-surface); color: var(--v3-ink-2); font-family: var(--v3-text); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.v3-chip.is-on, .v3-chip.ativa { background: var(--v3-forest); border-color: var(--v3-forest); color: var(--v3-mint); }
.v3-stat { display: flex; flex-direction: column; gap: 2px; }
.v3-stat > strong { font-family: var(--v3-display); font-weight: 800; letter-spacing: -0.03em; font-size: 28px; line-height: 1; color: var(--v3-ink); }
.v3-stat > span { font-size: 12px; color: var(--v3-muted); font-weight: 500; }

/* ---- Base do shell cliente ---- */
body.fn-v3 {
  font-family: var(--v3-text) !important;
  background: var(--v3-ground) !important;
  color: var(--v3-ink);
}

/* ---- Barra superior compacta (substitui o hero verde) ---- */
body.fn-v3 #appShellHeader {
  background: rgba(242,244,239,.94) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--v3-line) !important;
  box-shadow: none !important;
}
body.fn-v3 #appShellHeader .app-hero {
  background: transparent !important; box-shadow: none !important; border-radius: 0 !important;
  margin: 0 !important; padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px !important;
}
body.fn-v3 #appShellHeader .app-hero-inner { max-width: 1120px; }
body.fn-v3 #appShellHeader .app-hero-top { padding-top: 0; gap: 10px; }
body.fn-v3 #appShellHeader .app-hero-logo { width: 36px; height: 36px; border-radius: 11px; background: var(--v3-brand); padding: 3px; flex: none; }
body.fn-v3 #appShellHeader .app-hero-brand { flex: 1; min-width: 0; display: flex; flex-direction: column-reverse; gap: 0; }
body.fn-v3 #appShellHeader .app-hero-brand small { color: var(--v3-muted) !important; font-size: 12px; font-weight: 500; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.fn-v3 #appShellHeader .app-hero-brand strong { color: var(--v3-ink) !important; font-family: var(--v3-text); font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.fn-v3 #appShellHeader .app-hero-menu {
  width: 44px; height: 44px; flex: none; align-items: center; justify-content: center; gap: 4px; padding: 0;
  border-radius: 14px; border: 1px solid var(--v3-line); background: var(--v3-surface);
}
body.fn-v3 #appShellHeader .app-hero-menu span { width: 17px; height: 2px; background: var(--v3-ink); }

/* Saudacao e blocos de contexto do hero antigo: ficam no DOM (JS das telas le/escreve), sem aparecer */
body.fn-v3 #appShellHeader .app-hero-greeting-text,
body.fn-v3 #appShellHeader .app-hero-context-main,
body.fn-v3 #appShellHeader .welcome-insight-strip { display: none !important; }
body.fn-v3 #appShellHeader .app-hero-greeting { display: flex; margin: 10px 0 0; padding: 0; }
body.fn-v3 #appShellHeader .welcome-primary-action {
  background: var(--v3-brand) !important; color: #fff !important; min-height: 36px; padding: 0 14px;
  font-size: 13px; font-weight: 700; box-shadow: none;
}
body.fn-v3 .app-shell-header-home.is-condensed .app-hero-greeting,
body.fn-v3 .app-shell-header-home.is-condensed .app-hero-tabs { display: none !important; }

/* Abas do hero: viram fileira de chips rolavel (mesmas ancoras, botoes e classe .ativa) */
body.fn-v3 #appShellHeader .app-hero-tabs {
  display: flex; gap: 8px; margin: 10px 0 0; padding: 0 0 2px; overflow-x: auto; scrollbar-width: none; background: transparent; border: 0;
}
body.fn-v3 #appShellHeader .app-hero-tabs::-webkit-scrollbar { display: none; }
body.fn-v3 #appShellHeader .app-hero-tab {
  flex: none; min-height: 36px; padding: 0 14px; display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; border: 1px solid var(--v3-line); background: var(--v3-surface); box-shadow: none; cursor: pointer;
}
body.fn-v3 #appShellHeader .app-hero-tab strong { color: var(--v3-ink-2) !important; font-size: 13px; font-weight: 600; }
body.fn-v3 #appShellHeader .app-hero-tab span { display: none !important; }
body.fn-v3 #appShellHeader .app-hero-tab.ativa { background: var(--v3-forest); border-color: var(--v3-forest); }
body.fn-v3 #appShellHeader .app-hero-tab.ativa strong { color: var(--v3-mint) !important; }

/* ---- Barra inferior (mobile) ---- */
body.fn-v3 .menubar-area.footer-fixed {
  left: 16px !important; right: 16px !important; min-height: 68px !important; height: 68px;
  background: var(--v3-forest) !important; border: 0 !important; border-radius: 24px !important;
  box-shadow: 0 12px 30px rgba(11,43,27,.28) !important;
}
body.fn-v3 .menubar-area .toolbar-inner { height: 100%; padding: 0 8px !important; justify-content: space-around !important; }
body.fn-v3 .menubar-area .toolbar-inner .nav-link {
  width: 48px; height: 48px; border-radius: 16px !important; color: var(--v3-on-forest-3) !important; background: transparent !important;
}
body.fn-v3 .menubar-area .toolbar-inner .nav-link.active { background: var(--v3-forest-2) !important; color: var(--v3-mint) !important; }
body.fn-v3 .menubar-area .toolbar-inner .nav-link svg { stroke-width: 1.6; }

/* ---- Menu lateral: so existe no desktop; o rodape do usuario nunca aparece no mobile ---- */
body.fn-v3 .v3-side-foot { display: none; }

@media (min-width: 1024px) {
  body.fn-v3 .menubar-area.footer-fixed { display: none !important; }

  /* O offcanvas vira sidebar fixa: mesmos links, sem duplicar menu */
  body.fn-v3 #offcanvasLeft {
    visibility: visible !important; transform: none !important; transition: none !important;
    position: fixed !important; top: 0; bottom: 0; left: 0; z-index: 1030;
    width: 264px !important; display: flex !important; flex-direction: column;
    background: var(--v3-forest) !important; color: var(--v3-on-forest); box-shadow: none !important;
    padding: 24px 16px 20px;
  }
  body.fn-v3 #offcanvasLeft .offcanvas-header { padding: 0 8px 20px !important; border-bottom: 0 !important; }
  body.fn-v3 #offcanvasLeft .btn-close { display: none; }
  body.fn-v3 #offcanvasLeft .offcanvas-brand img { width: 36px !important; height: 36px !important; border: 0; border-radius: 11px !important; background: var(--v3-mint); }
  body.fn-v3 #offcanvasLeft .offcanvas-brand-copy strong { color: var(--v3-on-forest); font-family: var(--v3-display); font-size: 18px; font-weight: 700; }
  body.fn-v3 #offcanvasLeft .offcanvas-brand-copy small { color: var(--v3-on-forest-3); }
  body.fn-v3 #offcanvasLeft .offcanvas-body { padding: 0 !important; flex: 1 1 auto; overflow-y: auto; scrollbar-width: thin; }
  body.fn-v3 #offcanvasLeft .nav-link { min-height: 44px; margin: 2px 0 !important; padding: 0 12px; border-radius: 12px !important; color: var(--v3-on-forest-2) !important; background: transparent !important; font-size: 14px; font-weight: 600; }
  body.fn-v3 #offcanvasLeft .nav-link span:not(.dz-icon):not(.badge),
  body.fn-v3 #offcanvasLeft .nav-link small { color: inherit !important; }
  body.fn-v3 #offcanvasLeft .nav-link .dz-icon { background: transparent !important; color: inherit !important; }
  body.fn-v3 #offcanvasLeft .nav-link .dz-icon i,
  body.fn-v3 #offcanvasLeft .nav-link .dz-icon svg { color: inherit !important; stroke: currentColor; }
  body.fn-v3 #offcanvasLeft .nav-link:hover { background: var(--v3-forest-2) !important; }
  body.fn-v3 #offcanvasLeft .nav-link.active { background: var(--v3-forest-2) !important; color: var(--v3-mint) !important; }
  body.fn-v3 #offcanvasLeft .menu-divider { border-color: var(--v3-forest-3); background: var(--v3-forest-3); }
  body.fn-v3 #offcanvasLeft .sub-menu { padding-left: 14px; }
  body.fn-v3 #offcanvasLeft .dropdown-icon { margin-left: auto; color: var(--v3-on-forest-3) !important; }
  body.fn-v3 .v3-side-foot {
    display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 16px 8px 0;
    border-top: 1px solid var(--v3-forest-3); color: var(--v3-on-forest); text-decoration: none;
  }
  body.fn-v3 .v3-side-avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--v3-forest-3); display: grid; place-items: center; font-weight: 700; }
  body.fn-v3 .v3-side-who { display: flex; flex-direction: column; min-width: 0; }
  body.fn-v3 .v3-side-who strong { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.fn-v3 .v3-side-who small { font-size: 12px; color: var(--v3-on-forest-3); }

  /* Conteudo ao lado da sidebar */
  body.fn-v3 .dz-nav-floting { margin-left: 264px !important; width: calc(100% - 264px) !important; }
  body.fn-v3 #appShellHeader .app-hero { padding: 16px 40px 12px !important; }
  body.fn-v3 #appShellHeader .app-hero-menu { display: none; }
  body.fn-v3 #appShellHeader .app-hero-logo { display: none; }
  body.fn-v3 .dz-nav-floting > main.page-content { padding: 0 !important; }
  body.fn-v3 .dz-nav-floting > main.page-content > #page-content { max-width: 1120px !important; padding: 32px 40px !important; }
}

/* Ajustes: seletor de dia da view de treino substitui a fileira de chips; home mais compacta */
body.fn-v3:has(#v3DaySelector) #appShellHeader .app-hero-tabs { display: none; }
body.fn-v3 #appShellHeader .app-hero { padding-bottom: 8px !important; }
body.fn-v3 #appShellHeader .app-hero-greeting { margin-top: 8px; }
body.fn-v3 #appShellHeader .app-hero-tabs { margin-top: 8px; }
body.fn-v3 .dz-nav-floting > main.page-content { padding-top: 8px !important; }

/* Anamneses (dieta/treino): os chips do hero apontam para seções da tela de plano, inexistentes aqui. */
body.fn-v3:has(#mealPlanForm) #appShellHeader .app-hero-tabs,
body.fn-v3:has(#workoutForm) #appShellHeader .app-hero-tabs { display: none !important; }