/* ============================================================
   Sistema Press — design "Sereno" (decisão S21, 13/10/2026). Plano D.
   Fonte da verdade: docs/design-sereno/ (handoff + referência). Cores: as da Press (decisão do Ailson).
   Desde a D5a (virada, 17/10) é o ÚNICO visual: o shell.js põe data-design="sereno" sempre (a chave saiu).
   PREFIXO (decisão da D5b): toda regra do Sereno — aqui e nos <style> das telas — continua começando por
   :root[data-design="sereno"]. Ele não é mais uma chave, é a CAMADA do Sereno: dá às regras (0,2,0) a mais de
   especificidade, e é isso que as faz vencer o styles.css (1.008 regras de base) e as regras-base que ficaram nos
   <style> das telas (~1.100, sem prefixo) e que ainda dão parte das propriedades. Tirar o prefixo obrigaria a fundir
   regra a regra, propriedade a propriedade (inclusive :hover, :focus e estados abertos que a comparação de tela não
   pega) — risco de regressão sem ganho visível. Regra nova do Sereno: com o prefixo; regra-base (layout): sem.
   Texto em cor de acento usa --a-tx; preenchimento usa --a6.
   Carregado pelo shell.js em toda página com o shell (depois do styles.css).
   ============================================================ */

/* ---- Fonte: Plus Jakarta Sans (licença OFL, fontes/plus-jakarta-sans/OFL.txt), servida pelo próprio sistema ---- */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fontes/plus-jakarta-sans/plus-jakarta-sans-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fontes/plus-jakarta-sans/plus-jakarta-sans-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fontes/plus-jakarta-sans/plus-jakarta-sans-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fontes/plus-jakarta-sans/plus-jakarta-sans-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fontes/plus-jakarta-sans/plus-jakarta-sans-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fontes/plus-jakarta-sans/plus-jakarta-sans-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fontes/plus-jakarta-sans/plus-jakarta-sans-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fontes/plus-jakarta-sans/plus-jakarta-sans-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('fontes/plus-jakarta-sans/plus-jakarta-sans-latin-800-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('fontes/plus-jakarta-sans/plus-jakarta-sans-latin-ext-800-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---- Acento registrado (@property): a troca de cor de destaque anima as 5 variáveis juntas em 0,6 s ---- */
@property --a9 { syntax: '<color>'; inherits: true; initial-value: #053053; }
@property --a6 { syntax: '<color>'; inherits: true; initial-value: #1565A8; }
@property --a4 { syntax: '<color>'; inherits: true; initial-value: #0E80C0; }
@property --a1 { syntax: '<color>'; inherits: true; initial-value: #DEE9F3; }
@property --a-tx { syntax: '<color>'; inherits: true; initial-value: #1565A8; }

/* ---- Tema claro (base) + acento Press (padrão: não tem bloco [data-acento="press"] de propósito) ---- */
:root[data-design="sereno"] {
  --a9: #053053; --a6: #1565A8; --a4: #0E80C0; --a1: #DEE9F3; --a-tx: #1565A8;
  --frame: #041F36; --app: #EEF2F6; --panel: #F6F8FA; --card: #FFFFFF; --field: #F3F6F9;
  --ink: #0A2A43; --ink2: #46596B; --muted: #5E6F80; --line: #E3E7EB; --white: #FFFFFF;
  --ok: #136F47; --ok-bg: #E7F1ED; --warn: #85570F; --warn-bg: #F3EEE7; --bad: #B42B2B; --bad-bg: #F8EAEA;
  --vio: #096780; --vio-bg: #E6F0F2; --stop: #B42B2B;
  /* D4.6: azul Press FIXO (não segue o acento da pessoa) — o --info da Bancada (#1565A8) sobre o --a1 do acento Press */
  --azul: #1565A8; --azul-bg: #DEE9F3;
  /* D5d: anel de foco (e marca de seleção por contorno). No claro é o --a6; no escuro o --a6 não passa 3:1 sobre os
     fundos (WCAG 1.4.11), então vai o --a-tx (≥ 5 nos 4 acentos). O teste sereno-d5d mede as 8 combinações. */
  --foco: var(--a6);
  --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px; --pill: 999px;
  --sh-1: 0 1px 2px rgba(20,30,60,.04), 0 6px 18px rgba(20,30,60,.05);
  --sh-2: 0 14px 40px rgba(12,20,48,.22);
  --s-ease: cubic-bezier(.22,1,.36,1); --s-spring: cubic-bezier(.34,1.4,.64,1);
  --s-font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  transition: --a9 .6s, --a6 .6s, --a4 .6s, --a1 .6s, --a-tx .6s;
  color-scheme: light;
}
:root[data-design="sereno"][data-acento="marinho"] { --a9: #041F36; --a6: #053053; --a4: #6F93B8; --a1: #E1E6EA; --a-tx: #053053; }
:root[data-design="sereno"][data-acento="ciano"] { --a9: #063F4F; --a6: #096780; --a4: #08C5E3; --a1: #DDEAED; --a-tx: #096780; }
:root[data-design="sereno"][data-acento="grafite"] { --a9: #2B2C2E; --a6: #58595B; --a4: #ADADAD; --a1: #E8E8E8; --a-tx: #58595B; }

/* ---- Tema escuro ---- */
:root[data-design="sereno"][data-tema="escuro"] {
  --a9: #041F36; --a6: #1565A8; --a4: #29A0DC; --a1: #0E3659; --a-tx: #4FB0E3;
  --frame: #020A12; --app: #05121E; --panel: #081A2B; --card: #0B2237; --field: #0F2A43;
  --ink: #E3ECF4; --ink2: #9CB0C4; --muted: #7C91A7; --line: #16324D;
  --ok: #4CC98F; --ok-bg: #133642; --warn: #E8B04E; --warn-bg: #26333A; --bad: #F07575; --bad-bg: #262C3E;
  --vio: #08C5E3; --vio-bg: #0B364C; --stop: #F07575;
  /* D4.6: azul Press fixo no escuro — o --info da Bancada escura (#29A0DC) não passa AA no fundo (4,23); vai o tom claro
     da mesma família (o --a-tx do acento Press escuro) sobre o --a1 dele (5,12) */
  --azul: #4FB0E3; --azul-bg: #0E3659;
  --foco: var(--a-tx);
  --sh-1: 0 1px 2px rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.28);
  --sh-2: 0 14px 40px rgba(0,0,0,.6);
  color-scheme: dark;
}
:root[data-design="sereno"][data-tema="escuro"][data-acento="marinho"] { --a9: #041F36; --a6: #2F5D8A; --a4: #6F93B8; --a1: #082945; --a-tx: #8FB3D9; }
:root[data-design="sereno"][data-tema="escuro"][data-acento="ciano"] { --a9: #04303D; --a6: #0B7A93; --a4: #08C5E3; --a1: #0A3A51; --a-tx: #08C5E3; }
:root[data-design="sereno"][data-tema="escuro"][data-acento="grafite"] { --a9: #1E1F21; --a6: #6B6C6E; --a4: #ADADAD; --a1: #2A3845; --a-tx: #C9CACB; }
/* troca de tema (claro ↔ escuro): as cores trocam de uma vez, como na Bancada; só a troca de ACENTO anima */
:root[data-design="sereno"].tema-troca { transition: none; }

/* ---- Apelidos da Bancada ----
   As telas e o styles.css usam os nomes antigos da Bancada (--bg, --tx, --pn, --ln, --btn...); aqui eles valem o
   Sereno. D5a: os temas de token da Bancada saíram do styles.css — estes apelidos são a única definição deles.
   D5b: declarados só na raiz (o aviso .toast e qualquer outro elemento herdam; as "ilhas" da Bancada não existem mais).
   Os --df-* e --crm-* (cores de dado e de coluna) ficam como estão: revistos nas telas da D4. */
:root[data-design="sereno"] {
  --bg: var(--app); --rack: var(--panel); --top: var(--panel); --pn: var(--card); --pn-2: var(--field); --pn-3: var(--card);
  --scr: var(--panel); --foot: var(--field);
  --ln: var(--line); --ln-2: var(--line); --ln-3: color-mix(in srgb, var(--ink) 26%, transparent); --ln-in: var(--muted);
  --seg-off: var(--field); --hov: color-mix(in srgb, var(--ink) 4%, transparent); --hov-2: color-mix(in srgb, var(--ink) 6%, transparent);
  --row-hov: color-mix(in srgb, var(--a1) 45%, transparent); --cnt-bg: var(--field);
  --tx: var(--ink); --tx-2: var(--ink2); --tx-3: var(--muted); --tx-hi: var(--ink);
  --danger: var(--bad); --bar: var(--a6); --bar-end: var(--a9); --on-ok: var(--white);
  --danger-bg: var(--bad-bg); --danger-ln: color-mix(in srgb, var(--bad) 32%, transparent);
  --warn-ln: color-mix(in srgb, var(--warn) 30%, transparent); --err-ring: color-mix(in srgb, var(--bad) 18%, transparent);
  /* D5d (I3): estado nunca segue a cor de destaque — "esperando terceiro / aguardando" é o azul Press FIXO em toda tela */
  --info: var(--azul); --info-bg: var(--azul-bg); --info-ln: color-mix(in srgb, var(--azul) 28%, transparent);
  --ok-ln: color-mix(in srgb, var(--ok) 32%, transparent);
  --on-danger: var(--white);
  --sig: var(--a6); --glow-c: var(--a4); --hl: var(--a-tx); --btn: var(--a6); --on-btn: var(--white); --btn-mix: var(--a9);
  --focus: var(--foco); --focus-ring: color-mix(in srgb, var(--a4) 25%, transparent); --ind-bg: var(--a1);
  --glow-ind: none; --glow-live: 0 0 0 2px color-mix(in srgb, var(--a4) 25%, transparent);
  --scrim: rgba(18,26,40,.38); --scrim-2: rgba(18,26,40,.3);
  --float: var(--sh-2); --drawer-sh: var(--sh-2); --thumb-sh: 0 1px 3px rgba(0,0,0,.2);
  --tip-bg: var(--a9); --tip-tx: var(--white); --sbar: var(--line);
  --fill-forte: var(--a6); --on-fill: var(--white);
  --surface: var(--card); --fg: var(--ink); --border: var(--line); --accent: var(--a6); --success: var(--ok);
  --font-display: var(--s-font); --font-body: var(--s-font); --font-mono: var(--s-font);
  --radius: var(--r-sm);
}

/* ============================================================
   Casca (Fase 1 do handoff): janela --app (padding 10, gap 10) → três painéis --panel (menu 208 px, barra,
   conteúdo). Valores da referência (linhas 33–75), aplicados às classes que o sistema já tem: .app = janela,
   .sidebar = menu, .main, .topbar = barra, .content = conteúdo.
   13/10 (Ailson): SEM a moldura azul-noite riscada da referência — a janela ocupa a tela inteira, fundo --app,
   menu encostado no topo.
   ============================================================ */
:root[data-design="sereno"] { background: var(--app); }
:root[data-design="sereno"] body {
  font-family: var(--s-font); font-size: 13px; line-height: 1.45; color: var(--ink); background: var(--app);
  padding: 0; min-height: 100%; height: auto;
}
:root[data-design="sereno"] :focus-visible { outline: 2px solid var(--foco) !important; outline-offset: 2px !important; }
/* D5c: no campo de data/hora o Tab passa pelo botão do calendário (por dentro do campo) e o Chromium tira o
   :focus-visible (e o :focus) do campo — o anel fica no :focus-within dele (campo de texto já tem anel a todo foco) */
:root[data-design="sereno"] input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]):focus-within {
  outline: 2px solid var(--foco) !important; outline-offset: 2px !important;
}
/* D5c: linha de tabela focável (tr[data-tecla]) — o anel vai para dentro, senão a borda da tabela corta os lados */
:root[data-design="sereno"] tr[data-tecla]:focus-visible { outline-offset: -2px !important; }
:root[data-design="sereno"] .num, :root[data-design="sereno"] .mono, :root[data-design="sereno"] .kpi-value,
:root[data-design="sereno"] td, :root[data-design="sereno"] .id-link { font-variant-numeric: tabular-nums; }

/* janela */
:root[data-design="sereno"] .app {
  max-width: none; margin: 0; min-height: 100vh; background: var(--app); border-radius: 0;
  padding: 10px; gap: 10px; grid-template-columns: 208px minmax(0, 1fr); box-shadow: none;
}
:root[data-design="sereno"][data-menu="col"] .app { grid-template-columns: 64px minmax(0, 1fr); }
/* página inicial (sem menu): o bloco central vira a janela */
:root[data-design="sereno"] body > .wrap {
  max-width: none; margin: 0; min-height: 100vh; background: var(--app); border-radius: 0;
  padding: clamp(18px, 3vw, 36px); box-shadow: none;
}

/* menu lateral */
:root[data-design="sereno"] .sidebar {
  background: var(--panel); border-radius: var(--r-lg); border: 0; padding: 18px 14px 14px; gap: 14px;
  top: 10px; height: calc(100vh - 20px);
}
:root[data-design="sereno"] .brand { height: auto; padding: 0 6px; border: 0; gap: 9px; }
:root[data-design="sereno"] .brand-name { font-weight: 800; font-size: 16px; letter-spacing: -.02em; color: var(--ink); }
:root[data-design="sereno"] .brand-sub { font-size: 10.5px; color: var(--muted); }
:root[data-design="sereno"] .perfil-faixa {
  margin: 0; border: 0; border-radius: var(--r-sm); background: var(--field); font-size: 11.5px; color: var(--muted);
}
/* a lista ocupa a largura toda do painel (margem negativa) para o indicador encostar na borda, como na referência */
:root[data-design="sereno"] .nav { margin-inline: -14px; padding: 0 14px; gap: 2px; }
:root[data-design="sereno"] .nav-label {
  font-family: var(--s-font); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; color: var(--muted);
  height: auto; padding: 10px 6px 6px;
}
:root[data-design="sereno"] .nav a, :root[data-design="sereno"] .nav .nav-off {
  display: flex; align-items: center; gap: 10px; padding: 8px 34px 8px 6px; border-radius: var(--r-sm); color: var(--muted);
  font-size: 13px; font-weight: 600; transition: color .2s, background .2s; background: none; border: 0;
}
:root[data-design="sereno"] .nav a.nav-sub { padding-left: 22px; font-size: 12.5px; }
:root[data-design="sereno"] .nav a:hover { color: var(--ink2); background: color-mix(in srgb, var(--ink) 3%, transparent); }
:root[data-design="sereno"] .nav a.active { color: var(--ink); background: none; }
:root[data-design="sereno"] .nav:not(.tem-ind) a.active { background: none; box-shadow: none; }
:root[data-design="sereno"] .nav a.active svg { color: var(--a-tx); }
/* indicador: barrinha de 4 × 22 px na borda do painel (o shell.js centra no item ativo e ela desliza em 450 ms) */
:root[data-design="sereno"] .nav-ind {
  left: 0; right: auto; width: 4px; border-radius: 0 4px 4px 0; background: var(--a6); box-shadow: none;
  transition: transform .45s var(--s-ease), height .45s var(--s-ease);
}
:root[data-design="sereno"] .nav-ind::before { display: none; }
:root[data-design="sereno"] .nav-badge {
  font-family: var(--s-font); font-style: normal; font-size: 10px; font-weight: 700; background: var(--a9); color: var(--white);
  border-radius: 6px; padding: 1px 6px; height: auto; min-width: 0; box-shadow: none;
}
:root[data-design="sereno"] .nav-badge.calmo { background: var(--field); color: var(--ink2); }
:root[data-design="sereno"] .sidebar-foot { border: 0; padding: 0; margin-top: auto; }
:root[data-design="sereno"] .perfil-select { border-radius: var(--r-sm); border-color: var(--line); background: var(--card); }
:root[data-design="sereno"] .user-chip, :root[data-design="sereno"] .sb-recolher { border-radius: var(--r-sm); }

/* barra superior e conteúdo */
:root[data-design="sereno"] .main { gap: 10px; }
:root[data-design="sereno"] .topbar {
  background: var(--panel); border-radius: var(--r-lg); border: 0; padding: 10px 14px; position: static;
  backdrop-filter: none; min-height: 0; height: auto;
}
:root[data-design="sereno"] .live { border-left: 0; padding-left: 0; }
:root[data-design="sereno"] .content {
  background: var(--panel); border-radius: var(--r-lg); padding: 18px; min-height: 560px; max-width: none; margin: 0;
}

/* pessoa na barra (avatar com iniciais + nome + perfil) — D5b: o ".sereno-me { display: none }" da Bancada saiu */
/* a barra do Sereno é mais estreita que a da Bancada (moldura + janela): quando não cabe, quebra em duas linhas
   em vez de vazar (CRM, Importação e Terceirização a 1024 px) */
:root[data-design="sereno"] .topbar { flex-wrap: wrap; row-gap: 8px; }
:root[data-design="sereno"] .topbar-right { min-width: 0; flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; margin-left: auto; }
:root[data-design="sereno"] .sereno-me { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 34px; }
:root[data-design="sereno"] .sereno-me div { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
:root[data-design="sereno"] .sereno-me b, :root[data-design="sereno"] .sereno-me span.r {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
:root[data-design="sereno"] .sereno-me b { font-size: 12px; color: var(--ink); }
:root[data-design="sereno"] .sereno-me span.r { font-size: 10.5px; color: var(--muted); }
/* barra apertada (telas com mais botões na barra): só o avatar — o nome continua no rodapé do menu */
@media (max-width: 1180px) { :root[data-design="sereno"] .sereno-me div { display: none; } }
:root[data-design="sereno"] .sereno-me .avatar {
  width: 34px; height: 34px; font-size: 11px; font-weight: 800; background: var(--a1); color: var(--a-tx); box-shadow: none;
}
/* lua/sol: botão redondo de 32 px (o .icb da referência) com o ícone do tema atual */
:root[data-design="sereno"] .thm {
  width: 32px; height: 32px; padding: 0; border-radius: 50%; background: var(--card); box-shadow: var(--sh-1); border: 0;
  grid-template-columns: 1fr; place-items: center; transition: transform .2s var(--s-spring);
}
:root[data-design="sereno"] .thm:hover { transform: translateY(-2px); box-shadow: var(--sh-1); }
:root[data-design="sereno"] .thm-th { display: none; }
:root[data-design="sereno"] .thm svg { grid-area: 1 / 1; color: var(--ink2); transition: opacity .25s, transform .45s var(--s-spring); }
:root[data-design="sereno"][data-tema="claro"] .thm .i-lua,
:root[data-design="sereno"][data-tema="escuro"] .thm .i-sol { opacity: 0; transform: rotate(-60deg) scale(.6); }
:root[data-design="sereno"][data-tema="claro"] .thm .i-sol,
:root[data-design="sereno"][data-tema="escuro"] .thm .i-lua { opacity: 1; transform: none; color: var(--ink2); }

/* menu Aparência (e vitrine "Sistema"): as 4 cores de destaque (a amostra <i data-acento> declara o acento dela) */
:root[data-design="sereno"] .sp-pop { border-radius: var(--r-md); box-shadow: var(--sh-2); }
:root[data-design="sereno"] .sp-pop-i { border-radius: var(--r-sm); font-size: 12.5px; font-weight: 600; }
:root[data-design="sereno"] .sp-pop-acentos { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding-top: 4px; }
:root[data-design="sereno"] .sp-acento { gap: 8px; padding: 0 8px; }
:root[data-design="sereno"] .sp-acento i {
  width: 18px; height: 18px; border-radius: 6px; flex: none; background: linear-gradient(150deg, var(--a6), var(--a9));
}
:root[data-design="sereno"] i[data-acento="press"] { --a6: #1565A8; --a9: #053053; }
:root[data-design="sereno"] i[data-acento="marinho"] { --a6: #053053; --a9: #041F36; }
:root[data-design="sereno"] i[data-acento="ciano"] { --a6: #096780; --a9: #063F4F; }
:root[data-design="sereno"] i[data-acento="grafite"] { --a6: #58595B; --a9: #2B2C2E; }
:root[data-design="sereno"] .sp-acento[aria-checked="true"] { outline: 2px solid var(--foco); outline-offset: -2px; }

/* menu recolhido (64 px, só no menu lateral): ícone centrado no item, sem a reserva do selo nem o recuo do subitem
   (revisão D1, I2b — o padding do Sereno vencia o [data-menu="col"] da Bancada e o ícone saía da vista) */
@media (min-width: 861px) {
  :root[data-design="sereno"][data-menu="col"] .nav a, :root[data-design="sereno"][data-menu="col"] .nav a.nav-sub {
    padding: 8px 0; justify-content: center;
  }
  :root[data-design="sereno"][data-menu="col"] .nav-badge { display: none; }
  :root[data-design="sereno"][data-menu="col"] .brand { padding: 0 4px; }
}

/* celular: o menu vira faixa horizontal em cima (a Bancada esconde o menu nessa largura) */
@media (max-width: 860px) {
  :root[data-design="sereno"] .app, :root[data-design="sereno"][data-menu="col"] .app { grid-template-columns: minmax(0, 1fr); }
  :root[data-design="sereno"] .sidebar { display: flex; position: static; height: auto; padding: 12px; gap: 10px; }
  :root[data-design="sereno"] .nav-ind, :root[data-design="sereno"] .nav-label { display: none; }
  :root[data-design="sereno"] .nav { flex-direction: row; overflow-x: auto; overflow-y: hidden; gap: 4px; margin: 0; padding: 0 0 2px; }
  :root[data-design="sereno"] .nav a, :root[data-design="sereno"] .nav a.nav-sub { padding: 7px 11px; white-space: nowrap; }
  :root[data-design="sereno"] .nav a.active { background: var(--card); box-shadow: var(--sh-1); }
  :root[data-design="sereno"] .nav-badge { position: static; transform: none; margin-left: 6px; }
  /* rodapé do menu numa linha só: seletor de perfil + avatar (abre o menu Aparência); recolher não existe aqui */
  :root[data-design="sereno"] .perfil-faixa, :root[data-design="sereno"] .sb-recolher,
  :root[data-design="sereno"] .perfil-box > span, :root[data-design="sereno"] .sidebar .user-meta { display: none; }
  :root[data-design="sereno"] .sidebar-foot { display: flex; align-items: center; gap: 8px; }
  :root[data-design="sereno"] .perfil-box { flex: 1; min-width: 0; padding: 0; }
  :root[data-design="sereno"] .sb-acoes { flex: none; }
  :root[data-design="sereno"] .user-chip { flex: none; padding: 4px; }
  /* a pessoa já aparece no rodapé do menu (logo acima): sem avatar repetido na barra */
  :root[data-design="sereno"] .sereno-me { display: none; }
  :root[data-design="sereno"] .nav { scrollbar-width: none; }
}
@media (max-width: 560px) {
  :root[data-design="sereno"] .content { padding: 12px; }
  :root[data-design="sereno"] .sereno-me div { display: none; }
}
/* ============================================================
   ===== COMPONENTES ===== (Fase 2 do handoff — Task D2)
   CSS da referência (linhas 87–249) com três trocas: todo seletor ganha o prefixo da chave; texto em cor de acento
   usa --a-tx (fundo, borda e traço continuam --a6); --ease/--spring viram --s-ease/--s-spring.
   As classes são as do sistema (a tabela do brief diz qual peça da referência vira qual classe).
   ============================================================ */
:root[data-design="sereno"] {
  /* chip "laranja" (vencida há até 10 dias, planilha do Contas a Receber): metade atenção, metade erro */
  --laranja: color-mix(in srgb, var(--warn) 50%, var(--bad));
  --laranja-bg: color-mix(in srgb, var(--warn-bg) 50%, var(--bad-bg));
  /* 3ª série dos gráficos (barras, medidor, rosca): --a9 no claro; no escuro o --a9 some no cartão, vira um azul claro */
  --serie-3: var(--a9);
}
:root[data-design="sereno"][data-tema="escuro"] { --serie-3: color-mix(in srgb, var(--a4) 35%, var(--ink)); }
/* D4.5 — séries de dado (--df-*: dashboard financeiro; --df-cat-3 também nos trilhos do Estoque e do WorkManager).
   - categorias (as 8 abas de gastos, --df-cat-1…8): cor FIXA por categoria, da paleta Press + estados, igual para os 4
     acentos (a cor segue a categoria, não a pessoa: com o acento grafite ou ciano as séries não se confundem com o
     acento nem entre si). Ordem escolhida pelo validador da skill dataviz (vizinhas na pilha separadas para daltônicos,
     ΔE ≥ 8, e para visão normal, ΔE ≥ 15; marcas ≥ 3:1 sobre o cartão no escuro). Sem verde: verde = entrada (A8);
   - série única (linha da projeção) no acento: --a6 no claro, --a4 no escuro (o --a6 escuro some no cartão);
   - receita = --ok (entradas em verde, como os indicadores da A8); camadas do caixa: colchão e sócios = categorias 1 e 5,
     caixa livre = --ok. O rótulo/legenda ao lado continua sendo o canal principal.
   - no claro, o âmbar (#C48A2C → #B07A22) e o cinza (#ADADAD → #8E8F91) foram escurecidos para a marca passar 3:1 no
     cartão branco (teste sereno-d45).
   Tons DERIVADOS da paleta Press (não são cores novas): #B07A22 = âmbar #C48A2C da Bancada escurecido; #8E8F91 = cinza
   Press #ADADAD escurecido (entre ele e o #58595B); #0896B5 = ciano Press #08C5E3 escurecido, já usado na Bancada. */
:root[data-design="sereno"] {
  --df-cat-1: #1565A8; --df-cat-2: #B07A22; --df-cat-3: #053053; --df-cat-4: var(--laranja);
  --df-cat-5: #0896B5; --df-cat-6: var(--bad); --df-cat-7: #8E8F91; --df-cat-8: #58595B;
  --df-linha: var(--a6); --df-grade: var(--line); --df-receita: var(--ok);
  --df-camada-colchao: var(--df-cat-1); --df-camada-socios: var(--df-cat-5); --df-camada-livre: var(--ok);
}
:root[data-design="sereno"][data-tema="escuro"] {
  --df-cat-1: #29A0DC; --df-cat-2: var(--warn); --df-cat-3: #6F93B8; --df-cat-5: #08C5E3; --df-cat-7: #C9CACB; --df-cat-8: var(--muted);
  --df-linha: var(--a4);
}

/* ---- Tipografia (seção 4 do handoff): título de tela 25/700, título de cartão 14/700, rótulo 9,5/700 maiúsculo ---- */
:root[data-design="sereno"] .page-head h1 { font-size: 25px; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; color: var(--ink); }
:root[data-design="sereno"] .page-head p { font-size: 12px; color: var(--muted); margin-top: 2px; }
/* D4 (lista de conferência, item 1): o eyebrow é texto no acento (--a-tx), como o .eyebrow da referência */
:root[data-design="sereno"] .eyebrow {
  font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--a-tx); margin: 0 0 6px;
}

/* ---- Botões: principal em degradê do acento, secundário com contorno, pequeno, fantasma e perigo ---- */
:root[data-design="sereno"] .btn {
  font-family: var(--s-font); border-radius: var(--pill); padding: 9px 16px; font-weight: 700; font-size: 12px;
  border: 1.5px solid var(--ink); background: var(--card); color: var(--ink);
  transition: transform .18s var(--s-spring), box-shadow .2s, background .2s, color .2s, border-color .2s;
}
:root[data-design="sereno"] .btn:hover { transform: translateY(-1px); box-shadow: var(--sh-1); background: var(--card); border-color: var(--ink); }
:root[data-design="sereno"] .btn:active { transform: scale(.96); }
:root[data-design="sereno"] .btn-primary, :root[data-design="sereno"] .btn-primary:hover {
  background: linear-gradient(180deg, var(--a6), var(--a9)); color: var(--white); border-color: transparent;
}
:root[data-design="sereno"] .btn-primary { box-shadow: 0 6px 16px color-mix(in srgb, var(--a6) 35%, transparent); }
:root[data-design="sereno"] .btn-primary:hover { box-shadow: 0 8px 20px color-mix(in srgb, var(--a6) 42%, transparent); }
:root[data-design="sereno"] .btn-ghost { border-color: transparent; background: transparent; color: var(--ink2); }
:root[data-design="sereno"] .btn-ghost:hover { border-color: transparent; background: var(--field); color: var(--ink); box-shadow: none; }
:root[data-design="sereno"] .btn-danger { border-color: var(--bad); color: var(--bad); }
:root[data-design="sereno"] .btn-danger:hover { border-color: var(--bad); background: var(--bad-bg); color: var(--bad); }
:root[data-design="sereno"] .btn.sm, :root[data-design="sereno"] .mini-btn {
  font-family: var(--s-font); padding: 5px 11px; font-size: 11px; font-weight: 700; border-radius: var(--pill);
}
:root[data-design="sereno"] .mini-btn {
  border: 1.5px solid var(--ink); background: var(--card); color: var(--ink);
  transition: transform .18s var(--s-spring), box-shadow .2s, background .2s, color .2s, border-color .2s;
}
:root[data-design="sereno"] .mini-btn:hover { transform: translateY(-1px); box-shadow: var(--sh-1); color: var(--ink); border-color: var(--ink); }
:root[data-design="sereno"] .mini-btn:active { transform: scale(.96); }
:root[data-design="sereno"] .mini-btn.perigo:hover { color: var(--bad); border-color: var(--bad); background: var(--bad-bg); }
:root[data-design="sereno"] .btn:disabled, :root[data-design="sereno"] .btn[aria-disabled="true"],
:root[data-design="sereno"] .btn:disabled:hover { transform: none; box-shadow: none; }
/* SP.botao(): carregando (anel no acento) e sucesso (check) com as cores do Sereno */
:root[data-design="sereno"] .btn-primary.carregando { background: var(--card); border-color: color-mix(in srgb, var(--a6) 60%, transparent); box-shadow: none; }
:root[data-design="sereno"] .btn.sucesso { border-color: var(--ok); }
:root[data-design="sereno"] .btn-primary.sucesso { background: var(--ok); border-color: var(--ok); box-shadow: none; }

/* ---- Cartões: --card, raio 14, sombra 1, sem contorno ---- */
:root[data-design="sereno"] .card { background: var(--card); border: 0; border-radius: var(--r-md); box-shadow: var(--sh-1); }
:root[data-design="sereno"] .card-head { padding: 14px 15px 2px; border-bottom: 0; min-height: 0; }
:root[data-design="sereno"] .card-head h2 { font-size: 14px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
:root[data-design="sereno"] .card-head .hint { font-size: 11px; color: var(--muted); }
:root[data-design="sereno"] .card-head a.hint { color: var(--a-tx); font-weight: 600; }
:root[data-design="sereno"] .card-body { padding: 10px 15px 15px; }

/* ---- Indicadores (KPI) e cartão de destaque (degradê do acento, texto branco) ---- */
:root[data-design="sereno"] .kpi {
  background: var(--card); border: 0; border-radius: var(--r-md); box-shadow: var(--sh-1); padding: 15px;
  display: flex; flex-direction: column; gap: 4px;
  /* 13/10: o número se ajusta à largura do cartão (R$ 178.355,05 cabe num cartão estreito) */
  container-type: inline-size; min-width: 0;
}
:root[data-design="sereno"] a.kpi, :root[data-design="sereno"] .kpi.click { transition: transform .3s var(--s-spring), box-shadow .3s; }
:root[data-design="sereno"] a.kpi:hover, :root[data-design="sereno"] .kpi.click:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
:root[data-design="sereno"] .kpi-label { font-size: 11px; font-weight: 600; color: var(--muted); }
:root[data-design="sereno"] .kpi-value {
  margin-top: 4px; font-family: var(--s-font); font-weight: 700; letter-spacing: -.03em; line-height: 1; color: var(--ink);
  /* 32 px é o teto; em cartão estreito o número diminui (nunca corta nem quebra o valor) */
  font-size: clamp(16px, 12.5cqi, 32px); white-space: nowrap;
}
:root[data-design="sereno"] .kpi-meta { margin-top: 6px; font-size: 10.5px; color: var(--muted); }
:root[data-design="sereno"] .kpi-meta .up { color: var(--ok); font-weight: 700; }
:root[data-design="sereno"] .kpi-meta .down { color: var(--bad); font-weight: 700; }
:root[data-design="sereno"] .kpi-meta .warn { color: var(--warn); font-weight: 700; }
:root[data-design="sereno"] .kpi.destaque {
  background: linear-gradient(150deg, var(--a6), var(--a9) 75%); color: var(--white);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--a9) 35%, transparent);
}
/* no degradê, todo texto é branco (o branco passa AA sobre --a6 e --a9 nos 4 acentos e 2 temas) */
:root[data-design="sereno"] .kpi.destaque .kpi-label, :root[data-design="sereno"] .kpi.destaque .kpi-value,
:root[data-design="sereno"] .kpi.destaque .kpi-meta, :root[data-design="sereno"] .kpi.destaque .kpi-meta * { color: var(--white); }

/* ---- Chips de estado: 9,5/700, raio 6, fundo claro do estado ----
   Forma em todas as .pill, .chip-tipo, .chip-orc-tipo, .mini-pill, .ped-chip, .tag-nf e .badge-pend (:where, para a
   tela ainda poder ajustar). Fundo padrão: um véu da própria cor; os estados do mapa abaixo usam o fundo do token. */
:root[data-design="sereno"] :where(.pill, .chip-tipo, .chip-orc-tipo, .mini-pill, .ped-chip, .tag-nf, .badge-pend) {
  font-family: var(--s-font); font-size: 9.5px; font-weight: 700; line-height: 1.5; letter-spacing: .01em;
  border: 0; border-radius: 6px; padding: 2px 7px; min-height: 0; gap: 5px;
  background: color-mix(in srgb, currentColor 12%, var(--card));
}
:root[data-design="sereno"] :where(.pill-dot) { width: 5px; height: 5px; }
:root[data-design="sereno"] :where(.badge-pend)::before { width: 5px; height: 5px; }
/* neutro (sem estado): cinza do sistema */
:root[data-design="sereno"] .pill, :root[data-design="sereno"] .mini-pill, :root[data-design="sereno"] .chip-tipo,
:root[data-design="sereno"] .chip-orc-tipo, :root[data-design="sereno"] .tag-nf { background: var(--field); color: var(--ink2); }
/* D4.5: "Paga" do Contas a Receber fica no cinza, como na planilha (as 5 cores: a vencer, amarelo, laranja, vermelho e
   paga em cinza — a nota da tela Contas a Receber e a Bancada dizem "cinza = pago") */
:root[data-design="sereno"] .pill-rec-paga { background: var(--field); color: var(--ink2); }
/* D5d (I2): "Rascunho" do orçamento é só "ainda não saiu" — neutro em toda tela (PM.orcPillHTML), nunca o vermelho do
   cancelado */
:root[data-design="sereno"] .pill-rascunho { background: var(--field); color: var(--ink2); }
/* D4.5/D4.6: "A vencer" (e o "Data confirmada" do Contas a Receber) no AZUL PRESS FIXO, como o --info da Bancada — fora
   do acento: com o acento grafite o chip ficava cinza, igual ao "Paga" (decisão do controlador, 17/10: azul, não verde).
   As 5 cores ficam fixas para todos: azul (a vencer) · amarelo (vence em até 5d) · laranja (vencida até 10d) ·
   vermelho (>10d) · cinza (paga) */
:root[data-design="sereno"] .pill-rec-aberto { background: var(--azul-bg); color: var(--azul); }
/* D5d: "Recebido" do equipamento é o "a identificar" (pendência que o selo do menu conta), não um "ok" — azul Press
   fixo, como na Bancada (verde é só ok/concluído; estado nunca segue o acento) */
:root[data-design="sereno"] .pill-eq-recebido { background: var(--azul-bg); color: var(--azul); }
/* ok → confirmado, concluído, expedido, faturado */
:root[data-design="sereno"] .pill-aprov-confirmado,
:root[data-design="sereno"] .pill-eq-concluido, :root[data-design="sereno"] .pill-eq-expedido,
:root[data-design="sereno"] .pill-faturado,
:root[data-design="sereno"] .ped-chip.verde, :root[data-design="sereno"] .tag-nf.venda { background: var(--ok-bg); color: var(--ok); }
/* warn → aguardando, amarelo, parcial, em avaliação */
:root[data-design="sereno"] .pill-eq-aguardando, :root[data-design="sereno"] .pill-aprov-aguardando,
:root[data-design="sereno"] .pill-rec-amarelo, :root[data-design="sereno"] .pill-parcial,
:root[data-design="sereno"] .pill-eq-avaliacao { background: var(--warn-bg); color: var(--warn); }
/* bad → vermelho, devolvido, cancelado, vencida há mais de 10 dias */
:root[data-design="sereno"] .pill-rec-verm, :root[data-design="sereno"] .pill-eq-devolvido,
:root[data-design="sereno"] .pill-aprov-devolvido, :root[data-design="sereno"] .pill-cancelado,
:root[data-design="sereno"] .badge-pend { background: var(--bad-bg); color: var(--bad); }
/* vio (ciano "terceiro") → em terceiro, fornecedor; e os que já eram ciano na Bancada (identificado, expedição, importação) */
:root[data-design="sereno"] .pill-eq-terceiro, :root[data-design="sereno"] .pill-eq-identificado,
:root[data-design="sereno"] .pill-eq-expedicao, :root[data-design="sereno"] .chip-china,
:root[data-design="sereno"] .ped-chip.roxo { background: var(--vio-bg); color: var(--vio); }
/* acento → aberto, liberado, em lote, orçamento (e os selos "Press", "venda", NFS-e e o número do pedido) */
:root[data-design="sereno"] .pill-eq-liberado, :root[data-design="sereno"] .pill-eq-lote, :root[data-design="sereno"] .pill-eq-orcamento,
:root[data-design="sereno"] .chip-press, :root[data-design="sereno"] .chip-orc-venda, :root[data-design="sereno"] .ped-chip,
:root[data-design="sereno"] .tag-nf.servico, :root[data-design="sereno"] .tag-nf.nfse { background: var(--a1); color: var(--a-tx); }
:root[data-design="sereno"] .pill-aberto { background: var(--azul-bg); color: var(--azul); } /* D5d: "Aberto"/"Enviado" é ESTADO → azul fixo */
/* laranja → vencida há até 10 dias */
:root[data-design="sereno"] .pill-rec-laranja { background: var(--laranja-bg); color: var(--laranja); }
:root[data-design="sereno"] a.ped-chip:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ---- Avatar: iniciais; com --h no style, cor por pessoa (matiz, como na referência); data-st = bolinha ----
   Sem --h: o acento (--a1/--a-tx). Texto a 30% de luz no claro: passa AA em qualquer matiz (mín. 4,87). */
:root[data-design="sereno"] .avatar, :root[data-design="sereno"] .crm-av {
  position: relative; font-family: var(--s-font); font-weight: 800; background: var(--a1); color: var(--a-tx); box-shadow: none;
}
:root[data-design="sereno"] .avatar[style*="--h"], :root[data-design="sereno"] .crm-av[style*="--h"] {
  background: hsl(var(--h) 80% 88%); color: hsl(var(--h) 45% 30%);
}
:root[data-design="sereno"][data-tema="escuro"] .avatar[style*="--h"], :root[data-design="sereno"][data-tema="escuro"] .crm-av[style*="--h"] {
  background: hsl(var(--h) 45% 24%); color: hsl(var(--h) 80% 85%);
}
:root[data-design="sereno"] .avatar.sm { width: 22px; height: 22px; font-size: 8.5px; box-shadow: 0 0 0 2px var(--card); }
:root[data-design="sereno"] .avatar.lg { width: 58px; height: 58px; font-size: 17px; }
:root[data-design="sereno"] .avatar[data-st]::after {
  content: ''; position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid var(--card); background: var(--ok); box-sizing: border-box;
}
:root[data-design="sereno"] .avatar[data-st="ausente"]::after { background: var(--warn); }
:root[data-design="sereno"] .avatares { display: flex; }
:root[data-design="sereno"] .avatares .avatar + .avatar { margin-left: -7px; }

/* ---- Segmentado com pílula (as abas): fundo --card, pílula em degradê, texto ativo branco.
   O shell.js já mede e move o .tab-ind; aqui só o visual. A variante sublinhada (.tabs-linha) segue sublinhada. ---- */
:root[data-design="sereno"] .tabs:not(.tabs-linha) {
  background: var(--card); border: 0; border-radius: var(--pill); padding: 4px; gap: 0; box-shadow: var(--sh-1);
}
:root[data-design="sereno"] .tab {
  font-family: var(--s-font); padding: 6px 13px; border-radius: var(--pill); font-weight: 600; font-size: 11.5px;
  color: var(--muted); transition: color .25s; white-space: nowrap;
}
:root[data-design="sereno"] .tab:hover { color: var(--ink2); }
:root[data-design="sereno"] .tabs:not(.tabs-linha) .tab.active { color: var(--white); }
:root[data-design="sereno"] .tabs:not(.tabs-linha) .tab-ind {
  border-radius: var(--pill); background: linear-gradient(180deg, var(--a6), var(--a9)); box-shadow: none;
  transition: transform .45s var(--s-ease), width .45s var(--s-ease), height .45s var(--s-ease);
}
:root[data-design="sereno"] .tabs:not(.tabs-linha):not(.tem-ind) .tab.active { background: linear-gradient(180deg, var(--a6), var(--a9)); box-shadow: none; }
:root[data-design="sereno"] .tabs:not(.tabs-linha) .tab-ind.sem-anim { transition: none; }
:root[data-design="sereno"] .tabs.tabs-linha { border-bottom-color: var(--line); }
:root[data-design="sereno"] .tabs.tabs-linha .tab { border-radius: 0; font-size: 13.5px; font-weight: 600; }
:root[data-design="sereno"] .tabs.tabs-linha .tab.active { color: var(--ink); }

/* ---- Campos: fundo --field, borda transparente; no foco, borda --a4 e anel suave (linha 214 da referência) ---- */
:root[data-design="sereno"] .control, :root[data-design="sereno"] .field {
  font-family: var(--s-font); background: var(--field); border: 1.5px solid transparent; border-radius: var(--r-sm);
  color: var(--ink); transition: border-color .2s, box-shadow .2s, background .2s;
}
:root[data-design="sereno"] .control { padding: 9px 11px; font-weight: 600; font-size: 12px; }
:root[data-design="sereno"] .field { padding: 7px 11px; }
:root[data-design="sereno"] .field input, :root[data-design="sereno"] .field select, :root[data-design="sereno"] .field textarea {
  font-family: var(--s-font); font-weight: 600; font-size: 12px; color: var(--ink);
}
:root[data-design="sereno"] .field svg { color: var(--muted); }
:root[data-design="sereno"] .control:hover, :root[data-design="sereno"] .field:hover { border-color: color-mix(in srgb, var(--ink) 14%, transparent); }
:root[data-design="sereno"] .control:focus, :root[data-design="sereno"] .field:focus-within {
  border-color: var(--a4); background: var(--card); box-shadow: 0 0 0 4px color-mix(in srgb, var(--a4) 25%, transparent);
}
:root[data-design="sereno"] textarea.control { min-height: 70px; }
:root[data-design="sereno"] label.f { gap: 5px; }
:root[data-design="sereno"] label.f > span { font-size: 10.5px; font-weight: 600; color: var(--muted); }

/* ---- Interruptor (novo): <input type="checkbox" class="sw"> ---- */
:root[data-design="sereno"] input[type="checkbox"].sw {
  appearance: none; -webkit-appearance: none; width: 38px; height: 22px; border-radius: var(--pill); background: var(--line);
  position: relative; cursor: pointer; transition: background .3s; flex: none; margin: 0; border: 0;
}
:root[data-design="sereno"] input[type="checkbox"].sw::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--white);
  box-shadow: var(--thumb-sh); transition: transform .35s var(--s-spring);
}
:root[data-design="sereno"] input[type="checkbox"].sw:checked { background: var(--a6); }
:root[data-design="sereno"] input[type="checkbox"].sw:checked::after { transform: translateX(16px); }
/* D5d: desabilitado sem opacidade (nada é esmaecido por opacidade): trilha --field com contorno --line, bolinha sem
   sombra; ligado e travado = o acento misturado ao painel (o mesmo tom do "vem junto" da Equipe) */
:root[data-design="sereno"] input[type="checkbox"].sw:disabled {
  cursor: not-allowed; background: var(--field); box-shadow: inset 0 0 0 1px var(--line);
}
:root[data-design="sereno"] input[type="checkbox"].sw:disabled:checked { background: color-mix(in srgb, var(--a6) 45%, var(--panel)); box-shadow: none; }
:root[data-design="sereno"] input[type="checkbox"].sw:disabled::after { box-shadow: none; }
/* no escuro a trilha desligada (--line) some no cartão: um tom acima */
:root[data-design="sereno"][data-tema="escuro"] input[type="checkbox"].sw:not(:checked):not(:disabled) { background: color-mix(in srgb, var(--ink) 22%, var(--card)); }

/* ---- Janela (modal): fundo escurece e desfoca 6 px; entra com escala .95 → 1 e mola de 320 ms ---- */
:root[data-design="sereno"] .modal-back { background: var(--scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 16px; }
:root[data-design="sereno"] .modal-back.show { transition: opacity .25s, display .25s allow-discrete; }
/* margem automática: centrada quando cabe, do topo (rolando) quando é mais alta que a tela */
:root[data-design="sereno"] .modal {
  margin-block: auto; background: var(--card); border-radius: var(--r-lg); box-shadow: var(--sh-2);
  transform: translateY(14px) scale(.95); opacity: 0; transition: transform .2s var(--s-ease), opacity .18s;
}
:root[data-design="sereno"] .modal-back.show .modal { transform: none; opacity: 1; transition: transform .32s var(--s-spring), opacity .22s; }
@starting-style { :root[data-design="sereno"] .modal-back.show .modal { transform: translateY(14px) scale(.95); opacity: 0; } }
:root[data-design="sereno"] .modal-head { border-bottom: 0; padding: 18px 20px 4px; }
:root[data-design="sereno"] .modal-head h2 { font-size: 16px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
:root[data-design="sereno"] .modal-x {
  width: 28px; height: 28px; padding: 0; border-radius: 50%; background: var(--field); color: var(--ink2); font-size: 16px;
  display: grid; place-items: center; transition: background .2s, color .2s, transform .2s var(--s-spring);
}
:root[data-design="sereno"] .modal-x:hover { background: var(--a1); color: var(--a-tx); transform: scale(1.1); }
:root[data-design="sereno"] .modal-body { padding: 12px 20px; }
:root[data-design="sereno"] .modal-foot { border-top: 0; background: none; padding: 8px 20px 20px; border-radius: 0 0 var(--r-lg) var(--r-lg); }

/* ---- Gaveta lateral: cartão flutuante que desliza da direita em 450 ms (curva suave) ---- */
:root[data-design="sereno"] .crm-drawer-back { background: var(--scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
:root[data-design="sereno"] .crm-drawer {
  top: 12px; right: 12px; bottom: 12px; max-width: calc(100vw - 24px); background: var(--card); border: 0;
  border-radius: var(--r-lg); box-shadow: var(--sh-2); overflow: hidden;
  transform: translateX(110%); transition: transform .3s var(--s-ease), display .3s allow-discrete;
}
:root[data-design="sereno"] .crm-drawer.show { transform: none; transition: transform .45s var(--s-ease), display .45s allow-discrete; }
@starting-style { :root[data-design="sereno"] .crm-drawer.show { transform: translateX(110%); } }
:root[data-design="sereno"] .crm-drawer-head { border-bottom: 0; padding: 20px 22px 8px; }
:root[data-design="sereno"] .crm-drawer.show .crm-drawer-head::after { display: none; }
:root[data-design="sereno"] .crm-drawer-head h2 { font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
:root[data-design="sereno"] .crm-drawer-body { padding: 10px 22px 22px; }

/* ---- Aviso (toast): pílula --a9 no centro, embaixo; entra com mola ---- */
:root[data-design="sereno"] .toast {
  left: 50%; right: auto; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); max-width: calc(100vw - 32px);
  background: var(--a9); color: var(--white); border-radius: var(--pill); padding: 9px 18px; font-weight: 600; font-size: 12px;
  box-shadow: var(--sh-2); transform: translate(-50%, 10px) scale(.95); transition: opacity .3s, transform .3s;
}
/* no escuro o --a9 quase some sobre a janela: um fio --line em volta */
:root[data-design="sereno"][data-tema="escuro"] .toast { box-shadow: var(--sh-2), inset 0 0 0 1px var(--line); }
:root[data-design="sereno"] .toast.show { transform: translate(-50%, 0); animation: sereno-toast .45s var(--s-spring) both; }
@keyframes sereno-toast { from { opacity: 0; transform: translate(-50%, 18px) scale(.9); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---- Menu suspenso (.sp-pop): cartão com sombra 2, abre com mola; item com o mouse em cima ganha o acento ---- */
:root[data-design="sereno"] .sp-pop { background: var(--card); padding: 5px; animation: sereno-menu .22s var(--s-spring) both; }
:root[data-design="sereno"] .sp-pop.sai { animation: sp-fadeo 120ms ease-in both; }
:root[data-design="sereno"] .sp-pop-h b { font-weight: 700; color: var(--ink); }
:root[data-design="sereno"] .sp-pop-i:hover, :root[data-design="sereno"] .sp-pop-i:focus-visible { background: var(--a1); color: var(--a-tx); }
:root[data-design="sereno"] .sp-pop-i:hover svg, :root[data-design="sereno"] .sp-pop-i:focus-visible svg { color: var(--a-tx); }
@keyframes sereno-menu { from { opacity: 0; transform: scale(.9) translateY(-6px); } }

/* ---- Barra de progresso: trilho --line, preenchimento --a6 que cresce da esquerda ---- */
:root[data-design="sereno"] .bar-track { height: 6px; border-radius: var(--pill); background: var(--line); overflow: hidden; }
:root[data-design="sereno"] .progress .bar-track { height: 4px; }
:root[data-design="sereno"] .bar-fill {
  border-radius: var(--pill); background: var(--a6); -webkit-mask-image: none; mask-image: none;
  animation: sereno-largura 1s var(--s-ease) .35s backwards;
}
:root[data-design="sereno"] .progress span, :root[data-design="sereno"] .bar-count { font-family: var(--s-font); }
@keyframes sereno-largura { from { width: 0; } }

/* ---- Quadro (cartões arrastáveis — o arrastar é da D3/D4): coluna --card, cartão --panel ----
   O cabeçalho colorido das colunas do CRM (.crm-col-head, cores --crm-*) fica para a tela do CRM (D4). */
:root[data-design="sereno"] .kb-col, :root[data-design="sereno"] .crm-col {
  background: var(--card); border: 0; border-radius: var(--r-md); box-shadow: var(--sh-1);
  outline: 2px solid transparent; transition: outline-color .2s, background .2s;
}
:root[data-design="sereno"] .kb-col-head { background: none; border-bottom: 0; padding: 12px 12px 4px; gap: 7px; }
:root[data-design="sereno"] .kb-col-head h2 { font-size: 12px; font-weight: 700; }
:root[data-design="sereno"] .kb-col-head .n, :root[data-design="sereno"] .kb-col-head .soma { font-family: var(--s-font); color: var(--muted); font-size: 11px; }
:root[data-design="sereno"] .kb-col-body { padding: 6px 10px 10px; }
:root[data-design="sereno"] .kb-card, :root[data-design="sereno"] .crm-card, :root[data-design="sereno"] .lead-card {
  background: var(--panel); border: 0; border-radius: var(--r-sm); padding: 10px;
  transition: box-shadow .2s, scale .2s var(--s-spring), rotate .2s, opacity .2s;
}
:root[data-design="sereno"] .lead-card { outline: 1.5px dashed color-mix(in srgb, var(--ink) 18%, transparent); outline-offset: -1.5px; }
:root[data-design="sereno"] .kb-card:hover, :root[data-design="sereno"] .crm-card:hover, :root[data-design="sereno"] .lead-card:hover { box-shadow: var(--sh-1); }
:root[data-design="sereno"] .kb-card:active { transform: none; scale: .985; }
:root[data-design="sereno"] .kb-card .kb-num, :root[data-design="sereno"] .kb-card .kb-val,
:root[data-design="sereno"] .crm-card .kc-num, :root[data-design="sereno"] .crm-card .kc-val { font-family: var(--s-font); font-weight: 700; }
:root[data-design="sereno"] .kb-card .kb-cli, :root[data-design="sereno"] .crm-card .kc-cli { font-size: 12px; font-weight: 700; line-height: 1.3; }
:root[data-design="sereno"] .kb-card .kb-sub, :root[data-design="sereno"] .crm-card .kc-sub { font-size: 10px; font-weight: 600; color: var(--muted); }
/* coluna-alvo ao arrastar: é a .col-alvo do MOV.arrastar (mais abaixo); aqui o lugar reservado tracejado */
:root[data-design="sereno"] .kb-ph { border-radius: var(--r-sm); border: 1.5px dashed var(--a4); background: color-mix(in srgb, var(--a1) 50%, transparent); min-height: 54px; }

/* ---- Tabela (não existe na referência; no espírito do Sereno, compacta para telas de dados) ---- */
:root[data-design="sereno"] .tbl-wrap { background: var(--card); border-radius: var(--r-md); box-shadow: var(--sh-1); }
/* dentro de um cartão (ou grupo), a tabela não vira outro cartão */
:root[data-design="sereno"] .card .tbl-wrap, :root[data-design="sereno"] .grupo .tbl-wrap { background: none; border-radius: 0; box-shadow: none; }
:root[data-design="sereno"] th {
  font-family: var(--s-font); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted); background: var(--card); padding: 9px 12px; border-bottom: 1px solid var(--line);
}
:root[data-design="sereno"] td { padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: 12.5px; font-weight: 500; }
:root[data-design="sereno"] td.right, :root[data-design="sereno"] td.num { font-variant-numeric: tabular-nums; text-align: right; }
:root[data-design="sereno"] tbody tr:hover td { background: var(--row-hov); }
:root[data-design="sereno"] tfoot td { background: var(--field); border-top: 1px solid var(--line); font-weight: 700; }

/* ---- Barras em pílula com hachura (painel e dashboards da D4) ---- */
/* altura definida: as barras usam % (--h) da coluna; só com min-height o % não resolve e as barras somem */
:root[data-design="sereno"] .sereno-barras { display: flex; align-items: flex-end; gap: 10px; flex: 1; height: 196px; min-height: 170px; padding-top: 26px; box-sizing: border-box; }
:root[data-design="sereno"] .sereno-barras .bar-c {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end;
  color: var(--muted); font-size: 10.5px; font-weight: 600; min-width: 0;
}
:root[data-design="sereno"] .sereno-barras .bar {
  width: 100%; max-width: 54px; height: var(--h); border-radius: var(--pill); position: relative;
  animation: sereno-cresce .9s var(--s-spring) backwards; animation-delay: calc(var(--i) * 70ms + .3s);
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--muted) 45%, transparent) 0 1.5px, transparent 1.5px 6px), var(--field);
  transition: filter .2s;
}
:root[data-design="sereno"] .sereno-barras .bar.s1 { background: var(--a6); }
:root[data-design="sereno"] .sereno-barras .bar.s2 { background: var(--a4); }
:root[data-design="sereno"] .sereno-barras .bar.s3 { background: var(--serie-3); }
:root[data-design="sereno"] .sereno-barras .bar i {
  position: absolute; left: 50%; top: -24px; translate: -50% 4px; font-style: normal; font-size: 9.5px; font-weight: 700;
  background: var(--card); color: var(--ink); border-radius: 6px; padding: 2px 6px; box-shadow: var(--sh-1); opacity: 0;
  transition: opacity .2s, translate .25s var(--s-spring); pointer-events: none; white-space: nowrap;
}
:root[data-design="sereno"] .sereno-barras .bar:hover i, :root[data-design="sereno"] .sereno-barras .bar.tip i { opacity: 1; translate: -50% 0; }
:root[data-design="sereno"] .sereno-barras:hover .bar.tip:not(:hover) i { opacity: 0; }
:root[data-design="sereno"] .sereno-barras .bar:hover { filter: brightness(1.08); }
@keyframes sereno-cresce { from { height: 0%; } }

/* ---- Medidor em arco (o traço de fundo é hachurado por um <pattern> do próprio SVG, com as cores dos tokens) ---- */
:root[data-design="sereno"] .sereno-gauge { position: relative; display: grid; place-items: center; }
:root[data-design="sereno"] .sereno-gauge svg { width: 100%; max-width: 230px; height: auto; overflow: visible; }
:root[data-design="sereno"] .sereno-gauge path { fill: none; stroke-width: 24; stroke-linecap: round; transition: stroke-dasharray 1.1s var(--s-ease); }
:root[data-design="sereno"] .sereno-gauge div { position: absolute; bottom: 2px; text-align: center; }
:root[data-design="sereno"] .sereno-gauge b { font-size: 28px; font-weight: 700; letter-spacing: -.03em; line-height: 1; display: block; font-variant-numeric: tabular-nums; }
:root[data-design="sereno"] .sereno-gauge span { font-size: 10px; color: var(--muted); }
:root[data-design="sereno"] .sereno-legend { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; font-size: 10.5px; color: var(--muted); }
:root[data-design="sereno"] .sereno-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; background: var(--c); }

/* ---- Rosca ---- */
:root[data-design="sereno"] .sereno-donut { position: relative; display: grid; place-items: center; }
:root[data-design="sereno"] .sereno-donut svg { width: 150px; height: 150px; rotate: -90deg; }
:root[data-design="sereno"] .sereno-donut circle { fill: none; stroke-width: 15; transition: stroke-dasharray 1.1s var(--s-ease), stroke-dashoffset 1.1s var(--s-ease); }
:root[data-design="sereno"] .sereno-donut div { position: absolute; text-align: center; }
:root[data-design="sereno"] .sereno-donut b { font-size: 19px; font-weight: 700; display: block; line-height: 1.1; font-variant-numeric: tabular-nums; }
:root[data-design="sereno"] .sereno-donut span { font-size: 9.5px; color: var(--muted); }
:root[data-design="sereno"] .sereno-dl { list-style: none; margin: 0; padding: 0; }
:root[data-design="sereno"] .sereno-dl li { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink2); }
:root[data-design="sereno"] .sereno-dl li + li { margin-top: 7px; }
:root[data-design="sereno"] .sereno-dl i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
:root[data-design="sereno"] .sereno-dl b { margin-left: auto; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---- Gráfico de área com linha-guia e balão ---- */
:root[data-design="sereno"] .sereno-chart { position: relative; height: 230px; margin-left: 22px; touch-action: pan-y; }
:root[data-design="sereno"] .sereno-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
:root[data-design="sereno"] .sereno-chart .gl { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line); }
:root[data-design="sereno"] .sereno-chart .gl span { position: absolute; left: -22px; top: -7px; font-size: 9.5px; color: var(--muted); }
:root[data-design="sereno"] .sereno-chart .cross { position: absolute; top: 0; bottom: 0; border-left: 1.5px dashed var(--a6); opacity: 0; transition: opacity .15s; }
:root[data-design="sereno"] .sereno-chart .dot {
  position: absolute; width: 11px; height: 11px; border-radius: 50%; background: var(--card); border: 2.5px solid var(--a6);
  translate: -50% -50%; opacity: 0; transition: opacity .15s;
}
:root[data-design="sereno"] .sereno-chart .tt {
  position: absolute; translate: 14px -50%; background: var(--a9); color: var(--white); border-radius: var(--r-sm); padding: 8px 11px;
  font-size: 10.5px; white-space: nowrap; opacity: 0; pointer-events: none; box-shadow: var(--sh-2);
  transition: opacity .15s, left .12s var(--s-ease), top .12s var(--s-ease); z-index: 3;
}
:root[data-design="sereno"] .sereno-chart .tt b { display: block; font-size: 13px; }
:root[data-design="sereno"] .sereno-chart .tt.flip { translate: calc(-100% - 14px) -50%; }
:root[data-design="sereno"] .sereno-chart.hov .cross, :root[data-design="sereno"] .sereno-chart.hov .dot,
:root[data-design="sereno"] .sereno-chart.hov .tt { opacity: 1; }
:root[data-design="sereno"] .sereno-xl { display: flex; justify-content: space-between; font-size: 9.5px; color: var(--muted); margin-left: 22px; }
:root[data-design="sereno"] .sereno-lg2 { display: flex; gap: 14px; font-size: 10.5px; color: var(--muted); align-items: center; flex-wrap: wrap; }
:root[data-design="sereno"] .sereno-lg2 i { display: inline-block; width: 14px; border-top: 2.5px solid var(--a6); margin-right: 5px; vertical-align: middle; }
:root[data-design="sereno"] .sereno-lg2 i.d { border-top-style: dotted; border-color: var(--muted); }

/* ---- Mini-gráfico (sparkline) no pé do KPI ---- */
:root[data-design="sereno"] .kpi .sereno-spark-box { display: block; width: calc(100% + 30px); margin: 6px -15px -15px; height: 38px; }
:root[data-design="sereno"] .sereno-spark {
  fill: none; stroke: var(--a6); stroke-width: 1.6; vector-effect: non-scaling-stroke; animation: sereno-traco 1.3s var(--s-ease) .3s backwards;
}
:root[data-design="sereno"] .kpi.destaque .sereno-spark { stroke: var(--white); }
@keyframes sereno-traco { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---- Mapa de calor (quanto mais forte, mais acento) ---- */
:root[data-design="sereno"] .sereno-heat {
  display: grid; grid-template-rows: repeat(7, 1fr); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px;
}
:root[data-design="sereno"] .sereno-heat i {
  aspect-ratio: 1; border-radius: 3px; background: color-mix(in srgb, var(--a6) var(--p), var(--line));
  animation: sereno-celula .5s var(--s-ease) backwards; animation-delay: calc(var(--i) * 4ms + .3s);
}
@keyframes sereno-celula { from { opacity: 0; transform: translateX(var(--dx, 0)) translateY(6px); } }

/* ---- Calendário mensal ---- */
:root[data-design="sereno"] .sereno-calh { font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
:root[data-design="sereno"] .sereno-nb {
  width: 28px; height: 28px; border-radius: 50%; background: var(--field); border: 0; color: var(--ink2); cursor: pointer;
  display: grid; place-items: center; transition: background .2s, color .2s, transform .2s var(--s-spring);
}
:root[data-design="sereno"] .sereno-nb:hover { background: var(--a1); color: var(--a-tx); transform: scale(1.1); }
:root[data-design="sereno"] .sereno-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
:root[data-design="sereno"] .sereno-cal .wd {
  font-size: 9.5px; font-weight: 700; color: var(--muted); text-align: center; letter-spacing: .1em; text-transform: uppercase; padding: 4px 0;
}
:root[data-design="sereno"] .sereno-cal .day {
  min-height: 68px; border-radius: var(--r-sm); background: var(--field); padding: 6px; display: flex; flex-direction: column; gap: 3px;
  text-align: left; font-family: var(--s-font); font-weight: 700; font-size: 11px; color: var(--ink); border: 0;
  outline: 2px solid transparent; cursor: pointer; min-width: 0;
  animation: sereno-celula .45s var(--s-ease) backwards; animation-delay: calc(var(--i) * 9ms);
  transition: outline-color .2s, background .2s, transform .2s var(--s-spring);
}
:root[data-design="sereno"] .sereno-cal .day:hover { transform: translateY(-2px); }
:root[data-design="sereno"] .sereno-cal .day.off { background: none; color: var(--muted); font-weight: 500; }
:root[data-design="sereno"] .sereno-cal .day.sel { outline-color: var(--foco); background: var(--card); }
:root[data-design="sereno"] .sereno-cal .day.today > span:first-child {
  background: var(--a6); color: var(--white); width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
}
:root[data-design="sereno"] .sereno-cal .ev {
  font-size: 8.5px; font-weight: 700; border-radius: 4px; padding: 1px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
:root[data-design="sereno"] .sereno-cal .ev.ok { background: var(--ok-bg); color: var(--ok); --c: var(--ok); }
:root[data-design="sereno"] .sereno-cal .ev.acento { background: var(--a1); color: var(--a-tx); --c: var(--a6); }
:root[data-design="sereno"] .sereno-cal .ev.warn { background: var(--warn-bg); color: var(--warn); --c: var(--warn); }
:root[data-design="sereno"] .sereno-cal .ev.bad { background: var(--bad-bg); color: var(--bad); --c: var(--bad); }
:root[data-design="sereno"] .sereno-cal .ev.vio { background: var(--vio-bg); color: var(--vio); --c: var(--vio); }

/* selo de pendências do menu no escuro: o --a9 some sobre o painel escuro (revisão D1, M2) — vira --a6 */
:root[data-design="sereno"][data-tema="escuro"] .nav-badge:not(.calmo) { background: var(--a6); }

/* componentes no celular (como a referência a 560 px) */
@media (max-width: 560px) {
  :root[data-design="sereno"] .sereno-cal .day { min-height: 50px; padding: 4px; }
  :root[data-design="sereno"] .sereno-cal .ev { font-size: 0; height: 5px; padding: 0; background: var(--c); }
  :root[data-design="sereno"] .page-head h1 { font-size: 22px; }
}
/* ===== fim dos componentes ===== */

/* ============================================================
   MOVIMENTO (D3) — as classes que o movimento.js (window.MOV) põe. Tempos da seção 6 do handoff.
   ============================================================ */
/* entrada em cascata: 600 ms, 45 ms entre blocos (o --d vem do MOV.cascata); sobe 14 px + desfoque 5 px → nítido */
:root[data-design="sereno"] [data-in] { animation: sereno-rise .6s var(--s-ease) backwards; animation-delay: var(--d, 0ms); }
@keyframes sereno-rise { from { opacity: 0; transform: translateY(14px); filter: blur(5px); } }
/* título revelado: 650 ms, sobe de trás de uma máscara (o h1 corta; o span.rv do MOV.revelarTitulo sobe) */
:root[data-design="sereno"] .page-head h1, :root[data-design="sereno"] body > .wrap > h1 { overflow: hidden; padding-bottom: 3px; }
:root[data-design="sereno"] h1 > span.rv { display: inline-block; animation: sereno-up .65s var(--s-ease) backwards; }
@keyframes sereno-up { from { transform: translateY(105%); } }

/* arrastar cartão (MOV.arrastar, só mouse): levanta com escala 1.04, giro 3° e sombra 2; a coluna-alvo ganha contorno
   --a4; o lugar reservado fica tracejado. O :active do cartão não pode vencer a escala enquanto o botão está apertado. */
:root[data-design="sereno"] .tk-arrasto, :root[data-design="sereno"] .tk-arrasto:active {
  position: fixed; z-index: 60; pointer-events: none; box-shadow: var(--sh-2); scale: 1.04; rotate: 3deg; cursor: grabbing; margin: 0;
}
:root[data-design="sereno"] .tk-lugar { border-radius: var(--r-sm); border: 1.5px dashed var(--a4); background: color-mix(in srgb, var(--a1) 50%, transparent); }
:root[data-design="sereno"] .col-alvo { outline: 2px solid var(--a4); background: color-mix(in srgb, var(--a1) 45%, var(--card)); }
:root[data-design="sereno"].mov-arrastando, :root[data-design="sereno"].mov-arrastando * { cursor: grabbing; -webkit-user-select: none; user-select: none; }

/* janela e gaveta: saída de 220 ms (MOV.fecharJanela põe .saindo e só depois tira o .show) */
:root[data-design="sereno"] .modal-back.show.saindo, :root[data-design="sereno"] .crm-drawer-back.show.saindo { opacity: 0; transition: opacity .22s; }
:root[data-design="sereno"] .modal-back.show.saindo .modal { transform: translateY(8px) scale(.95); opacity: 0; transition: transform .22s var(--s-ease), opacity .22s; }
:root[data-design="sereno"] .crm-drawer.show.saindo { transform: translateX(110%); transition: transform .22s var(--s-ease); }
/* gaveta aberta pelo MOV.abrirJanela: o conteúdo entra em cascata (55 ms entre blocos, depois que ela desliza) */
:root[data-design="sereno"] .crm-drawer.show.mov-entra .crm-drawer-body > * {
  animation: sereno-rise .5s var(--s-ease) backwards; animation-delay: calc(var(--i, 0) * 55ms + .15s);
}

/* troca de tela: o conteúdo antigo some em 140 ms e o novo entra pela cascata (sem animação própria); o indicador do
   menu desliza 450 ms na curva suave. A troca de tema (.tema-vt) continua com a revelação circular da Bancada. */
:root[data-design="sereno"]:not(.tema-vt)::view-transition-old(root) { animation-duration: 140ms; }
:root[data-design="sereno"]:not(.tema-vt)::view-transition-new(root) { animation: none; }
:root[data-design="sereno"]::view-transition-group(sp-ind) { animation-duration: 450ms; animation-timing-function: var(--s-ease); }

@media (prefers-reduced-motion: reduce) {
  :root[data-design="sereno"] *, :root[data-design="sereno"] *::before, :root[data-design="sereno"] *::after {
    animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important;
  }
  :root[data-design="sereno"] { transition: none; }
}

/* ============================================================
   D4.7 — tabela de preços do cliente (cliente-tabela.js, aba "Tabela de preços" da página do cliente).
   Componente montado pelo script (sem <style> próprio), por isso mora aqui. Só as classes do editor (.tp-toolbar,
   .tp-tab, .tp-vazio e a janela #modal-tp-copiar); a lista "importar da tabela" do orçamento (.tp-linha, .tp-foot)
   não muda. Tabela DENSA: linhas baixas e células-campo compactas (até 10 colunas com o custo), para caber o máximo
   de código, nome e valor sem rolar.
   ============================================================ */
:root[data-design="sereno"] .tp-toolbar { gap: 8px; margin-bottom: 12px; }
:root[data-design="sereno"] .tp-toolbar .tp-cont {
  font-family: var(--s-font); font-size: 11px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums;
}
:root[data-design="sereno"] .tp-tab th { padding: 8px 6px; }
:root[data-design="sereno"] .tp-tab td { padding: 5px 3px; font-size: 12px; vertical-align: top; }
:root[data-design="sereno"] .tp-tab th:first-child, :root[data-design="sereno"] .tp-tab td:first-child { padding-left: 10px; }
:root[data-design="sereno"] .tp-tab th:last-child, :root[data-design="sereno"] .tp-tab td:last-child { padding-right: 10px; }
/* célula-campo: --field, raio 8, texto 600; no foco, a borda --a4 e o anel da D2 */
:root[data-design="sereno"] .tp-tab .cel {
  font-family: var(--s-font); font-size: 12px; font-weight: 600; color: var(--ink); background: var(--field);
  border: 1.5px solid transparent; border-radius: 8px; padding: 5px 7px; min-height: 30px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
:root[data-design="sereno"] .tp-tab .cel.mono { font-variant-numeric: tabular-nums; }
:root[data-design="sereno"] .tp-tab .cel.strong { font-weight: 700; }
:root[data-design="sereno"] .tp-tab .cel:hover { border-color: color-mix(in srgb, var(--ink) 14%, transparent); }
:root[data-design="sereno"] .tp-tab .cel:focus {
  outline: none; border-color: var(--a4); background: var(--card); box-shadow: 0 0 0 3px color-mix(in srgb, var(--a4) 25%, transparent);
}
:root[data-design="sereno"] .tp-tab select.cel { cursor: pointer; padding-right: 2px; }
/* descrição (a linha cinza do PDF): sem fundo, menor, logo abaixo do nome */
:root[data-design="sereno"] .tp-tab .cel[data-k="desc"] { background: transparent; min-height: 24px; margin-top: 2px; font-weight: 500; padding-block: 3px; }
:root[data-design="sereno"] .tp-tab .cel[data-k="desc"]:focus { background: var(--card); }
:root[data-design="sereno"] .tp-tab td .sw { margin-top: 4px; }
/* estado na forma: linha nova (rascunho, ainda sem código + nome + valor) com traço no acento; linha recusada pelo
   PM (tp-erro) com fundo e traço de erro */
:root[data-design="sereno"] .tp-tab tr[data-tmp] td { background: color-mix(in srgb, var(--a1) 40%, var(--card)); }
:root[data-design="sereno"] .tp-tab tr[data-tmp] td:first-child { box-shadow: inset 3px 0 0 var(--a6); }
:root[data-design="sereno"] .tp-tab tr.tp-erro td { background: var(--bad-bg); }
:root[data-design="sereno"] .tp-tab tr.tp-erro td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
/* só leitura (quem não orça): texto da tabela da D2, nome 700 */
:root[data-design="sereno"] .tp-tab .el-title { font-weight: 700; color: var(--ink); }
:root[data-design="sereno"] .tp-tab .el-sub { font-size: 11px; color: var(--ink2); }
/* duplicar e excluir: botões redondos de 26 px */
:root[data-design="sereno"] .tp-tab .mini-btn {
  width: 26px; height: 26px; padding: 0; margin-top: 2px; font-size: 13px; line-height: 1; display: inline-grid; place-items: center;
  border-color: var(--line); color: var(--ink2);
}
:root[data-design="sereno"] .tp-tab .mini-btn:hover { border-color: var(--ink); color: var(--ink); }
:root[data-design="sereno"] .tp-tab .mini-btn.perigo:hover { border-color: var(--bad); color: var(--bad); background: var(--bad-bg); }
:root[data-design="sereno"] .tp-vazio { color: var(--muted); font-size: 12px; }
/* janela "Copiar linhas de outro cliente": cada linha num bloco --field */
:root[data-design="sereno"] #modal-tp-copiar .sel-row { border: 0; border-radius: var(--r-sm); background: var(--field); padding: 8px 11px; }
:root[data-design="sereno"] #modal-tp-copiar .sel-row .mono { font-family: var(--s-font); font-weight: 600; font-variant-numeric: tabular-nums; }
:root[data-design="sereno"] #modal-tp-copiar .sel-row input[type="checkbox"] { accent-color: var(--a6); }
:root[data-design="sereno"] #modal-tp-copiar .modal-foot label { color: var(--ink2); font-weight: 600; }
@media (max-width: 560px) {
  :root[data-design="sereno"] .tp-toolbar .field { flex: 1 1 100%; }
  :root[data-design="sereno"] .tp-toolbar .field input, :root[data-design="sereno"] .tp-toolbar .field select { width: 100%; }
  :root[data-design="sereno"] .tp-toolbar .tp-cont { margin-left: 0; flex-basis: 100%; }
  :root[data-design="sereno"] .tp-toolbar .btn { flex: 1 1 auto; }
}
/* ===== fim da D4.7 ===== */

/* ============================================================
   D4.11 — Importação, Compras, Terceirização e Fornecedores: os componentes que SÓ estas telas dividem e que moram no
   styles.css (contadores .imp-cont, chegadas .che, quadro .imp-bloco/.imp-grupo/.imp-card, selo .imp-pill e o aviso de
   duas linhas .ter-toast). Nenhuma outra tela usa estas classes (o resto fica no <style> de cada tela).
   Tons das telas: "esperando terceiro" (--info) é o AZUL PRESS FIXO (desde a D5d o próprio apelido --info é o --azul) e
   o ciano "em produção / em serviço" vira o --vio. As cores chegam no style="--c: var(--info)" / "var(--ciano)" que o script monta;
   trocar o --ciano no próprio elemento basta (o var() é resolvido nele).
   ============================================================ */
:root[data-design="sereno"] :is(.imp-cont, .imp-pill, .imp-card, .imp-grupo, .che) { --ciano: var(--vio); }

/* contadores (filtram): cartão pequeno, número 700 que se ajusta à largura (nunca estoura), bolinha do tom no rótulo */
:root[data-design="sereno"] .imp-contadores { gap: 10px; }
:root[data-design="sereno"] .imp-cont {
  background: var(--card); border: 0; border-radius: var(--r-md); box-shadow: var(--sh-1); padding: 12px 14px; gap: 6px;
  min-width: 118px; container-type: inline-size; outline: 2px solid transparent; outline-offset: 0;
  transition: transform .3s var(--s-spring), box-shadow .3s, outline-color .2s, background .2s;
}
:root[data-design="sereno"] .imp-cont:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
:root[data-design="sereno"] .imp-cont b {
  font-family: var(--s-font); font-weight: 700; letter-spacing: -.03em; line-height: 1; color: var(--ink);
  font-size: clamp(16px, 18cqi, 26px); white-space: nowrap; font-variant-numeric: tabular-nums;
}
:root[data-design="sereno"] .imp-cont > span { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--muted); line-height: 1.3; }
:root[data-design="sereno"] .imp-cont > span::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--muted)); flex: none; }
:root[data-design="sereno"] .imp-cont.on { outline-color: var(--a4); background: color-mix(in srgb, var(--a1) 45%, var(--card)); }
/* no fundo do acento, o rótulo sobe para --ink2 (o --muted fica abaixo de 4,5 no escuro) */
:root[data-design="sereno"] .imp-cont.on > span { color: var(--ink2); }
:root[data-design="sereno"] .imp-cont.zero b { color: var(--muted); }
:root[data-design="sereno"] .imp-cont.zero > span::before { background: color-mix(in srgb, var(--muted) 45%, transparent); }

/* chegadas previstas (Importação): linhas no cartão, barra em pílula (vio = em produção; erro = atrasado) */
:root[data-design="sereno"] .imp-chegadas .che { border-top: 1px solid var(--line); padding: 10px 15px; font-size: 12px; }
:root[data-design="sereno"] .imp-chegadas .che:first-child { border-top: 0; }
:root[data-design="sereno"] .imp-chegadas .che b { font-weight: 700; color: var(--ink); }
:root[data-design="sereno"] .imp-chegadas .che .muted { color: var(--muted); font-size: 11px !important; }
:root[data-design="sereno"] .che-bar { height: 6px; border-radius: var(--pill); background: var(--line); margin-top: 7px; }
:root[data-design="sereno"] .che-bar i {
  border-radius: var(--pill); background: var(--vio); -webkit-mask-image: none; mask-image: none;
  animation: sereno-largura 1s var(--s-ease) .35s backwards;
}
:root[data-design="sereno"] .che.late .che-bar i { background: var(--bad); }
:root[data-design="sereno"] .che-quando { font-family: var(--s-font); font-size: 11.5px; font-weight: 600; color: var(--ink2); font-variant-numeric: tabular-nums; }
:root[data-design="sereno"] .che.late .che-quando { color: var(--bad); font-weight: 700; }

/* quadro no modelo de Tarefas: bloco = coluna (--card, raio 14, sombra 1); grupo com bolinha do tom, nome 12/700 e
   contagem; cartão --panel (raio 10) que ganha a sombra 1 com o mouse */
:root[data-design="sereno"] .imp-quadro { gap: 12px; align-items: start; }
:root[data-design="sereno"] .imp-bloco {
  background: var(--card); border: 0; border-radius: var(--r-md); box-shadow: var(--sh-1); padding: 10px; min-width: 0;
}
:root[data-design="sereno"] .imp-bloco > h2 { margin: 0 0 6px; padding: 4px 4px 6px; border-bottom: 0; font-size: 13px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
:root[data-design="sereno"] .imp-grupo { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
:root[data-design="sereno"] .imp-grupo:last-child { margin-bottom: 4px; }
:root[data-design="sereno"] .imp-grupo h3 { margin: 0; padding: 4px 4px 0; font-size: 12px; font-weight: 700; color: var(--ink); gap: 7px; }
:root[data-design="sereno"] .imp-grupo h3 i { width: 7px; height: 7px; }
:root[data-design="sereno"] .imp-grupo h3 .n { font-family: var(--s-font); font-size: 11px; font-weight: 600; color: var(--muted); }
:root[data-design="sereno"] .imp-card {
  background: var(--panel); box-shadow: none; border-radius: var(--r-sm); padding: 10px; margin: 0;
  display: flex; flex-direction: column; gap: 5px; transition: box-shadow .2s, transform .2s var(--s-spring);
}
:root[data-design="sereno"] .imp-card:hover { box-shadow: var(--sh-1); }
:root[data-design="sereno"] .imp-card:active { transform: scale(.985); }
:root[data-design="sereno"] .imp-card .t1 { font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--ink); }
:root[data-design="sereno"] .imp-card .t2 { font-size: 11.5px; margin: 0; color: var(--ink2); }
:root[data-design="sereno"] .imp-card .t3 { font-size: 10px; font-weight: 600; color: var(--muted); margin: 0; padding: 0; border-top: 0; }
:root[data-design="sereno"] .imp-alerta {
  display: inline-flex; align-self: flex-start; margin: 0; font-size: 9.5px; font-weight: 700; color: var(--bad); background: var(--bad-bg);
  border-radius: 6px; padding: 2px 7px;
}
:root[data-design="sereno"] .imp-vazio {
  font-size: 11px; font-weight: 600; color: var(--muted); padding: 10px; margin: 0; border: 1.5px dashed var(--line); border-radius: var(--r-sm); background: none;
}
@media (max-width: 1100px) { :root[data-design="sereno"] .imp-quadro { grid-template-columns: minmax(0, 1fr); } }

/* selo de situação → chip da D2 (9,5/700, raio 6, bolinha); fundo = um véu do próprio tom sobre o cartão */
:root[data-design="sereno"] .imp-pill {
  font-family: var(--s-font); font-size: 9.5px; font-weight: 700; line-height: 1.5; letter-spacing: .01em; min-height: 0; gap: 5px;
  border: 0; border-radius: 6px; padding: 2px 8px; background: color-mix(in srgb, var(--c, var(--ink2)) 12%, var(--card));
}
:root[data-design="sereno"] .imp-pill::before { width: 5px; height: 5px; }

/* aviso de duas linhas (Compras, Terceirização, Fornecedores; D5b: e o .ap-toast das Aprovações): o aviso do Sereno
   (--a9, texto branco) com o texto de apoio em branco suave e "Fechar" em branco */
:root[data-design="sereno"] .toast.ter-toast, :root[data-design="sereno"] .toast.ap-toast { border-radius: var(--r-md); padding: 11px 82px 12px 16px; text-align: left; align-items: flex-start; }
:root[data-design="sereno"] .ter-t-tit { font-size: 12.5px; font-weight: 700; color: var(--white); }
:root[data-design="sereno"] .ter-t-txt { font-size: 11.5px; font-weight: 500; color: color-mix(in srgb, var(--white) 82%, transparent); }
:root[data-design="sereno"] .ter-t-fechar { top: 9px; right: 12px; font-family: var(--s-font); font-size: 11.5px; font-weight: 700; color: var(--white); }
/* ===== fim da D4.11 ===== */

/* ============================================================
   D5b — formas que várias telas repetiam no próprio <style> (D4.5–D4.12), agora num lugar só. Nas telas fica só o
   específico de cada uma (o tom, o tamanho diferente, a variante). Mesmo prefixo de camada das outras regras.
   ============================================================ */
/* selo de situação → chip da D2 (9,5/700, raio 6) nos tons de estado */
:root[data-design="sereno"] .selo {
  font-family: var(--s-font); font-size: 9.5px; font-weight: 700; line-height: 1.5; border: 0; border-radius: 6px; padding: 2px 7px;
  background: var(--field); color: var(--ink2);
}
:root[data-design="sereno"] .selo.ok { background: var(--ok-bg); color: var(--ok); }
:root[data-design="sereno"] .selo.inc { background: var(--warn-bg); color: var(--warn); }
:root[data-design="sereno"] .selo.novo { background: var(--vio-bg); color: var(--vio); }
:root[data-design="sereno"] .selo.semtab { background: var(--bad-bg); color: var(--bad); }

/* resumo chave/valor (.kv): rótulo --muted, valor 700, fio --line */
:root[data-design="sereno"] .kv { gap: 9px; }
:root[data-design="sereno"] .kv-row { border-bottom-color: var(--line); font-size: 12px; padding-bottom: 9px; }
:root[data-design="sereno"] .kv-row span { color: var(--muted); }
:root[data-design="sereno"] .kv-row b { font-weight: 700; color: var(--ink); }

/* área de soltar arquivo (.drop): tracejado suave, o "escolha" no acento */
:root[data-design="sereno"] .drop {
  border: 1.5px dashed color-mix(in srgb, var(--ink) 20%, transparent); border-radius: var(--r-md); background: var(--field); font-size: 12px;
  color: var(--muted); transition: border-color .2s, background .2s;
}
:root[data-design="sereno"] .drop strong { color: var(--a-tx); font-weight: 700; }
:root[data-design="sereno"] .drop:hover { border-color: var(--a4); background: color-mix(in srgb, var(--a1) 55%, var(--card)); }

/* rodapé das gavetas (Compras, Terceirização, Fornecedores, Equipe) e as seções da ficha */
:root[data-design="sereno"] .ter-dw-foot { border-top: 0; background: none; padding: 10px 22px 18px; }
:root[data-design="sereno"] .ter-dw-foot .nota-foot { font-size: 11.5px; color: var(--muted); font-weight: 600; }
@media (max-width: 560px) { :root[data-design="sereno"] .ter-dw-foot { padding: 10px 16px 16px; } }
:root[data-design="sereno"] .dw-sec > h3 { font-size: 14px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
:root[data-design="sereno"] .dw-sec > h3 small { font-size: 11px; font-weight: 500; color: var(--muted); }

/* ===== fim da D5b ===== */