/* ==========================================================================
   Shape — shape.css (componentes da web · v1.0 · CARTAZ, D13)
   Port integral de design/final/assets/ui.css (TODOS os nomes de classe mantidos) + casco do app (sidebar,
   topbar, tab bar, folhas, toasts) + camada de compatibilidade MCentral (ARCHITECTURE §6.3).
   Ordem de carga no app.php: fonts.css → tokens.css → shape.css → pages/<p>.css.
   Lê SÓ tokens semânticos de tokens.css (nunca --p-*). Mobile-first, alvos ≥ 44 px, foco visível,
   estado nunca só por cor. Anatomia e estados: docs/DESIGN.md §9. Contrato para as páginas: docs/WEB.md.
   Diferenças conscientes em relação ao ui.css (mockup em moldura de celular):
     - .tabbar, .overlay e .sheet usam position: fixed (no mockup eram absolute dentro do .phone);
     - a tab bar soma a área segura do iPhone (env(safe-area-inset-bottom));
     - a sidebar recolhe entre 768 e 1199 px por media query (além da classe .collapsed do mockup).
   ========================================================================== */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--txt); font-family: var(--font-ui); font-stretch: var(--wdth-ui);
  font-weight: var(--fw-ui); font-size: var(--fs-16); line-height: var(--lh-ui); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
::selection { background: var(--accent-soft); color: var(--txt); }
h1, h2, h3, h4 { margin: 0; font-weight: inherit; }
h1.head, h2.head, h3.head { font-weight: var(--fw-head); }

/* ---------- Tipografia ---------- */
.num { font-family: var(--sig-num-family); font-stretch: var(--sig-num-wdth); font-weight: var(--sig-num-weight);
  line-height: var(--lh-num); letter-spacing: var(--tr-num); font-variant-numeric: tabular-nums lining-nums; }
.head { font-family: var(--font-display); font-stretch: var(--wdth-head); font-weight: var(--fw-head);
  line-height: var(--lh-head); letter-spacing: var(--tr-head); text-wrap: balance; }
.kicker { font-family: var(--font-ui); font-stretch: var(--wdth-kicker); font-weight: var(--fw-kicker); font-size: var(--fs-11);
  letter-spacing: var(--tr-kicker); text-transform: uppercase; line-height: 1.2; color: var(--txt-2); }
.voz { font-family: var(--font-voz); font-style: italic; font-weight: 400; font-size: var(--fs-20); line-height: var(--lh-voz);
  letter-spacing: -0.005em; }
.t-cap { font-size: var(--fs-13); line-height: 1.35; color: var(--txt-2); }
.t-small { font-size: var(--fs-14); line-height: 1.4; }
.t-strong { font-weight: var(--fw-ui-bold); }
.muted { color: var(--txt-2); } .faint { color: var(--txt-3); }
.tnum { font-variant-numeric: tabular-nums; }

/* Número de cartaz (só NÃO acionável: cards de métrica, cartaz do dia, cartões, landing).
   Inteiro gigante + decimal e unidade empilhados no alto, como preço de feira. */
.cn { display: inline-flex; align-items: flex-start; gap: .05em; line-height: var(--lh-num); white-space: nowrap; }
.cn-int { font-family: var(--sig-num-family); font-stretch: var(--sig-num-wdth); font-weight: var(--sig-num-weight);
  letter-spacing: var(--tr-num); font-variant-numeric: tabular-nums lining-nums; }
.cn-side { display: inline-flex; flex-direction: column; align-items: flex-start; padding-top: .05em; gap: .03em; }
.cn-dec { font-family: var(--sig-num-family); font-stretch: var(--sig-num-wdth); font-weight: var(--sig-num-weight);
  font-size: .42em; line-height: .8; font-variant-numeric: tabular-nums; }
.cn-unit { font-stretch: var(--wdth-kicker); font-weight: 800; font-size: .17em; letter-spacing: .06em; text-transform: uppercase; line-height: 1; }
.cn-x { font-family: var(--sig-num-family); font-stretch: var(--sig-num-wdth); font-weight: 700; font-size: .5em; align-self: center; opacity: .55; margin: 0 .04em; }
/* Número acionável (player, Watch, Live Activity): decimal NO MESMO TAMANHO. "22,5 kg" nunca vira "22". */
.na { font-family: var(--sig-num-family); font-stretch: var(--sig-num-wdth); font-weight: var(--sig-num-weight);
  line-height: var(--lh-num); letter-spacing: var(--tr-num); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.na small { font-family: var(--font-ui); font-stretch: var(--wdth-kicker); font-weight: 800; font-size: .26em; letter-spacing: .05em;
  text-transform: uppercase; margin-left: .12em; vertical-align: .9em; }
.na .x { font-weight: 700; opacity: .5; font-size: .62em; margin: 0 .06em; vertical-align: .12em; }

/* Ponto da marca (fim de frase, separador) */
.dot { display: inline-block; width: .32em; height: .32em; border-radius: 50%; background: var(--brand-dot); vertical-align: baseline; margin-left: .04em; }
.sep-dot::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-dot);
  vertical-align: middle; margin: 0 .55em; position: relative; top: -1px; }

/* ---------- Botões ---------- */
.btn { --h: var(--tap); display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--h); min-width: var(--tap);
  padding: 0 18px; border: 0; border-radius: var(--r-btn); font-weight: var(--fw-ui-bold); font-size: var(--fs-16); letter-spacing: -0.005em;
  text-decoration: none; user-select: none; position: relative; white-space: nowrap;
  transition: transform var(--dur-tap) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.btn:active { transform: scale(.97); }
.btn svg { width: 20px; height: 20px; stroke-width: 2.25; flex: none; }
.btn-primary { background: var(--accent); color: var(--txt-on-accent); }
.btn-primary:active { background: var(--accent-press); }
.btn-ink { background: var(--txt); color: var(--bg); }
.btn-outline { background: transparent; color: var(--txt); box-shadow: inset 0 0 0 1.5px var(--brd-field); }
.btn-soft { background: var(--bg-elev-2); color: var(--txt); }
.btn-ghost { background: transparent; color: var(--txt); }
.btn-danger { background: var(--perigo-soft); color: var(--perigo); }
.btn-md { --h: var(--tap-md); }
.btn-lg { --h: var(--tap-lg); font-size: var(--fs-18); padding: 0 22px; border-radius: 16px; }
.btn-xl { --h: var(--tap-xl); font-family: var(--font-display); font-stretch: var(--wdth-head); font-weight: 900; font-size: 2.25rem; border-radius: var(--r-xl); }
.btn-block { display: flex; width: 100%; }
.btn-icon { padding: 0; width: var(--h); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { color: transparent; }
.btn[aria-busy="true"]::after { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%;
  border: 2.5px solid currentColor; border-color: var(--txt-on-accent) transparent var(--txt-on-accent) var(--txt-on-accent); animation: spin .8s linear infinite; }
.btn-ink[aria-busy="true"]::after { border-color: var(--bg) transparent var(--bg) var(--bg); }
.btn-soft[aria-busy="true"]::after, .btn-outline[aria-busy="true"]::after, .btn-ghost[aria-busy="true"]::after { border-color: var(--txt) transparent var(--txt) var(--txt); }
.btn-danger[aria-busy="true"]::after { border-color: var(--perigo) transparent var(--perigo) var(--perigo); }
/* O spinner do aria-busy fica centralizado e visível mesmo com o rótulo transparente (ícones também somem). */
.btn[aria-busy="true"] svg { opacity: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover:not([disabled]) { background: color-mix(in srgb, var(--accent) 94%, #000); }
  .btn-ink:hover:not([disabled]) { background: color-mix(in srgb, var(--txt) 88%, var(--bg)); }
  .btn-soft:hover:not([disabled]), .btn-ghost:hover:not([disabled]) { background: color-mix(in srgb, var(--bg-elev-2) 94%, var(--txt)); }
  .btn-outline:hover:not([disabled]) { background: var(--bg-elev-2); }
}
.link { color: var(--accent-text); font-weight: var(--fw-ui-bold); text-decoration: none; font-size: var(--fs-14); display: inline-flex;
  align-items: center; gap: 4px; min-height: var(--tap); }
.link svg { width: 16px; height: 16px; }
button.link { background: none; border: 0; padding: 0; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Campos ---------- */
.fld { display: grid; gap: 6px; }
.fld > label, .fld .lbl { font-size: var(--fs-14); font-weight: var(--fw-ui-bold); }
.input { width: 100%; min-height: 52px; padding: 0 14px; border-radius: var(--r-field); background: var(--bg-elev); border: 1.5px solid var(--brd-field);
  font-size: var(--fs-16); color: var(--txt); outline: none; transition: border-color var(--dur-fast) var(--ease-out); }
.input::placeholder { color: var(--txt-3); }
.input:focus { border-color: var(--txt); box-shadow: 0 0 0 3px var(--accent-soft); }
.fld.err .input { border-color: var(--perigo); }
.fld .help { font-size: var(--fs-13); color: var(--txt-2); }
.fld .msg-err { font-size: var(--fs-13); color: var(--perigo); font-weight: var(--fw-ui-bold); display: flex; gap: 6px; align-items: center; }
.fld .msg-err svg { width: 16px; height: 16px; }
.input-icon { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px; border-radius: var(--r-field);
  background: var(--bg-elev); border: 1.5px solid var(--brd-field); color: var(--txt-3); }
.input-icon svg { width: 20px; height: 20px; flex: none; }
.input-icon:focus-within { border-color: var(--txt); box-shadow: 0 0 0 3px var(--accent-soft); }
.input-icon > input, .input-icon > textarea { flex: 1; min-width: 0; min-height: 48px; border: 0; background: transparent; color: var(--txt); outline: none; padding: 0; }
.input-icon > textarea { padding: 13px 0; resize: none; line-height: 1.4; }
.input-icon > input::placeholder, .input-icon > textarea::placeholder { color: var(--txt-3); }
/* Variações do .input (select e textarea) e campos dentro de .fld sem a classe */
textarea.input { min-height: 104px; padding: 13px 14px; line-height: 1.45; resize: vertical; }
select.input { appearance: none; -webkit-appearance: none; padding-right: 42px; background-image: linear-gradient(45deg, transparent 50%, var(--txt-2) 50%), linear-gradient(135deg, var(--txt-2) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.input[disabled], .input[readonly] { opacity: .5; cursor: not-allowed; }
.input[aria-invalid="true"] { border-color: var(--perigo); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--txt); width: 22px; height: 22px; }

/* Stepper (− valor +) */
.stepper { display: grid; grid-template-columns: var(--tap-lg) 1fr var(--tap-lg); align-items: center; min-height: var(--tap-lg);
  border-radius: var(--r-pill); background: var(--bg-elev-2); }
.stepper button { height: var(--tap-lg); border: 0; background: transparent; border-radius: var(--r-pill); display: grid; place-items: center; color: var(--txt); }
.stepper button svg { width: 22px; height: 22px; stroke-width: 2.5; }
.stepper span { text-align: center; font-size: var(--fs-13); font-weight: var(--fw-ui-bold); color: var(--txt-2); }

/* Interruptor */
.toggle { position: relative; width: 52px; height: 32px; border-radius: 99px; background: var(--brd-strong); flex: none; }
button.toggle { border: 0; padding: 0; }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform var(--dur-fast) var(--ease-out); }
.toggle[aria-checked="true"] { background: var(--txt); }
.toggle[aria-checked="true"]::after { transform: translateX(20px); }
.toggle[aria-checked="true"]::before { content: ""; position: absolute; left: 10px; top: 11px; width: 8px; height: 5px; border-left: 2px solid var(--bg);
  border-bottom: 2px solid var(--bg); transform: rotate(-45deg); }
.toggle[aria-disabled="true"] { opacity: .4; }

/* Segmentado */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--bg-elev-2); border-radius: 12px; padding: 3px; }
.seg button { min-height: var(--tap); border: 0; background: transparent; border-radius: 9px; font-weight: 600; font-size: 14px; color: var(--txt-2); }
.seg button[aria-pressed="true"] { background: var(--bg-elev); color: var(--txt); box-shadow: var(--sh-1), var(--card-ring); }

/* Escolha grande (check-in 3 toques, onboarding) */
.choice { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.choice button { min-height: var(--tap-lg); border: 0; border-radius: 16px; background: var(--bg-elev-2); font-weight: var(--fw-ui-bold); font-size: var(--fs-16); color: var(--txt); }
.choice button[aria-pressed="true"] { background: var(--txt); color: var(--bg); }

/* ---------- Superfícies ---------- */
.card { background: var(--bg-elev); border-radius: var(--r-card); box-shadow: var(--sh-1), var(--card-ring); padding: 16px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.card-head .link { min-height: 0; }
/* Placa do corpo: prontidão, sono, VFC (frio informa) — sempre escura, nos dois temas */
.plate { background: var(--bg-plate); color: var(--txt-plate); border-radius: var(--sig-plate-radius); padding: 16px; box-shadow: 0 0 0 1px var(--plate-brd); }
.plate .kicker { color: var(--txt-plate-2); }
.plate .t-cap, .plate .muted { color: var(--txt-plate-2); }
.plate .link { color: var(--brand); }
/* Cartaz do treino (papel da modalidade) — tinta por cima */
.poster { position: relative; border-radius: var(--sig-poster-radius); padding: 14px 16px 16px; color: var(--on-mod); overflow: hidden; background: var(--mod-bike); }
.poster[data-mod="forca"] { background: var(--mod-forca); } .poster[data-mod="corrida"] { background: var(--mod-corrida); }
.poster[data-mod="caminhada"] { background: var(--mod-caminhada); } .poster[data-mod="bike"] { background: var(--mod-bike); }
.poster .kicker { color: var(--on-mod); }
.poster .btn-ink { background: var(--ink); color: var(--paper); }
.poster .btn-tint { background: rgba(20,17,15,.12); color: var(--ink); }
.poster :focus-visible { outline-color: var(--ink); }

/* ---------- Chips e selos ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: var(--r-pill); background: var(--bg-elev-2);
  color: var(--txt); font-size: var(--fs-13); font-weight: var(--fw-ui-med); white-space: nowrap; border: 0; }
.chip svg { width: 15px; height: 15px; stroke-width: 2.25; }
.chip-line { background: transparent; box-shadow: inset 0 0 0 1.5px var(--brd-strong); }
button.chip { cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--txt); color: var(--bg); }
.plate .chip { background: rgba(255,255,255,.1); color: var(--txt-plate); }
/* Zona: fundo da zona + texto tinta + rótulo */
.chip-z { color: var(--on-z); font-weight: 700; height: 26px; padding: 0 9px; }
.chip-z b { font-stretch: var(--wdth-kicker); font-weight: 800; font-size: .86em; letter-spacing: .04em; }
.chip-z[data-z="1"] { background: var(--z1); } .chip-z[data-z="2"] { background: var(--z2); } .chip-z[data-z="3"] { background: var(--z3); }
.chip-z[data-z="4"] { background: var(--z4); } .chip-z[data-z="5"] { background: var(--z5); }
/* Aderência: forma diferente por estado (cheio = dentro; contorno = abaixo; hachura = acima) + seta + palavra */
.st { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 9px; border-radius: var(--r-pill);
  font-weight: 800; font-size: var(--fs-14); font-stretch: 100%; white-space: nowrap; }
.st svg { width: 16px; height: 16px; stroke-width: 3; }
.st[data-st="dentro"] { background: var(--st-dentro-fill); color: var(--on-st); }
.st[data-st="abaixo"] { background: transparent; color: var(--st-abaixo); box-shadow: inset 0 0 0 3px var(--st-abaixo-fill); }
.st[data-st="acima"]  { color: var(--on-st); background: repeating-linear-gradient(-45deg, var(--st-acima-fill) 0 6px, color-mix(in srgb, var(--st-acima-fill) 84%, #000) 6px 9px); }
.st-soft[data-st="dentro"] { background: var(--st-dentro-soft); color: var(--st-dentro); }
.st-soft[data-st="abaixo"] { background: var(--st-abaixo-soft); color: var(--st-abaixo); box-shadow: none; }
.st-soft[data-st="acima"]  { background: var(--st-acima-soft); color: var(--st-acima); }
.selo { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: var(--r-pill);
  font-stretch: var(--wdth-kicker); font-weight: 800; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.selo-ajustado, .badge-adjusted { background: var(--txt); color: var(--bg); }
.selo-ajustado::before, .badge-adjusted::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-dot); }
.selo-ink { background: var(--txt); color: var(--bg); }
.poster .selo-ajustado, .poster .selo-ink { background: var(--ink); color: var(--paper); }
.selo-dado, .data-age { background: var(--bg-elev-2); color: var(--txt-2); }   /* "de ontem", "parcial", "calibrando" */
.plate .selo-dado, .plate .data-age { background: rgba(255,255,255,.12); color: var(--txt-plate-2); }
.selo-aviso { background: var(--aviso-soft); color: var(--aviso); }                 /* "modo teste", "confira" */
.data-age { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 700; white-space: nowrap; }

/* ---------- Card de métrica ---------- */
.metric { display: grid; gap: 4px; align-content: start; }
.metric .cn { font-size: var(--num-m); }
.metric-ctx { font-size: var(--fs-13); color: var(--txt-2); }
.metric-src { font-size: var(--fs-12); color: var(--txt-3); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.metric-empty .cn-int { color: var(--txt-3); }

/* ---------- Barras (nutrição: sempre tinta, nunca vermelho) ---------- */
.bar { height: 8px; border-radius: 99px; background: var(--bg-elev-2); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: inherit; background: var(--txt); }
.plate .bar { background: rgba(255,255,255,.12); } .plate .bar > i { background: var(--txt-plate); }

/* ---------- Sol de prontidão (SVG do ShapeCharts.sun) ---------- */
.sun { position: relative; display: grid; place-items: center; flex: none; }
.sun > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sun-core { position: relative; text-align: center; display: grid; justify-items: center; }
.sun-core .num { color: var(--txt-plate); }

/* ---------- Semana (bolinhas): estado por FORMA ---------- */
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.wd { display: grid; justify-items: center; gap: 6px; font-size: 11px; color: var(--txt-2); font-stretch: var(--wdth-kicker); font-weight: 750; letter-spacing: .06em; }
.wd i { width: 26px; height: 26px; border-radius: 50%; display: block; position: relative; }
.wd[data-s="feito"] i { background: var(--txt); }
.wd[data-s="ajustado"] i { background: var(--txt); }
.wd[data-s="ajustado"] i::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--brand-dot); }
.wd[data-s="descanso"] i { box-shadow: inset 0 0 0 3px var(--txt); }
.wd[data-s="descanso"] i::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--txt); }
.wd[data-s="pendente"] i { border: 2px dashed var(--brd-field); }
.wd[data-s="hoje"] i { box-shadow: inset 0 0 0 4px var(--accent); }
.wd[data-s="hoje"] { color: var(--accent-text); }
.wd[data-s="refeito"] i { transform: scale(.42); background: var(--txt-3); }
.wd[data-s="congelado"] i { box-shadow: inset 0 0 0 2px var(--txt-3); background: repeating-linear-gradient(90deg, transparent 0 4px, var(--txt-3) 4px 5.5px); }

/* ---------- Lista de séries ---------- */
.sets { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.set { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px; border-radius: 12px; }
.set-i { font-family: var(--sig-num-family); font-stretch: var(--sig-num-wdth); font-weight: 900; font-size: 22px; color: var(--txt-3); text-align: center; }
.set-v { font-family: var(--font-display); font-stretch: var(--wdth-head); font-weight: 800; font-size: 21px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.set-v small { font-family: var(--font-ui); font-stretch: 100%; font-weight: 600; font-size: 13px; color: var(--txt-2); margin-left: 6px; letter-spacing: 0; }
.set-s { font-size: 12.5px; font-weight: 750; display: inline-flex; align-items: center; gap: 6px; color: var(--txt-2); }
.set-s svg { width: 18px; height: 18px; stroke-width: 2.5; }
.set[data-s="feito"] .set-s { color: var(--st-dentro); } .set[data-s="feito"] .set-i { color: var(--txt); }
.set[data-s="atual"] { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.set[data-s="atual"] .set-i, .set[data-s="atual"] .set-s { color: var(--accent-text); }
.set[data-s="aquec"] .set-v { font-weight: 700; color: var(--txt-2); }

/* ---------- Timer de descanso: o pavio ---------- */
.pavio { position: relative; height: 14px; border-radius: 99px; background: var(--bg-elev-2); }
.pavio > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: var(--accent); }
.pavio > i::after { content: ""; position: absolute; right: -8px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%;
  background: radial-gradient(circle, #FFF1D6 0 26%, var(--accent) 30% 56%, transparent 60%); }
.pavio.ending > i::after { animation: pavio-pulse .8s var(--ease-inout) infinite alternate; }
@keyframes pavio-pulse { to { transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .pavio.ending > i::after { animation: none; } }

/* ---------- Régua de aderência (ERG/Watch): a POSIÇÃO carrega o estado ---------- */
.regua { --rh: 26px; position: relative; height: var(--rh); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; }
.regua > span { border-radius: 6px; display: grid; place-items: center; font-stretch: var(--wdth-kicker); font-weight: 800; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.regua .r-ab { box-shadow: inset 0 0 0 2.5px var(--st-abaixo-fill); color: var(--st-abaixo); }
.regua .r-de { background: var(--st-dentro-fill); color: var(--on-st); }
.regua .r-ac { background: repeating-linear-gradient(-45deg, var(--st-acima-fill) 0 6px, color-mix(in srgb, var(--st-acima-fill) 84%, #000) 6px 9px); color: var(--on-st); }
.regua .ptr { position: absolute; top: -13px; width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 12px solid var(--txt); margin-left: -9px; }
.regua .ptr::after { content: ""; position: absolute; left: -9px; top: calc(var(--rh) + 2px); border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 12px solid var(--txt); }

/* ---------- Gráficos (ShapeCharts) ---------- */
.chart { width: 100%; height: auto; }
.chart text { font-family: var(--font-ui); font-size: 11px; fill: var(--chart-axis); }
.chart .ch-grid { stroke: var(--chart-grid); stroke-width: 1; }
.chart .ch-axis { stroke: var(--chart-grid); }
.chart .ch-band { opacity: .28; }
.chart .ch-now { stroke: var(--accent); stroke-width: 3; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; color: var(--txt-2); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.legend i.dash { height: 3px; border-radius: 2px; vertical-align: 2px; }
.plate .legend { color: var(--txt-plate-2); }
.plate .chart text { fill: var(--txt-plate-2); }
.chart-alt { font-size: var(--fs-13); font-weight: var(--fw-ui-bold); color: var(--accent-text); min-height: var(--tap); display: inline-flex; align-items: center; gap: 4px;
  background: none; border: 0; padding: 0; }
.plate .chart-alt { color: var(--brand); }
.chart-sum { margin: 0 0 6px; font-size: var(--fs-13); color: var(--txt-2); }
.plate .chart-sum { color: var(--txt-plate-2); }
.chart-wrap { display: grid; gap: 4px; min-width: 0; }
.chart-table { width: 100%; border-collapse: collapse; font-size: var(--fs-13); font-variant-numeric: tabular-nums; }
.chart-table th, .chart-table td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--brd); }
.chart-table thead th { font-stretch: var(--wdth-kicker); font-weight: 800; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--txt-2); }
.chart-table td:last-child, .chart-table th:last-child { text-align: right; }
.plate .chart-table th, .plate .chart-table td { border-color: rgba(255,255,255,.1); }
.plate .chart-table thead th { color: var(--txt-plate-2); }
.gauge { position: relative; display: grid; place-items: center; }
.gauge > svg { width: 100%; height: auto; }
.gauge-v { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; text-align: center; }
.gauge-v .num { font-size: 2.6em; }
.gauge-v small { display: block; font-size: var(--fs-12); color: var(--txt-2); margin-top: 4px; }
.zones { display: grid; gap: 6px; }
.zones-bar { display: flex; height: 14px; border-radius: 99px; overflow: hidden; gap: 2px; }
.zones-bar > i { display: block; height: 100%; min-width: 2px; }
.zones-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; font-size: var(--fs-13); min-height: 32px; }
.zones-row .bar { height: 8px; } .zones-row .bar > i { background: var(--txt); }
.zones-row .v { font-variant-numeric: tabular-nums; color: var(--txt-2); }

/* ---------- Navegação: tab bar (celular < 768) ---------- */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; height: calc(70px + env(safe-area-inset-bottom, 0px)); padding: 6px 6px env(safe-area-inset-bottom, 0px);
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: start; background: var(--bg-bar);
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); box-shadow: 0 -1px 0 var(--brd); z-index: var(--z-tab); }
.tab { display: grid; justify-items: center; gap: 2px; font-size: 10.5px; font-weight: 650; color: var(--txt-3); padding-top: 2px; min-height: 48px; text-decoration: none;
  background: none; border: 0; font-family: inherit; }
.tab svg { width: 25px; height: 25px; stroke-width: 2; }
.tab[aria-current="page"], .tab[aria-current="true"] { color: var(--txt); }
.tab[aria-current="page"] svg, .tab[aria-current="true"] svg { stroke-width: 2.6; }
.tab-plus { width: 52px; height: 52px; margin-top: -4px; border-radius: 50%; background: var(--accent); color: var(--txt-on-accent); display: grid; place-items: center; justify-self: center; }
.tab-plus svg { width: 26px; height: 26px; stroke-width: 2.75; }
.tab .tab-badge { position: absolute; margin-left: 16px; margin-top: -2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: var(--accent);
  color: var(--txt-on-accent); font-size: 10px; font-weight: 800; display: grid; place-items: center; }
.tab { position: relative; }

/* ---------- Navegação: sidebar (desktop ≥ 1200; recolhida 768–1199) e topbar ---------- */
.sidebar { width: var(--sb-w); background: var(--bg-elev); border-right: 1px solid var(--brd); display: flex; flex-direction: column; padding: 20px 14px; gap: 2px; }
.sidebar .sb-logo { padding: 4px 10px 18px; }
.sidebar .sb-grp { font-stretch: var(--wdth-kicker); font-weight: 800; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-3); padding: 16px 12px 6px; }
.sb-item { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 12px; font-weight: 600; font-size: 15px; color: var(--txt-2); text-decoration: none; position: relative; }
.sb-item svg { width: 21px; height: 21px; stroke-width: 2.1; flex: none; }
.sb-item:hover { background: var(--bg-elev-2); color: var(--txt); }
.sb-item[aria-current="page"] { background: var(--txt); color: var(--bg); }
.sb-item[aria-current="page"]::after { content: ""; position: absolute; right: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-dot); }
.sb-item .count { margin-left: auto; font-size: 12px; font-weight: 800; background: var(--accent); color: var(--txt-on-accent); border-radius: 99px; padding: 1px 7px; }
.sb-item[aria-current="page"] .count { margin-right: 14px; }
.sidebar.collapsed { width: var(--sb-wc); align-items: center; } .sidebar.collapsed .sb-item span, .sidebar.collapsed .sb-grp { display: none; }
.topbar { height: 68px; display: flex; align-items: center; gap: 12px; padding: 0 28px; border-bottom: 1px solid var(--brd); background: var(--bg-bar); }
.topbar h1, .topbar .tb-title { margin: 0; font-size: 28px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sync { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 99px; background: var(--bg-elev-2); font-size: 13px; font-weight: 600; color: var(--txt-2);
  border: 0; text-decoration: none; white-space: nowrap; }
.sync i { width: 8px; height: 8px; border-radius: 50%; background: var(--st-dentro); display: block; flex: none; }
.sync[data-s="erro"] { background: var(--perigo-soft); color: var(--perigo); } .sync[data-s="erro"] i { background: var(--perigo); }
.sync[data-s="sync"] i { width: 10px; height: 10px; background: transparent; border: 2px solid var(--txt-2); border-top-color: transparent; animation: spin .9s linear infinite; }
.sync[data-s="none"] i { background: var(--txt-3); }
.sync[data-s="velho"] i { background: transparent; box-shadow: inset 0 0 0 2px var(--txt-3); }
button.sync[disabled] { cursor: default; }
@media (prefers-reduced-motion: reduce) { .sync[data-s="sync"] i { animation: none; } }
.bell { position: relative; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: transparent; border: 0; color: var(--txt); text-decoration: none; }
.bell svg { width: 22px; height: 22px; }
.bell b { position: absolute; top: 7px; right: 7px; min-width: 18px; height: 18px; border-radius: 99px; background: var(--accent); color: var(--txt-on-accent); font-size: 11px; font-weight: 800; display: grid; place-items: center; padding: 0 4px; }
.bell:hover, .bell[aria-expanded="true"] { background: var(--bg-elev-2); }

/* ---------- Folha / modal (Shape.modal) ---------- */
.overlay { position: fixed; inset: 0; background: var(--bg-overlay); z-index: var(--z-sheet); }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; background: var(--bg-elev); border-radius: var(--r-sheet) var(--r-sheet) 0 0; padding: 10px 20px calc(28px + env(safe-area-inset-bottom, 0px));
  z-index: calc(var(--z-sheet) + 1); box-shadow: var(--sh-3); max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; }
.sheet .grab { width: 40px; height: 5px; border-radius: 3px; background: var(--brd-strong); margin: 0 auto 14px; }
.sheet h2 { margin: 0 0 4px; font-size: 26px; }
.modal { background: var(--bg-elev); border-radius: 24px; padding: 22px; box-shadow: var(--sh-3); max-width: 440px; }
.modal h2 { margin: 0 0 6px; font-size: 26px; }
.modal .acts { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }
.row-tog { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 56px; border-bottom: 1px solid var(--brd); }
.row-tog:last-child { border-bottom: 0; }
.row-tog small { display: block; font-size: 12.5px; color: var(--txt-2); margin-top: 1px; }
/* Estrutura montada pelo Shape.modal: .overlay > (.sheet | .modal) com .dlg-* por dentro */
.dlg, .sheet[tabindex="-1"]:focus, .content:focus, .pop:focus { outline: none; }
.dlg .dlg-text { margin: 4px 0 0; color: var(--txt-2); font-size: 15px; line-height: 1.45; }
.dlg .dlg-body { margin-top: 12px; display: grid; gap: 12px; }
.dlg .acts { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.sheet.dlg .acts { display: grid; grid-auto-flow: row; gap: 8px; }
.sheet.dlg .acts .btn { width: 100%; min-height: var(--tap-md); }
.dlg-x { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 12px; border: 0; background: transparent; color: var(--txt-2); display: grid; place-items: center; }
.dlg-x svg { width: 22px; height: 22px; }
.modal.dlg { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow-y: auto;
  z-index: calc(var(--z-sheet) + 1); }
.modal.dlg.dlg-wide { max-width: 640px; width: min(640px, calc(100vw - 32px)); }
.dlg-enter.sheet { animation: sheet-in var(--dur-sheet) var(--ease-out) both; }
.dlg-enter.modal { animation: modal-in var(--dur-fast) var(--ease-out) both; }
.overlay.dlg-enter { animation: fade-in var(--dur-fast) var(--ease-out) both; }
@keyframes sheet-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes modal-in { from { transform: translate(-50%, -48%); opacity: 0; } to { transform: translate(-50%, -50%); opacity: 1; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
html.has-dlg { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .dlg-enter.sheet, .dlg-enter.modal, .overlay.dlg-enter { animation: none; } }

/* ---------- Toast (Shape.toast): placa escura, no máximo 1 por vez ---------- */
.toast { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 6px 6px 16px; border-radius: 16px; background: var(--bg-plate); color: var(--txt-plate);
  box-shadow: var(--sh-3), 0 0 0 1px var(--plate-brd); font-size: 15px; font-weight: 600; }
.toast .btn { min-height: 40px; background: rgba(255,255,255,.12); color: var(--brand); font-size: 14px; padding: 0 14px; border-radius: 12px; }
.toast svg { width: 20px; height: 20px; flex: none; }
.toast .toast-msg { flex: 1; min-width: 0; padding: 8px 0; line-height: 1.3; }
.toast:not(:has(.btn)) { padding-right: 16px; }
.toasts { position: fixed; left: 0; right: 0; bottom: calc(82px + env(safe-area-inset-bottom, 0px)); z-index: var(--z-toast); display: grid; justify-items: center;
  padding: 0 16px; pointer-events: none; }
.toasts .toast { pointer-events: auto; width: 100%; max-width: 520px; animation: toast-in var(--dur-cola) var(--ease-out) both; }
.toasts .toast.out { animation: toast-out var(--dur-fast) var(--ease-in) both; }
@keyframes toast-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toast-out { to { transform: translateY(8px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .toasts .toast, .toasts .toast.out { animation: none; } }

/* ---------- Estados ---------- */
.empty-state { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 28px 20px; }
.empty-state .ico { width: 64px; height: 64px; border-radius: 50%; background: var(--bg-elev-2); display: grid; place-items: center; color: var(--txt-2); }
.empty-state .ico svg { width: 28px; height: 28px; }
.empty-state p { margin: 0; max-width: 300px; color: var(--txt-2); font-size: 15px; }
.empty-state h2 { font-size: var(--fs-24); }
.skeleton { border-radius: 10px; background: linear-gradient(90deg, var(--bg-elev-2) 0 40%, var(--bg-sunken) 50%, var(--bg-elev-2) 60% 100%); background-size: 300% 100%;
  animation: skel 1.4s var(--ease-inout) infinite; }
@keyframes skel { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }
.alerta { background: var(--perigo-soft); color: var(--txt); border-radius: 18px; padding: 16px; border-left: 5px solid var(--perigo); }
.alerta h3 { margin: 0 0 6px; font-size: 18px; color: var(--perigo); }
.alerta p { margin: 0 0 12px; font-size: 15px; line-height: 1.45; }
.banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: var(--bg-elev-2); font-size: 14px; }
.banner svg { width: 18px; height: 18px; flex: none; }
.banner-aviso { background: var(--aviso-soft); color: var(--txt); } .banner-aviso svg { color: var(--aviso); }
.banner-info { background: var(--info-soft); color: var(--txt); } .banner-info svg { color: var(--info); }
.banner-erro { background: var(--perigo-soft); color: var(--txt); } .banner-erro svg { color: var(--perigo); }
.banner .grow { flex: 1; min-width: 0; }
.offline { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 32px; font-size: 13px; font-weight: 650; background: var(--txt); color: var(--bg); }
.offline svg { width: 16px; height: 16px; }
.error-card { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 24px 20px; }
.error-card .ico { width: 56px; height: 56px; border-radius: 50%; background: var(--bg-elev-2); display: grid; place-items: center; color: var(--txt-2); }

/* ---------- Coach (D1: voz em serifa itálica = IA) ---------- */
.coach-tag { display: inline-flex; align-items: center; gap: 7px; }
.coach-tag i { width: 9px; height: 9px; border-radius: 50%; background: var(--brand-dot); display: block; }
.bubble { border-radius: 20px 20px 20px 6px; padding: 12px 14px; background: var(--bg-elev); box-shadow: var(--sh-1), var(--card-ring); font-size: 15.5px; line-height: 1.45; max-width: 92%; }
.bubble.me { border-radius: 20px 20px 6px 20px; background: var(--txt); color: var(--bg); margin-left: auto; box-shadow: none; max-width: 80%; }
.bubble .voz { display: block; font-size: 19px; margin-bottom: 4px; }
.proposta { border-radius: 18px; padding: 14px; box-shadow: inset 0 0 0 2px var(--txt); background: var(--bg-elev); }

/* ---------- Azulejo de modalidade (pictograma próprio) ---------- */
.tile { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; color: var(--on-mod); background: var(--bg-elev-2); }
.tile svg { width: 26px; height: 26px; }
.tile[data-mod="bike"] { background: var(--mod-bike); } .tile[data-mod="forca"] { background: var(--mod-forca); }
.tile[data-mod="corrida"], .tile[data-mod="caminhada"] { background: var(--mod-corrida); }
.tile[data-mod="descanso"] { background: var(--bg-elev-2); color: var(--txt-2); }

/* ---------- Utilidades ---------- */
.row { display: flex; align-items: center; gap: 12px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stack > * + * { margin-top: var(--gap, 12px); }
.divider { height: 1px; background: var(--brd); border: 0; margin: 0; }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--txt-on-accent);
  font-family: var(--font-display); font-stretch: var(--wdth-head); font-weight: 900; font-size: 18px; flex: none; }
button.avatar { border: 0; padding: 0; }
.grow { flex: 1; min-width: 0; }
.wrap { flex-wrap: wrap; }
.center { text-align: center; }
.grid-2 { display: grid; gap: 16px; } .grid-3 { display: grid; gap: 16px; }
/* Só no celular (< 768) / só a partir do tablet. Ex.: cabeçalho da página que repete o título da topbar → .m-only */
@media (min-width: 768px) { .m-only { display: none !important; } }
@media (max-width: 767.98px) { .d-only { display: none !important; } }
@media (min-width: 768px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Movimento de referência ---------- */
@keyframes slam { 0% { transform: scale(1.18); opacity: 0; } 60% { transform: scale(.98); opacity: 1; } 100% { transform: scale(1); } }
@keyframes cola { 0% { transform: translateY(10px) rotate(-1.2deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes carimbo { 0% { transform: scale(1.9) rotate(-18deg); opacity: 0; } 70% { transform: scale(.94) rotate(-8deg); opacity: 1; } 100% { transform: scale(1) rotate(var(--sig-stamp-rotate)); } }
.anim-slam { animation: slam var(--dur-slam) var(--ease-slam) both; }
.anim-cola { animation: cola var(--dur-cola) var(--ease-out) both; }
.anim-carimbo { animation: carimbo calc(var(--dur-slam) + 80ms) var(--ease-carimbo) both; }
@media (prefers-reduced-motion: reduce) { .anim-slam, .anim-cola, .anim-carimbo { animation: none; } }

/* ==========================================================================
   CASCO DO APP (public/app.php) — DESIGN §9.12, UX §2
   < 768: tab bar inferior + folha "Mais" · 768–1199: sidebar recolhida a ícones · ≥ 1200: sidebar fixa
   ========================================================================== */
html { scroll-padding-top: 84px; }
.app-body { min-height: 100dvh; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: var(--z-alert); background: var(--txt); color: var(--bg); padding: 10px 16px; border-radius: 12px;
  font-weight: var(--fw-ui-bold); text-decoration: none; }
.skip-link:focus { top: 12px; }
.app { display: block; min-height: 100dvh; }
.app > .sidebar { display: none; }
.main { min-width: 0; display: flex; flex-direction: column; min-height: 100dvh; }
.app > .main > .topbar { display: none; }
.content { flex: 1; width: 100%; max-width: calc(var(--container) + 56px); margin: 0 auto; padding: calc(env(safe-area-inset-top, 0px) + 10px) var(--grid-margin)
  calc(70px + env(safe-area-inset-bottom, 0px) + 28px); outline: none; }
.app-offline { position: sticky; top: 0; z-index: var(--z-alert); }
html.is-offline { --offline-h: 32px; }

/* Logo (wordmark em curvas: tinta = currentColor, ponto = --brand-dot) */
.logo { display: block; height: 30px; width: auto; aspect-ratio: 2677 / 922; color: var(--txt); }
.logo .logo-dot { fill: var(--brand-dot); }
.logo-sm { height: 24px; }
.sb-logo { display: inline-flex; text-decoration: none; color: var(--txt); border-radius: 10px; }
.sb-logo .logo-mark { display: none; width: 34px; height: 34px; }
.sb-logo .logo-mark rect { fill: var(--txt); } .sb-logo .logo-mark circle { fill: var(--brand-dot); }
.sb-nav { display: grid; gap: 2px; }
.sb-foot { margin-top: auto; padding-top: 16px; }
.sb-foot .card { padding: 14px 16px; }
.sb-foot .cn { font-size: 44px; }
.sb-foot .row { margin-top: 6px; gap: 10px; }

/* Topbar: título, sincronização, sino, avatar */
.topbar { position: sticky; top: var(--offline-h, 0px); z-index: var(--z-sticky); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); }
.tb-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.tb-menu { position: relative; }
.pop { position: absolute; right: 0; top: calc(100% + 8px); min-width: 260px; max-width: min(380px, calc(100vw - 24px)); background: var(--bg-elev); border-radius: 18px;
  box-shadow: var(--sh-2), var(--card-ring); padding: 8px; z-index: calc(var(--z-sticky) + 5); }
.pop-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 8px; }
.pop-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 10px; border-radius: 12px; border: 0; background: transparent;
  color: var(--txt); text-decoration: none; font-size: 15px; font-weight: 600; text-align: left; }
.pop-item svg { width: 20px; height: 20px; flex: none; color: var(--txt-2); }
.pop-item:hover, .pop-item:focus-visible { background: var(--bg-elev-2); }
.pop-sep { height: 1px; background: var(--brd); margin: 6px 4px; }
.pop .seg { margin: 4px 6px 6px; }
.pop form { margin: 0; }
.pop-who { padding: 8px 10px 10px; display: grid; gap: 1px; }
.pop-who b { font-size: 15px; } .pop-who span { font-size: 13px; color: var(--txt-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Notificações (sino): lista curta; ler = POST com CSRF, depois o link interno */
.notif-panel { width: min(380px, calc(100vw - 24px)); }
.notif-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: min(60dvh, 460px); overflow-y: auto; }
.notif-list form { margin: 0; }
.notif { display: grid; grid-template-columns: 10px 1fr; gap: 10px; width: 100%; padding: 10px; border-radius: 12px; border: 0; background: transparent;
  text-align: left; color: var(--txt); text-decoration: none; }
.notif:hover, .notif:focus-visible { background: var(--bg-elev-2); }
.notif > i { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; background: transparent; }
.notif[data-unread="1"] > i { background: var(--brand-dot); }
.notif b { display: block; font-size: 14.5px; font-weight: 650; line-height: 1.3; }
.notif span { display: block; font-size: 13px; color: var(--txt-2); line-height: 1.35; margin-top: 2px; }
.notif time { display: block; font-size: 12px; color: var(--txt-3); margin-top: 4px; }
.notif-empty { padding: 18px 12px 20px; text-align: center; color: var(--txt-2); font-size: 14px; }

/* Folha "Mais" (celular) */
.more-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; }
.more-list .sb-grp-m { font-stretch: var(--wdth-kicker); font-weight: 800; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-3); padding: 14px 4px 4px; }
.list-row { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 4px; border-bottom: 1px solid var(--brd); color: var(--txt); text-decoration: none;
  font-size: 16px; font-weight: 600; background: none; border-left: 0; border-right: 0; border-top: 0; width: 100%; text-align: left; }
.list-row > svg:first-child { width: 22px; height: 22px; color: var(--txt-2); flex: none; }
.list-row .chev { margin-left: auto; width: 18px; height: 18px; color: var(--txt-3); }
.list-row .count { margin-left: auto; font-size: 12px; font-weight: 800; background: var(--accent); color: var(--txt-on-accent); border-radius: 99px; padding: 1px 7px; }
.list-row .count + .chev { margin-left: 8px; }
.list-row[aria-current="page"] { color: var(--accent-text); }
#mais:target { display: block; }

/* Estados de página do casco (403, 404, erro) */
.state-page { max-width: 520px; margin: 8vh auto 0; }
.state-page .empty-state { padding: 40px 24px; }

/* Casco mínimo (onboarding, "sem menu") */
.app-min .content { max-width: 760px; padding-bottom: 40px; }
.min-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(env(safe-area-inset-top, 0px) + 14px) var(--grid-margin) 0;
  max-width: 760px; margin: 0 auto; width: 100%; }
.min-head form { margin: 0; }
.min-head .sb-logo { min-height: var(--tap); align-items: center; }   /* alvo de 44 px no logo do onboarding */

/* Tablet e desktop: sidebar + topbar; a tab bar e a folha "Mais" somem */
@media (min-width: 768px) {
  .app { display: grid; grid-template-columns: var(--sb-wc) minmax(0, 1fr); }
  .app > .sidebar { display: flex; position: sticky; top: 0; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; }
  .app > .main > .topbar { display: flex; }
  /* h1 da página igual ao título da topbar (app.php marca data-h1="topbar"): fica só para leitor de tela */
  .content[data-h1="topbar"] h1 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0; }
  .tabbar, .more-sheet { display: none !important; }
  .content { padding: 24px 24px 40px; }
  .toasts { bottom: 24px; }
  .app-min { display: block; }
  /* 768–1199: recolhida a ícones (rótulo vai para aria-label + dica no hover/foco) */
  .app > .sidebar { width: var(--sb-wc); align-items: center; padding: 18px 10px; }
  .app > .sidebar .sb-item span, .app > .sidebar .sb-grp, .app > .sidebar .sb-foot, .app > .sidebar .sb-logo .logo { display: none; }
  .app > .sidebar .sb-logo { padding: 2px 0 16px; }
  .app > .sidebar .sb-logo .logo-mark { display: block; }
  .app > .sidebar .sb-item { width: 48px; padding: 0; justify-content: center; }
  .app > .sidebar .sb-item[aria-current="page"]::after { right: 5px; top: 6px; width: 6px; height: 6px; }
  .app > .sidebar .sb-item .count { position: absolute; top: 2px; right: 0; margin: 0; font-size: 10px; padding: 0 5px; }
  .app > .sidebar .sb-sep { display: block; width: 28px; height: 1px; background: var(--brd); margin: 10px 0; }
  .app > .sidebar .sb-item::before { content: attr(data-label); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); white-space: nowrap;
    background: var(--bg-plate); color: var(--txt-plate); font-size: 13px; font-weight: 650; padding: 6px 10px; border-radius: 10px; pointer-events: none; opacity: 0;
    transition: opacity var(--dur-fast) var(--ease-out); z-index: 5; }
  .app > .sidebar .sb-item:hover::before, .app > .sidebar .sb-item:focus-visible::before { opacity: 1; }
  .app > .sidebar { overflow: visible; }
}
.sb-sep { display: none; }
@media (min-width: 1200px) {
  .app { grid-template-columns: var(--sb-w) minmax(0, 1fr); }
  .app > .sidebar { width: var(--sb-w); align-items: stretch; padding: 20px 14px; overflow-y: auto; }
  .app > .sidebar .sb-item span, .app > .sidebar .sb-grp { display: revert; }
  .app > .sidebar .sb-item span { display: inline; }
  .app > .sidebar .sb-grp { display: block; }
  .app > .sidebar .sb-foot { display: block; }
  .app > .sidebar .sb-logo { padding: 4px 10px 18px; }
  .app > .sidebar .sb-logo .logo { display: block; }
  .app > .sidebar .sb-logo .logo-mark { display: none; }
  .app > .sidebar .sb-item { width: auto; padding: 0 12px; justify-content: flex-start; }
  .app > .sidebar .sb-item[aria-current="page"]::after { right: 12px; top: auto; width: 7px; height: 7px; }
  .app > .sidebar .sb-item .count { position: static; margin-left: auto; font-size: 12px; padding: 1px 7px; }
  .app > .sidebar .sb-item[aria-current="page"] .count { margin-right: 14px; }
  .app > .sidebar .sb-item::before { display: none; }
  .app > .sidebar .sb-sep { display: none; }
  .content { padding: 28px 28px 48px; }
}

/* Celular: a folha "Mais" é uma .sheet; sem JS abre por :target */
.more-sheet { display: none; }
.more-sheet:target, .more-sheet.open { display: block; }
.more-sheet .sheet { max-height: 86dvh; }
.more-sheet .sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.more-sheet .sheet-head h2 { margin: 0; }
.more-sheet .seg { margin-top: 6px; }
.more-sheet form { margin: 0; }
.more-sheet .more-out { margin-top: 18px; }

/* ---------- Área de toque ≥ 44 px nos controles compactos (DESIGN §6 e §14, UX §6.1) ----------
   O desenho continua o mesmo (chip de 30–36 px, link de texto, chip de sincronização, avatar, interruptor 52 × 32);
   um pseudo-elemento transparente, centrado e com no mínimo 44 × 44, estende o toque. */
button.chip, a.chip, .link, .sync, .avatar { position: relative; }
button.chip::before, a.chip::before, .link::before, .sync::before, .avatar::before {
  content: ""; position: absolute; top: min(0px, calc(50% - 22px)); bottom: min(0px, calc(50% - 22px));
  left: min(0px, calc(50% - 22px)); right: min(0px, calc(50% - 22px)); }
/* Interruptor: borda transparente de 6 px em cima e embaixo da trilha (o fundo fica só na trilha) e margem negativa: 52 × 44
   de toque, mesma trilha de 52 × 32 no mesmo lugar (sem invadir o vizinho na tabela de avisos). Bolinha e ✓ seguem na trilha. */
button.toggle[role="switch"] { box-sizing: content-box; border: solid transparent; border-width: 6px 0; background-clip: padding-box; margin: -6px 0; }

/* ---------- <details>: o summary em flex perde o triângulo nativo; chevron que gira ao abrir (estado não só por cor) ---------- */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: ""; display: inline-block; vertical-align: middle; flex: none; width: 7px; height: 7px; margin: 0 4px 3px 10px; border: solid currentColor; border-width: 0 2px 2px 0;
  transform: rotate(45deg); transition: transform var(--dur-fast) var(--ease-out); }
details[open] > summary::after { transform: rotate(-135deg); margin-bottom: -3px; }
@media (prefers-reduced-motion: reduce) { details > summary::after { transition: none; } }

/* ==========================================================================
   COMPATIBILIDADE MCentral (ARCHITECTURE §6.3) — páginas admin e herdadas.
   Mesmos nomes do MCentral, desenhados com os tokens do CARTAZ. Preferir os componentes acima no código novo.
   ========================================================================== */
.card-title { font-family: var(--font-display); font-stretch: var(--wdth-head); font-weight: var(--fw-head); font-size: var(--fs-20); line-height: 1.1; }
.card-body { display: grid; gap: 12px; }
.card > .card-head:only-child { margin-bottom: 0; }
.btn-secondary { background: var(--bg-elev-2); color: var(--txt); }
.btn-sm { --h: 36px; padding: 0 12px; font-size: var(--fs-14); border-radius: 10px; }
.btn-sm::before { content: ""; position: absolute; inset: -4px 0; }   /* área de toque efetiva ≥ 44 px */
.btn-sm svg { width: 17px; height: 17px; }
.mc input[type="text"], .mc input[type="email"], .mc input[type="password"], .mc input[type="number"], .mc input[type="search"], .mc input[type="date"],
.mc input[type="tel"], .mc input[type="url"], .mc select, .mc textarea, .fld > input:not([type="checkbox"]):not([type="radio"]):not(.input), .fld > select:not(.input), .fld > textarea:not(.input) {
  width: 100%; min-height: 48px; padding: 0 14px; border-radius: var(--r-field); background: var(--bg-elev); border: 1.5px solid var(--brd-field); font-size: var(--fs-16); color: var(--txt); outline: none; }
.mc textarea, .fld > textarea:not(.input) { padding: 12px 14px; min-height: 96px; }
.mc input:focus, .mc select:focus, .mc textarea:focus, .fld > input:not(.input):focus, .fld > select:not(.input):focus, .fld > textarea:not(.input):focus { border-color: var(--txt); box-shadow: 0 0 0 3px var(--accent-soft); }
.mc label { font-size: var(--fs-14); font-weight: var(--fw-ui-bold); }
/* Tabelas densas (admin) */
.tbl-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 14px; }
.tbl-wrap table, table.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-14); font-variant-numeric: tabular-nums; }
.tbl-wrap thead th, table.tbl thead th { position: sticky; top: 0; background: var(--bg-elev); text-align: left; padding: 10px 12px; border-bottom: 1.5px solid var(--brd-strong);
  font-stretch: var(--wdth-kicker); font-weight: 800; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--txt-2); white-space: nowrap; }
.tbl-wrap tbody td, table.tbl tbody td { padding: 10px 12px; border-bottom: 1px solid var(--brd); vertical-align: middle; }
.tbl-wrap tbody tr:hover td, table.tbl tbody tr:hover td { background: var(--accent-soft); }
.tbl-wrap tbody tr:last-child td { border-bottom: 0; }
.tbl-wrap td.num-col, .tbl-wrap th.num-col { text-align: right; }
/* Badges: palavra sempre junto (estado nunca só por cor) */
.badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 750; white-space: nowrap;
  background: var(--bg-elev-2); color: var(--txt-2); }
.badge-green { background: var(--sucesso-soft); color: var(--sucesso); }
.badge-red { background: var(--perigo-soft); color: var(--perigo); }
.badge-gray { background: var(--bg-elev-2); color: var(--txt-2); }
.badge-blue { background: var(--info-soft); color: var(--info); }
.badge-yellow { background: var(--aviso-soft); color: var(--aviso); }
/* Alertas de formulário/sistema (o cartão de alerta de SAÚDE é o .alerta) */
.alert-wrap:empty { display: none; }
.alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 14px; font-size: 14px; line-height: 1.4; border-left: 4px solid currentColor; background: var(--bg-elev-2); }
.alert svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.a-err { background: var(--perigo-soft); color: var(--perigo); }
.a-ok { background: var(--sucesso-soft); color: var(--sucesso); }
.a-warn { background: var(--aviso-soft); color: var(--aviso); }
.a-info { background: var(--info-soft); color: var(--info); }
.alert > span, .alert > p { color: var(--txt); margin: 0; }
/* Modal MCentral: .modal-overlay(.open) > .modal > .modal-hdr / .modal-body / .modal-footer */
.modal-overlay { position: fixed; inset: 0; background: var(--bg-overlay); z-index: var(--z-sheet); display: none; align-items: center; justify-content: center; padding: 16px; }
.modal-overlay.open { display: flex; }
.modal-overlay .modal { width: min(560px, 100%); max-width: 560px; max-height: calc(100dvh - 32px); overflow-y: auto; padding: 0; display: flex; flex-direction: column; }
.modal-hdr { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 6px; }
.modal-hdr h3 { font-family: var(--font-display); font-stretch: var(--wdth-head); font-weight: var(--fw-head); font-size: var(--fs-24); line-height: 1.05; }
.modal-x { width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--txt-2); display: grid; place-items: center; font-size: 18px; }
.modal-body { padding: 10px 20px; display: grid; gap: 12px; }
.modal-footer { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 20px 18px; flex-wrap: wrap; }
/* Spinner MCentral: <span class="spin"></span> dentro do botão, visível com .on */
.spin { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid currentColor; border-top-color: transparent; animation: spin .8s linear infinite; flex: none; }
.spin.on { display: inline-block; }
@media (prefers-reduced-motion: reduce) { .spin, .btn[aria-busy="true"]::after { animation-duration: 2.4s; } }
/* Paginação (Shape.buildPag) */
.pag-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 0 0; }
.pag-info { font-size: var(--fs-13); color: var(--txt-2); }
.pag-btns { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pag-btns .btn { --h: 40px; min-width: 40px; padding: 0 10px; font-size: 14px; }
.pag-btns .btn[aria-current="page"] { background: var(--txt); color: var(--bg); }
.pag-btns .gap { padding: 0 4px; color: var(--txt-3); }
.pag-jump { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-13); color: var(--txt-2); }
.pag-jump input { width: 64px; min-height: 40px; padding: 0 8px; border-radius: 10px; border: 1.5px solid var(--brd-field); background: var(--bg-elev); color: var(--txt); text-align: center; }
/* Abas (ARCHITECTURE §6.3 .tabs) */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--brd); overflow-x: auto; scrollbar-width: none; }
.tabs > a, .tabs > button { min-height: 44px; padding: 0 14px; border: 0; background: none; color: var(--txt-2); font-weight: 650; font-size: 15px; text-decoration: none;
  display: inline-flex; align-items: center; white-space: nowrap; box-shadow: inset 0 -3px 0 transparent; }
.tabs > [aria-selected="true"], .tabs > [aria-current="page"] { color: var(--txt); box-shadow: inset 0 -3px 0 var(--txt); }
/* .ring (nome antigo do anel de prontidão) = .sun */
.ring { position: relative; display: grid; place-items: center; flex: none; }
.ring > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* ---------- Cartões de compartilhamento (ShapeCards) ---------- */
.sc-preview { display: block; width: 100%; max-width: 360px; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; box-shadow: var(--sh-2), var(--card-ring); background: var(--bg-elev-2); }
.sc-preview > svg { width: 100%; height: 100%; }
.sc-measure { position: fixed; left: -20000px; top: 0; visibility: hidden; pointer-events: none; }

/* ---------- Impressão ---------- */
@media print {
  .sidebar, .topbar, .tabbar, .toasts, .more-sheet, .offline, .skip-link { display: none !important; }
  .app { display: block; } .content { padding: 0; }
  body { background: #fff; color: #000; }
}