/* =====================================================================
   Vila Fit — one stylesheet, organised (UX review, Pedro 01/10/2026)

   1. Tokens          5. Feedback (messages, alerts, empty states, pills)
   2. Base            6. Cards, panels and tables
   3. App shell       7. Data display (indicators, bars, charts)
   4. Controls        8. Areas: dashboard, people, goals, PT, records, hubs
                      9. Phone and small screens

   Colour has a meaning: brand blue for actions and fitness, black for PT, green and red
   only for good / bad, amber for «needs attention». Everything else is white and grey.
   Buttons say what they do (Pedro, 03/10/2026), always the same five looks:
     blue (.button) — the page's main step: fill in, open, preview;
     green ✓ (.button-save) — save, confirm, publish;
     light blue + (.button-add) — create or add something new;
     violet ✎ (.button-edit) — change, define, choose, reopen;
     white (.button-secondary) — go to another page, cancel, filter;
     red outline (.button-danger) — archive, deactivate, discard.
   ===================================================================== */

/* 1. Tokens ----------------------------------------------------------- */
:root {
  --brand: #0068b8;
  --brand-dark: #004a87;
  --brand-deep: #06455f;
  --brand-soft: #e8f1fa;
  --brand-line: #cfe1f2;

  --ink: #14212e;
  --ink-2: #344453;
  --muted: #5b6977;
  --line: #e2e7ed;
  --line-strong: #c8d1db;
  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #f8fafc;

  --pt: #111111;
  --pt-soft: #f2f2f2;

  --ok: #0f7a4f;
  --ok-bg: #e3f4ec;
  --ok-line: #8fd1b0;
  --warn: #9a4a00;
  --warn-bg: #fff4e5;
  --warn-line: #f0b86e;
  --bad: #c0262d;
  --bad-bg: #fde8e8;
  --bad-line: #f1a9ad;

  --edit: #5b3fb8;
  --edit-dark: #46309a;
  --edit-bg: #f1edfc;
  --edit-line: #c9bdf2;

  --focus: #0095da;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow: 0 6px 24px rgba(16, 24, 40, 0.12);
  --touch: 44px;
  --sidebar: 248px;

  /* Legacy names kept for templates and generated HTML */
  --text: var(--ink);
  --border: var(--line);
  --accent: var(--brand);
  --accent-dark: var(--brand-dark);
  --error: var(--bad);
  --error-bg: var(--bad-bg);
  --info-bg: var(--brand-soft);
}

/* 2. Base ------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font, "Segoe UI", system-ui, sans-serif);  /* Inter only (shell.css, 03/11/2026) */
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0 0 12px;
  color: var(--ink);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

h1 { font-size: 1.6rem; font-weight: 750; }
h2 { font-size: 1.2rem; font-weight: 700; }
h3 { font-size: 1rem; font-weight: 700; }

p { margin: 0 0 12px; }

a { color: var(--brand); }
a:hover { color: var(--brand-dark); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

img { max-width: 100%; }

.muted { color: var(--muted); }
.small { font-size: 0.82rem; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.prewrap { white-space: pre-wrap; }
.compact { gap: 8px; }

[hidden] { display: none !important; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 3. App shell -------------------------------------------------------- */
.topbar,
.bottom-nav,
.section-chips,
.sidebar-close,
.sidebar-backdrop {
  display: none;
}

.brand {
  display: inline-block;
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
}

.brand img {
  display: block;
  width: 148px;
  height: auto;
}

.button-link {
  min-height: 36px;
  padding: 4px 14px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-sm);
  background: transparent;
  color: #ffffff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.button-link:hover { background: rgba(255, 255, 255, 0.12); }

.app .content {
  max-width: 1360px;
  margin: 20px 24px 32px calc(var(--sidebar) + 24px);
  padding: 20px 28px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

@media (min-width: 1700px) {
  .app .content {
    margin-left: calc(var(--sidebar) + (100vw - var(--sidebar) - 1360px) / 2);
  }
}

.content:focus { outline: none; }

/* «Voltar»: back to where the person was (Pedro, 03/10/2026) */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  padding: 4px 12px 4px 6px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--brand-dark);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

.back-link:hover { border-color: var(--brand); background: var(--brand-soft); }
.back-link .icon { width: 18px; height: 18px; }

/* Public pages (login, access link) */

.is-public {
  min-height: 100vh;
  background: linear-gradient(160deg, #0a6f96 0%, var(--brand-deep) 70%, #032a3a 100%);
}

.is-public .content {
  max-width: 440px;
  margin: 18px auto 40px;
  padding: 28px 30px;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
}

.is-public .button {
  width: 100%;
  font-size: 1.02rem;
}

.auth-tagline { color: var(--muted); }

.auth-tagline strong {
  display: block;
  color: var(--brand-deep);
  font-size: 1.15rem;
}

/* 4. Controls --------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--touch);
  padding: 9px 18px;
  border: 1px solid var(--brand);
  border-radius: 10px;
  background: var(--brand);
  color: #ffffff;
  font: inherit;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.button:hover {
  border-color: var(--brand-dark);
  background: var(--brand-dark);
  color: #ffffff;
}

.button:active { transform: translateY(1px); }

.button-secondary {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--brand-dark);
}

.button-secondary:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-dark);
}

.button-danger {
  border-color: var(--bad-line);
  background: var(--surface);
  color: var(--bad);
}

.button-danger:hover {
  border-color: var(--bad);
  background: var(--bad-bg);
  color: var(--bad);
}

/* Save / confirm: green with a tick */
.button-save { border-color: var(--ok); background: var(--ok); color: #ffffff; }
.button-save:hover { border-color: #0a5c3b; background: #0a5c3b; color: #ffffff; }
.button-save::before { content: "✓"; content: "✓" / ""; font-weight: 800; }

/* Create / add: light blue, the label starts with «+» */
.button-add { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); }
.button-add:hover { border-color: var(--brand-dark); background: var(--brand-line); color: var(--brand-dark); }

/* Change / define: violet with a pencil */
.button-edit { border-color: var(--edit-line); background: var(--edit-bg); color: var(--edit); }
.button-edit:hover { border-color: var(--edit); background: #e4dcfa; color: var(--edit-dark); }
.button-edit::before { content: "✎"; content: "✎" / ""; }

.button-small { min-height: 32px; padding: 4px 10px; font-size: 0.82rem; border-radius: 8px; }
.button[aria-expanded="true"] { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.22); }

/* The page's top right: the month (or year) first, the page's buttons right below it
   (Pedro, 03/10/2026: «todos os botões … no canto superior direito por baixo do mês»). */
.head-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  margin-left: auto;
}

.head-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin: 0; }
.head-actions form { margin: 0; }
.person-head { align-items: flex-start; }
.help-buttons .button { cursor: default; margin: 2px 0; }
.person-head .person-line { margin: 4px 0 0; }

.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--bad);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.more-link {
  color: var(--brand);
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}

.more-link:hover { text-decoration: underline; }

.chip-link {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 4px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.88rem;
  text-decoration: none;
  white-space: nowrap;
}

.chip-link:hover { border-color: var(--brand); color: var(--brand-dark); }
.chip-link.is-done { border-color: var(--ok-line); background: var(--ok-bg); color: var(--ok); }
.chip-link.is-current { border-color: var(--brand); background: var(--brand); color: #ffffff; font-weight: 700; }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* What opens below a button or a line, without leaving the page (Pedro, 03/10/2026) */
.inline-panel {
  margin: 0 0 16px;
  padding: 0 16px 16px;
  border: 1px solid var(--brand-line);
  border-left: 5px solid var(--brand);
  border-radius: var(--radius);
  background: var(--surface);
  list-style: none;
}

li.inline-panel { margin: 6px 0 12px; }
tr.inline-panel > td { padding: 0 12px 12px; border-left: 5px solid var(--brand); background: var(--surface); }

.inline-panel-bar { display: flex; justify-content: flex-end; padding-top: 8px; }

.inline-panel-close {
  min-height: 36px;
  padding: 4px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

.inline-panel-close:hover { background: var(--brand-line); }
.inline-panel-body:focus { outline: none; }
.inline-panel-body h1 { margin-top: 0; font-size: 1.3rem; }
.inline-panel-body .page-body > :first-child { margin-top: 0; }
.inline-panel.is-loading,
body.is-loading .content { opacity: 0.6; transition: opacity 0.15s; }
.actions form { margin: 0; }

/* Segmented control (unit, month, year) */
.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
}

.segmented a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 6px 14px;
  color: var(--brand-dark);
  font-weight: 600;
  text-decoration: none;
}

.segmented a + a { border-left: 1px solid var(--line); }
.segmented a:hover { background: var(--brand-soft); }

.segmented a[aria-current="true"] {
  background: var(--brand);
  color: #ffffff;
}

.segmented-label {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-right: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.85rem;
}

/* Filter tabs inside a page (actions, history) */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
}

.tabs a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 4px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink-2);
  font-weight: 600;
  text-decoration: none;
}

.tabs a.active,
.tabs a[aria-current="page"] {
  border-color: var(--brand);
  background: var(--brand);
  color: #ffffff;
}

.week-nav,
.year-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 0 0 12px;
}

.page-head .year-nav { margin: 0; }
.compare-toggle { align-items: center; }

.record-switcher {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 16px;
}

/* Forms */
.form.narrow,
.narrow {
  max-width: 460px;
}

.field { margin-bottom: 16px; }

.field label,
.field-group legend {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
  font-weight: 650;
}

.field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.field select,
.field textarea,
.entry-input input,
.entry-input select,
.entry-input textarea,
.inline-form input,
.inline-form select,
.filters input,
.filters select,
.field-rename input[type="text"],
.pay-pause-form input:not([type="radio"]) {
  width: 100%;
  min-height: var(--touch);
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

.field textarea { min-height: 96px; }

.field input:focus,
.field select:focus,
.field textarea:focus,
.entry-input input:focus,
.inline-form input:focus,
.filters input:focus,
.filters select:focus {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(0, 149, 218, 0.2);
  outline: none;
}

.field input[readonly] {
  background: var(--surface-2);
  color: var(--ink-2);
}

.field-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
}

.field-check label {
  margin: 0;
  font-weight: 500;
}

.field-check input,
.field-group input[type="radio"] {
  width: 20px;
  height: 20px;
  accent-color: var(--brand);
}

.field-group {
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}

.field-group .field-check { margin-bottom: 4px; }

.help {
  display: block;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.field-error {
  margin: 6px 0 0;
  color: var(--bad);
  font-size: 0.92rem;
  font-weight: 600;
}

.has-error input,
.field .field-error ~ input { border-color: var(--bad); }

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin: 0 0 16px;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--surface-2);
}

.filters .field {
  flex: 1 1 170px;
  margin: 0;
}

.filters .field-submit { flex: 0 0 auto; }

.inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.inline-form input { width: auto; }

/* 5. Feedback --------------------------------------------------------- */
.messages {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.message {
  margin-bottom: 8px;
  padding: 10px 14px;
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
  color: var(--ink);
  font-weight: 600;
}

.message-success { border-left-color: var(--ok); background: var(--ok-bg); color: #0b4f33; }
.message-error { border-left-color: var(--bad); background: var(--bad-bg); color: #8b1a20; }
.message-warning { border-left-color: var(--warn); background: var(--warn-bg); color: var(--warn); }

.form-error,
.alert-box {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-left: 4px solid var(--bad);
  border-radius: var(--radius-sm);
  background: var(--bad-bg);
  color: #8b1a20;
}

.form-error p { margin: 0; }
.alert-box ul { margin: 4px 0 0; padding-left: 18px; }

.dash-alert {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-left: 4px solid var(--warn);
  border-radius: var(--radius-sm);
  background: var(--warn-bg);
  color: var(--warn);
  font-size: 0.94rem;
}

.page-hint,
.period-note {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 0.92rem;
}

.page-hint { border-left: 4px solid var(--brand-line); }

.warning-text {
  margin: 6px 0 0;
  color: var(--warn);
  font-size: 0.92rem;
}

.empty {
  margin: 0;
  padding: 18px 16px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--muted);
  text-align: center;
}

.badge,
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--pt-soft);
  color: var(--ink-2);
  font-size: 0.8rem;
  font-weight: 650;
  line-height: 1.5;
  white-space: nowrap;
}

.pill-ok { border-color: var(--ok-line); background: var(--ok-bg); color: var(--ok); }
.pill-warn,
.badge-warning { border-color: var(--warn-line); background: var(--warn-bg); color: var(--warn); }
.pill-alert,
.badge-danger { border-color: var(--bad-line); background: var(--bad-bg); color: var(--bad); }
.pill-info { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand-dark); }

.chip {
  display: inline-block;
  padding: 0 6px;
  border-radius: 8px;
  background: var(--warn-bg);
  color: var(--warn);
  font-size: 0.72rem;
  vertical-align: middle;
}

.status { font-size: 0.85rem; font-weight: 650; }
.status-reached,
.status-within,
.tone-good { color: var(--ok); }
.status-exceeded,
.status-missed,
.tone-bad { color: var(--bad); }
.tone-neutral { color: var(--muted); }

.private-box {
  padding: 12px 14px;
  border: 1px dashed var(--warn);
  border-radius: var(--radius);
  background: #fffaf2;
}

.link-box {
  padding: 12px;
  border: 1px dashed var(--brand);
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
  overflow-wrap: anywhere;
}

/* 6. Cards, panels and tables ----------------------------------------- */
.panel,
.dash-panel,
.area,
.sheet-block,
.reflection,
.summary-card,
.overview-stat,
.hub-card,
.goal-card,
.hero-card,
.chart-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.panel,
.area,
.sheet-block { margin: 18px 0; padding: 16px 18px; }
.dash-panel { padding: 14px 16px; }
.panel h2 { font-size: 1.1rem; }

.section { margin-top: 24px; }
.section .page-head h2 { margin: 0; }

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 12px;
}

.page-head h1,
.page-head h2 { margin: 0; }

.h1-sub {
  color: var(--muted);
  font-size: 1rem;
  font-weight: 500;
}

.person-line { margin: -4px 0 12px; }

.panel-title {
  display: inline-block;
  margin: 0 0 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--brand);
  color: #ffffff;
  font-size: 0.86rem;
  font-weight: 800;
}

.theme-pt .panel-title { background: var(--pt); }
.dash-panel.theme-pt { border: 2px solid var(--pt); }

.area-title {
  margin: 0 0 12px;
  padding-left: 10px;
  border-left: 5px solid var(--brand);
  font-size: 1.2rem;
}

.group-title {
  margin: 0 0 6px;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--brand);
  font-size: 1.05rem;
}

.shortcut-title {
  margin: 22px 0 8px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 16px;
  margin: 0;
}

.facts dt { color: var(--muted); font-weight: 600; }
.facts dd { margin: 0; }

.note {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.note p { margin: 0; }

.history { padding-left: 18px; }
.history li { margin-bottom: 8px; }

.todo-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.todo-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

details > summary {
  cursor: pointer;
  font-weight: 650;
}

.more-details {
  margin-top: 24px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.more-details > summary {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--brand);
}

/* Tables: one look, with variants by area */
.table-wrap {
  position: relative; /* hidden labels inside stay in the table, never widen the page */
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table,
.people-table,
.pay-table,
.history-table,
.goal-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.table th,
.table td,
.people-table th,
.people-table td,
.pay-table th,
.pay-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.table thead th,
.people-table thead th,
.pay-table thead th {
  border-bottom: 2px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 0.86rem;
  font-weight: 750;
  white-space: nowrap;
}

.table tbody th,
.people-table tbody th,
.pay-table tbody th {
  font-weight: 650;
}

.table tbody tr:hover,
.people-table tbody tr:hover,
.pay-table tbody tr:hover { background: var(--surface-2); }

.table .num,
.people-table .num,
.pay-table .num { text-align: right; font-variant-numeric: tabular-nums; }

.table tfoot th,
.table tfoot td,
.ledger tfoot th,
.ledger tfoot td {
  border-top: 2px solid var(--ink);
  background: var(--surface-2);
  font-weight: 700;
}

.kpi-table th[scope="row"] { font-weight: 500; }
.kpi-table td strong { font-size: 1.05rem; }
.ledger tbody tr.is-current { background: var(--brand-soft); }

.grid-table .grid-group th {
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: 0.86rem;
}

.grid-table .is-empty-row th,
.grid-table .is-empty-row td { color: #8a96a3; }

/* 7. Data display ----------------------------------------------------- */
.progress,
.dash-bar,
.mini-bar {
  height: 8px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--line);
}

.mini-bar {
  display: inline-block;
  width: 60px;
  height: 7px;
}

.progress span,
.dash-bar span,
.mini-bar span {
  display: block;
  height: 100%;
  background: var(--brand);
}

.dash-bar { margin-top: 4px; }
.progress.is-ok span,
.dash-bar.is-ok span { background: var(--ok); }
.progress.is-warn span { background: #d97706; }
.progress.is-alert span { background: var(--bad); }

.progress-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

.progress-line progress {
  flex: 1;
  height: 10px;
  accent-color: var(--brand);
}

.inline-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 120px;
}

.inline-bar i {
  display: block;
  height: 10px;
  border-radius: 5px;
  background: var(--brand);
}

.inline-bar.alt i { background: #7db9e8; }
.inline-bar span { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledger .inline-bar i { background: #9aa5b1; }
.ledger .inline-bar.down i { background: var(--bad); }
.ledger .inline-bar.up i { background: var(--ok); }

.trend { font-size: 1rem; vertical-align: middle; }
.trend.up { color: var(--ok); }
.trend.down { color: var(--bad); }
.trend.tone-neutral { color: #7b8794; }

/* Summary tiles (stats include, overview) */
.overview-stats,
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: 10px;
  margin: 4px 0 18px;
}

.overview-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-left: 5px solid var(--line-strong);
  color: var(--ink);
  text-decoration: none;
}

a.overview-stat:hover { border-color: var(--brand); }
.overview-stat.is-ok { border-left-color: var(--ok); }
.overview-stat.is-warn { border-left-color: #d97706; }
.overview-stat.is-alert { border-left-color: var(--bad); background: #fffafa; }

.overview-label {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.overview-stat span:last-child { color: var(--muted); font-size: 0.86rem; }

.stat-value {
  color: var(--ink);
  font-size: 1.6rem;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.overview-stat.is-alert .stat-value { color: var(--bad); }
.overview-stat.is-warn .stat-value { color: #b54708; }
.overview-stat.is-ok .stat-value { color: var(--ok); }

.summary-grid,
.summary-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 10px;
}

.summary-row { margin-bottom: 8px; }
.summary-card { padding: 12px 14px; }
.summary-name { margin: 0; color: var(--muted); font-size: 0.9rem; }

.summary-value {
  margin: 4px 0 0;
  font-size: 1.4rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.summary-card.is-empty .summary-value { color: var(--muted); font-size: 1rem; font-weight: 500; }
.summary-prev { margin: 2px 0 0; color: var(--muted); font-size: 0.86rem; }
.summary-goal { margin: 4px 0 0; font-size: 0.86rem; font-weight: 650; }
.tier-card .progress { margin: 6px 0 2px; }

.hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.area .hero-grid { margin-bottom: 14px; }

.hero-card {
  padding: 16px;
  border-top: 4px solid var(--brand);
}

.hero-card h3 { margin: 0; color: var(--muted); font-size: 0.95rem; }

.hero-value {
  margin: 4px 0;
  color: var(--brand-deep);
  font-size: 2.3rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.hero-sub { margin: 0; color: var(--muted); font-size: 0.88rem; }

/* Charts drawn on the server */
.chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.chart-card {
  margin: 0;
  padding: 10px 12px 4px;
}

.chart-card figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  font-size: 0.9rem;
}

.legend,
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  color: var(--ink-2);
  font-size: 0.8rem;
}

.chart-legend { margin: 4px 0 12px; color: var(--muted); }

.swatch-bar,
.swatch-line {
  display: inline-block;
  margin-right: 4px;
  vertical-align: middle;
  background: var(--c);
}

.swatch-bar { width: 10px; height: 10px; border-radius: 2px; }
.swatch-line { width: 16px; height: 3px; border-radius: 2px; }

.combo-chart { display: block; width: 100%; height: auto; }
.combo-chart .grid { stroke: #e4e7eb; stroke-width: 1; }
.combo-chart .axis { fill: #6b7785; font-family: inherit; font-size: 13px; }
.combo-chart .axis-line { fill: #b4232f; }

.goal-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  white-space: nowrap;
}

/* 8a. Dashboard -------------------------------------------------------- */
.dash-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.dash-head h1 { margin: 0; font-size: 1.5rem; }
.dash-head h1 span { color: var(--muted); font-weight: 500; }

/* PT of the month on its Resumo */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; }
.kpi-mini { padding: 10px 14px; border: 1px solid #d4d4d4; border-left: 5px solid var(--pt); border-radius: var(--radius); background: var(--surface); }
.kpi-mini span { display: block; color: #333333; font-size: 0.82rem; font-weight: 700; }
.kpi-mini strong { font-size: 1.6rem; }

.dash-foot { margin: 10px 0 0; color: var(--muted); font-size: 0.82rem; }

/* 8b. People (Objetivos / Briefings) ----------------------------------- */
.people-table tbody tr { border-left: 4px solid var(--ok); }
.people-table tbody tr.is-warn { border-left-color: #d97706; }
.people-table tbody tr.is-alert { border-left-color: var(--bad); }
.people-table tbody tr.is-off { border-left-color: var(--line-strong); color: var(--muted); }
.people-table tbody th a { color: #06213a; text-decoration: none; }
.people-table tbody th a:hover { color: var(--brand); text-decoration: underline; }
.people-table tbody th small { display: block; color: var(--muted); font-weight: 500; }

.row-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 140px;
}

.row-progress .progress { flex: 1; }

/* In-page jump links on a person's page */
.page-sections {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 6px;
  margin: 0 -4px 16px;
  padding: 8px 4px;
  overflow-x: auto;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.page-sections a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 4px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 0.9rem;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}

.page-sections a:hover { border-color: var(--brand); color: var(--brand-dark); }

[id] { scroll-margin-top: 64px; }

/* Fitness: the club's blue instead of PT's black */

/* Dashboard month by month: the two same months (last year / this year) stand out */
.goal-matrix--span th.is-homologous { background: var(--brand-dark); color: #ffffff; }
.goal-matrix--span td.is-homologous { box-shadow: inset 0 0 0 2px var(--brand); }
.goal-matrix.goal-matrix--span { border-spacing: 3px; }
.goal-matrix.goal-matrix--span tbody th { white-space: normal; min-width: 120px; }

/* Goals (old monthly cards and the goals page) */
.goal-grid,
.goal-grid-compact {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.goal-grid-compact { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }

.goal-card { padding: 12px 14px; border-left: 4px solid var(--line-strong); }
.goal-card.goal-reached,
.goal-card.goal-within { border-left-color: var(--ok); }
.goal-card.goal-exceeded,
.goal-card.goal-missed { border-left-color: var(--bad); }

.goal-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 8px;
}

.goal-head h3 { margin: 0; font-size: 1rem; }

.goal-figures {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 2px 12px;
  margin: 8px 0;
}

.goal-figures dt { color: var(--muted); }
.goal-figures dd { margin: 0; }

.goal-tile {
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--surface-2);
}

.goal-line { margin-bottom: 10px; }

.goal-line-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.92rem;
}

.goal-line .help { margin: 2px 0 0; font-size: 0.82rem; }

/* Goals month by month: one strip per goal, one grid for the team */

.goal-track-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  margin-bottom: 10px;
}

.goal-track-head .panel-title { margin: 0; }
.goal-track-head .more-link { margin-left: auto; }

/* State colours shared by goals (strip, grid, legend) */
.is-reached { border-color: #138a5b; background: var(--ok-bg); color: #0b5c3a; }
.is-missed { border-color: var(--bad); background: var(--bad-bg); color: #9b1c1c; }
.is-in_progress { border-color: #d97706; background: var(--warn-bg); color: #7c4a03; }
.is-no_goal { border-color: var(--line-strong); border-style: dashed; background: var(--surface); color: var(--muted); }
.is-no_data { border-color: #d4d4d4; background: var(--pt-soft); color: #555555; }
.is-future { border-color: #e1e1e1; border-style: dashed; background: #fafafa; color: #6b7280; }

.goal-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  font-size: 0.84rem;
}

.goal-chip { padding: 2px 10px; border: 2px solid; border-radius: 999px; font-weight: 700; }

.goal-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }

.goal-tab {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 16px;
  border: 2px solid;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
}

.goal-tab--fitness { border-color: var(--brand); color: var(--brand); }
.goal-tab--fitness[aria-current="page"] { background: var(--brand); color: #ffffff; }

.goal-matrix { border-collapse: separate; border-spacing: 4px; font-size: 0.86rem; }

.goal-matrix thead th {
  padding: 5px 4px;
  border-radius: 6px;
  background: var(--pt);
  color: #ffffff;
  font-size: 0.86rem;
  font-weight: 800;
}

.goal-matrix--fitness thead th { background: var(--brand); }
.goal-matrix tbody th { padding: 6px 8px; text-align: left; white-space: nowrap; }
.goal-matrix tbody th a { color: var(--pt); font-weight: 700; text-decoration: none; }
.goal-matrix tbody th a:hover { text-decoration: underline; }
.goal-matrix tbody th small { display: block; color: #555555; }
.goal-matrix tbody th .more-link { display: block; margin-top: 2px; font-size: 0.75rem; }

.goal-matrix .goal-cell {
  display: table-cell;
  min-width: 58px;
  padding: 6px 4px;
  border: 2px solid;
  border-radius: 8px;
  text-align: center;
}

.goal-matrix .goal-cell strong { display: block; font-size: 1rem; }
.goal-matrix .goal-cell small { font-size: 0.8rem; font-weight: 600; }

.goal-score,
.goal-ytd {
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--pt-soft);
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

.goal-score { font-size: 1.1rem; }
.goal-score.is-good { color: var(--ok); }
.goal-score.is-warn { color: #b45309; }
.goal-score.is-bad { color: var(--bad); }

/* 8c. PT: clients month by month, payments, price list --------------- */
.client-history,
.pay-block { margin: 0 0 16px; }

.history-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin: 0;
  color: #333333;
  font-size: 0.82rem;
}

.history-legend .hs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  margin-left: 6px;
  padding: 0 4px;
  border-radius: 5px;
}

.history-table { border-collapse: separate; border-spacing: 3px; font-size: 0.85rem; }

.history-table thead th {
  padding: 4px;
  border-radius: 5px;
  background: var(--pt);
  color: #ffffff;
  font-size: 0.86rem;
  font-weight: 800;
}

.history-table tbody th { padding: 4px 8px; text-align: left; white-space: nowrap; }
.history-table tbody th a { color: var(--pt); font-weight: 700; text-decoration: none; }
.history-table tbody th a:hover { text-decoration: underline; }

.hs {
  position: relative;
  min-width: 30px;
  height: 28px;
  border: 2px solid transparent;
  border-radius: 6px;
  font-weight: 800;
  text-align: center;
}

.hs.is-paid { border-color: var(--ok-line); background: var(--ok-bg); color: #0b5c3a; font-size: 0.8rem; }
.hs.is-paid.is-no-package { border-style: dashed; font-style: italic; }
.hs.is-unpaid { border-color: var(--bad); background: var(--surface); color: var(--bad); }
.hs.is-suspended { background: #bdbdbd; color: var(--pt); }
.hs.is-makeup { border-color: var(--pt); border-style: dashed; background: var(--surface); color: var(--pt); }
.hs.is-cancelled { background: var(--bad); color: #ffffff; }
.hs.is-out { background: #f4f4f4; }
.hs.is-other { background: #f4f4f4; color: #8a8a8a; }
.hs.is-future { border-color: #ececec; border-style: dashed; background: transparent; }

.hs.is-new::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0b5c3a;
}

.history-total { padding: 0 8px; color: #0b5c3a; font-weight: 800; text-align: center; white-space: nowrap; }

.history-table tfoot th,
.history-month-total {
  padding: 6px 4px;
  border-radius: 6px;
  background: var(--pt);
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
}

.history-table tfoot th { padding: 6px 8px; text-align: left; }
.history-grand { font-weight: 600; }

.history-now {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f0f0f0;
  color: var(--pt);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.history-now.is-paid,
.history-now.is-paid-green { background: var(--ok-bg); color: #0b5c3a; }
.history-now.is-unpaid,
.history-now.is-cancelled { background: var(--bad-bg); color: #9b1c1c; }
.history-now.is-suspended { background: #bdbdbd; color: var(--pt); }
.history-now.is-makeup { background: var(--surface); color: var(--pt); border: 1px dashed var(--pt); }

/* Suspensão / reposição from the payments page: a small panel that opens under the row */
.pay-action { white-space: nowrap; }
.pay-pause { display: inline-block; margin-left: 6px; vertical-align: top; }
.pay-pause > summary { list-style: none; cursor: pointer; }
.pay-pause > summary::-webkit-details-marker { display: none; }
.pay-pause[open] > summary { background: var(--pt); color: #fff; border-color: var(--pt); }
.pay-pause-form {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding: 12px;
  min-width: 240px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  white-space: normal;
  text-align: left;
}
.pay-pause-form fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: 6px; }
.pay-pause-form legend { font-weight: 700; margin-bottom: 4px; }
.pay-pause-form p { margin: 0; }
.pay-pause-form fieldset label { display: flex; align-items: center; gap: 8px; min-height: var(--touch); }
.pay-pause-form small { color: var(--muted); }

/* A client's actions, the same in every page (14/10/2026): one row of chips in a fixed order — + Pagamento,
   + Sessão, the state, Cancelar PT last. The form opens as a box under its chip, over the rows below, so
   the row never moves; one open at a time (pay_forms.js). */
.client-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.client-actions .pay-pause { position: relative; margin-left: 0; }
.client-actions .pay-pause[open] > .pay-pause-form {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  width: 300px;
  margin-top: 0;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
}
.client-actions .chip-link.chip-link--danger { color: var(--bad); }
.client-actions .chip-link.chip-link--danger:hover { border-color: var(--bad); color: var(--bad); }
.client-actions .pay-pause[open] > .chip-link { background: var(--pt); border-color: var(--pt); color: #fff; }
.client-actions .pay-pause[open] > .chip-link.chip-link--danger { background: var(--bad); border-color: var(--bad); }
.history-actions { min-width: 300px; }
/* Recursos humanos › Banco de horas */
.bank-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin: 0 0 18px; }
.bank-form > summary { list-style: none; cursor: pointer; }
.bank-form > summary::-webkit-details-marker { display: none; }
.bank-form[open] { flex-basis: 100%; }
.bank-form[open] > summary { margin-bottom: 8px; }
.bank-form .form { max-width: 560px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.hour-decision { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hour-decision input { min-width: 12em; min-height: var(--touch); padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 8px; }
/* Definições › Valores e meritocracia */
.rates-group { margin-bottom: 16px; }
.rates-group th { font-weight: 600; }
.rate-input { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.rate-input input { width: 7.5em; min-height: var(--touch); padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 8px; text-align: right; }
.rate-input input[readonly] { background: var(--surface-2, #f4f5f7); }
/* While a box is open its table does not clip it (the last rows too). */
.table-wrap:has(.client-actions .pay-pause[open]) { overflow: visible; }

.pay-summary { margin: 0; color: #222222; font-size: 0.94rem; }
.pay-ok,
.pay-hours { color: #0b5c3a; }
.pay-missing { color: var(--bad); font-weight: 700; }
.pay-warning { color: var(--warn, #9a6700); font-size: .8em; white-space: nowrap; }
.pay-table thead th { border-bottom-color: var(--pt); }
.pay-table tbody th a { color: var(--pt); font-weight: 700; text-decoration: none; }
.pay-table tbody th small { color: #666666; font-weight: 500; }
.pay-table .pay-hours { font-weight: 800; }

.price-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 4px 0 14px;
  padding: 10px 14px;
  border-left: 5px solid #0b5c3a;
  border-radius: var(--radius-sm);
  background: var(--ok-bg);
  color: #0b5c3a;
}

.price-preview strong { font-size: 1.2rem; }

/* PT page of one instructor (order of the «Report PT» sheet) */
.sheet-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 1.1rem;
}

.step {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--brand);
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
}

.week-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.week-column {
  min-height: 70px;
  padding: 8px 10px;
  border-radius: var(--radius);
  background: var(--surface-2);
}

.week-head { margin: 0 0 6px; font-size: 0.86rem; }

.action-chip {
  display: block;
  margin-bottom: 4px;
  padding: 6px 8px;
  border-left: 3px solid var(--brand);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.86rem;
  text-decoration: none;
}

.action-chip.is-late { border-left-color: var(--bad); }
.action-chip.is-done { border-left-color: var(--ok); color: var(--muted); }

/* 8d. Records (weekly numbers) ----------------------------------------- */

.entry-section {
  margin: 0 0 16px;
  padding: 14px 16px;
}

.entry-section legend { padding: 0 6px; font-weight: 750; }

.entry-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 240px);
  gap: 4px 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.entry-row label { font-weight: 650; }
.entry-input .help { font-size: 0.84rem; }
.entry-input .pill { margin-right: 4px; }

/* Development conversation (sheet questions) */
.reflection { margin: 10px 0; padding: 10px 14px; background: var(--surface-2); }

.reflection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 10px;
}

.reflection-col h3 { margin: 0 0 8px; color: var(--brand-dark); font-size: 0.95rem; }
.reflection-q { margin: 8px 0 2px; font-size: 0.86rem; font-weight: 650; }
.reflection-a { margin: 0; font-size: 0.92rem; }

/* 8e. Hubs (Gestão, PT) ------------------------------------------------- */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.hub-grid.compact { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }

.hub-card {
  display: block;
  padding: 14px 16px;
  color: var(--ink);
  text-decoration: none;
}

.hub-grid.compact .hub-card { padding: 12px 14px; }
.hub-card:hover,
.hub-card:focus-visible { border-color: var(--brand); background: var(--brand-soft); color: var(--ink); }
.hub-card strong { display: block; color: var(--brand-dark); font-size: 1.02rem; }
.hub-card span { color: var(--muted); font-size: 0.9rem; }

/* Pages that show a lot side by side use the full width */
.content:has(.dash-head){
  max-width: 1440px;
}

/* Resumo of a department (Pedro, 02/10/2026): month vs goal, OKR, actions, records */
.summary-block-title { margin: 0 0 6px; font-size: 1rem; }
.summary-block-title small { color: var(--muted); font-weight: 500; }

.good-news { margin: 0; color: var(--ok); font-weight: 600; }

/* A person's page (Acompanhamento): the month vs its goal on top, then tabs */

.lead-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.lead-form select { width: auto; min-width: 200px; flex: 1 1 200px; }
.position-access { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.inline-remove { display: inline; margin: 0 0 0 auto; }
.inline-remove .link-button { min-height: var(--touch); }
.position-form .com-fields { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

/* Commercial: the three numbers, the funnel with reference ratios, the week */
.com-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 0 0 14px; }
.com-card { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.com-card h2 { margin: 0 0 4px; color: var(--muted); font-size: 0.86rem; font-weight: 800; }
.com-value { margin: 0 0 8px; color: var(--ink); font-size: 2rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.com-value span { color: var(--muted); font-size: 1.1rem; font-weight: 600; }
.com-note { margin: 6px 0 0; color: var(--muted); font-size: 0.86rem; }
.com-card .progress { display: block; }
.pay-table .goal-chip { display: inline-block; white-space: nowrap; }

.com-funnel { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.com-funnel li {
  display: flex; flex-direction: column; align-items: center; min-width: 92px; padding: 8px 10px;
  border-radius: var(--radius-sm); background: var(--brand-soft); color: var(--brand-dark); font-size: 0.8rem;
}
.com-funnel li strong { color: var(--ink); font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.com-funnel li small { color: var(--muted); }
.com-levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.com-level { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.com-level p { margin: 0; }
.com-level-title { font-weight: 700; }
.com-level-title small { color: var(--muted); font-weight: 500; }
.com-level-value { margin: 6px 0 !important; font-size: 1.3rem; }
.com-level-ref { color: var(--muted); font-size: 0.8rem; }
.level { display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 800; vertical-align: middle; }
.level-top { background: var(--ok); color: #ffffff; }
.level-bom { background: var(--ok-bg); color: #0b5c3a; }
.level-razoavel { background: var(--warn-bg); color: #7c4a03; }
.level-abaixo { background: var(--bad-bg); color: #9b1c1c; }

.com-origins { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.com-origins li { display: grid; grid-template-columns: 1fr 70px 32px; align-items: center; gap: 10px; font-size: 0.9rem; }
.com-origins strong { text-align: right; font-variant-numeric: tabular-nums; }
.com-origins .mini-bar { width: 70px; }

.com-group { margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); }
.com-group legend { padding: 0 6px; font-weight: 800; }
.com-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: 8px 14px; align-items: end; }
.com-fields .field { margin: 0; }

/* «Definir objetivos» of one indicator: the twelve months side by side, as a line of Excel (Pedro,
   14/10/2026). On a phone the months wrap four per line, in order, never sideways. */
.goal-row-wrap { margin: 8px 0 14px; }
.goal-edit { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.goal-edit th, .goal-edit td { padding: 3px; border: 1px solid var(--line); text-align: center; }
.goal-edit thead th { background: var(--surface-2); font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.goal-edit thead th.is-closed { color: var(--muted); font-weight: 400; }
.goal-edit tbody th { text-align: left; font-weight: 700; white-space: nowrap; padding: 4px 8px; }
.goal-edit tbody th small { display: block; font-weight: 400; color: var(--muted); }
.goal-edit tbody th .button { margin-top: 4px; }
.goal-edit input[type="text"] { width: 4.2em; min-height: var(--touch); padding: 4px 6px; border: 1px solid var(--line-strong); border-radius: 6px; font: inherit; text-align: right; }
.goal-edit td.is-closed, .goal-edit td.is-locked { background: var(--surface-2); }
.goal-edit td.is-locked { color: var(--muted); font-size: 0.9rem; }
.goal-edit td.is-locked span { display: block; }
.goal-edit-fix { font-size: 0.75rem; }
.goal-edit td.is-error { background: var(--bad-bg); }
.goal-edit td.is-error input[type="text"] { border-color: var(--bad); }
.goal-edit-all th, .goal-edit-all td { background: var(--warn-bg); }
.goal-edit-repeat { display: block; font-weight: 400; font-size: 0.8rem; }
.goal-warning { border-left: 3px solid var(--warn-line); }
.goal-row { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.goal-row th, .goal-row td { padding: 4px; border: 1px solid var(--line); text-align: center; }
.goal-row thead th { background: var(--surface-2, #f3f4f6); font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.goal-row thead th:first-child, .goal-row tbody th { width: 110px; }
.goal-row tbody th { text-align: left; font-weight: 700; }
.goal-row tbody th small { display: block; font-weight: 400; color: var(--muted); }
.goal-row input { width: 100%; min-width: 0; min-height: var(--touch); padding: 4px 6px; border: 1px solid var(--line-strong); border-radius: 6px; font: inherit; text-align: right; }
.goal-row td.is-error { background: #fef3f2; }
.goal-row td.is-error input { border-color: #b42318; }
@media (max-width: 760px) {
  .goal-row thead { display: none; }
  .goal-row, .goal-row tbody { display: block; }
  .goal-row tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .goal-row tbody th { grid-column: 1 / -1; width: auto; border: 0; padding: 0; }
  .goal-row td { border: 0; padding: 0; }
  .goal-row td::before { content: attr(data-label); display: block; font-size: 0.75rem; font-weight: 700; color: var(--muted); }
}

/* Administrative: the month's figures and the checklist */
.com-warn { color: var(--warn) !important; font-weight: 700; }
.admin-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 0; }
.admin-figures div { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.admin-figures dt { color: var(--muted); font-size: 0.82rem; font-weight: 700; }
.admin-figures dd { margin: 4px 0 0; font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.admin-figures dd.is-negative { color: var(--bad); }

.admin-progress { margin: 0; color: var(--muted); }
.admin-progress strong { color: var(--ink); font-size: 1.4rem; }
.admin-tasks ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.admin-tasks li { display: flex; align-items: flex-start; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.admin-tasks li:last-child { border-bottom: 0; }
.admin-tasks form { margin: 0; }
.admin-tick {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: var(--touch); height: var(--touch); border: 2px solid var(--line-strong); border-radius: 10px;
  background: var(--surface); color: #ffffff; font-size: 1.3rem; font-weight: 800; cursor: pointer;
}
.admin-tick:hover { border-color: var(--brand); }
.admin-tasks li.is-done .admin-tick { border-color: var(--ok); background: var(--ok); }
.admin-tasks li.is-done .admin-task-title { color: var(--muted); text-decoration: line-through; }
.admin-task-title { margin: 10px 0 0; font-weight: 600; }
.admin-task-note { margin: 2px 0 0; color: var(--muted); font-size: 0.85rem; }
.admin-rule { margin: 16px 0 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.admin-rule summary { min-height: var(--touch); display: flex; align-items: center; font-weight: 700; cursor: pointer; }
.admin-rule ol { margin: 8px 0 0; padding-left: 20px; }
.admin-rule li { margin: 0 0 6px; }

/* Marketing: one block per club, the networks, the content plan */
.mkt-club { margin: 0 0 20px; }
.mkt-club-title { margin: 0; font-size: 1.15rem; }
.mkt-net { margin: 0 0 4px; color: var(--muted); font-size: 0.86rem; font-weight: 800; }
.mkt-ig { color: #a2186b; }
.mkt-fb { color: #1d4f9c; }
.mkt-rate { background: var(--ok-bg) !important; color: #0b5c3a !important; }
.mkt-year { margin: 0 0 8px; }
.mkt-year summary { display: flex; align-items: center; min-height: var(--touch); font-weight: 700; cursor: pointer; }
.mkt-stories { background: #fbe3f1; color: #8a1259; }
.mkt-feed { background: var(--brand-soft); color: var(--brand-dark); }
.mkt-outros { background: #ececec; color: #3d3d3d; }
.mkt-evento { background: var(--warn-bg); color: #7c4a03; }
.mkt-add { align-items: end; }
.mkt-add .field:nth-child(3) { flex: 2 1 260px; }
.mkt-day-title { margin: 0 0 6px; font-size: 0.95rem; }

/* OKR: objectives, key results with Ponto A -> Ponto B and progress */
.okr-objective { padding: 10px 0; border-top: 1px solid var(--line); }
.okr-objective:first-of-type { border-top: 0; }
.okr-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.okr-head h3 { margin: 0; font-size: 1rem; }
.okr-head h3 small { color: var(--muted); font-weight: 600; }
.okr-actions { display: flex; align-items: center; gap: 12px; }
.okr-actions form { margin: 0; }
.okr-krs { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.okr-kr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 260px); align-items: center; gap: 6px 16px;
  padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-2); }
.okr-kr-title { margin: 0; font-weight: 600; }
.okr-kr-meta { margin: 2px 0 0; color: var(--muted); font-size: 0.84rem; }
.okr-kr-value { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; }
.okr-kr-value strong { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.okr-kr-value .progress { display: block; }
.okr-new .field:nth-child(4) { flex: 2 1 280px; }
.okr-delete { margin-top: 16px; }
.tracked-list { display: grid; gap: 6px; margin: 8px 0 12px; padding: 0; list-style: none; }
.tracked-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.tracked-list label { display: flex; align-items: center; gap: 8px; min-height: var(--touch); }
.tracked-list select { min-height: var(--touch); padding: 4px 8px; border: 1px solid var(--line-strong); border-radius: 10px; font: inherit; }
.tracked-form { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.okr-origin { font-style: italic; }
.okr-transfer { margin: 6px 0 0; }
.okr-transfer summary { display: inline-flex; align-items: center; min-height: var(--touch); color: var(--brand-dark); font-weight: 700; cursor: pointer; }
.okr-fill { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; }
.okr-fill input { flex: 1 1 140px; min-height: var(--touch); padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 10px; font: inherit; }
.okr-fill input[name="value"] { flex: 0 1 140px; }
.okr-fill select { flex: 0 1 190px; min-height: var(--touch); padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 10px; font: inherit; }
.okr-timeline { grid-column: 1 / -1; min-width: 0; }
.okr-weeks { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(44px, 1fr); gap: 3px; margin: 4px 0 0; padding: 0 0 4px; overflow-x: auto; list-style: none; }
.okr-months { grid-auto-columns: minmax(44px, 1fr); }
.okr-week { display: flex; flex-direction: column; align-items: center; padding: 3px 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-variant-numeric: tabular-nums; }
.okr-week small { color: var(--muted); font-size: 0.8rem; font-weight: 800; }
.okr-week strong { font-size: 0.85rem; }
.okr-week span { color: var(--muted); font-size: 0.8rem; }
.okr-week.is-done { border-color: var(--ok-line); background: var(--ok-bg); }
.okr-week.is-current { box-shadow: inset 0 0 0 2px var(--brand); }
.okr-week.is-future { opacity: 0.5; border-style: dashed; }
.okr-week.new-month { margin-left: 6px; }
.okr-ends { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; font-size: 0.82rem; }
.okr-end { padding: 2px 10px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-dark); }
.okr-end.is-quarter { background: var(--brand-deep); color: #ffffff; }
.okr-end.is-future { opacity: 0.55; }
.okr-end small { opacity: 0.8; }

/* The person's other departments on their page */
.dept-cards { margin: 0 0 14px; }
.dept-cards .com-note { line-height: 1.7; }
.dept-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 10px 0 0; }
.dept-links .chip-link, .dept-links .more-link { min-height: var(--touch); display: inline-flex; align-items: center; }
.okr-actions .more-link, .okr-actions .link-button { display: inline-flex; align-items: center; min-height: var(--touch); }
.okr-kr:has(.okr-edit) { grid-template-columns: minmax(0, 1fr) minmax(180px, 260px) auto; }
.okr-edit { min-height: var(--touch); }

/* Content plan: status colours, the calendar (computer) and the list (phone) */
.ct-summary { margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.ct-summary-total { margin: 0 0 8px; color: var(--muted); }
.ct-summary-total strong { color: var(--ink); font-size: 1.6rem; }
.ct-bar { display: flex; height: 10px; overflow: hidden; border-radius: 999px; background: var(--line); }
.ct-bar span { display: block; height: 100%; }
.ct-bar .is-todo { background: #c4ccd5; }
.ct-bar .is-doing { background: #e0a106; }
.ct-bar .is-done { background: var(--ok); }
.ct-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 8px 0 0; font-size: 0.88rem; }
.ct-legend-item { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.ct-legend-item .ct-dot { width: 14px; height: 14px; }
.ct-add { margin: 0 0 12px; }
.ct-add summary { display: inline-flex; align-items: center; min-height: var(--touch); padding: 0 16px; border-radius: 999px;
  background: var(--brand); color: #ffffff; font-weight: 800; cursor: pointer; list-style: none; }
.ct-add summary::-webkit-details-marker { display: none; }
.ct-add form { margin-top: 10px; }

.ct-card { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; padding: 4px 4px 4px 4px;
  border: 1px solid var(--line); border-left: 4px solid #c4ccd5; border-radius: 10px; background: var(--surface); }
.ct-card.is-doing { border-left-color: #e0a106; background: #fff8e6; }
.ct-card.is-done { border-left-color: var(--ok); background: var(--ok-bg); }
.ct-card.is-done .ct-title { color: var(--muted); }
.ct-form { margin: 0; }
.ct-state, .ct-remove { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: var(--touch); height: var(--touch); padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.ct-dot { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid #9aa5b1; background: var(--surface); color: #ffffff; font-size: 0.9rem; font-weight: 900; line-height: 1; }
.is-doing .ct-dot { border-color: #e0a106; background: #e0a106; }
.is-done .ct-dot { border-color: var(--ok); background: var(--ok); }
.ct-state:hover .ct-dot { box-shadow: 0 0 0 3px var(--brand-soft); }
.ct-remove { color: var(--muted); font-size: 1rem; }
.ct-remove:hover { color: var(--bad); }
.ct-body { flex: 1 1 auto; min-width: 0; }
.ct-title { margin: 1px 0; font-size: 0.9rem; font-weight: 700; line-height: 1.25; overflow-wrap: break-word; hyphens: auto; }
.ct-channel { display: inline-block; padding: 0 8px; border-radius: 999px; font-size: 0.7rem; font-weight: 800; white-space: nowrap; }
.ct-status { color: var(--muted); font-size: 0.72rem; font-weight: 700; }
.ct-types { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; color: var(--muted); font-size: 0.85rem; }
.ct-channel.mkt-stories { background: #fbe3f1; color: #8a1259; }
.ct-channel.mkt-feed { background: var(--brand-soft); color: var(--brand-dark); }
.ct-channel.mkt-outros { background: #ececec; color: #3d3d3d; }
.ct-channel.mkt-evento { background: var(--warn-bg); color: #7c4a03; }

.ct-calendar { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.ct-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ct-week + .ct-week { border-top: 1px solid var(--line); }
.ct-week-head span { padding: 8px; background: var(--brand-deep); color: #ffffff; font-size: 0.86rem; font-weight: 800; text-align: center; }
.ct-cell { min-height: 110px; padding: 6px; border-left: 1px solid var(--line); }
.ct-cell:first-child { border-left: 0; }
.ct-cell.is-out { background: var(--surface-2); }
.ct-cell.is-out .ct-daynum { color: #b8c0c8; }
.ct-cell.is-today { box-shadow: inset 0 0 0 2px var(--brand); }
.ct-daynum { display: block; color: var(--muted); font-size: 0.8rem; font-weight: 800; }
.ct-cell .ct-card { position: relative; gap: 0; padding: 2px 24px 2px 2px; }
.ct-cell .ct-channel { padding: 0 5px; font-size: 0.8rem; }
.ct-cell .ct-card > .ct-form:last-child { position: absolute; top: 0; right: 0; }
.ct-cell .ct-state, .ct-cell .ct-remove { width: 34px; height: 34px; }
.ct-cell .ct-dot { width: 20px; height: 20px; font-size: 0.75rem; }
.ct-cell .ct-body { flex: 1 1 60%; }
.ct-cell .ct-title { font-size: 0.8rem; }
.ct-cell .ct-status { display: none; }
.ct-list { display: none; }
.ct-list-day { margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.ct-list-day.is-today { border-color: var(--brand); }
@media (max-width: 1023px) {
  .ct-calendar { display: none; }
  .ct-list { display: block; }
}

/* 9. Phone and small screens ------------------------------------------ */

@media (max-width: 1023px) {
  :root { --bottom-nav: 64px; }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding: 8px 16px;
    background: var(--brand-deep);
  }

  .topbar .brand img { width: 108px; }

  .menu-open { overflow: hidden; }

  .app .content {
    margin: 0;
    padding: 16px 16px calc(var(--bottom-nav) + 24px + env(safe-area-inset-bottom));
    border: 0;
    border-radius: 0;
  }

  .section-chips {
    display: flex;
    gap: 8px;
    margin: 0 -16px 14px;
    padding: 0 16px 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .section-chips a {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch);
    padding: 6px 16px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink-2);
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
  }

  .section-chips a[aria-current="page"] {
    border-color: var(--brand);
    background: var(--brand);
    color: #ffffff;
  }

  /* Comfortable touch targets */
  .segmented a,
  .tabs a,
  .chip-link,
  .goal-tab,
  .page-sections a { min-height: var(--touch); }

  .more-link,
  .crumbs a,
  .week-nav a,
  .side-links a,
  .topbar .brand,
  .dash-foot a,
  details > summary {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch);
  }

  .button-link { min-height: var(--touch); }
  .todo-list a { display: inline-block; padding: 10px 0; }

  .page-sections { top: 52px; }
  [id] { scroll-margin-top: 112px; }

  /* Wide month grids: the name column stays visible while the months scroll */
  .goal-matrix tbody th,
  .history-table tbody th,
  .history-table tfoot th {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--surface);
  }

  .history-table tfoot th { background: var(--pt); }
}

@media (max-width: 760px) {
  h1 { font-size: 1.35rem; }
  .dash-head h1 { font-size: 1.3rem; }

  .entry-row { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; }
  .facts dd { margin-bottom: 6px; }
  .page-head .button { flex: 1 1 auto; }
}

@media (max-width: 760px) {
  /* PT payments: one card per client on the phone (no sideways scrolling) */
  .pay-table--cards thead { display: none; }
  .pay-table--cards,
  .pay-table--cards tbody { display: block; width: 100%; }

  .pay-table--cards tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }

  .pay-table--cards tbody th,
  .pay-table--cards td {
    padding: 0;
    border: 0;
    text-align: left;
  }

  .pay-table--cards tbody th,
  .pay-table--cards .pay-action { grid-column: 1 / -1; }
  .pay-table--cards .pay-action { white-space: normal; }
  .pay-table--cards .client-actions,
  .client-actions { display: grid; gap: 8px; justify-content: stretch; }
  .client-actions .chip-link { width: 100%; justify-content: center; }
  .client-actions .pay-pause[open] > .pay-pause-form { position: static; width: auto; margin-top: 8px; box-shadow: none; }
  .pay-table--cards .pay-action .chip-link { width: 100%; justify-content: center; }
  .pay-table--cards .pay-pause { display: block; margin-left: 0; }
  .pay-table--cards .pay-pause-form { min-width: 0; }

  .pay-table--cards td[data-label]::before {
    content: attr(data-label);
    display: block;
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 700;
  }
}

@media (max-width: 560px) {
  .head-side { width: 100%; align-items: stretch; margin-left: 0; }
  .head-side > .segmented { align-self: flex-start; }
  .head-actions { justify-content: flex-start; }
}

@media (max-width: 760px) {
  .okr-kr { grid-template-columns: 1fr; }
}

/* «Atualizar resultados»: the month grid, like the team's Excel (Pedro, 02/10/2026).
   White cells are typed in; pale yellow cells are calculated by the app. */
.grid-period { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 10px; }
.grid-week { margin: 0; padding: 8px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); }
.grid-week.is-ok { border-color: var(--ok-line); background: var(--ok-bg); color: var(--ok); }
.grid-week.is-warn { border-color: var(--warn-line); background: var(--warn-bg); color: var(--warn); }
.grid-week.is-alert { border-color: var(--bad-line); background: var(--bad-bg); color: var(--bad); }
.grid-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 12px; color: var(--ink-2); }
.legend-cell { display: inline-block; min-width: 44px; padding: 2px 8px; border: 1px solid var(--line-strong); border-radius: 6px; text-align: right; font-weight: 700; }
.legend-input { background: #ffffff; }
.legend-calc { background: #fff8db; border-color: #ead9a0; }

.grid-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.grid-group th { padding: 10px 8px 4px; background: var(--surface-2); color: var(--brand-dark); font-size: 0.86rem; text-align: left; }
.grid-cell { min-width: 96px; }
.grid-cell input {
  width: 100%; min-width: 80px; min-height: 40px; padding: 6px 8px; border: 1px solid var(--line-strong);
  border-radius: 6px; background: #ffffff; font: inherit; font-weight: 700; text-align: right;
}
.grid-cell input::placeholder { color: #9aa6b2; font-weight: 400; font-size: 0.8rem; text-align: right; }
.grid-cell input:focus { outline: 3px solid var(--focus); outline-offset: 0; border-color: var(--focus); }

.grid-cell.has-error input { border: 2px solid var(--bad); background: var(--bad-bg); }
.cell-error { display: block; margin-top: 2px; color: var(--bad); font-size: 0.78rem; font-weight: 700; }
.grid-cell--future { background: var(--surface-2); text-align: center; color: #9aa6b2; }
.cell-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.save-bar {
  position: sticky; bottom: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow-sm);
}
.save-status { color: var(--ok); font-weight: 700; }
.save-status.is-dirty { color: var(--warn); }
.save-status.is-error { color: var(--bad); }
.save-hint { color: var(--muted); font-size: 0.9rem; }
/* Automatic saving: each cell says when it is being saved and when it is saved */
.cell-state { position: absolute; right: 10px; bottom: 1px; font-size: 0.7rem; font-weight: 800; pointer-events: none; }
.grid-cell--saving input { border-color: var(--brand); background: var(--brand-soft); }
.grid-cell--saving .cell-state::after { content: "a guardar…"; color: var(--brand-dark); }
.grid-cell--saved input { border-color: var(--ok-line); background: var(--ok-bg); }
.grid-cell--saved .cell-state::after { content: "✓ guardado"; color: var(--ok); }

@media (max-width: 760px) {
  .grid-wrap { overflow: visible; border: 0; background: transparent; }
  .grid-cell input { min-height: var(--touch); font-size: 1.1rem; }
  .save-bar { margin: 12px -16px 0; border-radius: 0; }
  .save-bar .button { flex: 1 1 auto; }
  .desktop-only { display: none; }
}

/* «O meu mês»: goal, result, what is missing, and the button to update (Pedro, 02/10/2026) */
.button-big { min-height: 52px; padding: 12px 24px; font-size: 1.05rem; }
.head-actions .button-big { min-height: var(--touch); padding: 9px 18px; font-size: 1rem; }

/* Comercial and Marketing «Atualizar resultados»: the sheet of their Excel (Pedro, 02/10/2026):
   a line per day / month, a column per field, formulas in yellow, total and goal at the bottom. */
.sheet-grid { border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 0.9rem; }
.sheet-grid th, .sheet-grid td { padding: 3px 4px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.sheet-grid thead th { position: sticky; top: 0; z-index: 1; background: var(--brand); color: #ffffff; font-size: 0.74rem; font-weight: 700; line-height: 1.15; text-align: center; vertical-align: bottom; }
.sheet-grid thead .sheet-groups th { background: var(--brand-dark); font-size: 0.86rem; }
.sheet-grid thead th.sheet-calc-head { background: #b38a00; }
.sheet-grid thead th small { display: block; margin-top: 2px; font-weight: 500; opacity: 0.85; }
.sheet-grid thead .sheet-groups th[scope="colgroup"] { text-align: left; }
.sheet-grid .sheet-row-head { position: sticky; left: 0; z-index: 1; min-width: 74px; background: var(--surface); text-align: left; white-space: nowrap; font-weight: 700; }
.sheet-grid thead .sheet-row-head { z-index: 2; background: var(--brand-dark); color: #ffffff; vertical-align: middle; }
.sheet-done { color: var(--ok); }
.sheet-grid td.grid-cell { position: relative; min-width: 58px; padding-bottom: 14px; }
.sheet-grid .grid-cell input { min-width: 50px; min-height: 34px; padding: 4px 6px; }
.sheet-grid--wide td.grid-cell { min-width: 84px; }
.sheet-grid--wide .grid-cell input { min-width: 76px; }
.sheet-grid td.sheet-calc { min-width: 58px; background: #fff8db; color: var(--ink-2); font-weight: 700; text-align: right; white-space: nowrap; }
.sheet-grid tr.sheet-row--future th, .sheet-grid tr.sheet-row--future td { color: #9aa6b2; background: var(--surface-2); }
.sheet-grid tfoot th, .sheet-grid tfoot td { background: #fff8db; font-weight: 800; text-align: right; white-space: nowrap; }
.sheet-grid tfoot .sheet-row-head { background: #fff1bf; }
.sheet-foot--missing td { color: var(--warn); }
.row-nav { display: none; }

@media (max-width: 760px) {
  /* One day (or month) at a time, as a list of large fields. */
  .row-nav { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 -16px 10px; padding: 8px 16px; background: var(--bg); }
  .row-nav strong { font-size: 1.1rem; }
  .sheet-wrap { overflow: visible; border: 0; background: transparent; }
  .sheet-grid, .sheet-grid tbody, .sheet-grid tfoot { display: block; width: 100%; }
  .sheet-grid thead { display: none; }
  .sheet-grid tbody tr { display: none; }
  .sheet-grid tbody tr.is-shown,
  .sheet-grid tfoot tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; margin-bottom: 10px; padding: 12px;
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  }
  .sheet-grid tbody tr.is-shown > th { display: none; }
  .sheet-grid tfoot tr { background: #fffbea; }
  .sheet-grid th, .sheet-grid td { border: 0; padding: 0; }
  .sheet-grid .sheet-row-head { position: static; grid-column: 1 / -1; background: transparent; }
  .sheet-grid tfoot th, .sheet-grid tfoot td { background: transparent; text-align: left; }
  .sheet-grid td::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--muted); font-size: 0.78rem; font-weight: 600; }
  .sheet-grid td.sheet-calc { padding: 6px 8px; border-radius: 8px; text-align: left; white-space: normal; }
  .sheet-grid tfoot td { white-space: normal; }
  .sheet-grid tfoot td:empty { display: none; }
  .sheet-grid .grid-cell input { min-height: var(--touch); font-size: 1.1rem; }
}

/* Definições › Campos (Pedro, 03/10/2026) */
.field-rename { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
.field-rename input[type="text"] { flex: 1 1 200px; min-width: 0; }
.fields-table tr.is-off td, .fields-table tr.is-off th { color: var(--muted); background: var(--surface-2); }
.fields-table td { vertical-align: middle; }

@media (max-width: 760px) {
  .fields-table thead { display: none; }
  .fields-table, .fields-table tbody, .fields-table tr, .fields-table td { display: block; width: 100%; }
  .fields-table tr { margin-bottom: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); }
  .fields-table td { padding: 4px 0; border: 0; }
  .fields-table td::before { content: attr(data-label); display: block; color: var(--muted); font-size: 0.78rem; font-weight: 600; }
}
/* PT clients month by month (Pedro, 05/10/2026): each month opens its window; on the phone one
   month at a time, with ← → (static/js/history.js). */
.hs .hs-cell { display: block; color: inherit; text-decoration: none; white-space: nowrap; }  /* «6,50 ·» on one line (20/10/2026) */
.hs .hs-cell:hover, .hs .hs-cell:focus-visible { text-decoration: underline; }
.history-table .m-off { display: none; }
.history-month-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; }
.history-month-nav strong { text-transform: capitalize; }
.hs-dialog { width: min(440px, calc(100vw - 32px)); padding: 18px; border: 1px solid var(--line); border-radius: 8px; }
.hs-dialog::backdrop { background: rgba(0, 0, 0, 0.35); }
.hs-dialog h3 { margin: 0 0 2px; }
.hs-dialog .summary-list { margin: 12px 0; }
.hs-dialog .actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* One month at a time (phone): the client, that month — the number and the year's columns step aside */
.history-table.is-one-month .hc-wide, .history-table.is-compact .hc-wide { display: none; }
.history-table.is-one-month tbody th { white-space: normal; }

/* Leads (Pedro, 14/10/2026): Registo and Análise */
.lead-tabs { margin: 0 0 8px; }
.lead-count { margin: 6px 0 8px; color: var(--muted); }
.lead-answer { display: inline-block; min-width: 34px; padding: 1px 8px; border-radius: 999px; font-size: 0.82rem; font-weight: 700; text-align: center; }
.lead-answer.is-yes { background: #ecfdf3; color: #0b5c3a; }
.lead-answer.is-no { background: var(--surface-2); color: var(--muted); }
.lead-answer.is-open { background: var(--warn-bg); color: #7c4a03; }
.lead-open-chip { border-color: var(--warn-line) !important; background: var(--warn-bg) !important; color: #7c4a03 !important; }
.lead-table .lead-notes { max-width: 260px; color: var(--muted); font-size: 0.85rem; }
.lead-form .field-wide { flex: 1 1 100%; grid-column: 1 / -1; }
.lead-form textarea { width: 100%; }
.lead-delete { margin-top: 14px; }
.lead-sep { color: var(--muted); padding: 0 4px; }
.lead-subtitle { margin: 16px 0 6px; font-size: 0.95rem; }
.lead-summary tr.is-future { color: var(--muted); }
.lead-summary tfoot th, .lead-summary tfoot td { border-top: 2px solid var(--line-strong); font-weight: 700; }
.lead-summary th small { display: block; font-weight: 400; color: var(--muted); }
.lead-lines { margin: 4px 0 10px; padding-left: 18px; font-size: 0.9rem; }
.lead-lines li { margin: 2px 0; }
/* «Outra origem: qual?» only when «Outro» is chosen (a browser without :has shows it always) */
@supports selector(:has(*)) {
  .lead-form:not(:has(select[name="origin"] option[value="outro"]:checked)) [data-origin-detail] { display: none; }
}
.lead-repeat { display: inline-block; padding: 0 6px; border-radius: 999px; background: #eef2ff; color: #3730a3; font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.lead-repeat-note { display: block; color: #3730a3; font-size: 0.8rem; }

/* Recursos humanos › Salário: the month's grid (one row per day, as the Excel) */
.salary-status { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 0 0 12px; }
/* The Fitness grid like an Excel (Pedro, 16/10/2026): low rows, borderless inputs filling each cell */
.salary-grid { border-collapse: collapse; font-size: 0.85rem; }
.salary-grid th, .salary-grid td { padding: 0; border: 1px solid var(--line); height: 28px; }
.salary-grid thead th, .salary-grid tfoot th, .salary-grid tfoot td { padding: 2px 6px; background: var(--surface-2); font-weight: 600; }
.salary-grid tbody th[scope="row"] { padding: 0 6px; white-space: nowrap; background: var(--surface-2); }
.salary-grid tbody td { padding: 0 6px; }
.salary-grid tbody td:has(.grid-input) { padding: 0; }
.salary-grid .grid-input { display: block; width: 3.6em; height: 28px; min-height: 0; padding: 0 6px; border: 0; border-radius: 0; font: inherit; text-align: right; background: transparent; color: inherit; }
.salary-grid .grid-input:focus { outline: 2px solid var(--brand); outline-offset: -2px; background: var(--surface); }
.salary-grid .grid-small { width: 2.6em; }
.salary-grid .grid-note { width: 16em; text-align: left; }
.salary-grid tr.is-weekend th, .salary-grid tr.is-weekend td { background: var(--surface-2); }
.salary-grid tr.has-error td, .salary-grid tr.has-error th { background: var(--bad-bg); }
.salary-grid .field-error { margin: 0; padding: 0 6px 2px; font-size: 0.75rem; }
/* Each part of the sheet opens and closes (remembered on the device, static/js/sections.js) */
.salary-section { margin: 14px 0 0; }
.salary-section > summary { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); cursor: pointer; list-style: none; }
.salary-section > summary::-webkit-details-marker { display: none; }
.salary-section > summary::before { content: "▸"; color: var(--muted); transition: transform 0.15s; }
.salary-section[open] > summary::before { transform: rotate(90deg); }
.salary-section > summary h3 { margin: 0; }
.salary-section[open] > summary { margin-bottom: 10px; }
.salary-flow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 18px 0 0; }

/* Salário › PT clients × months and the month by month summary, like an Excel (own class: «sheet-grid» is the
   monthly sheets' component, shown a day at a time on phones) */
.xl-grid th, .xl-grid td { border: 1px solid var(--line); padding: 4px 8px; }
.xl-grid thead th { background: var(--surface-2); }
.xl-grid tbody th[scope="row"] { background: var(--surface); white-space: nowrap; }
.xl-grid .is-current { background: var(--brand-soft); }
.xl-grid tr.is-added th, .xl-grid tr.is-added td { font-style: italic; }

/* Treinos em atraso (pago e ainda não dado): small note under the trainings of the month */
.backlog { display: block; font-size: 0.72rem; font-weight: 600; line-height: 1.2; white-space: nowrap; }
span.backlog { display: inline; }
.backlog.is-late { color: var(--warn, #b45309); }
.backlog.is-ahead { color: var(--bad); }

/* Recursos humanos: the team grouped by function (Pedro, 16/10/2026) */
.table .group-row th { padding-top: 14px; background: var(--surface-2); text-align: left; font-weight: 700; }

/* Salário › Resumo: the month by month table */
h4.subhead { margin: 16px 0 6px; font-size: 0.95rem; }

/* Phone (the grid does not fit: static/js/fit.js stacks it; no sideways scrolling, Pedro 04/10/2026): one compact
   block per day, four boxes a line, every box visible (the Excel look keeps borderless boxes only in the table) */
[data-layout="novo"] .table-wrap.is-stacked .salary-grid tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 8px; padding: 8px 0; }
[data-layout="novo"] .table-wrap.is-stacked .salary-grid th[scope="row"] { grid-column: 1 / -1; display: flex; justify-content: flex-start; gap: 6px; height: auto; padding: 0; background: transparent; }
[data-layout="novo"] .table-wrap.is-stacked .salary-grid td,
[data-layout="novo"] .table-wrap.is-stacked .salary-grid tbody td:has(.grid-input) { display: block; height: auto; padding: 0; border: 0; background: transparent; text-align: left; }
[data-layout="novo"] .table-wrap.is-stacked .salary-grid td[data-label]::before { display: block; margin-bottom: 2px; font-size: 11px; }
[data-layout="novo"] .table-wrap.is-stacked .salary-grid td:has(.grid-note) { grid-column: 1 / -1; }
[data-layout="novo"] .table-wrap.is-stacked .salary-grid .grid-input { width: 100%; max-width: none; height: 38px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); }
[data-layout="novo"] .table-wrap.is-stacked .salary-grid tfoot td:empty { display: none; }
/* Coming back to a part (#fitness…) leaves its title below the bars fixed at the top */
.salary-section { scroll-margin-top: 150px; }
/* Phone: the clients × months grid (and the month by month summary) as compact blocks, four values a line */
[data-layout="novo"] .table-wrap.is-stacked .xl-grid tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 8px; padding: 8px 0; }
[data-layout="novo"] .table-wrap.is-stacked .xl-grid tr > :first-child { grid-column: 1 / -1; }
[data-layout="novo"] .table-wrap.is-stacked .xl-grid th,
[data-layout="novo"] .table-wrap.is-stacked .xl-grid td { display: block; padding: 0; border: 0; text-align: left; }
[data-layout="novo"] .table-wrap.is-stacked .xl-grid td[data-label]::before { display: block; margin-bottom: 0; font-size: 11px; }
[data-layout="novo"] .table-wrap.is-stacked .xl-grid .is-current { background: transparent; font-weight: 700; }
[data-layout="novo"] .table-wrap.is-stacked .xl-grid td.is-wide { grid-column: span 2; }
/* Salário › Resumo: the direction adjusts a calculated meritocracy */
.merit-adjust { margin-top: 4px; }
.merit-adjust > summary { display: inline-block; list-style: none; cursor: pointer; }
.merit-adjust > summary::-webkit-details-marker { display: none; }
.merit-adjust form { margin-top: 6px; }

/* Fitness dia a dia: the four groups of the Excel well apart (Pedro, 16/10/2026) — horas de sala, aulas de grupo,
   avaliações, meritocracia — each with its colour in the header and a strong line between groups */
.salary-grid .grid-groups th { text-align: center; font-size: 0.86rem; }
.table.salary-grid thead th.g-room { background: var(--brand-soft); color: var(--brand-dark); }
.table.salary-grid thead th.g-classes { background: var(--ok-bg); color: var(--ok); }
.table.salary-grid thead th.g-assess { background: var(--warn-bg); color: var(--warn); }
.table.salary-grid thead th.g-merit { background: var(--edit-bg); color: var(--edit-dark); }
.salary-grid thead tr:last-child th { text-align: center; }
.salary-grid .g-start { border-left: 2px solid var(--line-strong); }
/* Phone: each box says its group, in the group's colour */
[data-layout="novo"] .table-wrap.is-stacked .salary-grid td.g-room::before { color: var(--brand-dark); }
[data-layout="novo"] .table-wrap.is-stacked .salary-grid td.g-classes::before { color: var(--ok); }
[data-layout="novo"] .table-wrap.is-stacked .salary-grid td.g-assess::before { color: var(--warn); }
[data-layout="novo"] .table-wrap.is-stacked .salary-grid td.g-merit::before { color: var(--edit-dark); }
[data-layout="novo"] .table-wrap.is-stacked .salary-grid .g-start { border-left: 0; }
[data-layout="novo"] .table-wrap.is-stacked .salary-grid tbody td { display: flex; flex-direction: column; justify-content: flex-end; }

/* Salário with short lines (Pedro, 28/10/2026: «condensa as linhas para ficar mais informação no ecrã») */
.shell .salary-page .salary-section { margin-top: 8px; }
.shell .salary-page .salary-section > summary { padding: 4px 0; }
.shell .salary-page .salary-section[open] > summary { margin-bottom: 6px; }
.shell .salary-page .salary-section .help { margin: 0 0 6px; font-size: 12px; line-height: 1.4; }
.shell .salary-page .salary-status { margin-bottom: 6px; }
.shell .salary-page .subhead { margin: 10px 0 4px; }
.shell .salary-page .table:not([class*="grid"]) :is(th, td) { padding: 3px 10px; }
.shell .salary-page .salary-summary .num { white-space: nowrap; }
.shell .salary-page .table td .chip-link { min-height: 22px; padding: 1px 10px; line-height: 1.2; }
.shell .salary-page td > .inline-form { display: flex; }  /* an inline box sat on the text line and made the row taller */
.shell .salary-page .table:not([class*="grid"]) thead th { padding-block: 5px; }
.shell .salary-page .xl-grid :is(th, td) { padding: 2px 6px; }
.shell .salary-page .salary-grid :is(th, td) { height: 24px; }
.shell .salary-page .salary-grid .grid-input { height: 24px; }
.shell .salary-page :is(.chip-link, .merit-adjust > summary) { min-height: 26px; padding: 0 10px; font-size: 12px; }
.shell .salary-page .merit-adjust { margin-top: 2px; }
.shell .salary-page .empty { margin: 0 0 6px; }
/* «Acrescentar linha / treino»: every field in one line on a computer, one under the other on a phone */
.shell .salary-page .bank-form .form.salary-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; max-width: none; padding: 10px 12px; }
.shell .salary-page .salary-add > :is(.help, .field-error) { flex: 1 1 100%; margin: 0; }
.shell .salary-page .salary-add .field { flex: 0 1 auto; margin: 0; }
.shell .salary-page .salary-add .field-grow { flex: 1 1 110px; min-width: 0; }
.shell .salary-page .salary-add .field-grow input { min-width: 0; }
.shell .salary-page .salary-add .field > label { margin-bottom: 3px; font-size: 12px; white-space: nowrap; }
.shell .salary-page .salary-add .field :is(input:not([type="checkbox"]), select) { min-height: 36px; padding: 5px 8px; }
.shell .salary-page .salary-add input[type="date"] { width: 8.8em; }
.shell .salary-page .salary-add input[name="amount"] { width: 7em; }
.shell .salary-page .salary-add .salary-add-checks { display: grid; gap: 0; }
.shell .salary-page .salary-add .field-check { min-height: 18px; gap: 6px; font-size: 13px; }
.shell .salary-page .salary-add .field-check input { width: 16px; height: 16px; min-height: 0; margin: 0; }
.shell .salary-page .salary-add .actions { margin: 0; }
.shell .salary-page .salary-add .actions .button { min-height: 36px; }
@media (max-width: 800px) {
  .shell .salary-page .salary-add .field, .shell .salary-page .salary-add .actions { flex: 1 1 100%; }
  .shell .salary-page .salary-add input:is([type="date"], [name="amount"]) { width: 100%; }
  .shell .salary-page .salary-add .field :is(input:not([type="checkbox"]), select), .shell .salary-page .salary-add .actions .button { min-height: 44px; }
  .shell .salary-page .salary-add .field-check { min-height: 40px; }
  .shell .salary-page .salary-add .field-check input { width: 20px; height: 20px; }
  .shell .salary-page :is(.chip-link, .merit-adjust > summary), .shell .salary-page .table td .chip-link { min-height: 40px; }
}

/* Visão geral › Desempenho departamentos · Satisfação clientes (D. Clube, 29/10/2026): cards, chart, years */
.dc-fill { display: flex; flex-wrap: wrap; gap: 8px; }
.dc-areas { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 14px; }
.dc-card-area { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.86rem; font-weight: 700; color: var(--brand, #0068b8); }
.dc-cards { display: flex; flex-wrap: nowrap; gap: 6px; margin: 0 0 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
/* One row (Pedro, 29/10/2026): on a computer the cards share the whole width (11 in the Resumo); on a phone the row
   slides sideways */
.dc-cards > .dc-card { flex: 1 1 0; min-width: 0; }
.dc-card { display: flex; flex-direction: column; gap: 3px; padding: 9px 8px; border: 1px solid var(--line, #e3e6ea); border-radius: 12px; background: #ffffff; color: inherit; text-decoration: none; }
.dc-card:hover { border-color: var(--brand, #0068b8); }
.dc-card:focus-visible { outline: 3px solid var(--brand, #0068b8); outline-offset: 2px; }
.dc-card.is-chosen { border-color: var(--brand, #0068b8); box-shadow: inset 0 0 0 1px var(--brand, #0068b8); }
.dc-card-label { color: var(--muted); font-size: 0.8rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; }
.dc-card-value { font-size: clamp(0.82rem, 0.95vw, 1.3rem); line-height: 1.2; font-variant-numeric: tabular-nums; }
.dc-card-change { font-size: 0.8rem; }
/* Many cards in the row: the «face a …» goes to the tip (title) */
.dc-card-previous { display: none; }
.dc-cards:has(> .dc-card:nth-child(-n+5):last-child) .dc-card-previous { display: inline; }
.dc-card-spark { margin-top: auto; }
.dc-spark { display: block; width: 100%; height: 26px; }
.dc-change { font-weight: 700; white-space: nowrap; color: var(--muted); }
.dc-change.is-good { color: var(--ok, #0b7a4b); }
.dc-change.is-bad { color: var(--danger, #b42318); }
.dc-before { color: var(--muted); }
.dc-chart-panel { margin-bottom: 16px; scroll-margin-top: 90px; }
.dc-chart-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.dc-sub { margin: 14px 0 6px; font-size: 0.9rem; }
.dc-sub small, .dc-chart-head small { color: var(--muted); font-weight: 400; }
.dc-chart-wrap { width: 100%; }
.dc-chart { display: block; width: 100%; height: auto; max-height: 300px; }
.dc-chart .grid { stroke: #e7eaee; stroke-width: 1; }
.dc-chart .axis { fill: #6b7280; font-size: 11px; }
.dc-legend { margin: 4px 0 0; font-size: 0.85rem; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dc-chart .value { fill: #1f2933; font-size: 11px; font-weight: 600; }
.dc-chart .is-latest { font-weight: 700; fill: #1f2933; }
.dc-chart .tone-good { fill: var(--ok); font-size: 11px; font-weight: 700; }
.dc-chart .tone-bad { fill: var(--bad); font-size: 11px; font-weight: 700; }
.dc-chart .tone-neutral { fill: var(--muted); font-size: 11px; font-weight: 700; }
/* The two charts side by side (Pedro, 29/10/2026); one under the other below 1100 px */
.dc-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 32px; }
@media (max-width: 1100px) { .dc-charts { grid-template-columns: minmax(0, 1fr); } }
/* Over a month: the guide line and the box with the values (CSS only, no JavaScript) */
.dc-chart .dc-hover { cursor: pointer; outline: none; }
.dc-chart .dc-hit { fill: transparent; }
.dc-chart .dc-guide { stroke: #9aa6b2; stroke-width: 1; stroke-dasharray: 3 3; }
.dc-chart .dc-guide, .dc-chart .dc-tip { opacity: 0; pointer-events: none; transition: opacity 0.1s; }
.dc-chart .dc-hover:hover .dc-guide, .dc-chart .dc-hover:hover .dc-tip,
.dc-chart .dc-hover:focus .dc-guide, .dc-chart .dc-hover:focus .dc-tip { opacity: 1; }
.dc-chart .dc-hover:focus-visible .dc-hit { fill: rgba(0, 104, 184, 0.08); }
.dc-chart .dc-tip rect { fill: #1f2933; }
.dc-chart .dc-tip text { fill: #fff; font-size: 11px; font-variant-numeric: tabular-nums; }
.dc-chart .dc-tip .dc-tip-head { font-weight: 700; }
.dc-chart .dc-tip .dc-tip-good { fill: #6ee7a8; font-weight: 700; }
.dc-chart .dc-tip .dc-tip-bad { fill: #fca5a5; font-weight: 700; }
.dc-chart .dc-tip .dc-tip-neutral { fill: #cbd5e1; font-weight: 700; }
/* The legend draws the two lines (Pedro, 29/10/2026: gráficos em linhas, como os dos cartões) */
.dc-key { display: inline-block; width: 18px; height: 3px; border-radius: 2px; }
.dc-key-now { background: #0068b8; }
.dc-key-before { background: #b9d7ef; margin-left: 8px; }
/* How fresh the data is (31/10/2026): quiet, red after 7 days */
.freshness { margin: -8px 0 14px; color: var(--muted); font-size: 12px; }
.freshness .is-stale { color: var(--bad); font-weight: 600; }
.nowrap { white-space: nowrap; }
.page-head .freshness { margin: 4px 0 0; }
.dc-finding { margin: 4px 0 0; font-size: 0.95rem; }  /* the conclusion line (31/10/2026) */
.dc-section-title { margin: 8px 0 10px; font-size: 1rem; }
.dc-group { margin-bottom: 12px; }
.dc-summary { cursor: pointer; padding: 0; font-weight: 700; }
.dc-summary small { color: var(--muted); font-weight: 400; }
.dc-group[open] > .dc-summary { margin-bottom: 12px; }
.dc-group .dc-cards { margin-bottom: 0; }
/* Like the Excel (Pedro, 29/10/2026): a tight grid, the months in columns, the indicator's column fixed while the
   months slide sideways */
.dc-table { font-size: 0.8rem; width: auto; min-width: 100%; }
.dc-table th, .dc-table td { padding: 4px 6px; border: 1px solid var(--line); }
.dc-table thead th { font-size: 0.8rem; padding: 6px; text-align: right; }
.dc-table thead th:first-child { text-align: left; }
.dc-table th[scope="row"] { min-width: 11em; max-width: 15em; white-space: normal; font-weight: 500; line-height: 1.25; }
.dc-table td { white-space: nowrap; font-variant-numeric: tabular-nums; }
.dc-table th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface, #fff); }
.dc-table thead th:first-child { background: var(--surface-2); }
.dc-table tbody tr:hover th:first-child { background: var(--surface-2); }
.dc-table .dc-group-row th { padding-top: 10px; text-align: left; font-size: 0.86rem; color: var(--muted); background: var(--surface-2); }
.dc-table .dc-group-row th { position: sticky; left: 0; }
/* The year's total always in sight, on the right, as the indicator's name on the left */
.dc-table .dc-total, .dc-table thead th:last-child { position: sticky; right: 0; z-index: 1; font-weight: 700; background: var(--surface-2); }
.dc-fieldset { margin: 0 0 14px; padding: 0; border: 0; }
.dc-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 14px; }
@media (max-width: 800px) {
  .dc-areas { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dc-areas a { flex: none; white-space: nowrap; }
  .dc-chart-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dc-chart { min-width: 560px; }
  .dc-cards > .dc-card { flex: 0 0 136px; min-height: 120px; }
  .dc-card-value { font-size: 1.05rem; }
  .dc-table th[scope="row"] { min-width: 7em; max-width: 8.5em; }  /* room for the months between the two fixed columns */
}