/* ==========================================================================
   LEVIA — design system compartilhado
   Tokens e componentes extraidos da home publica (site/index.html) e
   estendidos com os componentes de aplicacao (painel, registro, diario).
   Fonte unica de verdade visual: alterou aqui, mudou em todas as telas.
   ========================================================================== */

:root{
  --bg:#FFFFFF;
  --bg-alt:#F4F6F7;
  --ink:#12181B;
  --ink-soft:#5B6670;
  --primary:#0E2E3A;
  --primary-light:#154A5C;
  --accent:#147D6F;
  --accent-soft:#E8F3F1;
  --line:#E2E6E8;
  --max:1180px;

  /* Estados — usados so em feedback de registro e sinais de alerta.
     Nunca em avaliacao de dose. */
  --warn:#8A5A0B;
  --warn-soft:#FDF4E3;
  --warn-line:#EAD3A2;
  --danger:#8C2F2F;
  --danger-soft:#FBEEEE;
  --danger-line:#E5C2C2;
}

*{ box-sizing:border-box; margin:0; padding:0; }
/* Sem isto, classes com display (grid-side, stack, field-row...) anulam o atributo hidden
   e todas as abas aparecem ao mesmo tempo. */
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg); color:var(--ink);
  font-family:'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size:15.5px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:'Public Sans', sans-serif; font-weight:700; color:var(--primary); letter-spacing:-0.01em; }
p{ color:var(--ink-soft); max-width:58ch; }
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:var(--max); margin:0 auto; padding:0 32px; }

button, .btn{ font-family:'Public Sans', sans-serif; font-weight:600; font-size:14.5px; border:none; cursor:pointer; border-radius:2px; }
.btn-primary{ background:var(--accent); color:#fff; padding:13px 24px; display:inline-block; transition:background .2s ease; }
.btn-primary:hover{ background:#106256; }
.btn-primary:disabled{ background:#9FBDB8; cursor:not-allowed; }
.btn-ghost{ background:transparent; color:var(--primary); border:1px solid var(--line); padding:12px 23px; display:inline-block; transition:border-color .2s ease; }
.btn-ghost:hover{ border-color:var(--primary); }
.btn-sm{ padding:8px 14px; font-size:13px; }
.btn-link{ background:none; border:none; color:var(--accent); font-weight:600; font-size:13px; cursor:pointer; padding:0; }
.btn-link.danger{ color:var(--danger); }

/* ---------- cabecalho / navegacao ---------- */
header{ position:sticky; top:0; z-index:50; border-bottom:1px solid var(--line); background:rgba(255,255,255,0.97); backdrop-filter:blur(6px); }
nav.wrap{ display:flex; align-items:center; justify-content:space-between; height:68px; gap:16px; }
.logo{ display:flex; align-items:center; gap:9px; font-weight:800; font-size:16.5px; color:var(--primary); flex-shrink:0; }
.logo .mark{ width:26px; height:26px; background:var(--primary); border-radius:5px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; font-weight:800; }
.nav-links{ display:flex; gap:24px; font-size:14px; font-weight:600; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; flex:1 1 auto; min-width:0; }
.nav-links::-webkit-scrollbar{ display:none; }
.nav-links a{ color:var(--ink-soft); padding:4px 0; border-bottom:2px solid transparent; }
.nav-links a:hover{ color:var(--primary); }
.nav-links a.active{ color:var(--primary); border-bottom-color:var(--accent); }

/* ---------- estrutura de pagina do app ---------- */
.app-head{ background:var(--bg-alt); border-bottom:1px solid var(--line); padding:34px 0 30px; }
.app-head .eyebrow{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; color:var(--accent); background:var(--accent-soft); padding:6px 12px; border-radius:3px; margin-bottom:14px; }
.app-head h1{ font-size:clamp(24px, 2.8vw, 31px); line-height:1.2; margin-bottom:10px; }
.app-head p{ font-size:15px; }
.app-body{ padding:38px 0 72px; }

.section-head{ margin-bottom:22px; }
.section-head .tag{ font-size:12.5px; font-weight:700; color:var(--accent); margin-bottom:8px; }
.section-head h2{ font-size:21px; margin-bottom:6px; }
.section-head p{ font-size:14px; }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:start; }
.grid-side{ display:grid; grid-template-columns:1.35fr 1fr; gap:24px; align-items:start; }
.stack{ display:flex; flex-direction:column; gap:24px; }
.row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.row-end{ justify-content:flex-end; }

/* ---------- cartoes ---------- */
.card{ border:1px solid var(--line); border-radius:6px; overflow:hidden; background:#fff; }
.card-head{ background:var(--primary); color:#fff; padding:15px 22px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.card-head h3{ color:#fff; font-size:15.5px; }
.card-head .badge{ font-size:11px; background:var(--accent); padding:3px 9px; border-radius:3px; font-weight:700; color:#fff; }
.card-head .badge.quiet{ background:rgba(255,255,255,0.14); color:#CFE0DD; }
.card-body{ padding:24px 22px; overflow-x:auto; }
.card-body.tight{ padding:16px 22px; }
.card-foot{ border-top:1px solid var(--line); padding:14px 22px; background:var(--bg-alt); display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }

/* ---------- metricas ---------- */
.metric-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.metric{ background:var(--bg-alt); border:1px solid var(--line); border-radius:5px; padding:16px 18px; }
.metric .l{ font-size:11.5px; font-weight:700; color:var(--ink-soft); margin-bottom:5px; text-transform:uppercase; letter-spacing:.03em; }
.metric .v{ font-size:26px; font-weight:800; color:var(--primary); line-height:1.1; }
.metric .v span{ font-size:13px; font-weight:600; color:var(--ink-soft); }
.metric .s{ font-size:12.5px; color:var(--ink-soft); margin-top:5px; }
.metric.is-primary{ background:var(--primary); border-color:var(--primary); }
.metric.is-primary .l{ color:#8FB0AC; }
.metric.is-primary .v{ color:#fff; }
.metric.is-primary .v span{ color:#AFC7C3; }
.metric.is-primary .s{ color:#B9CDCA; }

/* ---------- formulario ---------- */
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:12.5px; font-weight:700; color:var(--ink); margin-bottom:6px; }
.field .hint{ display:block; font-size:12px; font-weight:400; color:var(--ink-soft); margin-top:-2px; margin-bottom:6px; max-width:none; }
.field input, .field select, .field textarea{
  width:100%; padding:10px 11px; border:1px solid var(--line); border-radius:3px;
  background:var(--bg-alt); font-family:'Public Sans', sans-serif; font-size:14px; color:var(--ink);
}
.field textarea{ min-height:84px; resize:vertical; line-height:1.5; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field-row-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }

/* Escala 0-3 / 1-5 em botoes — evita slider, impreciso no toque */
.scale{ display:flex; gap:6px; flex-wrap:wrap; }
.scale button{
  flex:1 1 0; min-width:44px; padding:9px 4px; background:var(--bg-alt);
  border:1px solid var(--line); border-radius:3px; color:var(--ink-soft);
  font-size:13px; font-weight:700; transition:all .15s ease;
}
.scale button:hover{ border-color:var(--accent); color:var(--primary); }
.scale button[aria-pressed="true"]{ background:var(--primary); border-color:var(--primary); color:#fff; }
.scale-legend{ display:flex; justify-content:space-between; font-size:11.5px; color:var(--ink-soft); margin-top:5px; }

.check-list{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:5px; overflow:hidden; }
.check-item{ background:#fff; padding:12px 14px; display:flex; align-items:flex-start; gap:11px; cursor:pointer; }
.check-item:hover{ background:var(--bg-alt); }
.check-item input{ margin-top:3px; width:16px; height:16px; accent-color:var(--accent); flex-shrink:0; }
.check-item .t{ display:block; font-size:14px; font-weight:600; color:var(--ink); line-height:1.35; }
.check-item .d{ display:block; font-size:12.5px; color:var(--ink-soft); margin-top:2px; line-height:1.4; }
.check-item.is-alert input{ accent-color:var(--danger); }

/* ---------- linhas de efeito (diario) ---------- */
.efeito-list{ border:1px solid var(--line); border-radius:5px; overflow:hidden; }
.efeito-row{ display:grid; grid-template-columns:1fr 176px; gap:16px; align-items:center; padding:11px 14px; border-bottom:1px solid var(--line); background:#fff; }
.efeito-row:last-child{ border-bottom:none; }
.efeito-row:nth-child(even){ background:#FCFDFD; }
.efeito-nome strong{ display:block; font-size:13.5px; font-weight:600; color:var(--ink); }
.efeito-nome span{ display:block; font-size:12px; color:var(--ink-soft); margin-top:1px; }
.efeito-row .scale button{ min-width:0; padding:7px 2px; font-size:12px; }

/* ---------- linhas de padrao (resumo semanal) ---------- */
.pad-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); }
.pad-row:last-child{ border-bottom:none; }
.pad-nome{ font-size:13.5px; font-weight:600; color:var(--ink); }

/* ---------- avisos ---------- */
.aviso-box{ border:1px solid var(--line); border-left:4px solid var(--primary); background:var(--bg-alt); border-radius:4px; padding:20px 24px; display:flex; gap:16px; }
.aviso-box .ic{ font-size:19px; color:var(--primary); flex-shrink:0; line-height:1.3; }
.aviso-box p{ font-size:13.5px; max-width:none; margin:0; }
.aviso-box p + p{ margin-top:8px; }
.aviso-box strong{ color:var(--ink); }
.aviso-box.is-danger{ border-left-color:var(--danger); background:var(--danger-soft); border-color:var(--danger-line); }
.aviso-box.is-danger .ic{ color:var(--danger); }
.aviso-box.is-danger strong{ color:var(--danger); }
.aviso-box.is-warn{ border-left-color:var(--warn); background:var(--warn-soft); border-color:var(--warn-line); }
.aviso-box.is-warn .ic{ color:var(--warn); }

/* ---------- listas de registro ---------- */
.log-list{ border:1px solid var(--line); border-radius:6px; overflow:hidden; background:#fff; }
.log-item{ display:grid; grid-template-columns:92px 1fr auto; gap:18px; align-items:center; padding:15px 20px; border-bottom:1px solid var(--line); }
.log-item:last-child{ border-bottom:none; }
.log-item .when{ font-size:12.5px; font-weight:700; color:var(--primary); line-height:1.3; }
.log-item .when span{ display:block; font-weight:400; color:var(--ink-soft); font-size:11.5px; }
.log-item .what{ font-size:14px; color:var(--ink); }
.log-item .what .sub{ font-size:12.5px; color:var(--ink-soft); margin-top:3px; }
.log-item .acts{ display:flex; gap:14px; }

.chip{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; padding:3px 9px; border-radius:3px; background:var(--bg-alt); border:1px solid var(--line); color:var(--ink-soft); }
.chip.lvl-1{ background:#F2F6F5; color:var(--ink-soft); }
.chip.lvl-2{ background:var(--warn-soft); border-color:var(--warn-line); color:var(--warn); }
.chip.lvl-3{ background:var(--danger-soft); border-color:var(--danger-line); color:var(--danger); }
.chip-row{ display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }

/* ---------- tabelas (relatorio) ---------- */
.tabela{ width:100%; border-collapse:collapse; font-size:13.5px; }
.tabela th, .tabela td{ text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
.tabela thead th{ background:var(--bg-alt); font-size:11.5px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.03em; }
.tabela tbody th{ font-size:13px; font-weight:700; color:var(--ink-soft); background:var(--bg-alt); }
.tabela td{ color:var(--ink); }
.tabela tr:last-child th, .tabela tr:last-child td{ border-bottom:none; }
.tabela .td-sub{ display:block; font-size:11.5px; color:var(--ink-soft); font-weight:400; margin-top:1px; }
.tabela .tr-obs td{ font-size:12.5px; color:var(--ink-soft); padding-top:0; border-bottom:1px solid var(--line); }
.tabela-scroll{ overflow-x:auto; }

.obs-item{ display:grid; grid-template-columns:56px 1fr; gap:14px; padding:11px 0; border-bottom:1px solid var(--line); }
.obs-item:last-child{ border-bottom:none; }
.obs-data{ font-size:12.5px; font-weight:700; color:var(--primary); }
.obs-item p{ font-size:13.5px; color:var(--ink); max-width:none; margin:0; }

.empty{ padding:40px 24px; text-align:center; }
.empty .ic{ font-size:26px; color:#C8D0D3; margin-bottom:10px; }
.empty h4{ font-size:15px; margin-bottom:6px; }
.empty p{ font-size:13.5px; margin:0 auto; }

/* ---------- barras simples (saciedade/energia) ---------- */
.spark{ display:flex; align-items:flex-end; gap:5px; height:76px; margin-top:4px; }
.spark .bar{ flex:1 1 0; background:var(--bg-alt); border:1px solid var(--line); border-bottom:none; border-radius:2px 2px 0 0; position:relative; height:100%; }
.spark .bar i{ position:absolute; left:-1px; right:-1px; bottom:0; background:var(--accent); border-radius:2px 2px 0 0; display:block; }
.spark-axis{ display:flex; gap:5px; margin-top:6px; }
.spark-axis span{ flex:1 1 0; text-align:center; font-size:10.5px; color:var(--ink-soft); }

/* ---------- rodape ---------- */
footer{ padding:32px 0 50px; border-top:1px solid var(--line); }
footer .foot-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; flex-wrap:wrap; gap:14px; }
footer p{ font-size:12px; color:var(--ink-soft); max-width:100%; }

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%, 14px);
  background:var(--primary); color:#fff; font-size:14px; font-weight:600;
  padding:12px 20px; border-radius:4px; z-index:200; opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease; box-shadow:0 6px 20px rgba(14,46,58,.18);
}
.toast.show{ opacity:1; transform:translate(-50%, 0); }

/* ==========================================================================
   Componentes das 6 categorias
   ========================================================================== */

/* ---------- abas internas ---------- */
.subnav{ background:#fff; border-bottom:1px solid var(--line); position:sticky; top:68px; z-index:40; }
.subnav .wrap{ display:flex; gap:2px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.subnav .wrap::-webkit-scrollbar{ display:none; }
.subnav button{ background:none; padding:14px 13px 12px; font-size:13.5px; font-weight:600; color:var(--ink-soft); border-bottom:2px solid transparent; white-space:nowrap; border-radius:0; }
.subnav button:hover{ color:var(--primary); }
.subnav button[aria-selected="true"]{ color:var(--primary); border-bottom-color:var(--accent); }

/* seletor segmentado (ex.: fases do cardápio, filtros) */
.seg{ display:inline-flex; border:1px solid var(--line); border-radius:4px; overflow:hidden; background:#fff; flex-wrap:wrap; }
.seg button{ background:none; padding:8px 14px; font-size:13px; font-weight:600; color:var(--ink-soft); border-right:1px solid var(--line); border-radius:0; }
.seg button:last-child{ border-right:none; }
.seg button[aria-pressed="true"]{ background:var(--primary); color:#fff; }

/* ---------- indicadores ---------- */
.kpi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
a.metric{ display:block; transition:border-color .2s ease, transform .2s ease; }
a.metric:hover{ border-color:var(--accent); }
.metric .v.sm{ font-size:19px; }
.progresso{ height:8px; background:var(--bg-alt); border:1px solid var(--line); border-radius:99px; overflow:hidden; margin-top:8px; }
.progresso i{ display:block; height:100%; background:var(--accent); border-radius:99px; transition:width .4s ease; }
.metric.is-primary .progresso{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.12); }
.metric.is-primary .progresso i{ background:#5FD3BF; }

/* ---------- gráficos ---------- */
.grafico{ width:100%; height:auto; display:block; }
.grafico .g-grade{ stroke:var(--line); stroke-width:1; }
.grafico .g-eixo{ fill:var(--ink-soft); font-size:11px; font-family:'Public Sans', sans-serif; }
.grafico .g-area{ fill:rgba(20,125,111,.08); }
.grafico .g-linha{ fill:none; stroke:var(--accent); stroke-width:2.2; stroke-linejoin:round; stroke-linecap:round; }
.grafico .g-ponto{ fill:#fff; stroke:var(--accent); stroke-width:2; }
.grafico .g-ult{ fill:var(--accent); }
.grafico .g-meta{ stroke:#B98A3A; stroke-width:1.2; stroke-dasharray:5 4; }
.grafico .g-meta-txt{ fill:#8A5A0B; font-size:11px; font-weight:600; font-family:'Public Sans', sans-serif; }
.grafico-vazio{ padding:34px 16px; text-align:center; font-size:13.5px; color:var(--ink-soft); background:var(--bg-alt); border:1px dashed var(--line); border-radius:5px; }

.barras{ display:flex; align-items:stretch; gap:8px; height:150px; }
.barras .col{ flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:5px; min-width:0; }
.barras .v{ font-size:10.5px; font-weight:700; color:var(--ink-soft); height:14px; white-space:nowrap; }
.barras .t{ flex:1; width:100%; position:relative; display:flex; align-items:flex-end; justify-content:center; }
.barras .b{ width:100%; max-width:34px; background:#BFDCD7; border-radius:3px 3px 0 0; min-height:2px; }
.barras .b.ok{ background:var(--accent); }
.barras .b.atual{ box-shadow:0 0 0 2px rgba(14,46,58,.18); }
.barras .m{ position:absolute; left:-4px; right:-4px; border-top:1px dashed #B98A3A; }
.barras .r{ font-size:11px; color:var(--ink-soft); white-space:nowrap; }
.barras-legenda{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--ink-soft); margin-top:10px; }
.barras-legenda .m-leg{ width:18px; border-top:1px dashed #B98A3A; }

/* ---------- leituras (inteligência) ---------- */
.leituras{ list-style:none; }
.leituras li{ display:flex; gap:11px; padding:12px 0; border-bottom:1px solid var(--line); font-size:14px; color:var(--ink); line-height:1.5; }
.leituras li:last-child{ border-bottom:none; }
.leituras .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); margin-top:7px; flex-shrink:0; }
.leituras .dot.warn{ background:#B98A3A; }
.leituras .dot.neutro{ background:#B7C1C6; }

/* ---------- receitas e cardápio ---------- */
.receitas{ display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:14px; }
.receita{ display:block; width:100%; text-align:left; border:1px solid var(--line); border-radius:6px; background:#fff; padding:16px 18px; font:inherit; color:inherit; cursor:pointer; transition:border-color .2s ease; }
.receita:hover{ border-color:var(--accent); }
.receita .cod{ font-size:11.5px; font-weight:800; color:var(--accent); letter-spacing:.02em; }
.receita h4{ font-size:14.5px; margin:4px 0 6px; color:var(--ink); line-height:1.35; }
.receita .meta{ font-size:12px; color:var(--ink-soft); }
.cod-link{ background:none; border:none; padding:0; text-align:left; font:inherit; font-size:13.5px; color:var(--ink); cursor:pointer; line-height:1.4; }
.cod-link b{ color:var(--accent); font-weight:800; margin-right:4px; }
.cod-link:hover span{ text-decoration:underline; }
.tabela tr.hoje td{ background:var(--accent-soft); }
.tabela tr.hoje td:first-child{ box-shadow:inset 3px 0 0 var(--accent); }

.lista-ing{ list-style:none; }
.lista-ing li{ display:flex; justify-content:space-between; gap:14px; padding:8px 0; border-bottom:1px solid var(--line); font-size:14px; color:var(--ink); }
.lista-ing li:last-child{ border-bottom:none; }
.lista-ing .q{ color:var(--ink-soft); white-space:nowrap; text-align:right; }

/* ---------- diálogo ---------- */
.dlg{ border:none; border-radius:8px; padding:0; width:calc(100% - 32px); max-width:640px; max-height:calc(100vh - 48px); color:var(--ink); box-shadow:0 24px 70px rgba(14,46,58,.28); }
.dlg::backdrop{ background:rgba(14,46,58,.45); }
.dlg-head{ background:var(--primary); color:#fff; padding:18px 22px; display:flex; justify-content:space-between; align-items:flex-start; gap:14px; position:sticky; top:0; }
.dlg-head h3{ color:#fff; font-size:17px; line-height:1.3; }
.dlg-head .cod{ font-size:11.5px; font-weight:800; color:#8FD6C9; }
.dlg-fechar{ background:rgba(255,255,255,.12); color:#fff; width:32px; height:32px; border-radius:4px; font-size:18px; line-height:1; flex-shrink:0; }
.dlg-body{ padding:22px; }
.dlg-body h5{ font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); margin:18px 0 8px; }
.dlg-body h5:first-child{ margin-top:0; }
.dlg-body p{ max-width:none; font-size:14px; color:var(--ink); }

/* ---------- lista de compras ---------- */
.compra-secao h4{ font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); margin:22px 0 4px; }
.compra-secao:first-child h4{ margin-top:0; }
.compra-item{ display:flex; gap:11px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--line); cursor:pointer; }
.compra-item input{ margin-top:3px; width:16px; height:16px; accent-color:var(--accent); flex-shrink:0; }
.compra-item .nome{ font-size:14px; color:var(--ink); }
.compra-item .obs{ display:block; font-size:12px; color:var(--ink-soft); }
.compra-item .q{ margin-left:auto; font-size:13px; color:var(--ink-soft); text-align:right; white-space:nowrap; padding-left:10px; }
.compra-item.feito .nome{ text-decoration:line-through; color:var(--ink-soft); }

/* ---------- substituições ---------- */
.subs{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:14px; }
.sub-card{ border:1px solid var(--line); border-radius:6px; background:#fff; padding:18px; }
.sub-card h4{ font-size:15px; margin-bottom:4px; }
.sub-card .funcao{ font-size:12.5px; color:var(--ink-soft); margin-bottom:12px; }
.sub-card ul{ list-style:none; }
.sub-card li{ font-size:13.5px; color:var(--ink); padding:7px 0; border-top:1px solid var(--line); display:flex; gap:8px; }
.sub-card li::before{ content:'⇄'; color:var(--accent); font-weight:700; }
.sub-card li mark{ background:var(--accent-soft); color:inherit; padding:0 2px; border-radius:2px; }

/* ---------- calendário ---------- */
.cal-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; }
.cal-head h4{ font-size:16px; }
.cal{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:5px; overflow:hidden; }
.cal .dow{ background:var(--bg-alt); font-size:11px; font-weight:700; color:var(--ink-soft); text-align:center; padding:8px 0; text-transform:uppercase; }
.cal .dia{ background:#fff; min-height:74px; padding:6px; font-size:12.5px; color:var(--ink); }
.cal .dia.fora{ background:#FAFBFB; color:#B3BCC1; }
.cal .dia .n{ display:inline-flex; width:24px; height:24px; align-items:center; justify-content:center; border-radius:50%; font-weight:600; }
.cal .dia.hoje .n{ background:var(--primary); color:#fff; }
.cal .tag{ display:block; margin-top:4px; font-size:10.5px; font-weight:700; border-radius:3px; padding:2px 5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal .tag.ap{ background:var(--accent); color:#fff; }
.cal .tag.prev{ border:1px dashed var(--accent); color:var(--accent); }
.cal .tag.al{ background:var(--danger-soft); color:var(--danger); }
.cal-legenda{ display:flex; gap:16px; flex-wrap:wrap; margin-top:12px; font-size:12px; color:var(--ink-soft); }
.cal-legenda span{ display:inline-flex; align-items:center; gap:6px; }
.cal-legenda i{ width:14px; height:10px; border-radius:2px; display:inline-block; }

/* ---------- fotos ---------- */
.fotos{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; }
.foto{ border:1px solid var(--line); border-radius:6px; overflow:hidden; background:#fff; }
.foto img{ width:100%; aspect-ratio:3/4; object-fit:cover; display:block; background:var(--bg-alt); }
.foto .cap{ padding:8px 10px; font-size:12px; color:var(--ink-soft); display:flex; justify-content:space-between; align-items:center; gap:6px; }
.foto .cap b{ color:var(--ink); font-weight:600; }
.comparar{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.comparar figure img{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:6px; border:1px solid var(--line); background:var(--bg-alt); display:block; }
.comparar figcaption{ font-size:12.5px; color:var(--ink-soft); margin-top:6px; text-align:center; }

/* ---------- hábitos ---------- */
.chk{ width:32px; height:32px; border:1px solid var(--line); border-radius:6px; background:var(--bg-alt); color:transparent; font-size:15px; font-weight:800; transition:all .15s ease; }
.chk:hover{ border-color:var(--accent); }
.chk[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:#fff; }
.tabela.habitos th, .tabela.habitos td{ text-align:center; vertical-align:middle; padding:8px 6px; }
.tabela.habitos th:first-child, .tabela.habitos td:first-child{ text-align:left; padding-left:12px; }
.chips-sugestao{ display:flex; gap:8px; flex-wrap:wrap; }
.chips-sugestao button{ background:#fff; border:1px dashed var(--line); color:var(--ink-soft); font-size:12.5px; padding:6px 11px; border-radius:99px; }
.chips-sugestao button:hover{ border-color:var(--accent); color:var(--primary); }

/* ---------- IMC ---------- */
.imc-escala{ position:relative; display:flex; height:12px; border-radius:99px; overflow:hidden; margin:18px 0 6px; }
.imc-escala span{ flex:1; }
.imc-marca{ position:absolute; top:-6px; width:3px; height:24px; background:var(--primary); border-radius:2px; transform:translateX(-50%); }
.imc-rotulos{ display:flex; justify-content:space-between; font-size:11px; color:var(--ink-soft); }

/* ---------- conhecimento ---------- */
.temas{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px; }
.tema{ display:block; width:100%; text-align:left; font:inherit; color:inherit; border:1px solid var(--line); border-radius:6px; background:#fff; padding:20px; cursor:pointer; transition:border-color .2s ease; }
.tema:hover{ border-color:var(--accent); }
.tema .cnt{ font-size:11.5px; font-weight:700; color:var(--accent); }
.tema h4{ font-size:15.5px; margin:6px 0; }
.tema p{ font-size:13px; }

@media (max-width: 900px){
  .kpi-grid{ grid-template-columns:1fr 1fr; }
  .cal .dia{ min-height:58px; padding:4px; }
  .cal .tag{ font-size:9.5px; padding:1px 3px; }
}
@media (max-width: 640px){
  .comparar{ grid-template-columns:1fr; }
  .subnav{ top:68px; }
}
@media print{
  .subnav, .dlg{ display:none !important; }
}

@media (max-width: 900px){
  .grid-2, .grid-3, .grid-side, .field-row, .field-row-3{ grid-template-columns:1fr; }
  .metric-row{ grid-template-columns:1fr 1fr; }
  .efeito-row{ grid-template-columns:1fr; gap:8px; }
  .log-item{ grid-template-columns:1fr; gap:8px; }
  .log-item .acts{ justify-content:flex-start; }
}
@media (max-width: 640px){
  .wrap{ padding:0 20px; }
  .nav-links{ gap:16px; font-size:13px; }
  .metric-row{ grid-template-columns:1fr; }
}

/* ---------- impressao (relatorio da consulta) ---------- */
@media print{
  header, footer, .no-print{ display:none !important; }
  body{ font-size:12px; }
  .app-head{ background:#fff; border-bottom:2px solid var(--primary); padding:0 0 16px; }
  .app-body{ padding:18px 0 0; }
  .wrap{ max-width:100%; padding:0; }
  .card{ break-inside:avoid; page-break-inside:avoid; }
  .card-head{ background:#fff !important; color:var(--primary) !important; border-bottom:2px solid var(--primary); padding-left:0; padding-right:0; }
  .card-head h3{ color:var(--primary) !important; }
  .card-body{ padding-left:0; padding-right:0; }
  .metric.is-primary{ background:#fff; border-color:var(--line); }
  .metric.is-primary .v{ color:var(--primary); }
  .metric.is-primary .l, .metric.is-primary .s{ color:var(--ink-soft); }
}