/* =====================================================================
   AGE Fitness — base.css
   Tokens de design, tipografia e componentes comuns ao site e ao app.
   Os nomes antigos (--green, --line, --muted…) continuam valendo: os
   módulos usam esses nomes e passam a herdar a nova paleta.
   ===================================================================== */
:root{
  /* Marca */
  --green:#0f6a54; --green-600:#0b5947; --green2:#13795f; --green-dark:#0b2f27;
  --green-soft:#e6f2ed; --green-tint:#f4f8f6; --green-line:#bfdcd0; --success:#16804f;
  /* Superfícies e texto */
  --bg:#f5f7f6; --card:#ffffff; --surface-2:#f4f8f6;
  --ink:#16231f; --ink-2:#0e2a23; --muted:#5c6d68; --muted-2:#8a9994;
  --line:#e3e9e6; --line-2:#eef2f0; --line-strong:#cfd9d4;
  /* Estados */
  --danger:#b42318; --danger-ink:#7a1d12; --danger-bg:#fdeeec; --danger-line:#f2c6bf;
  --warn:#a35a00; --warn-ink:#6b3d00; --warn-bg:#fdf3e3; --warn-line:#f0d6a8;
  --info:#2160a8; --info-bg:#eaf2fb; --info-line:#c3d8f0;
  --violet:#6d4bb5; --violet-bg:#f2edfb; --violet-line:#d8cbf0;
  --gold:#b8860b; --gold-soft:#fbf3dc; --accent:#d4680f;
  --red:var(--danger); --mint:var(--green-soft); --coral:var(--gold);
  /* Forma */
  --radius-sm:8px; --radius:12px; --radius-lg:16px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(16,24,22,.06);
  --shadow:0 1px 2px rgba(16,24,22,.05),0 8px 20px -12px rgba(16,24,22,.16);
  --shadow-lg:0 18px 40px -16px rgba(16,24,22,.28);
  --ring:0 0 0 3px rgba(15,106,84,.22);
  /* Tipografia */
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --fs-xs:12px; --fs-sm:13px; --fs:15px; --fs-lg:17px;
  /* Layout */
  --topbar-h:60px; --max:1120px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--fs)/1.55 var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
button,input,select,textarea{font:inherit;color:inherit}
img,svg,video{max-width:100%}
img{height:auto}
a{color:var(--green);text-underline-offset:2px}
a:hover{color:var(--green-600)}
h1,h2,h3,h4{color:var(--ink-2);line-height:1.2;letter-spacing:-.01em;font-weight:700}
h1{font-size:clamp(22px,2.6vw,28px)}
b,strong{font-weight:650}
small{font-size:var(--fs-sm)}
hr{border:0;border-top:1px solid var(--line);margin:20px 0}
::selection{background:#cfe8de}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}
input,select,textarea{accent-color:var(--green)}
input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,select:focus,textarea:focus{outline:none;border-color:var(--green)!important;box-shadow:var(--ring)}
input::placeholder,textarea::placeholder{color:var(--muted-2)}
table{border-collapse:collapse}
details>summary{cursor:pointer}
[hidden]{display:none!important}

/* Números alinhados em painéis e tabelas */
.kpi b,.metrics b,.summary b,.stat b,table td,.ui-total b{font-variant-numeric:tabular-nums}

/* Ícones (SVG da biblioteca Lucide, trocados no lugar dos emojis) */
.ic{display:inline-block;width:1.1em;height:1.1em;vertical-align:-.18em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
h1 .ic,h2 .ic,h3 .ic{width:.95em;height:.95em;vertical-align:-.1em;color:var(--green)}
.food-title>span .ic,.food-card .ic{color:var(--green)}

/* Botões de uso geral */
.btn,.bt,.ui-btn,.sp-btn,.form-grid button,.auth-card button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:9px 16px;
  border:1px solid var(--green);border-radius:var(--radius-sm);background:var(--green);color:#fff;
  font:600 14px/1.2 var(--font);letter-spacing:0;text-decoration:none;cursor:pointer;
  transition:background-color .15s,border-color .15s,box-shadow .15s,color .15s}
.btn:hover,.bt:hover,.ui-btn:hover,.sp-btn:hover,.form-grid button:hover,.auth-card button:hover{background:var(--green-600);border-color:var(--green-600);color:#fff}
.btn.l,.bt.l,.btn.ghost,.btn-outline{background:var(--card);color:var(--green);border-color:var(--line-strong)}
.btn.l:hover,.bt.l:hover,.btn.ghost:hover,.btn-outline:hover{background:var(--green-tint);color:var(--green-600);border-color:var(--green-line)}
.btn.r,.bt.r,.sp-btn.r{background:var(--card);color:var(--danger);border-color:var(--danger-line)}
.btn.r:hover,.bt.r:hover,.sp-btn.r:hover{background:var(--danger-bg);color:var(--danger)}
.btn.s,.bt.s{min-height:32px;padding:5px 10px;font-size:12.5px}
button:disabled,.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed}

/* Cartões e blocos */
.card,.ui-card,.sk,.sp-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}

/* Avisos */
.alert,.flash{padding:11px 14px;border-radius:var(--radius-sm);margin:0 0 14px;font-size:14px;font-weight:500;border:1px solid var(--green-line);background:var(--green-soft);color:var(--green-dark)}
.alert.bad,.flash.bad,.alert.error{background:var(--danger-bg);border-color:var(--danger-line);color:var(--danger-ink)}
.alert.warn,.flash.warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn-ink)}
.alert.ok,.flash.ok{background:var(--green-soft);border-color:var(--green-line);color:var(--green-dark)}

/* Etiquetas */
.tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--radius-pill);font-size:11.5px;font-weight:600;background:var(--line-2);color:var(--muted);line-height:1.6}
.tag.ok{background:var(--green-soft);color:var(--green)}
.tag.warn{background:var(--warn-bg);color:var(--warn)}
.tag.bad{background:var(--danger-bg);color:var(--danger)}

.muted,.mut,.note,.ui-muted{color:var(--muted)}

/* Barra de rolagem discreta */
*{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}

/* Tela de entrada (site e instalação) */
body.auth{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:24px 16px;background:radial-gradient(1200px 600px at 10% -10%,#e2f1ea 0,transparent 60%),var(--bg)}
.auth-card{width:min(420px,100%);background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px 28px;box-shadow:var(--shadow-lg)}
.auth-card .brand{width:48px;height:48px;border-radius:12px;background:var(--green);color:#fff;display:grid;place-items:center;font-size:16px;font-weight:700;letter-spacing:.02em}
.auth-card h1{margin:16px 0 4px;font-size:24px}
.auth-card>p{color:var(--muted);margin:0 0 20px}
.auth-card small{display:block;color:var(--muted);margin-top:14px}
.auth-card hr{border:0;border-top:1px solid var(--line);width:100%}
.form-grid{display:grid;gap:12px}
.form-grid label{font-weight:600;font-size:13px;display:grid;gap:6px;color:var(--ink)}
.form-grid input,.form-grid select,.form-grid textarea{width:100%;min-height:44px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--card);padding:10px 12px;color:var(--ink)}
.form-grid button,.auth-card button{width:100%;min-height:46px;font-size:15px}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
@media print{body{background:#fff}.topbar,.appnav,.agenav,.noprint{display:none!important}}
fieldset{border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin:14px 0}
legend{padding:0 6px;font-weight:600;color:var(--ink-2)}
age-ic{display:inline}
.avatar.has-photo,.bigavatar.has-photo{padding:0;overflow:hidden;background:var(--line-2)}
.avatar.has-photo img,.bigavatar.has-photo img{width:100%;height:100%;object-fit:cover;display:block}