/* Saúde Leve · sistema de design Casa Leve — areia / terracota / oliva
   Tokens copiados do app-lar-web/styles.css (o design system vive copiado
   em cada app, como o erp-auth.js). Semântica de cor deste app:
   oliva = dentro da meta · terracota = passou · âmbar = a IA não tem certeza */
:root{
  --sand:#EFE6D6; --sand-deep:#E6D9C4; --card:#FBF6EC; --card-2:#F4EADA;
  --terra:#B85C41; --terra-deep:#9A4A33; --terra-soft:#E8CBB9;
  --oliva:#6B6F43; --oliva-soft:#D9DBBE;
  --ink:#3B322A; --muted:#8C8172; --line:#E0D3BE;
  --shell:#DCCDB4; --good:#6B6F43; --warn:#C08A2E; --crit:#B0503C;
  --agua:#5B7C8D; --agua-soft:#CBDCE4;
  --shadow:0 18px 44px -22px rgba(59,50,42,.55);
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --sans:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --sand:#191511; --sand-deep:#221C16; --card:#2C2620; --card-2:#332B23;
  --terra:#D57D5F; --terra-deep:#B85C41; --terra-soft:#4A3125;
  --oliva:#9CA268; --oliva-soft:#3A3B27;
  --ink:#EDE3D3; --muted:#A99C89; --line:#3B322A;
  --shell:#0F0C09; --good:#9CA268; --warn:#D6A44C; --crit:#E08063;
  --agua:#8FB3C4; --agua-soft:#2B3A42;
  --shadow:0 20px 50px -20px rgba(0,0,0,.7);}}
:root[data-theme="dark"]{
  --sand:#191511; --sand-deep:#221C16; --card:#2C2620; --card-2:#332B23;
  --terra:#D57D5F; --terra-deep:#B85C41; --terra-soft:#4A3125;
  --oliva:#9CA268; --oliva-soft:#3A3B27;
  --ink:#EDE3D3; --muted:#A99C89; --line:#3B322A;
  --shell:#0F0C09; --good:#9CA268; --warn:#D6A44C; --crit:#E08063;
  --agua:#8FB3C4; --agua-soft:#2B3A42;
  --shadow:0 20px 50px -20px rgba(0,0,0,.7);}
:root[data-theme="light"]{
  --sand:#EFE6D6; --sand-deep:#E6D9C4; --card:#FBF6EC; --card-2:#F4EADA;
  --terra:#B85C41; --terra-deep:#9A4A33; --terra-soft:#E8CBB9;
  --oliva:#6B6F43; --oliva-soft:#D9DBBE;
  --ink:#3B322A; --muted:#8C8172; --line:#E0D3BE;
  --shell:#DCCDB4; --good:#6B6F43; --warn:#C08A2E; --crit:#B0503C;
  --agua:#5B7C8D; --agua-soft:#CBDCE4;
  --shadow:0 18px 44px -22px rgba(59,50,42,.55);}

*{box-sizing:border-box}
html,body{height:100%}
/* o atributo hidden precisa vencer o display:flex da .nav — sem isto a
   barra de abas continua na tela de login, oferecendo o que ainda não dá */
[hidden]{display:none!important}
body{margin:0;font-family:var(--sans);color:var(--ink);
  background:radial-gradient(120% 80% at 15% 0%, var(--sand) 0%, var(--sand-deep) 75%) fixed;
  -webkit-font-smoothing:antialiased;overscroll-behavior-y:none}
button,input,select,textarea{font-family:var(--sans)}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--terra);outline-offset:2px;border-radius:6px}

.app{max-width:480px;margin:0 auto;min-height:100dvh;position:relative;
  display:flex;flex-direction:column;background:var(--sand)}
@media(min-width:520px){.app{min-height:auto;height:100dvh;max-height:880px;
  margin-top:max(0px,calc((100dvh - 880px)/2));border-radius:34px;box-shadow:var(--shadow);overflow:hidden}}

.topbar{display:flex;align-items:center;gap:10px;padding:16px 20px 8px}
.topbar .crest{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,var(--oliva),#4E5232);color:#FBF6EC;
  font-family:var(--serif);font-size:17px}
.topbar .tt{font-family:var(--serif);font-size:17px;line-height:1.1}
.topbar .ts{font-size:11.5px;color:var(--muted)}
.topbar .sp{margin-left:auto;display:flex;gap:8px}
.iconbtn{width:36px;height:36px;border-radius:11px;border:1px solid var(--line);background:var(--card);
  color:var(--ink);display:grid;place-items:center;font-size:15px}

/* 168px embaixo: 84 da nav + o FAB, que flutua por cima. Sem essa folga o
   ultimo item do dia fica escondido atras do botao. */
.scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:6px 18px 168px;scrollbar-width:none}
.scroll::-webkit-scrollbar{display:none}
.view{animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.sect{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700;
  margin:24px 4px 12px;display:flex;align-items:center;justify-content:space-between}
.sect .link{color:var(--terra);font-weight:700;letter-spacing:.02em;text-transform:none;
  font-size:12px;background:none;border:none}

/* ---- o anel: quanto ainda cabe hoje ------------------------------- */
.anel{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:20px 18px 16px;
  display:flex;flex-direction:column;align-items:center}
.anel svg{width:190px;height:190px;transform:rotate(-90deg)}
.anel .trilho{fill:none;stroke:var(--sand-deep);stroke-width:14}
.anel .arco{fill:none;stroke:var(--oliva);stroke-width:14;stroke-linecap:round;
  transition:stroke-dashoffset .5s ease, stroke .3s}
.anel.passou .arco{stroke:var(--terra)}
/* o miolo fica DENTRO do anel: só o número e o rótulo, que cabem no vão.
   A linha de contexto foi para fora — dentro, ela cruzava o traço do anel
   e ficava ilegível. */
.anel .miolo{margin-top:-116px;margin-bottom:56px;text-align:center;pointer-events:none;
  max-width:118px}
.anel .num{font-size:44px;line-height:1;font-weight:300;letter-spacing:-.02em}
.anel .rot{font-family:var(--serif);font-size:13.5px;color:var(--muted);margin-top:4px;line-height:1.25}
.anel .conta{font-size:12px;color:var(--muted);text-align:center;margin-top:2px}

/* ---- macros -------------------------------------------------------- */
.macros{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px;width:100%}
.macro .mtopo{display:flex;justify-content:space-between;font-size:11.5px;margin-bottom:5px}
.macro .mnome{color:var(--muted);font-weight:600}
.macro .mval{font-variant-numeric:tabular-nums}
.barra{height:6px;border-radius:4px;background:var(--sand-deep);overflow:hidden}
.barra i{display:block;height:100%;border-radius:4px;background:var(--oliva);transition:width .4s ease}
.barra.cheia i{background:var(--terra)}

/* ---- água ---------------------------------------------------------- */
.agua{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px 16px;margin-top:12px}
.agua .atopo{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.agua .aval{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.copos{display:flex;gap:7px;flex-wrap:wrap}
.copo{width:26px;height:32px;border-radius:4px 4px 9px 9px;border:1.5px solid var(--agua);
  background:transparent;padding:0;transition:background .2s}
.copo.on{background:var(--agua)}

/* ---- refeições ----------------------------------------------------- */
.ref{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:13px 15px;margin-bottom:9px}
.ref.vazia{background:transparent;border-style:dashed;opacity:.65}
.ref .rtopo{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.ref .rnome{font-family:var(--serif);font-size:15px}
.ref .rkcal{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;flex:none}
.ref ul{list-style:none;margin:9px 0 0;padding:0}
.ref li{display:flex;justify-content:space-between;gap:10px;padding:5px 0;font-size:13px;
  border-top:1px dashed var(--line)}
.ref li .g{color:var(--muted);font-size:11.5px}
.ref li.duvida{border-left:2px solid var(--warn);padding-left:8px;margin-left:-10px}
.ref .lixo{border:none;background:none;color:var(--muted);font-size:15px;padding:0 2px;opacity:.55}
.ref .lixo:hover{opacity:1;color:var(--crit)}

.linha-mov{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);
  padding:9px 4px 0}
.linha-mov b{color:var(--oliva)}

/* ---- nav e FAB ----------------------------------------------------- */
.nav{position:absolute;bottom:0;left:0;right:0;height:84px;
  background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);display:flex;justify-content:space-around;
  align-items:flex-start;padding-top:10px;z-index:30}
.nav button{background:none;border:none;display:flex;flex-direction:column;align-items:center;gap:4px;
  color:var(--muted);font-size:10.5px;font-weight:600;padding:4px 12px;border-radius:12px}
.nav button .ic{font-size:19px;line-height:1}
.nav button.on{color:var(--terra)}
.fab{position:absolute;right:18px;bottom:98px;width:56px;height:56px;border-radius:50%;border:none;z-index:40;
  background:radial-gradient(circle at 35% 30%,var(--terra),var(--terra-deep));color:#FBF6EC;
  font-size:27px;line-height:1;box-shadow:0 14px 30px -14px var(--terra-deep)}
.fab:active{transform:scale(.94)}

/* ---- sheet, campos, chips ------------------------------------------ */
.sheet-bg{position:fixed;inset:0;background:rgba(30,24,18,.45);opacity:0;pointer-events:none;
  transition:.25s;z-index:60}
.sheet-bg.show{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;max-width:480px;margin:0 auto;background:var(--card);
  border-radius:26px 26px 0 0;padding:20px 20px calc(20px + env(safe-area-inset-bottom));
  transform:translateY(102%);transition:transform .28s cubic-bezier(.3,.9,.3,1);z-index:70;
  max-height:88dvh;overflow-y:auto}
.sheet.show{transform:translateY(0)}
.sheet h3{font-family:var(--serif);font-weight:400;font-size:19px;margin:0 0 4px}
.sheet .hint{font-size:12px;color:var(--muted);margin:0 0 16px;line-height:1.45}
.field{margin-bottom:13px}
.field label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);background:var(--sand);
  color:var(--ink);border-radius:12px;padding:12px 13px;font-size:15px}
.field textarea{resize:vertical;min-height:74px;line-height:1.45}
.dupla{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips button{border:1px solid var(--line);background:var(--sand);color:var(--ink);border-radius:20px;
  padding:8px 13px;font-size:12.5px;font-weight:600}
.chips button.sel{background:var(--terra);border-color:var(--terra);color:#FBF6EC}
.primary{width:100%;background:var(--terra);color:#FBF6EC;border:none;border-radius:14px;padding:14px;
  font-size:15px;font-weight:700;margin-top:6px}
.primary:disabled{opacity:.55}
.ghost{width:100%;background:none;border:none;color:var(--muted);padding:12px;font-size:13px;font-weight:600}

/* rascunho da IA */
.rascunho{margin:4px 0 12px}
.ritem{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:8px;background:var(--sand)}
.ritem.duvida{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 8%,var(--sand))}
.ritem .rlinha{display:flex;align-items:center;gap:9px}
.ritem .rnm{flex:1;font-size:14px}
.ritem input{width:74px;border:1px solid var(--line);background:var(--card);color:var(--ink);
  border-radius:9px;padding:8px;font-size:14px;text-align:right}
.ritem .un{font-size:12px;color:var(--muted)}
.ritem .obs{font-size:11.5px;color:var(--warn);margin-top:6px;line-height:1.4}
.ritem .fora{border:none;background:none;color:var(--muted);font-size:16px;padding:0 2px}

.aviso{background:color-mix(in srgb,var(--warn) 14%,var(--card));border:1px solid var(--warn);
  border-radius:12px;padding:11px 13px;font-size:12.5px;line-height:1.5;margin:10px 0}
.vazio{text-align:center;color:var(--muted);font-family:var(--serif);font-size:14px;
  padding:34px 20px;line-height:1.6}
.toast{position:fixed;left:50%;bottom:104px;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:var(--sand);padding:11px 18px;border-radius:22px;font-size:13px;
  opacity:0;pointer-events:none;transition:.25s;z-index:90;max-width:88%;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- eu / metas ---------------------------------------------------- */
.cartao{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:15px 16px;margin-bottom:10px}
.conta-linha{display:flex;justify-content:space-between;font-size:13.5px;padding:7px 0;
  border-bottom:1px dashed var(--line)}
.conta-linha:last-child{border:none}
.conta-linha b{font-variant-numeric:tabular-nums}
.conta-linha.total{font-family:var(--serif);font-size:15px;padding-top:11px}
.fonte{font-size:11px;color:var(--muted);line-height:1.55;margin-top:10px}
.fonte b{color:var(--ink);font-weight:600}