/* ==========================================================================
   Backlog — design system
   Uma fonte monoespaçada em todo papel de texto, fundo areia, tinta quase
   preta como única cor da marca. Cantos de 4px só no que se clica, 0px em
   todo container. Régua de 1px no lugar de sombra: nada flutua, nada tem
   gradiente, nada tem desfoque. A página lê como um manual de terminal.
   A única superfície escura é o cartão-herói — o "TUI" de cada tela.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Fonte — servida daqui mesmo, sem CDN: o sistema roda sem internet.
   JetBrains Mono (OFL, static/fonts/OFL.txt), a substituta aberta mais
   próxima da Berkeley Mono. Quem tiver a Berkeley instalada, vê a Berkeley.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/jetbrains-mono-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: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/jetbrains-mono-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: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/jetbrains-mono-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: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/jetbrains-mono-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: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/jetbrains-mono-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: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/jetbrains-mono-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;
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Marca & ação */
  --primary: #201d1d;              /* ink — a única "cor" da marca */
  --primary-active: #0f0000;       /* ink-deep: o pressionado, com o fundo quente do creme */
  --on-primary: #fdfcfc;
  /* Azul Apple. Como texto pequeno sobre a areia o #007aff não passa em
     contraste (3,4:1); quem pinta texto é o degrau de baixo (6:1). */
  --accent: #007aff;
  --accent-hover: #0056b3;
  --accent-active: #004085;
  --brand-accent: var(--accent-hover);

  /* Superfícies */
  --canvas: #f2ede3;               /* areia: o único fundo de página */
  --surface-soft: #ece6da;         /* campo de texto, linha alternada */
  --surface-card: #e5dece;         /* trecho de código, botão desabilitado */
  --surface-strong: #dbd3c1;       /* hover de item, trilho, contorno tracejado */
  --surface-dark: #201d1d;         /* a única superfície escura: o cartão-herói */
  --surface-dark-elevated: #302c2c;
  --surface-raised: #f7f4ee;       /* menu e modal: um fio mais claros que a página */
  /* Seletor de abas: sem bandeja e sem pílula. O item ativo ganha um traço
     de 2px embaixo — e esse traço é o próprio glider que o JS já move. */
  --pill-bandeja: transparent;
  --pill-borda: transparent;
  --pill-ativa: var(--ink);
  --pill-ativa-borda: transparent;
  --pill-ativa-sombra: none;
  --hairline: #d8d0c0;             /* régua de 1px, no mesmo tom da areia */
  --hairline-soft: #e4ddd0;
  --hairline-strong: #6b645a;      /* régua do tabstrip, contorno de camada flutuante */

  /* Texto */
  --ink: #201d1d;
  --charcoal: #302c2c;
  /* cinzas puxados para o marrom: cinza frio sobre areia fica sujo */
  --body: #46403a;
  --muted: #665f55;                /* 5,4:1 sobre a areia */
  --muted-soft: #6f685e;           /* 4,7:1 */
  --ash: #9c9486;                  /* desabilitado */
  --on-dark: #fdfcfc;
  --on-dark-soft: #9a9898;

  /* Semântico */
  /* Rampa semântica da Apple HIG. No claro, texto usa o degrau mais fundo de
     cada cor: o tom base (#30d158, #ff9f0a, #ff3b30) some sobre a areia. */
  --success: #1b7532;              /* #30d158 aprofundado, 4,9:1 sobre a areia */
  --success-soft: #e3eddc;
  --warning: #8f5805;              /* warning-active um passo abaixo, 5:1 */
  --warning-soft: #f5e7cd;
  --error: #d70015;                /* danger-hover, 4,6:1 */
  --error-soft: #f5e0da;
  --info-soft: #e5ebf1;

  /* Série de dados — validada (superfície #ffffff) */
  --series-1: #2563eb;
  --series-2: #ea580c;
  --series-3: #059669;
  --series-4: #7c3aed;
  --series-5: #db2777;
  --grid: #e2dbcd;
  --axis: #cfc6b4;
  --chart-surface: #f2ede3;

  /* Prioridades */
  --prio-baixa: #6b7280;
  --prio-media: #2563eb;
  --prio-alta: #ea580c;
  --prio-critica: #dc2626;

  /* Status */
  --st-backlog: #6b7280;
  --st-afazer: #2563eb;
  --st-fazendo: #ea580c;
  --st-revisao: #7c3aed;
  --st-concluido: #059669;

  /* Espaçamento */
  --sp-xxs: 4px;  --sp-xs: 8px;  --sp-sm: 12px; --sp-md: 16px;
  --sp-lg: 24px;  --sp-xl: 32px; --sp-xxl: 48px; --sp-section: 96px;

  /* Raio */
  /* Dois valores só: 4px em tudo que se clica, 0 em todo container.
     Círculo de verdade, só avatar. */
  --r-xs: 4px; --r-sm: 4px; --r-md: 4px; --r-lg: 0; --r-xl: 0;
  --r-pill: 4px; --r-full: 9999px;

  /* Elevação */
  /* Nada flutua: sombra nenhuma. Camada que precisa se destacar (menu,
     modal, gaveta) ganha contorno de 1px, não sombra. */
  --sh-1: none;
  --sh-2: none;
  --sh-3: none;
  --sh-4: none;
  --ring: 0 0 0 1px var(--ink);    /* foco: contorno em tinta, sem halo */

  /* Tipografia */
  /* Uma face só, em todo papel de texto — nunca uma sans. */
  --font-mono: "Berkeley Mono", "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular,
               Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --font-display: var(--font-mono);
  --font-ui: var(--font-mono);

  /* Movimento */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --spring: cubic-bezier(.22, 1, .36, 1);   /* sem quique: terminal não tem mola */
  --t-fast: 130ms;
  --t: 220ms;
  --t-slow: 420ms;

  --topnav-h: 64px;
  --faixa-h: 34px;   /* a linha do período de teste, logo abaixo da barra do topo */
}

[data-theme="escuro"] {
  color-scheme: dark;

  --primary: #fdfcfc;
  --primary-active: #ffffff;
  --on-primary: #201d1d;
  --brand-accent: #0a84ff;         /* o azul Apple do modo escuro: 4,6:1 sobre a tinta */

  /* O escuro é o próprio TUI: a tinta #201d1d vira o fundo e as superfícies
     sobem degrau a degrau, sempre com o mesmo fundo quente. */
  --canvas: #201d1d;
  --surface-soft: #262222;
  --surface-card: #2c2828;
  --surface-strong: #3a3535;
  --surface-dark: #161414;
  --surface-dark-elevated: #302c2c;
  --surface-raised: #262222;
  --pill-bandeja: transparent;
  --pill-borda: transparent;
  --pill-ativa: var(--ink);
  --pill-ativa-borda: transparent;
  --pill-ativa-sombra: none;
  --hairline: #3a3636;             /* rgba(253,252,252,.12) assentado sobre a tinta */
  --hairline-soft: #2d2929;
  --hairline-strong: #7a7676;

  --ink: #fdfcfc;
  --charcoal: #e6e2e2;
  --body: #cfcaca;
  --muted: #9a9898;
  --muted-soft: #8a8686;
  --ash: #6e6a6a;
  --on-dark: #fdfcfc;
  --on-dark-soft: #9a9898;

  /* No escuro o tom base da rampa Apple já passa em contraste */
  --success: #30d158;
  --success-soft: #15291b;
  --warning: #ff9f0a;
  --warning-soft: #2f2412;
  --error: #ff3b30;
  --error-soft: #321816;
  --info-soft: #152338;

  /* Série de dados — validada (superfície #141414) */
  --series-1: #3b82f6;
  --series-2: #dd7011;
  --series-3: #0fa974;
  --series-4: #8b5cf6;
  --series-5: #ec4899;
  --grid: #332f2f;
  --axis: #474242;
  --chart-surface: #201d1d;

  --prio-baixa: #9294a0;
  --prio-media: #3b82f6;
  --prio-alta: #dd7011;
  --prio-critica: #f87171;

  --st-backlog: #9294a0;
  --st-afazer: #3b82f6;
  --st-fazendo: #dd7011;
  --st-revisao: #8b5cf6;
  --st-concluido: #0fa974;

  --sh-1: none;
  --sh-2: none;
  --sh-3: none;
  --sh-4: none;
  --ring: 0 0 0 1px var(--ink);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
  font-family: var(--font-ui);
  /* A JetBrains Mono junta "->", "!=" e "--" num glifo só: ótimo em código,
     estranho em frase. Desliga as ligaduras; os números já são tabulares. */
  font-variant-ligatures: none;
  font-feature-settings: "calt" 0, "liga" 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--body);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: background var(--t) var(--ease-in-out), color var(--t) var(--ease-in-out);
}

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
/* A hierarquia sai só de tamanho e peso, numa face só. Tracking sempre 0:
   letra monoespaçada apertada encavala. */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; color: var(--ink); letter-spacing: 0; }
h1 { font-size: 38px; line-height: 1.5; }
h2 { font-size: 26px; line-height: 1.4; }
h3 { font-size: 20px; line-height: 1.4; }
h4 { font-size: 16px; line-height: 1.5; }

::selection { background: var(--ink); color: var(--canvas); }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Scrollbars discretas */
* { scrollbar-width: thin; scrollbar-color: var(--surface-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--surface-strong); border-radius: var(--r-pill);
  border: 3px solid var(--canvas);
}
*::-webkit-scrollbar-thumb:hover { background: var(--muted-soft); }

/* o atributo hidden precisa ganhar de .btn { display: inline-flex } e afins */
[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. Tipografia utilitária
   -------------------------------------------------------------------------- */
.display-xl { font-family: var(--font-display); font-size: 48px; font-weight: 700; line-height: 1.3; letter-spacing: 0; color: var(--ink); }
.display-lg { font-family: var(--font-display); font-size: 38px; font-weight: 700; line-height: 1.5; letter-spacing: 0; color: var(--ink); }
.display-md { font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1.4; letter-spacing: 0; color: var(--ink); }
.display-sm { font-family: var(--font-display); font-size: 24px; font-weight: 700; line-height: 1.4; letter-spacing: 0; color: var(--ink); }
.title-md   { font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--ink); }
.title-sm   { font-size: 15px; font-weight: 700; line-height: 1.5; color: var(--ink); }
.body-sm    { font-size: 14px; line-height: 1.5; }
.caption    { font-size: 13px; font-weight: 400; line-height: 1.5; }
.muted      { color: var(--muted); }
.muted-soft { color: var(--muted-soft); }
.tnum       { font-variant-numeric: tabular-nums; }
.truncate   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.container { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--sp-lg); }
.container--wide { max-width: 1560px; }

main { flex: 1 0 auto; }

.page { padding-block: var(--sp-xl) var(--sp-xxl); }

.page__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-lg); flex-wrap: wrap; margin-bottom: var(--sp-lg);
}
.page__head .eyebrow {
  font-size: 13px; font-weight: 500; color: var(--muted);
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.page__actions { display: flex; gap: var(--sp-xs); align-items: center; flex-wrap: wrap; }

.grid { display: grid; gap: var(--sp-lg); }
.stack { display: flex; flex-direction: column; gap: var(--sp-md); }
.row { display: flex; align-items: center; gap: var(--sp-xs); }
.row--between { justify-content: space-between; }
.row--wrap { flex-wrap: wrap; }
.spacer { flex: 1; }

/* --------------------------------------------------------------------------
   5. Top nav
   -------------------------------------------------------------------------- */
.topnav {
  position: sticky; top: 0; z-index: 60;
  height: var(--topnav-h);
  background: var(--canvas);        /* chapado: sem vidro fosco */
  border-bottom: 1px solid var(--hairline);
  transition: box-shadow var(--t) var(--ease);
}
.topnav.is-scrolled { box-shadow: var(--sh-1); }
.topnav__inner {
  height: 100%; display: flex; align-items: center; gap: var(--sp-md);
  max-width: 1560px; margin-inline: auto; padding-inline: var(--sp-lg);
}

.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* A marca é um prompt de terminal escrito em texto, não um desenho: o ícone
   SVG que os templates trazem fica escondido e o ">_" nasce aqui. */
.brand__mark {
  width: 30px; height: 30px; border-radius: var(--r-sm);
  background: var(--primary); color: var(--on-primary);
  display: grid; place-items: center; flex-shrink: 0;
}
.brand__mark svg { display: none; }
.brand__mark::before { content: ">_"; font: 700 13px/1 var(--font-mono); letter-spacing: -1px; }
.brand__name {
  font-family: var(--font-display); font-size: 17px; font-weight: 700;
  letter-spacing: 0; color: var(--ink);
}

/* nav-pill-group — componente assinatura */
/* Um desenho só para TODOS os seletores de aba: o menu do topo, Kanban/Tabela,
   as abas de Configurações e o segmentado (Completo/Compacto). A bandeja é a
   superfície de baixo; a pílula do item ativo é a de cima.
   No claro a bandeja recua (cinza sobre branco) e a pílula avança (branca com
   sombra). No escuro sombra não aparece sobre preto: quem faz a pílula subir é
   ela ser bem mais clara que a bandeja, com um brilho de 1px no topo. Nenhum
   dos dois leva contorno — dois contornos concêntricos a 4px de distância era
   o que deixava o controle com cara de borrão no tema escuro. */
.nav-pills {
  display: flex; align-items: center; gap: 2px;
  background: var(--pill-bandeja); border: 1px solid var(--pill-borda);
  border-radius: var(--r-pill);
  padding: 4px; position: relative;
}
.nav-pill {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--r-pill);
  /* Metade destes seletores é feita de <button> (Kanban/Tabela, abas de
     Configurações) e a outra de <a> (o menu do topo). Sem zerar o botão, o
     navegador desenha o dele por baixo: contorno `outset` e fundo `buttonface`
     — cinza-claro no tema claro (quase invisível sobre a bandeja) e cinza-médio
     no escuro, onde virava aquele bloco cinza em volta de cada aba. O contorno
     fica transparente em vez de zero para o botão ter a mesma altura do
     segmentado, que também tem 1px. */
  border: 1px solid transparent; background: none; cursor: pointer;
  font-size: 14px; font-weight: 500; color: var(--muted);
  white-space: nowrap;
  transition: color var(--t) var(--ease);
}
.nav-pill svg { width: 16px; height: 16px; }
/* Na fonte monoespaçada a barra do topo não cabe com ícone e rótulo juntos.
   No desktop largo o menu é só texto, como o resto do sistema; até 1200px
   vira só ícone — o mesmo desenho que já valia abaixo de 900px. */
.topnav .nav-pill { padding: 8px 11px; font-size: 13px; }
.topnav .nav-pill svg { display: none; }
@media (max-width: 1200px) {
  .topnav .nav-pill span { display: none; }
  .topnav .nav-pill svg { display: block; }
}
.nav-pill:hover { color: var(--ink); }
.nav-pill.is-active { color: var(--ink); font-weight: 700; }
/* O glider virou o traço de 2px sob a aba ativa. O JS continua mandando só
   largura e translateX, então a geometria horizontal é a mesma de antes —
   por isso o padding de 4px e o contorno de 1px da bandeja ficaram. */
.nav-pills__glider {
  position: absolute; z-index: 0; bottom: 0; left: 0; height: 2px;
  background: var(--pill-ativa); border: 0;
  border-radius: 0; box-shadow: none;
  transition: transform var(--t-slow) var(--ease), width var(--t-slow) var(--ease);
  will-change: transform, width;
}

.avatar-btn { border: 0; background: none; padding: 0; cursor: pointer; border-radius: var(--r-full); }

/* Menu do usuário */
.menu {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 232px;
  background: var(--surface-raised); border: 1px solid var(--hairline-strong);
  border-radius: var(--r-lg); box-shadow: var(--sh-3); padding: 6px;
  opacity: 0; transform: translateY(-6px) scale(.97); pointer-events: none;
  transform-origin: top right; z-index: 80;
  transition: opacity var(--t-fast) var(--ease), transform var(--t) var(--spring);
}
.menu.is-open { opacity: 1; transform: none; pointer-events: auto; }
.menu__head { padding: 10px 12px 12px; border-bottom: 1px solid var(--hairline-soft); margin-bottom: 6px; }
.menu__item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border-radius: var(--r-sm); border: 0; background: none;
  font-size: 14px; color: var(--body); cursor: pointer; text-align: left;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.menu__item:hover { background: var(--surface-card); color: var(--ink); }
.menu__item svg { width: 16px; height: 16px; color: var(--muted); }
.menu-anchor { position: relative; }
.menu--largo { min-width: 268px; }
.menu__sep { height: 1px; background: var(--hairline-soft); margin: 6px 4px; }
.menu__item-titulo { display: block; font-weight: 500; color: var(--ink); line-height: 1.35; }
.menu__item .caption { display: block; line-height: 1.35; }
.menu__item.is-ativo { background: var(--surface-card); }
.menu__item.is-ativo .menu__item-titulo { color: var(--brand-accent); }

/* Linha de menu com uma ação própria à direita — o time e a engrenagem dele.
   O item continua sendo a linha inteira; a engrenagem fica de lado, apagada,
   e acende no hover, para a lista não virar um paliteiro de ícones. */
.menu__linha { display: flex; align-items: center; border-radius: var(--r-sm); }
.menu__linha:hover, .menu__linha:focus-within { background: var(--surface-card); }
.menu__linha.is-ativo { background: var(--surface-card); }
.menu__linha.is-ativo .menu__item-titulo { color: var(--brand-accent); }
.menu__linha .menu__item { flex: 1; min-width: 0; }
.menu__linha .menu__item:hover { background: transparent; }
.menu__acao {
  flex-shrink: 0; width: 28px; height: 28px; margin-right: 6px;
  display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: var(--r-sm); background: none;
  color: var(--muted); opacity: .5;
  transition: opacity var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.menu__acao svg { width: 15px; height: 15px; }
.menu__linha:hover .menu__acao { opacity: 1; }
.menu__acao:hover, .menu__acao:focus-visible {
  opacity: 1; background: var(--surface-strong); color: var(--ink);
}

/* Seletor de time — o que está escolhido aqui manda no que a página inteira mostra.
   Tudo em tokens de propósito: nasce certo no claro e no escuro. */
.seletor-time {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: var(--r-pill);
  border: 1px solid var(--hairline); background: var(--surface-raised);
  font-size: 13.5px; font-weight: 500; color: var(--ink); cursor: pointer;
  max-width: 210px; transition: background var(--t-fast) var(--ease),
                                border-color var(--t-fast) var(--ease);
}
.seletor-time:hover { background: var(--surface-card); border-color: var(--surface-strong); }
.seletor-time__ponto {
  width: 9px; height: 9px; border-radius: var(--r-full); flex-shrink: 0;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--canvas) 70%, transparent);
}
.seletor-time__nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seletor-time__seta { color: var(--muted); flex-shrink: 0; }
@media (max-width: 820px) { .seletor-time__nome { display: none; } .seletor-time { max-width: none; } }

/* --------------------------------------------------------------------------
   6. Botões
   -------------------------------------------------------------------------- */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 18px;
  border-radius: var(--r-md); border: 1px solid transparent;
  font-size: 14px; font-weight: 500; line-height: 1;
  cursor: pointer; white-space: nowrap; user-select: none;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease),
              box-shadow var(--t) var(--ease);
}
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn:active { transform: none; }   /* pressionar muda a cor, não a posição */
.btn[disabled], .btn.is-loading { opacity: .55; pointer-events: none; }

.btn--primary { background: var(--primary); color: var(--on-primary); }
.btn--primary:hover, .btn--primary:active { background: var(--primary-active); }

.btn--secondary { background: var(--canvas); color: var(--ink); border-color: var(--hairline-strong); }
.btn--secondary:hover { border-color: var(--ink); background: var(--surface-soft); }

.btn--ghost { background: transparent; color: var(--body); }
.btn--ghost:hover { background: var(--surface-card); color: var(--ink); }

.btn--danger { background: var(--error); color: #fff; }
.btn--danger:hover { filter: brightness(.93); }

.btn--sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: var(--r-sm); }
.btn--sm svg { width: 14px; height: 14px; }
.btn--lg { height: 46px; padding: 0 24px; font-size: 15px; }
.btn--block { width: 100%; }

.btn-icon {
  width: 36px; height: 36px; padding: 0; border-radius: var(--r-sm);
  display: inline-grid; place-items: center; cursor: pointer;
  background: var(--canvas); border: 1px solid var(--hairline); color: var(--body);
  transition: all var(--t-fast) var(--ease);
}
.btn-icon svg { width: 16px; height: 16px; }
.btn-icon:hover { background: var(--surface-card); color: var(--ink); border-color: var(--hairline-strong); }
.btn-icon--sm { width: 28px; height: 28px; }
.btn-icon--sm svg { width: 14px; height: 14px; }
.btn-icon--plain { border-color: transparent; background: transparent; }

/* efeito ripple */
.ripple {
  position: absolute; border-radius: 50%; transform: scale(0);
  background: currentColor; opacity: .25; pointer-events: none;
  animation: ripple 620ms var(--ease) forwards;
}
@keyframes ripple { to { transform: scale(3.2); opacity: 0; } }

/* --------------------------------------------------------------------------
   7. Formulários
   -------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: 13px; font-weight: 600; color: var(--ink); }
.field__hint { font-size: 12px; color: var(--muted); }

.input, .select, .textarea {
  width: 100%; min-height: 40px; padding: 9px 12px;
  background: var(--surface-soft); color: var(--ink);
  border: 1px solid var(--hairline); border-radius: var(--r-md);
  font-size: 14px; line-height: 1.5;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--muted-soft); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--hairline-strong); }
/* foco chapado: o fundo volta ao creme e o contorno vira tinta — sem halo.
   `background-color`, não `background`: a seta do <select> é imagem. */
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--ink); background-color: var(--canvas); box-shadow: none;
}
.textarea { min-height: 92px; resize: vertical; }
.select {
  appearance: none; padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23646262' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
[data-theme="escuro"] .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239a9898' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
.input--sm, .select--sm { min-height: 34px; height: 34px; padding-block: 0; font-size: 13px; }

.check {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14px; color: var(--body); cursor: pointer; user-select: none;
}
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box {
  width: 18px; height: 18px; flex-shrink: 0;
  border: 1px solid var(--ash); border-radius: var(--r-xs);
  background: var(--canvas); display: grid; place-items: center;
  transition: all var(--t-fast) var(--ease);
}
.check__box svg { width: 12px; height: 12px; color: var(--on-primary); opacity: 0; transform: scale(.4); transition: all var(--t-fast) var(--spring); }
.check input:checked + .check__box { background: var(--primary); border-color: var(--primary); }
.check input:checked + .check__box svg { opacity: 1; transform: scale(1); }
.check input:focus-visible + .check__box { box-shadow: var(--ring); }
.check:hover .check__box { border-color: var(--muted); }

/* Segmented control (radio em pílula) — mesmo desenho das abas, sem glider:
   aqui a pílula é o próprio botão ativo. O contorno já nasce transparente para
   que ligar e desligar não mude a largura do botão em 2px. */
.segmented {
  display: inline-flex; padding: 4px; gap: 2px;
  background: var(--pill-bandeja); border-radius: 0;
  border: 1px solid var(--pill-borda); border-bottom-color: var(--hairline);
}
.segmented__opt {
  padding: 6px 13px; border-radius: var(--r-pill); background: none;
  border: 1px solid transparent;
  font-size: 13px; font-weight: 500; color: var(--muted); cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.segmented__opt:hover { color: var(--ink); }
.segmented__opt.is-active {
  background: transparent; border-color: transparent;
  color: var(--ink); font-weight: 700; box-shadow: inset 0 -2px 0 var(--ink);
}

/* --------------------------------------------------------------------------
   8. Cards
   -------------------------------------------------------------------------- */
.card {
  background: var(--canvas); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: 20px;
  transition: border-color var(--t) var(--ease);
}
.card--soft { background: var(--surface-card); border-color: transparent; }
.card--flush { padding: 0; overflow: hidden; }
.card--hover:hover { border-color: var(--hairline-strong); }

.card__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-md); margin-bottom: var(--sp-md);
}
.card__title { font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: 0; }
.card__sub { font-size: 13px; color: var(--muted); margin-top: 2px; }

/* --------------------------------------------------------------------------
   9. Badges, chips, avatares
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: var(--r-pill);
  font-size: 12.5px; font-weight: 500; line-height: 1.4;
  background: var(--surface-card); color: var(--ink); white-space: nowrap;
}
.badge--outline { background: transparent; border: 1px solid var(--hairline); color: var(--body); }
.badge--danger  { background: var(--error-soft);   color: var(--error); }
.badge--warn    { background: var(--warning-soft); color: var(--warning); }
.badge--ok      { background: var(--success-soft); color: var(--success); }
.badge--info    { background: var(--info-soft);    color: var(--brand-accent); }
.badge--dark    { background: var(--surface-dark); color: var(--on-dark); }
.badge--sm { padding: 2px 8px; font-size: 11.5px; }

.dot { width: 8px; height: 8px; border-radius: var(--r-full); flex-shrink: 0; }
.dot--lg { width: 10px; height: 10px; }

.tag {
  display: inline-flex; align-items: center;
  padding: 2px 9px; border-radius: var(--r-xs);
  background: var(--surface-card); color: var(--muted);
  font-size: 11.5px; font-weight: 500;
  transition: all var(--t-fast) var(--ease);
}
.tag::before { content: "#"; opacity: .5; margin-right: 1px; }
button.tag { border: 0; cursor: pointer; }
button.tag:hover { background: var(--surface-strong); color: var(--ink); }

.avatar {
  width: 36px; height: 36px; border-radius: var(--r-full);
  display: inline-grid; place-items: center; flex-shrink: 0;
  font-size: 12.5px; font-weight: 600; color: #fff; letter-spacing: .2px;
  background: var(--muted); user-select: none;
}
.avatar--sm { width: 26px; height: 26px; font-size: 10.5px; }
.avatar--xs { width: 22px; height: 22px; font-size: 9.5px; }
.avatar--lg { width: 48px; height: 48px; font-size: 16px; }
.avatar--vazio { background: var(--surface-card); color: var(--muted-soft); border: 1px dashed var(--surface-strong); }
.avatar-stack { display: flex; }
.avatar-stack .avatar { margin-left: -8px; border: 2px solid var(--canvas); }
.avatar-stack .avatar:first-child { margin-left: 0; }

/* Barra de progresso */
.progress { height: 5px; background: var(--surface-strong); border-radius: 0; overflow: hidden; }
.progress__bar {
  height: 100%; border-radius: 0; background: var(--ink);
  width: 0; transition: width var(--t-slow) var(--ease);
}
.progress--ok .progress__bar { background: var(--success); }
.progress--warn .progress__bar { background: var(--warning); }

/* --------------------------------------------------------------------------
   10. KPIs / stat tiles
   -------------------------------------------------------------------------- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-md); }

.kpi {
  position: relative; overflow: hidden;
  background: var(--canvas); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: 18px 20px;
  transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease), border-color var(--t) var(--ease);
}
.kpi::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 2px;
  background: var(--accent, var(--ink)); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-slow) var(--ease);
}
.kpi:hover { border-color: var(--hairline-strong); }
.kpi:hover::after { transform: scaleX(1); }
.kpi__label { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--muted); }
.kpi__label svg { width: 15px; height: 15px; color: var(--accent, var(--muted)); }
.kpi__value {
  font-family: var(--font-display); font-size: 32px; font-weight: 700;
  letter-spacing: 0; color: var(--ink); line-height: 1.2; margin-top: 10px;
}
.kpi__value small { font-size: 16px; letter-spacing: 0; color: var(--muted); font-weight: 500; }
.kpi__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; min-height: 20px; }
.kpi__delta { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; }
.kpi__delta svg { width: 13px; height: 13px; }
.kpi__delta--ok   { color: var(--success); }
.kpi__delta--bad  { color: var(--error); }
.kpi__delta--flat { color: var(--muted); }
.kpi__spark { width: 84px; height: 26px; }
.kpi--destaque { background: var(--surface-dark); border-color: transparent; }
.kpi--destaque .kpi__label { color: var(--on-dark-soft); }
.kpi--destaque .kpi__value { color: var(--on-dark); }
.kpi--destaque .kpi__value small { color: var(--on-dark-soft); }

/* --------------------------------------------------------------------------
   11. Gráficos
   -------------------------------------------------------------------------- */
.chart { width: 100%; overflow: visible; }
.chart text { font-family: var(--font-ui); }
.chart .axis-label { font-size: 11px; fill: var(--muted-soft); }
.chart .value-label { font-size: 11.5px; font-weight: 600; fill: var(--body); }
.chart .gridline { stroke: var(--grid); stroke-width: 1; }
.chart .baseline { stroke: var(--axis); stroke-width: 1; }
.chart .mark { transition: opacity var(--t-fast) var(--ease); }
.chart .mark:hover { opacity: .82; }
.chart .hover-band { fill: transparent; cursor: crosshair; }
.chart .crosshair { stroke: var(--axis); stroke-width: 1; opacity: 0; }

.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: var(--sp-md); }
.legend__item { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--body); }
.legend__swatch { width: 10px; height: 10px; border-radius: 0; flex-shrink: 0; }
.legend__swatch--line { width: 14px; height: 3px; border-radius: 0; }

.chart-tip {
  position: fixed; z-index: 200; pointer-events: none;
  background: var(--surface-dark); color: var(--on-dark);
  border-radius: var(--r-md); padding: 9px 12px; font-size: 12.5px; line-height: 1.5;
  box-shadow: var(--sh-3); opacity: 0; transform: translateY(4px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  max-width: 240px;
}
.chart-tip.is-on { opacity: 1; transform: none; }
.chart-tip__t { font-weight: 600; margin-bottom: 3px; }
.chart-tip__r { display: flex; align-items: center; gap: 7px; color: var(--on-dark-soft); }
.chart-tip__r b { color: var(--on-dark); font-variant-numeric: tabular-nums; margin-left: auto; }

/* Lista horizontal (barras + rótulo) */
.hbars { display: flex; flex-direction: column; gap: 13px; }
.hbar__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 5px; }
.hbar__label { font-size: 13.5px; color: var(--body); display: flex; align-items: center; gap: 8px; min-width: 0; }
.hbar__val { font-size: 13px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.hbar__track { height: 8px; background: var(--surface-card); border-radius: 0; overflow: hidden; }
.hbar__fill { height: 100%; border-radius: 0; width: 0; transition: width 800ms var(--ease); }

/* Donut central */
.donut-wrap { position: relative; display: grid; place-items: center; }
.donut-center { position: absolute; text-align: center; pointer-events: none; }
.donut-center strong {
  display: block; font-family: var(--font-display); font-size: 28px;
  font-weight: 700; letter-spacing: 0; color: var(--ink); line-height: 1;
}
.donut-center span { font-size: 12px; color: var(--muted); }

/* --------------------------------------------------------------------------
   12. Barra de filtros
   -------------------------------------------------------------------------- */
/* barra de ferramentas: linha de ações em cima, linha de filtros embaixo */
.toolbar {
  display: flex; flex-direction: column; gap: 10px;
  padding: 10px 12px; margin-bottom: var(--sp-lg);
  background: var(--canvas); border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
}
.toolbar__linha { display: flex; align-items: center; gap: var(--sp-xs); flex-wrap: wrap; min-width: 0; }
.toolbar__sep { width: 1px; height: 22px; background: var(--hairline); flex-shrink: 0; }
.toolbar__risco { height: 1px; background: var(--hairline); margin: 0 -12px; }

/* Variante compacta: o mesmo controle em 13px. É o desenho do segmentado
   (Completo/Compacto), usado no Kanban/Tabela — que mora dentro da barra de
   ferramentas — e nas abas de Configurações, onde uma fileira de 14px
   atravessando a página inteira pesava demais. */
/* Se a fileira não couber — janela estreita, muitas abas — ela rola de lado em
   vez de vazar por cima do resto. A barra de rolagem fica escondida: são poucos
   itens, e o dedo ou o trackpad arrastam. Os 4px de padding da bandeja seguram
   a sombra da pílula dentro da área visível, então nada fica cortado. */
.nav-pills--seg {
  max-width: 100%; overflow-x: auto; scrollbar-width: none;
  border-radius: 0; border-bottom-color: var(--hairline);   /* a régua do tabstrip */
}
.nav-pills--seg::-webkit-scrollbar { display: none; }
.nav-pills--seg .nav-pill { padding: 6px 13px; font-size: 13px; }
.nav-pills--seg .nav-pill svg { width: 15px; height: 15px; }

/* intervalo de datas */
.faixa-datas {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 6px 0 10px;
  background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-md);
  transition: border-color var(--t-fast) var(--ease);
}
.faixa-datas:hover, .faixa-datas:focus-within { border-color: var(--muted-soft); }
.faixa-datas__ico { width: 14px; height: 14px; color: var(--muted-soft); flex-shrink: 0; }
.faixa-datas__seta { color: var(--muted-soft); font-size: 12px; }
.faixa-datas .input {
  width: 122px; height: 26px; min-height: 26px; padding: 0 2px; font-size: 12.5px;
  border: 0; background: none; border-radius: var(--r-xs);
}
.faixa-datas .input:focus { box-shadow: none; outline: none; }
.faixa-datas__limpar {
  border: 0; background: none; cursor: pointer; color: var(--muted);
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--r-full);
}
.faixa-datas__limpar:hover { background: var(--surface-card); color: var(--ink); }
.faixa-datas__limpar svg { width: 12px; height: 12px; }

.filterbar {
  display: flex; align-items: center; gap: var(--sp-xs); flex-wrap: wrap;
  padding: 12px 14px; margin-bottom: var(--sp-lg);
  background: var(--canvas); border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
}
.filterbar__search {
  position: relative; flex: 1 1 240px; min-width: 190px;
}
.filterbar__search svg {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--muted-soft); pointer-events: none;
}
.filterbar__search .input { padding-left: 34px; height: 36px; min-height: 36px; background: var(--canvas); }
.filterbar .select { width: auto; min-width: 128px; height: 36px; min-height: 36px; padding-block: 0; font-size: 13px; background-color: var(--canvas); }
.filterbar__sep { width: 1px; height: 22px; background: var(--hairline); }

.chip-filtro {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 13px; border-radius: var(--r-md);
  border: 1px solid var(--hairline); background: var(--canvas);
  font-size: 13px; font-weight: 500; color: var(--body); cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.chip-filtro svg { width: 14px; height: 14px; }
.chip-filtro:hover { border-color: var(--muted-soft); color: var(--ink); }
.chip-filtro.is-active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.chip-filtro__count {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill);
  background: var(--surface-card); color: var(--ink);
  font-size: 11px; font-weight: 600; display: grid; place-items: center;
}
.chip-filtro.is-active .chip-filtro__count { background: rgba(255, 255, 255, .22); color: var(--on-primary); }
[data-theme="escuro"] .chip-filtro.is-active .chip-filtro__count { background: rgba(0, 0, 0, .18); }

/* --------------------------------------------------------------------------
   13. Kanban
   -------------------------------------------------------------------------- */
.board-scroll { overflow-x: auto; overflow-y: visible; padding-bottom: var(--sp-md); margin-inline: calc(var(--sp-lg) * -1); padding-inline: var(--sp-lg); }
.board { display: flex; gap: var(--sp-md); align-items: flex-start; min-height: 60vh; }

.column {
  flex: 1 1 288px; min-width: 278px; max-width: 380px;
  background: var(--surface-soft); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); display: flex; flex-direction: column;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.column.is-over { background: var(--info-soft); border-color: var(--brand-accent); box-shadow: inset 0 0 0 1px var(--brand-accent); }
/* top: 0 — o scroller horizontal do board é o scrollport do sticky, não a página */
.column__head {
  display: flex; align-items: center; gap: 7px;
  padding: 14px 12px 10px; position: sticky; top: 0; z-index: 2;
  background: inherit; border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.column__head > .dot, .column__head > .column__count { flex-shrink: 0; }

/* Mover e configurar coluna são ações de vez em quando: só aparecem com o
   ponteiro na coluna, para o nome da etapa caber por inteiro no dia a dia.
   Em tela de toque, onde não existe hover, ficam sempre visíveis. */
.column__acoes { display: none; align-items: center; gap: 2px; }
.column:hover .column__acoes,
.column:focus-within .column__acoes { display: flex; }
@media (hover: none) { .column__acoes { display: flex; } }
/* o título encolhe com reticências: quem some primeiro é o texto, não os botões */
.column__title {
  font-size: 13.5px; font-weight: 700; color: var(--ink); letter-spacing: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.column__count {
  min-width: 22px; height: 20px; padding: 0 7px; border-radius: var(--r-pill);
  background: var(--canvas); border: 1px solid var(--hairline);
  font-size: 11.5px; font-weight: 600; color: var(--muted);
  display: grid; place-items: center; font-variant-numeric: tabular-nums;
}
.column__list {
  display: flex; flex-direction: column; gap: 9px;
  padding: 4px 10px 10px; min-height: 90px; flex: 1;
}
.column__foot { padding: 0 10px 10px; }
.column__add {
  width: 100%; height: 34px; border-radius: var(--r-md);
  border: 1px dashed var(--surface-strong); background: transparent;
  color: var(--muted); font-size: 13px; font-weight: 500; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: all var(--t-fast) var(--ease);
}
.column__add svg { width: 14px; height: 14px; }
.column__add:hover { border-color: var(--ink); color: var(--ink); background: var(--canvas); }

/* Card de demanda */
.task {
  position: relative;
  background: var(--canvas); border: 1px solid var(--hairline);
  border-radius: var(--r-md); padding: 12px 13px;
  cursor: grab; user-select: none;
  box-shadow: var(--sh-1);
  transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease),
              border-color var(--t) var(--ease), opacity var(--t) var(--ease);
  animation: cardIn var(--t-slow) var(--ease) backwards;
}
.task:hover { border-color: var(--hairline-strong); }
.task:active { cursor: grabbing; }
.task.is-dragging { opacity: .35; }
.task.is-ghost {
  position: fixed; z-index: 500; pointer-events: none; margin: 0;
  border-color: var(--ink); transform: none;   /* o cartão arrastado não gira nem flutua */
  cursor: grabbing; opacity: 1; animation: none;
}
.task.is-atualizado { animation: flashCard 900ms var(--ease); }
.task__placeholder {
  border: 1.5px dashed var(--brand-accent); border-radius: var(--r-md);
  background: color-mix(in srgb, var(--brand-accent) 7%, transparent);
  animation: placeholderIn 180ms var(--ease);
}

.task::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
  border-radius: 0; background: var(--prio, transparent);
  transition: top var(--t) var(--ease), bottom var(--t) var(--ease);
}
.task:hover::before { top: 4px; bottom: 4px; }

.task__top { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.task__code { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; color: var(--muted-soft); letter-spacing: .2px; }
.task__titulo { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.4; letter-spacing: 0; margin-bottom: 9px; }
.task__meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.task__tags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 9px; }
.task__foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--hairline-soft); }
.task__prazo { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.task__prazo svg { width: 12px; height: 12px; }
.task__prazo.is-atrasada { color: var(--error); font-weight: 600; }
.task__prazo.is-hoje { color: var(--warning); font-weight: 600; }
.task__mini { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.task__mini svg { width: 12px; height: 12px; }
.task__progresso { margin-top: 9px; }

@keyframes cardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes placeholderIn { from { opacity: 0; transform: scaleY(.6); } to { opacity: 1; transform: none; } }
@keyframes flashCard {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-accent) 55%, transparent); }
  100% { box-shadow: 0 0 0 12px transparent; }
}

/* --------------------------------------------------------------------------
   14. Tabela
   -------------------------------------------------------------------------- */
.table-wrap {
  background: var(--canvas); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); overflow: hidden;
}
.table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.data-table thead th {
  position: sticky; top: 0; z-index: 3;
  background: var(--surface-soft); text-align: left; white-space: nowrap;
  padding: 11px 14px; font-size: 12px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .4px;
  border-bottom: 1px solid var(--hairline);
}
.data-table thead th.sortable { cursor: pointer; user-select: none; transition: color var(--t-fast) var(--ease); }
.data-table thead th.sortable:hover { color: var(--ink); }
.data-table thead th .sort-ind { display: inline-block; width: 12px; margin-left: 4px; opacity: .55; }
.data-table tbody td { padding: 11px 14px; border-bottom: 1px solid var(--hairline-soft); vertical-align: middle; }
.data-table tbody tr { transition: background var(--t-fast) var(--ease); }
.data-table tbody tr:hover { background: var(--surface-soft); }
.data-table tbody tr.is-selecionada { background: var(--info-soft); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr { animation: rowIn 320ms var(--ease) backwards; }
@keyframes rowIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.cel-titulo { min-width: 260px; max-width: 420px; }
.cel-titulo a { font-weight: 600; color: var(--ink); letter-spacing: 0; }
.cel-titulo a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cel-codigo { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted-soft); white-space: nowrap; }
.cel-acoes { width: 46px; text-align: right; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }

.table-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md);
  padding: 12px 16px; border-top: 1px solid var(--hairline); background: var(--surface-soft);
  font-size: 13px; color: var(--muted); flex-wrap: wrap;
}

/* Barra de ações em lote */
.bulkbar {
  position: fixed; left: 50%; bottom: 26px; z-index: 90;
  transform: translate(-50%, calc(100% + 34px)); /* precisa limpar o bottom, não só a altura */
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  width: max-content; max-width: min(980px, calc(100vw - 24px));
  padding: 10px 14px 10px 18px; border-radius: var(--r-pill);
  background: var(--surface-dark); color: var(--on-dark);
  box-shadow: var(--sh-4);
  transition: transform var(--t-slow) var(--spring);
}
.bulkbar:has(> :nth-child(7)) { border-radius: var(--r-xl); }
.bulkbar.is-on { transform: translate(-50%, 0); }
.bulkbar__count { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.bulkbar .select {
  width: auto; min-width: 136px; height: 34px; min-height: 34px; padding-block: 0; font-size: 13px;
  background-color: var(--surface-dark-elevated); border-color: #46413f; color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
.bulkbar .btn--secondary { background: var(--surface-dark-elevated); border-color: #46413f; color: #fff; }
.bulkbar .btn--secondary:hover { background: #3a3535; }

/* --------------------------------------------------------------------------
   15. Modal / drawer
   -------------------------------------------------------------------------- */
.overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(32, 29, 29, .45);   /* véu chapado, sem desfoque */
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-lg);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t) var(--ease);
}
.overlay.is-open { opacity: 1; pointer-events: auto; }
/* A confirmação pode nascer de dentro de outro modal (trocar o código do time,
   por exemplo). Sem subir a camada ela apareceria ATRÁS de quem a chamou. */
.overlay--acima { z-index: 340; }

.modal {
  width: 100%; max-width: 560px; max-height: min(88vh, 900px);
  background: var(--surface-raised); border-radius: var(--r-xl);
  border: 1px solid var(--hairline-strong); display: flex; flex-direction: column;
  transform: translateY(14px); opacity: 0;
  transition: transform var(--t-slow) var(--spring), opacity var(--t) var(--ease);
  overflow: hidden;
}
.overlay.is-open .modal { transform: none; opacity: 1; }
.modal--lg { max-width: 760px; }

.modal__head {
  display: flex; align-items: flex-start; gap: var(--sp-md);
  padding: 20px 22px 16px; border-bottom: 1px solid var(--hairline-soft);
}
.modal__title { font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: 0; color: var(--ink); }
.modal__sub { font-size: 13px; color: var(--muted); margin-top: 3px; }
.modal__body { padding: 20px 22px; overflow-y: auto; flex: 1; }
.modal__foot {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-xs);
  padding: 14px 22px; border-top: 1px solid var(--hairline-soft); background: var(--surface-soft);
}
.modal__foot .spacer { flex: 1; }

/* Código de ingresso: para ser lido em voz alta e digitado do outro lado, então
   é grande, monoespaçado e espaçado. `readonly` em vez de texto solto porque o
   botão de copiar cai no `.value` e o duplo clique seleciona tudo de uma vez. */
.codigo-caixa { display: flex; align-items: center; gap: 8px; }
.codigo-caixa__valor {
  flex: 1; min-width: 0; height: 44px; padding: 0 14px;
  background: var(--surface-card); color: var(--ink);
  border: 1px solid var(--hairline); border-radius: var(--r-md);
  font-family: var(--font-mono); font-size: 19px; font-weight: 500;
  letter-spacing: .14em; text-align: center;
}
.codigo-caixa__valor:focus { outline: none; border-color: var(--ink); box-shadow: var(--ring); }
.input--codigo {
  font-family: var(--font-mono); font-size: 18px; letter-spacing: .14em;
  text-align: center; text-transform: uppercase; height: 46px;
}
.input--codigo::placeholder { letter-spacing: .14em; opacity: .45; }

/* Zona de perigo: o que não tem volta mora dentro de uma moldura vermelha e
   pede a frase por extenso. Nada aqui é feito por um clique só. */
.zona-perigo {
  border: 1px solid color-mix(in srgb, var(--error) 38%, transparent);
  background: var(--error-soft); border-radius: var(--r-lg);
  padding: 16px 18px 18px; margin-top: 8px;
}
.zona-perigo__titulo {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  font-size: 14px; font-weight: 600; color: var(--error);
}
.zona-perigo__titulo svg { width: 16px; height: 16px; }
.zona-perigo p { color: var(--body); }
.zona-perigo__frase {
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 500;
  padding: 2px 7px; border-radius: var(--r-xs);
  background: var(--canvas); color: var(--ink); border: 1px solid var(--hairline);
  white-space: nowrap;
}
.zona-perigo .input { background: var(--canvas); }

/* Drawer lateral (detalhe da demanda) */
.overlay--drawer { justify-content: flex-end; padding: 0; }
.drawer {
  width: 100%; max-width: 620px; height: 100%;
  background: var(--surface-raised); display: flex; flex-direction: column;
  border-left: 1px solid var(--hairline-strong);
  transform: translateX(100%);
  transition: transform var(--t-slow) var(--ease);
}
.overlay.is-open .drawer { transform: none; }
.drawer__head { padding: 18px 22px 14px; border-bottom: 1px solid var(--hairline); }
.drawer__body { flex: 1; overflow-y: auto; padding: 20px 22px 40px; }
.drawer__foot { padding: 12px 22px; border-top: 1px solid var(--hairline); background: var(--surface-soft); display: flex; gap: 8px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); }
.form-grid .span-2 { grid-column: 1 / -1; }

.secao { margin-top: var(--sp-lg); }
.secao__titulo {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 11px;
}
.secao__titulo svg { width: 14px; height: 14px; }

/* Checklist */
.checklist { display: flex; flex-direction: column; gap: 2px; }
.checklist__item {
  display: flex; align-items: center; gap: 10px; padding: 7px 8px;
  border-radius: var(--r-sm); transition: background var(--t-fast) var(--ease);
}
.checklist__item:hover { background: var(--surface-soft); }
.checklist__item.is-feita .checklist__texto { color: var(--muted-soft); text-decoration: line-through; }
.checklist__texto { flex: 1; font-size: 14px; color: var(--body); }
.checklist__item .btn-icon { opacity: 0; transition: opacity var(--t-fast) var(--ease); }
.checklist__item:hover .btn-icon { opacity: 1; }

/* Comentários & atividade */
.comentario { display: flex; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--hairline-soft); }
.comentario:last-child { border-bottom: 0; }
.comentario__corpo { flex: 1; min-width: 0; }
.comentario__topo { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.comentario__autor { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.comentario__data { font-size: 11.5px; color: var(--muted-soft); }
.comentario__texto { font-size: 14px; color: var(--body); white-space: pre-wrap; word-break: break-word; }

.timeline { position: relative; padding-left: 20px; }
.timeline::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: var(--hairline); }
.timeline__item { position: relative; padding: 6px 0; font-size: 13px; color: var(--muted); }
.timeline__item::before {
  content: ""; position: absolute; left: -19px; top: 12px;
  width: 7px; height: 7px; border-radius: var(--r-full);
  background: var(--surface-strong); border: 2px solid var(--surface-raised);
  box-sizing: content-box;
}
.timeline__item b { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   16. Toasts
   -------------------------------------------------------------------------- */
.toasts {
  position: fixed; right: 20px; bottom: 20px; z-index: 400;
  display: flex; flex-direction: column-reverse; gap: 10px; max-width: 380px;
}
.toast {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 15px; border-radius: var(--r-lg);
  background: var(--surface-dark); color: var(--on-dark);
  box-shadow: var(--sh-3); font-size: 14px; line-height: 1.45;
  animation: toastIn var(--t-slow) var(--spring);
  border-left: 3px solid var(--acc, var(--on-dark));
}
.toast.is-saindo { animation: toastOut var(--t) var(--ease) forwards; }
.toast svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; color: var(--acc, var(--on-dark)); }
.toast__fechar { margin-left: auto; background: none; border: 0; color: var(--on-dark-soft); cursor: pointer; padding: 0; }
.toast--ok   { --acc: #30d158; }
.toast--erro { --acc: #ff3b30; }
.toast--info { --acc: #0a84ff; }
@keyframes toastIn  { from { opacity: 0; transform: translateX(40px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(40px) scale(.94); } }

/* --------------------------------------------------------------------------
   17. Command palette
   -------------------------------------------------------------------------- */
.overlay--palette { align-items: flex-start; padding-top: 12vh; }
.palette {
  width: 100%; max-width: 600px; background: var(--surface-raised);
  border-radius: var(--r-xl); border: 1px solid var(--hairline-strong); overflow: hidden;
  transform: translateY(-14px); opacity: 0;
  transition: transform var(--t-slow) var(--spring), opacity var(--t) var(--ease);
}
.overlay.is-open .palette { transform: none; opacity: 1; }
.palette__campo { display: flex; align-items: center; gap: 11px; padding: 16px 18px; border-bottom: 1px solid var(--hairline); }
.palette__campo svg { width: 18px; height: 18px; color: var(--muted); }
.palette__campo input { flex: 1; border: 0; outline: none; background: none; font-size: 16px; color: var(--ink); }
.palette__lista { max-height: 380px; overflow-y: auto; padding: 8px; }
.palette__grupo { font-size: 11px; font-weight: 600; color: var(--muted-soft); text-transform: uppercase; letter-spacing: .5px; padding: 9px 10px 5px; }
.palette__item {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 10px 11px; border: 0; border-radius: var(--r-md); background: none;
  font-size: 14px; color: var(--body); cursor: pointer;
}
.palette__item svg { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; }
.palette__item.is-ativo { background: var(--surface-card); color: var(--ink); }
.palette__item .cel-codigo { margin-left: auto; }
.palette__vazio { padding: 34px 20px; text-align: center; color: var(--muted); font-size: 14px; }
.palette__foot {
  display: flex; gap: 16px; padding: 10px 18px; border-top: 1px solid var(--hairline);
  background: var(--surface-soft); font-size: 11.5px; color: var(--muted);
}
.palette__foot kbd {
  font-family: var(--font-ui); font-size: 10.5px; font-weight: 600; padding: 2px 5px;
  border-radius: var(--r-xs); background: var(--canvas); border: 1px solid var(--hairline); color: var(--body);
}

/* --------------------------------------------------------------------------
   18. Calendário
   -------------------------------------------------------------------------- */
.cal { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden; }
.cal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md); padding: 14px 18px; border-bottom: 1px solid var(--hairline); }
.cal__mes { font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: 0; color: var(--ink); }
.cal__semana { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--surface-soft); border-bottom: 1px solid var(--hairline); }
.cal__semana span { padding: 9px 10px; font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal__grid > *, .cal__semana > * { min-width: 0; }
.cal__dia {
  min-height: 122px; padding: 8px; border-right: 1px solid var(--hairline-soft); border-bottom: 1px solid var(--hairline-soft);
  display: flex; flex-direction: column; gap: 4px;
  transition: background var(--t-fast) var(--ease);
}
.cal__dia:nth-child(7n) { border-right: 0; }
.cal__dia:hover { background: var(--surface-soft); }
.cal__dia.is-fora { background: var(--surface-soft); opacity: .55; }
.cal__dia.is-hoje { background: var(--info-soft); }
.cal__num { font-size: 12.5px; font-weight: 600; color: var(--muted); width: 24px; height: 24px; display: grid; place-items: center; border-radius: var(--r-sm); }
.cal__dia.is-hoje .cal__num { background: var(--primary); color: var(--on-primary); }
.cal__evento {
  display: block; padding: 4px 7px; border-radius: var(--r-xs);
  background: var(--surface-card); font-size: 11.5px; line-height: 1.5;
  color: var(--ink); cursor: pointer;
  border-left: 3px solid var(--prio, var(--muted));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  animation: cardIn 320ms var(--ease) backwards;
}
.cal__evento:hover { background: var(--surface-strong); transform: translateX(2px); }
.cal__evento.is-concluida { opacity: .5; text-decoration: line-through; }
.cal__evento--google {
  background: transparent; border-left: 0; color: var(--muted);
  display: flex; align-items: center; gap: 5px; padding-left: 3px;
}
.cal__ponto {
  width: 7px; height: 7px; border-radius: var(--r-full);
  background: var(--ag, #4285F4); flex-shrink: 0;
}
.cal__evento--google.is-convite .cal__ponto { background: transparent; box-shadow: inset 0 0 0 2px var(--ag, #4285F4); }
.cal__evento--google b { font-weight: 600; color: var(--body); }
.cal__evento--google:hover { background: var(--surface-card); color: var(--ink); }

.agenda-linha {
  display: flex; align-items: center; gap: 8px; padding: 5px 6px;
  border-radius: var(--r-sm); cursor: pointer; font-size: 12.5px; color: var(--body);
  transition: background var(--t-fast) var(--ease);
}
.agenda-linha:hover { background: var(--surface-soft); }
.agenda-linha input { width: 14px; height: 14px; accent-color: var(--ink); flex-shrink: 0; }
.agenda-cor { width: 9px; height: 9px; border-radius: var(--r-full); flex-shrink: 0; }
.agenda-linha b { margin-left: auto; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.agenda-linha:has(input:not(:checked)) { opacity: .5; }
.cal__mais { font-size: 11px; color: var(--muted); padding-left: 7px; cursor: pointer; }
.cal__mais:hover { color: var(--ink); text-decoration: underline; }

/* --------------------------------------------------------------------------
   19. Login
   -------------------------------------------------------------------------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth__form { display: flex; flex-direction: column; justify-content: center; padding: var(--sp-xxl); background: var(--canvas); }
.auth__inner { width: 100%; max-width: 400px; margin-inline: auto; }
.auth__aside {
  position: relative; overflow: hidden;
  background: var(--surface-dark); color: var(--on-dark);
  display: flex; flex-direction: column; justify-content: center; padding: var(--sp-xxl);
}
/* O lado escuro é o "TUI" da página: sem manchas de luz. No lugar delas,
   uma linha de atalhos no pé, como a barra de ajuda de um programa de
   terminal — e são atalhos que existem de verdade lá dentro. */
.auth__aside::after {
  content: "ctrl+k  buscar     ctrl+b  notas     ?  ajuda";
  position: absolute; left: var(--sp-xxl); right: var(--sp-xxl); bottom: 28px;
  font: 400 12px/1.5 var(--font-mono); color: var(--on-dark-soft);
  white-space: pre; overflow: hidden; text-overflow: ellipsis;
}
.auth__aside > * { position: relative; z-index: 1; }

.auth__mock {
  background: var(--surface-dark-elevated); border: 1px solid #46413f;
  border-radius: var(--r-xl); padding: var(--sp-lg); margin-top: var(--sp-xl);
}
.auth__mockrow {
  display: flex; align-items: center; gap: 11px; padding: 11px 0;
  border-bottom: 1px solid #3a3535; font-size: 13.5px;
  animation: cardIn 620ms var(--ease) backwards;
}
.auth__mockrow:last-child { border-bottom: 0; }
.auth__mockrow .barra { flex: 1; height: 5px; border-radius: 0; background: #46413f; overflow: hidden; }
.auth__mockrow .barra i { display: block; height: 100%; border-radius: 0; animation: grow 1.4s var(--ease) backwards; }
@keyframes grow { from { width: 0 !important; } }

.alerta {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 14px; border-radius: var(--r-md); font-size: 13.5px; margin-bottom: var(--sp-md);
  animation: shake 420ms var(--ease);
}
.alerta svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.alerta--erro    { background: var(--error-soft);   color: var(--error); }
.alerta--sucesso { background: var(--success-soft); color: var(--success); }
@keyframes shake {
  0%,100% { transform: none; } 20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); }
}

/* --------------------------------------------------------------------------
   20. Estados vazios / skeleton
   -------------------------------------------------------------------------- */
.vazio { text-align: center; padding: var(--sp-xxl) var(--sp-lg); }
.vazio__icone {
  width: 56px; height: 56px; margin: 0 auto var(--sp-md);
  border-radius: 0; background: var(--surface-card); border: 1px solid var(--hairline);
  display: grid; place-items: center; color: var(--muted-soft);
}
.vazio__icone svg { width: 24px; height: 24px; }
.vazio__titulo { font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 5px; }
.vazio__texto { font-size: 14px; color: var(--muted); max-width: 380px; margin: 0 auto var(--sp-md); }
.vazio--mini { padding: var(--sp-lg) var(--sp-md); }
.vazio--mini .vazio__icone { width: 40px; height: 40px; margin-bottom: 10px; }
.vazio--mini .vazio__icone svg { width: 18px; height: 18px; }

/* carregando: um bloco chapado que pisca devagar, sem brilho em degradê */
.skeleton {
  background: var(--surface-card); border-radius: 0;
  animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.sk-card { height: 92px; border-radius: var(--r-md); }
.sk-linha { height: 12px; }

/* --------------------------------------------------------------------------
   21. Rodapé escuro
   -------------------------------------------------------------------------- */
/* O rodapé fica no mesmo creme da página, separado só pela régua de 1px. */
.footer {
  flex-shrink: 0; margin-top: var(--sp-xxl);
  background: var(--canvas); color: var(--body); padding-block: 32px 24px;
  border-top: 1px solid var(--hairline);
}
.footer__grid { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-xl); flex-wrap: wrap; }
.footer__marca { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.footer__marca .brand__name { color: var(--ink); }
.footer__col h5 { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.footer__col h5::before { content: "[+] "; color: var(--muted); font-weight: 400; }
.footer__col a, .footer__col span { display: block; font-size: 14px; line-height: 2; color: var(--muted); padding: 0; transition: color var(--t-fast) var(--ease); }
.footer__col a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.footer__base {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md); flex-wrap: wrap;
  margin-top: var(--sp-xl); padding-top: var(--sp-md); border-top: 1px solid var(--hairline); font-size: 14px; color: var(--muted);
}

/* --------------------------------------------------------------------------
   22. Animações de entrada
   -------------------------------------------------------------------------- */
.reveal { animation: revealUp 620ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes revealUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.fade-in { animation: fadeIn var(--t-slow) var(--ease) backwards; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* --------------------------------------------------------------------------
   23. Responsivo
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .auth { grid-template-columns: 1fr; }
  .auth__aside { display: none; }
}
@media (max-width: 900px) {
  .nav-pill span { display: none; }
  .nav-pill { padding: 8px 11px; }
  .form-grid { grid-template-columns: 1fr; }
  h1 { font-size: 30px; }
  .display-lg { font-size: 30px; }
}
@media (max-width: 720px) {
  .container { padding-inline: var(--sp-md); }
  .topnav__inner { gap: 8px; padding-inline: 12px; }
  .brand__name { display: none; }
  .hide-mobile { display: none; }
  .nav-pill, .topnav .nav-pill { padding: 8px 9px; }
  .btn--sm { padding: 0 10px; }
  .menu { min-width: 208px; }
  .page__head { gap: var(--sp-md); }
  .page__actions { width: 100%; }
  .page__actions .select, .page__actions .segmented { flex: 1 1 auto; }
  .board-scroll { margin-inline: calc(var(--sp-md) * -1); padding-inline: var(--sp-md); }
  .page { padding-block: var(--sp-lg) var(--sp-xl); }
  .kpi__value { font-size: 28px; }
  .row--between { flex-wrap: wrap; }
  .cal__dia { min-height: 84px; padding: 4px; }
  /* nas telas estreitas cada demanda vira uma faixa colorida — o texto não caberia */
  .cal__evento {
    font-size: 0; padding: 0; height: 6px; border-radius: 3px;
    border-left: 0; background: var(--prio);
  }
  .cal__evento.is-concluida { text-decoration: none; }
  .cal__mais { font-size: 10px; padding-left: 2px; }
  .cal__num { font-size: 11.5px; width: 20px; height: 20px; }
  .bulkbar {
    left: 12px; right: 12px; bottom: 12px; border-radius: var(--r-lg); flex-wrap: wrap;
    transform: translateY(calc(100% + 20px));
  }
  .bulkbar.is-on { transform: none; }
  .toasts { left: 12px; right: 12px; bottom: 12px; max-width: none; }
  .drawer { max-width: 100%; }
  .modal { max-height: 92vh; }
  .footer__grid { gap: var(--sp-lg); }
}

/* --------------------------------------------------------------------------
   24. Dashboard
   -------------------------------------------------------------------------- */
.dash-topo { display: grid; grid-template-columns: 340px 1fr; gap: var(--sp-md); align-items: start; }
.dash-grid { display: grid; gap: var(--sp-md); }
.dash-grid--2  { grid-template-columns: 1.55fr 1fr; }
.dash-grid--2b { grid-template-columns: 1fr 1fr; }
.dash-grid--3  { grid-template-columns: repeat(3, 1fr); }
.cal-layout    { display: grid; gap: var(--sp-md); grid-template-columns: 1fr 300px; align-items: start; }

/* itens de grade precisam poder encolher: sem isso o min-content estoura o container */
.dash-topo > *, .dash-grid > *, .cal-layout > *, .kpi-grid > * { min-width: 0; }
.card__head { flex-wrap: wrap; }

.hero-card {
  position: relative; overflow: hidden;
  background: var(--surface-dark); color: var(--on-dark);
  border-radius: var(--r-lg); padding: 22px 24px 20px;
  display: flex; flex-direction: column; min-height: 100%;
}
.hero-card > * { position: relative; z-index: 1; }
.hero-card__topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hero-num {
  font-family: var(--font-display); font-size: 56px; font-weight: 700;
  line-height: 1.1; letter-spacing: 0; color: var(--on-dark); margin-top: 12px;
}
.hero-card__stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .1);
}
.hero-card__stats div { display: flex; flex-direction: column; gap: 1px; }
.hero-card__stats strong { font-size: 18px; font-weight: 700; color: var(--on-dark); letter-spacing: 0; }
.hero-card__stats span { font-size: 11.5px; color: var(--on-dark-soft); }
.hero-card__spark { margin-top: auto; padding-top: 18px; }

/* No tema escuro as superfícies "dark" precisam subir um degrau para não sumirem no fundo */
[data-theme="escuro"] .hero-card,
[data-theme="escuro"] .bulkbar,
[data-theme="escuro"] .chart-tip {
  background: var(--surface-dark-elevated); border: 1px solid var(--hairline);
}
[data-theme="escuro"] .toast {
  background: var(--surface-dark-elevated);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--acc, var(--on-dark));
}

.lista-demandas { display: flex; flex-direction: column; gap: 1px; }
.linha-demanda {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 10px 10px; border: 0; border-radius: var(--r-md); background: none; cursor: pointer;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  animation: rowIn 340ms var(--ease) backwards;
}
.linha-demanda:hover { background: var(--surface-soft); transform: translateX(3px); }
.linha-demanda__prio { width: 3px; align-self: stretch; min-height: 30px; border-radius: var(--r-pill); flex-shrink: 0; }
.linha-demanda__corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.linha-demanda__titulo { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.linha-demanda__meta { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); min-width: 0; }

.footer kbd {
  font-family: var(--font-ui); font-size: 12px; font-weight: 500; padding: 1px 5px;
  border-radius: var(--r-xs); background: var(--surface-card);
  border: 1px solid var(--hairline); color: var(--ink);
}

/* Tamanho padrão dos ícones do sprite — perde para qualquer regra de classe */
:where(svg:not([width]):not([viewBox])) { width: 16px; height: 16px; }

/* --------- complementos do quadro --------- */
.task__grip {
  display: none; place-items: center; width: 18px; height: 18px; margin-right: -3px;
  color: var(--surface-strong); cursor: grab; touch-action: none;
}
.task__grip svg { width: 16px; height: 16px; }
@media (pointer: coarse) { .task__grip { display: grid; } }

.coluna-vazia {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 26px 12px; border: 1px dashed var(--hairline);
  border-radius: var(--r-md); color: var(--muted-soft); font-size: 12.5px;
}
.coluna-vazia svg { width: 20px; height: 20px; opacity: .6; }

.board.is-compacto .task { padding: 9px 11px; }
.board.is-compacto .task__tags,
.board.is-compacto .task__progresso,
.board.is-compacto .task__mini { display: none; }
.board.is-compacto .task__titulo { font-size: 13px; margin-bottom: 6px; -webkit-line-clamp: 2; }
.board.is-compacto .task__foot { margin-top: 7px; padding-top: 7px; }

/* --------- edição rápida no drawer --------- */
.drawer__rapido { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.drawer__rapido .select, .drawer__rapido .input { width: auto; min-width: 118px; flex: 0 1 auto; }

@media (max-width: 1200px) {
  .dash-topo { grid-template-columns: 1fr; }
  .dash-grid--2, .dash-grid--2b { grid-template-columns: 1fr; }
  .dash-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1000px) {
  .cal-layout { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .dash-grid--3 { grid-template-columns: 1fr; }
  .hero-num { font-size: 44px; }
}

/* --------------------------------------------------------------------------
   25. Menu suspenso com movimento (substitui todos os <select>)
   -------------------------------------------------------------------------- */
.mmenu { position: relative; display: inline-flex; vertical-align: top; }
.mmenu__nativo {
  position: absolute; width: 1px; height: 1px; opacity: 0;
  pointer-events: none; clip: rect(0 0 0 0); overflow: hidden;
}

.mmenu__trigger {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 12px 0 13px; min-width: 0; max-width: 100%;
  background: var(--canvas); color: var(--ink);
  border: 1px solid var(--hairline); border-radius: var(--r-md);
  font-size: 14px; font-weight: 500; line-height: 1; cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.mmenu--sm .mmenu__trigger { height: 34px; font-size: 13px; padding: 0 10px 0 11px; }
.mmenu__trigger:hover { border-color: var(--muted-soft); background: var(--surface-soft); }
.mmenu__trigger:focus-visible { outline: none; border-color: var(--ink); box-shadow: var(--ring); }
.mmenu[data-aberto="true"] .mmenu__trigger { border-color: var(--ink); box-shadow: var(--ring); background: var(--canvas); }
.mmenu__trigger.is-pulso { animation: mmenuPulso 320ms var(--spring); }
@keyframes mmenuPulso { 0% { transform: scale(1); } 45% { transform: scale(.965); } 100% { transform: scale(1); } }

.mmenu__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mmenu__label.is-vazio { color: var(--muted); font-weight: 400; }
.mmenu__ico { width: 15px; height: 15px; flex-shrink: 0; color: var(--muted); }
.mmenu__dot { width: 8px; height: 8px; border-radius: var(--r-full); flex-shrink: 0; }

.mmenu__chev {
  width: 14px; height: 14px; margin-left: auto; flex-shrink: 0; color: var(--muted);
  transition: transform var(--t-slow) var(--spring), color var(--t-fast) var(--ease);
}
.mmenu[data-aberto="true"] .mmenu__chev { transform: rotate(180deg) translateY(-1px); color: var(--ink); }

/* painel */
.mmenu__pop {
  position: fixed; z-index: 500; min-width: 190px; max-width: 340px;
  padding: 5px; overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface-raised); border: 1px solid var(--hairline-strong);
  border-radius: var(--r-lg); box-shadow: var(--sh-3);
  transform-origin: var(--origem-x, 50%) top;
  opacity: 0; transform: translateY(-8px) scale(.96);
  transition: opacity var(--t-fast) var(--ease), transform var(--t) var(--spring);
}
.mmenu__pop.is-acima { transform-origin: var(--origem-x, 50%) bottom; transform: translateY(8px) scale(.96); }
.mmenu__pop.is-aberto { opacity: 1; transform: none; }

.mmenu__busca {
  display: flex; align-items: center; gap: 8px; padding: 7px 9px; margin: -5px -5px 5px;
  border-bottom: 1px solid var(--hairline-soft); position: sticky; top: -5px;
  background: var(--surface-raised); z-index: 2; border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.mmenu__busca svg { width: 14px; height: 14px; color: var(--muted-soft); flex-shrink: 0; }
.mmenu__busca input {
  flex: 1; min-width: 0; border: 0; outline: none; background: none;
  font-size: 13.5px; color: var(--ink);
}

.mmenu__lista { position: relative; }
.mmenu__hl {
  position: absolute; left: 0; right: 0; top: 0; z-index: 0;
  background: var(--surface-card); border-radius: var(--r-sm); opacity: 0;
  transition: transform var(--t) var(--spring), height var(--t) var(--ease), opacity var(--t-fast) var(--ease);
  pointer-events: none;
}

.mmenu__grupo {
  padding: 9px 10px 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .5px;
  color: var(--muted-soft); text-transform: uppercase;
}

.mmenu__opt {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 8px 10px; border: 0; background: none; border-radius: var(--r-sm);
  font-size: 13.5px; color: var(--body); cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}
.mmenu__opt.is-ativo, .mmenu__opt.is-sel { color: var(--ink); }
.mmenu__opt.is-sel { font-weight: 600; }
.mmenu__opt[disabled] { opacity: .45; cursor: not-allowed; }
.mmenu__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mmenu__texto > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mmenu__texto small { font-size: 11.5px; color: var(--muted); font-weight: 400; }
.mmenu__check {
  width: 14px; height: 14px; flex-shrink: 0; color: var(--ink);
  opacity: 0; transform: scale(.5);
  transition: opacity var(--t-fast) var(--ease), transform var(--t) var(--spring);
}
.mmenu__opt.is-sel .mmenu__check { opacity: 1; transform: none; }
.mmenu__vazio { padding: 22px 12px; text-align: center; font-size: 13px; color: var(--muted); }

/* --------------------------------------------------------------------------
   25b. Ficha de detalhe (drawer)
   -------------------------------------------------------------------------- */
.det { display: flex; flex-direction: column; }
.det__linha {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 0; min-width: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--hairline) 55%, transparent);
}
.det__linha:last-child { border-bottom: 0; }
.det__ico { width: 15px; height: 15px; color: var(--muted-soft); flex-shrink: 0; margin-top: 2px; }
.det__rot {
  width: 106px; flex-shrink: 0; font-size: 13px; color: var(--muted); line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.det__val {
  flex: 1; min-width: 0; font-size: 13.5px; color: var(--ink); font-weight: 500;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap; line-height: 1.5;
}
.det__val .muted { font-weight: 400; }
/* valor à esquerda, encostado no rótulo como nas outras linhas; a barra vem depois */
.det__prog { display: flex; align-items: center; gap: 10px; width: 100%; }
.det__prog b { font-variant-numeric: tabular-nums; font-size: 13.5px; font-weight: 500; }
.det__prog .progress { flex: 1; max-width: 190px; height: 6px; }

/* --------------------------------------------------------------------------
   25c. Anexos
   -------------------------------------------------------------------------- */
.anexos-grade {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px;
}
.anexo {
  position: relative; border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--hairline); background: var(--surface-card);
  aspect-ratio: 4 / 3; cursor: pointer; display: block; width: 100%; padding: 0;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease);
  animation: cardIn 340ms var(--ease) backwards;
}
.anexo:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.anexo img, .anexo video { width: 100%; height: 100%; object-fit: cover; display: block; }
.anexo__doc {
  width: 100%; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; padding: 8px;
  color: var(--muted); text-align: center;
}
.anexo__doc svg { width: 22px; height: 22px; }
.anexo__doc span { font-size: 10.5px; line-height: 1.3; word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.anexo__play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(0, 0, 0, .28); color: #fff; pointer-events: none;
}
.anexo__play svg { width: 26px; height: 26px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.anexo__x {
  position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; border-radius: var(--r-full);
  border: 0; background: rgba(10, 10, 10, .62); color: #fff; display: grid; place-items: center;
  cursor: pointer; opacity: 0; transition: opacity var(--t-fast) var(--ease);
}
.anexo:hover .anexo__x { opacity: 1; }
.anexo__x svg { width: 12px; height: 12px; }

.dropzone {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px; border: 1px dashed var(--surface-strong); border-radius: var(--r-md);
  color: var(--muted); font-size: 13px; cursor: pointer; background: transparent;
  width: 100%; transition: all var(--t-fast) var(--ease); margin-top: 8px;
}
.dropzone:hover, .dropzone.is-sobre { border-color: var(--ink); color: var(--ink); background: var(--surface-soft); }
.dropzone svg { width: 16px; height: 16px; }
.dropzone.is-enviando { pointer-events: none; opacity: .6; }

.lightbox {
  position: fixed; inset: 0; z-index: 600; display: grid; place-items: center;
  background: rgba(8, 8, 10, .88); backdrop-filter: blur(4px); padding: 32px;
  opacity: 0; pointer-events: none; transition: opacity var(--t) var(--ease);
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox img, .lightbox video {
  max-width: min(94vw, 1200px); max-height: 86vh; border-radius: var(--r-lg);
  box-shadow: var(--sh-4); transform: scale(.96); transition: transform var(--t-slow) var(--spring);
}
.lightbox.is-open img, .lightbox.is-open video { transform: none; }
.lightbox__barra {
  position: absolute; top: 16px; left: 16px; right: 16px;
  display: flex; align-items: center; gap: 12px; color: #fff; font-size: 13.5px;
}
.lightbox__barra .btn-icon { background: rgba(255,255,255,.12); border-color: transparent; color: #fff; }
.lightbox__barra .btn-icon:hover { background: rgba(255,255,255,.22); color: #fff; }

/* --------------------------------------------------------------------------
   26. Etiquetas (modelo Trello)
   -------------------------------------------------------------------------- */
.etq {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
  padding: 2px 8px; border-radius: var(--r-xs);
  font-size: 11.5px; font-weight: 600; line-height: 1.5; white-space: nowrap;
  background: color-mix(in srgb, var(--etq) 15%, transparent);
  color: color-mix(in srgb, var(--etq) 78%, var(--ink));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--etq) 26%, transparent);
}
[data-theme="escuro"] .etq {
  background: color-mix(in srgb, var(--etq) 22%, transparent);
  color: color-mix(in srgb, var(--etq) 62%, #ffffff);
}
.etq > span { overflow: hidden; text-overflow: ellipsis; }
.etq--solida { background: var(--etq); color: #fff; box-shadow: none; }
.etq--faixa { width: 34px; height: 8px; padding: 0; border-radius: var(--r-xs); background: var(--etq); }
.etq--btn { border: 0; cursor: pointer; transition: transform var(--t-fast) var(--ease); }
.etq--btn:hover { transform: translateY(-1px); }

.etq-lista { display: flex; flex-wrap: wrap; gap: 4px; }

.pes-linha {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 8px; border: 0; background: none; border-radius: var(--r-sm);
  cursor: pointer; font-size: 13.5px; color: var(--body);
  transition: background var(--t-fast) var(--ease);
}
.pes-linha:hover { background: var(--surface-soft); }
.pes-linha.is-on { color: var(--ink); font-weight: 600; }
.pes-linha.is-travada { cursor: not-allowed; }
.pes-check { width: 15px; height: 15px; color: var(--success); flex-shrink: 0; }

.campo-pessoas {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  text-align: left; cursor: pointer; min-height: 40px; padding: 6px 12px;
}
.campo-pessoas:hover { border-color: var(--muted-soft); }
.campo-pessoas .avatar-stack .avatar { border-color: var(--canvas); }

.opcao-agenda {
  align-items: flex-start; gap: 10px; width: 100%;
  padding: 12px 14px; border-radius: var(--r-md);
  background: var(--surface-soft); border: 1px solid var(--hairline);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.opcao-agenda:hover { border-color: var(--surface-strong); }
.opcao-agenda:has(input:checked) { background: var(--info-soft); border-color: color-mix(in srgb, var(--brand-accent) 35%, transparent); }
.opcao-agenda .check__box { margin-top: 1px; }
.opcao-agenda__logo { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; }
.opcao-agenda b { font-size: 13.5px; color: var(--ink); }

.campo-etq {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  text-align: left; cursor: pointer; min-height: 40px; padding: 7px 12px;
}
.campo-etq:hover { border-color: var(--muted-soft); }
.campo-etq:has(.etq) > .muted { display: none; }

/* seletor de etiquetas */
.etq-picker { width: 288px; padding: 4px; }
.etq-picker__linha {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px; border: 0; background: none; border-radius: var(--r-sm); cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.etq-picker__linha:hover { background: var(--surface-soft); }
.etq-picker__cor {
  flex: 1; min-width: 0; height: 30px; border-radius: var(--r-xs);
  display: flex; align-items: center; padding: 0 10px; gap: 6px;
  background: var(--etq); color: #fff; font-size: 12.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: filter var(--t-fast) var(--ease);
}
.etq-picker__linha:hover .etq-picker__cor { filter: brightness(1.08); }
.etq-picker__cor svg { width: 14px; height: 14px; margin-left: auto; opacity: 0; transition: opacity var(--t-fast) var(--ease); }
.etq-picker__linha.is-marcada .etq-picker__cor svg { opacity: 1; }
.etq-picker__editar { flex-shrink: 0; }

.cor-grade { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.cor-opt {
  height: 30px; border-radius: var(--r-xs); border: 0; cursor: pointer;
  background: var(--c); position: relative;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.cor-opt:hover { transform: scale(1.07); }
.cor-opt.is-sel { box-shadow: 0 0 0 2px var(--canvas), 0 0 0 4px var(--ink); }
.cor-opt svg { width: 15px; height: 15px; color: #fff; opacity: 0; }
.cor-opt.is-sel svg { opacity: 1; }

/* --------------------------------------------------------------------------
   27. Medidor (progress) com preenchimento animado
   -------------------------------------------------------------------------- */
.meter { display: flex; flex-direction: column; gap: 7px; }
.meter__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.meter__rot { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--body); min-width: 0; }
.meter__rot svg { width: 14px; height: 14px; color: var(--acc, var(--muted)); flex-shrink: 0; }
.meter__val {
  font-size: 13px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.meter__val small { font-weight: 500; color: var(--muted); }
.meter__track {
  position: relative; height: 8px; border-radius: 0; overflow: hidden;
  background: color-mix(in srgb, var(--acc, var(--ink)) 12%, transparent);
}
/* preenchimento chapado: sem degradê e sem o brilho que corria por cima */
.meter__fill {
  position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 0;
  background: var(--acc, var(--ink));
  transition: width 900ms var(--ease);
}
.meter--fino .meter__track { height: 6px; }
.meter__legenda { font-size: 11.5px; color: var(--muted); }

/* --------------------------------------------------------------------------
   28. Donut interativo
   -------------------------------------------------------------------------- */
.donut-seg {
  cursor: pointer; transform-origin: center;
  transition: filter 200ms var(--ease), opacity 200ms var(--ease), transform 200ms var(--ease);
}
.donut-wrap.tem-ativo .donut-seg:not(.is-ativo) { opacity: .38; }
.donut-legenda { display: flex; flex-direction: column; gap: 1px; width: 100%; margin-top: var(--sp-md); }
.donut-legenda__item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 7px 9px; border: 0; background: none; border-radius: var(--r-sm);
  cursor: pointer; font-size: 13px; color: var(--body);
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  animation: rowIn 340ms var(--ease) backwards;
}
.donut-legenda__item:hover, .donut-legenda__item.is-ativo { background: var(--surface-soft); transform: translateX(2px); }
.donut-legenda__item b { margin-left: auto; color: var(--ink); font-variant-numeric: tabular-nums; }
.donut-legenda__item .pct { width: 42px; text-align: right; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }

.donut-center strong { transition: color 200ms var(--ease); }
.donut-center .rot {
  display: block; font-size: 12px; color: var(--muted); max-width: 112px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-inline: auto;
}
.donut-center .pct { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-top: 2px; }
.donut-troca { animation: donutTroca 260ms var(--ease); }
@keyframes donutTroca { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   29. Acompanhamento (quadro com colunas do usuário)
   -------------------------------------------------------------------------- */
.column--edit .column__title { cursor: text; }
.column__title[contenteditable="true"] {
  outline: none; border-bottom: 1px dashed var(--muted-soft); padding-bottom: 1px;
}
.column--conclui .column__count { border-color: var(--success); color: var(--success); }
.column__wip {
  font-size: 10.5px; font-weight: 600; padding: 1px 6px; border-radius: var(--r-pill);
  background: var(--surface-card); color: var(--muted);
}
.column__wip.is-estourado { background: var(--error-soft); color: var(--error); }
.column.is-arrastando-col { opacity: .5; }
.column__handle { cursor: grab; color: var(--surface-strong); display: grid; place-items: center; }
.column__handle:hover { color: var(--muted); }
.column__handle svg { width: 14px; height: 14px; }

.coluna-nova {
  flex: 0 0 250px; min-width: 250px; align-self: flex-start;
  border: 1px dashed var(--surface-strong); border-radius: var(--r-lg);
  background: transparent; color: var(--muted); cursor: pointer;
  padding: 16px; display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 13.5px; font-weight: 500;
  transition: all var(--t-fast) var(--ease);
}
.coluna-nova:hover { border-color: var(--ink); color: var(--ink); background: var(--surface-soft); }

.grupo-tabela {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  background: var(--surface-soft); border-bottom: 1px solid var(--hairline);
  font-size: 13px; font-weight: 600; color: var(--ink); position: sticky; top: 0; z-index: 2;
}

/* --------------------------------------------------------------------------
   30. Trocador de visão + resumo de filtro
   -------------------------------------------------------------------------- */
.periodo-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px;
  border-radius: var(--r-pill); background: var(--info-soft); color: var(--brand-accent);
  font-size: 12.5px; font-weight: 600;
}
.periodo-chip button { border: 0; background: none; color: inherit; cursor: pointer; display: grid; place-items: center; }
.periodo-chip svg { width: 12px; height: 12px; }

.datas-custom { display: flex; align-items: center; gap: 6px; }
.datas-custom .input { width: 138px; }

/* --------------------------------------------------------------------------
   31. Movimento reduzido / impressão
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

@media print {
  .topnav, .footer, .filterbar, .bulkbar, .toasts, .page__actions, .cel-acoes { display: none !important; }
  *, *::before, *::after { animation: none !important; opacity: 1 !important; transform: none !important; }
  body { background: #fff; }
  .card, .table-wrap { border-color: #ccc; box-shadow: none; }
}

/* --------------------------------------------------------------------------
   32. Quadro branco (lousa Excalidraw)
   -------------------------------------------------------------------------- */
/* a página inteira cabe na janela: a lousa nunca fica escondida abaixo da dobra */
.qb-page {
  height: calc(100vh - var(--topnav-h));
  display: flex; flex-direction: column;
  padding-block: var(--sp-md) var(--sp-md);
}
.qb-page .page__head { align-items: baseline; margin-bottom: var(--sp-md); flex: none; }
.qb-page .display-lg { font-size: clamp(26px, 3.2vh, 38px); }
.qb-legenda { max-width: 46ch; text-align: right; }

.qb-layout {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 288px minmax(0, 1fr);
  gap: var(--sp-lg); align-items: stretch;
}

.qb-lateral { display: flex; flex-direction: column; gap: var(--sp-md); min-height: 0; overflow: auto; }
.qb-card-lista { padding-bottom: var(--sp-xs); flex: none; }
.qb-card-lista .card__head { align-items: center; margin-bottom: var(--sp-sm); }

.qb-lista { display: flex; flex-direction: column; gap: 2px; max-height: 46vh; overflow: auto; margin: 0 -8px; padding: 0 8px; }

.qb-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: var(--r-md);
  background: none; color: var(--body); text-align: left; cursor: pointer;
  transition: background var(--t-fast) var(--ease-in-out);
}
.qb-item:hover { background: var(--surface-strong); }
.qb-item.is-ativa { background: var(--primary); color: var(--on-primary); }
.qb-item__nome { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; }
.qb-item__meta { font-size: 11.5px; opacity: .7; font-variant-numeric: tabular-nums; }
.qb-item svg { width: 15px; height: 15px; flex: none; opacity: .8; }

.qb-dicas { list-style: none; display: flex; flex-direction: column; gap: 9px; font-size: 13px; color: var(--body); }
/* marcador ASCII no lugar do pontinho: o colchete é o ícone */
.qb-dicas li { position: relative; padding-left: 32px; line-height: 1.55; }
.qb-dicas li::before { content: "[+]"; position: absolute; left: 0; top: 0; color: var(--muted); }
.qb-dicas code { font-family: var(--font-mono); font-size: 11.5px; background: var(--surface-strong); padding: 1px 5px; border-radius: var(--r-xs); }

.qb-palco {
  display: flex; flex-direction: column; min-width: 0;
  border: 1px solid var(--hairline); border-radius: var(--r-lg);
  background: var(--canvas); overflow: hidden; box-shadow: var(--sh-1);
}

.qb-barra {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px 8px 12px; border-bottom: 1px solid var(--hairline);
  background: var(--surface-soft);
}

.qb-nome {
  min-width: 0; max-width: 340px; flex: 0 1 auto;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: none; color: var(--ink); font: 600 14.5px/1.2 var(--font-ui);
  padding: 6px 8px; transition: border-color var(--t-fast), background var(--t-fast);
}
.qb-nome:hover:not(:disabled) { border-color: var(--hairline); }
.qb-nome:focus { outline: none; border-color: var(--primary); background: var(--canvas); box-shadow: var(--ring); }

.qb-estado {
  font-size: 12px; color: var(--muted); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.qb-estado::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--muted-soft); }
.qb-estado.is-salvando::before { background: var(--warning); }
.qb-estado.is-salvo::before { background: var(--success); }
.qb-estado.is-erro::before { background: var(--error); }

.qb-canvas { position: relative; flex: 1; min-height: 320px; }
.qb-canvas .excalidraw { --zIndex-layerUI: 4; }

.qb-vazio {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 24px;
  background: var(--canvas);
}
.qb-spinner {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2.5px solid var(--surface-strong); border-top-color: var(--primary);
  animation: qbGirar .8s linear infinite;
}
@keyframes qbGirar { to { transform: rotate(360deg); } }

/* tela cheia — a lousa ocupa a janela inteira */
.qb-palco.is-cheia {
  position: fixed; inset: 0; z-index: 90;
  border-radius: 0; border: 0; box-shadow: none;
}
.qb-palco.is-cheia .qb-canvas { height: auto; flex: 1; max-height: none; }
body.qb-travado { overflow: hidden; }

@media (max-width: 1024px) {
  .qb-page { height: auto; }
  .qb-layout { grid-template-columns: 1fr; }
  .qb-lateral { overflow: visible; }
  .qb-lista { max-height: 240px; }
  .qb-canvas { height: 70vh; flex: none; }
  .qb-legenda { text-align: left; }
}

/* --------------------------------------------------------------------------
   33. Bloco de notas (post-its flutuantes)
   -------------------------------------------------------------------------- */
.menu__atalho {
  margin-left: auto; font-family: var(--font-mono); font-size: 10.5px;
  color: var(--muted); border: 1px solid var(--hairline); border-radius: var(--r-xs);
  padding: 1px 5px; background: var(--surface-card);
}

.notas-camada { position: fixed; inset: 0; z-index: 250; pointer-events: none; }

.nota {
  position: fixed; pointer-events: auto;
  display: flex; flex-direction: column;
  background: var(--nota-papel, #fef7a4);
  color: #1f1f1f;
  border-radius: 0;
  box-shadow: 0 0 0 1px rgba(15, 0, 0, .22);   /* contorno de 1px, não sombra */
  overflow: hidden;
  animation: notaEntra .18s var(--ease);
}
@keyframes notaEntra { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.nota.is-arrastando { box-shadow: 0 0 0 1px var(--ink); }

.nota__barra {
  display: flex; align-items: center; gap: 2px; flex: none;
  height: 34px; padding: 0 4px;
  background: var(--nota-barra, #fbe870);
  cursor: move; touch-action: none;
}
.nota__pega { flex: 1; align-self: stretch; }

.nota__btn {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center;
  border: 0; border-radius: 3px; background: none; color: #3b3b3b; cursor: pointer;
  transition: background var(--t-fast) var(--ease-in-out);
}
.nota__btn:hover { background: rgba(0, 0, 0, .10); }
.nota__btn.is-ativo { background: rgba(0, 0, 0, .16); color: #111; }
.nota__btn svg { width: 15px; height: 15px; }

.nota__texto {
  flex: 1; min-height: 0; overflow: auto;
  padding: 12px 14px; outline: none;
  font: 400 14.5px/1.6 var(--font-ui); color: #1f1f1f;
  overflow-wrap: anywhere;
}
.nota__texto ul, .nota__texto ol { padding-left: 22px; }
.nota.is-vazia .nota__texto::before {
  content: attr(data-vazio); color: rgba(0, 0, 0, .38); pointer-events: none;
}

.nota__ferramentas {
  display: flex; align-items: center; gap: 2px; flex: none;
  padding: 4px 6px; border-top: 1px solid rgba(0, 0, 0, .10);
  background: rgba(255, 255, 255, .28);
}
.nota__format {
  width: 28px; height: 26px; border: 0; border-radius: 3px; background: none;
  color: #3b3b3b; font-size: 13.5px; font-family: var(--font-ui); cursor: pointer;
  display: grid; place-items: center;
  transition: background var(--t-fast) var(--ease-in-out);
}
.nota__format:hover { background: rgba(0, 0, 0, .10); }
.nota__format svg { width: 15px; height: 15px; }

.nota__menu {
  position: absolute; top: 34px; right: 6px; z-index: 2;
  background: var(--canvas); border: 1px solid var(--hairline);
  border-radius: var(--r-md); box-shadow: var(--sh-3); padding: 8px;
}
.nota__cores { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.nota__cor {
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; cursor: pointer;
  transition: transform var(--t-fast) var(--spring);
}
.nota__cor:hover { transform: scale(1.12); }
.nota__cor.is-ativa { box-shadow: 0 0 0 2px var(--canvas), 0 0 0 4px var(--ink); }
.nota__menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 8px;
  padding: 7px 8px; border: 0; border-radius: var(--r-sm); background: none;
  font-size: 13px; color: var(--error); cursor: pointer; text-align: left;
}
.nota__menu-item:hover { background: var(--error-soft); }
.nota__menu-item svg { width: 15px; height: 15px; }

.nota__canto {
  position: absolute; right: 0; bottom: 0; width: 16px; height: 16px;
  cursor: nwse-resize; touch-action: none;
  background: linear-gradient(135deg, transparent 50%, rgba(0, 0, 0, .22) 50%);
}

@media (max-width: 640px) {
  .nota { width: calc(100vw - 24px) !important; left: 12px !important; }
}

/* --------------------------------------------------------------------------
   34. Lista de pessoas (Configurações → Equipe)
   -------------------------------------------------------------------------- */
.pessoa {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md);
  padding: 11px 10px; border-bottom: 1px solid var(--hairline-soft);
}
.pessoa.is-inativa .avatar,
.pessoa.is-inativa .title-sm,
.pessoa.is-inativa .body-sm { opacity: .5; }

.pessoa__acoes { display: flex; gap: 2px; opacity: 0; transition: opacity var(--t-fast) var(--ease-in-out); }
.pessoa:hover .pessoa__acoes,
.pessoa:focus-within .pessoa__acoes { opacity: 1; }
@media (hover: none) { .pessoa__acoes { opacity: 1; } }

.btn-icon--perigo:hover { background: var(--error-soft); color: var(--error); }

/* visibilidade da lousa (pública x privada) */
.qb-visib { gap: 7px; }
.qb-visib.is-privada { border-color: var(--hairline); background: var(--surface-strong); }
.qb-visib:disabled { opacity: .6; cursor: default; }
.qb-item.is-ativa .qb-item__nome { font-weight: 600; }

/* --------------------------------------------------------------------------
   35. Tela fixa — a página não rola, cada coluna rola sozinha
   Vale para Demandas e Acompanhamento. Abaixo de 900px a página volta a
   rolar inteira: em tela pequena, coluna com scroll interno é uma prisão.
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {
  body.tela-fixa { height: 100dvh; min-height: 0; overflow: hidden; }
  body.tela-fixa > main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  body.tela-fixa .footer { display: none; }

  body.tela-fixa .page {
    flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
    padding-block: var(--sp-lg) var(--sp-md);
  }
  body.tela-fixa .page__head { margin-bottom: var(--sp-md); }
  body.tela-fixa .toolbar { margin-bottom: var(--sp-md); flex: 0 0 auto; }

  /* `:not([hidden])` é obrigatório: um `display` do autor venceria o `hidden`
     do HTML e as duas visões apareceriam ao mesmo tempo. */
  body.tela-fixa #vista-quadro:not([hidden]) {
    flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  }
  body.tela-fixa .board-scroll {
    flex: 1 1 auto; min-height: 0; overflow-x: auto; overflow-y: hidden;
    padding-bottom: var(--sp-xs);
  }
  body.tela-fixa .board { height: 100%; align-items: stretch; min-height: 0; }
  body.tela-fixa .column { max-height: 100%; min-height: 0; }
  /* o miolo da coluna é quem ganha a barra de rolagem */
  body.tela-fixa .column__list { overflow-y: auto; overflow-x: hidden; min-height: 0; flex: 1 1 auto; }
  body.tela-fixa .column__head, body.tela-fixa .column__foot { flex: 0 0 auto; }
  body.tela-fixa .coluna-nova { align-self: flex-start; }

  /* a tabela também vive dentro da altura da tela */
  body.tela-fixa #vista-tabela:not([hidden]) { flex: 1 1 auto; min-height: 0; display: flex; }
  body.tela-fixa .table-wrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  body.tela-fixa .table-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; }
  body.tela-fixa .table-foot { flex: 0 0 auto; }
  body.tela-fixa #lista-vazia:not([hidden]),
  body.tela-fixa #quadro-vazio:not([hidden]) { flex: 1 1 auto; min-height: 0; overflow: auto; }
}

/* barra de rolagem discreta dentro das colunas */
.column__list { scrollbar-width: thin; scrollbar-color: var(--surface-strong) transparent; }
.column__list::-webkit-scrollbar { width: 8px; }
.column__list::-webkit-scrollbar-track { background: transparent; }
.column__list::-webkit-scrollbar-thumb { background: var(--surface-strong); border-radius: var(--r-pill); }
.column__list::-webkit-scrollbar-thumb:hover { background: var(--muted-soft); }

/* --------------------------------------------------------------------------
   36. Ordenação dos cartões dentro da coluna
   -------------------------------------------------------------------------- */
.column__ordem {
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 5px;
  border-radius: var(--r-pill); border: 1px solid transparent; background: transparent;
  color: var(--muted-soft); font-size: 11px; font-weight: 600; cursor: pointer;
  max-width: 118px; flex-shrink: 0; transition: all var(--t-fast) var(--ease);
}
.column__ordem svg { width: 12px; height: 12px; flex-shrink: 0; }
/* na ordem manual o botão é só o ícone: o nome da coluna vale mais que o rótulo */
.column__ordem span { display: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.column__ordem.is-ativa span { display: inline; }
.column__ordem:hover { background: var(--canvas); border-color: var(--hairline); color: var(--ink); }
.column__ordem.is-ativa { background: var(--info-soft); border-color: transparent; color: var(--brand-accent); }

.pop-ordem {
  position: fixed; z-index: 80; width: 272px; max-height: 74vh; overflow-y: auto;
  background: var(--surface-raised); border: 1px solid var(--hairline-strong);
  border-radius: var(--r-lg); box-shadow: var(--sh-3); padding: 6px;
}
.pop-ordem__grupo {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted-soft); padding: 9px 10px 5px;
}
.pop-ordem__opt {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px;
  border: 0; background: none; border-radius: var(--r-sm); cursor: pointer;
  font-size: 13px; color: var(--body); text-align: left;
}
.pop-ordem__opt:hover { background: var(--surface-soft); color: var(--ink); }
.pop-ordem__opt.is-sel { background: var(--info-soft); color: var(--brand-accent); font-weight: 600; }
.pop-ordem__opt svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0; }
.pop-ordem__opt.is-sel svg { opacity: 1; }
.pop-ordem__pe {
  border-top: 1px solid var(--hairline-soft); margin-top: 6px; padding-top: 6px;
  display: flex; flex-direction: column; gap: 2px;
}

/* --------------------------------------------------------------------------
   37. Demanda privada
   -------------------------------------------------------------------------- */
.selo-privada {
  display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 7px;
  border-radius: var(--r-pill); background: var(--surface-strong); color: var(--muted);
  font-size: 10.5px; font-weight: 600;
}
.selo-privada svg { width: 10px; height: 10px; }
.task.is-privada { border-left: 3px solid var(--muted-soft); }

.opcao-privacidade {
  display: flex; align-items: flex-start; gap: 11px; width: 100%; margin-top: 10px;
  padding: 12px 14px; background: var(--surface-soft); border-radius: var(--r-md);
  border: 1px solid transparent; transition: all var(--t-fast) var(--ease);
}
.opcao-privacidade.is-privada { border-color: var(--hairline); background: var(--surface-strong); }
.opcao-privacidade__ico { width: 17px; height: 17px; color: var(--muted); margin-top: 1px; flex-shrink: 0; }

/* --------------------------------------------------------------------------
   38. Automações do quadro
   -------------------------------------------------------------------------- */
.auto-lista { display: flex; flex-direction: column; gap: 8px; }

.auto-card {
  border: 1px solid var(--hairline); border-radius: var(--r-md);
  background: var(--canvas); padding: 12px 14px;
  transition: border-color var(--t-fast) var(--ease);
}
.auto-card:hover { border-color: var(--muted-soft); }
.auto-card.is-off { opacity: .62; }
.auto-card__topo { display: flex; align-items: center; gap: 9px; }
.auto-card__nome { font-size: 14px; font-weight: 600; color: var(--ink); }
.auto-card__frase { font-size: 12.5px; color: var(--muted); margin-top: 5px; line-height: 1.5; }
.auto-card__pe {
  display: flex; align-items: center; gap: 10px; margin-top: 9px;
  font-size: 11.5px; color: var(--muted-soft);
}

.auto-passo {
  border: 1px solid var(--hairline); border-radius: var(--r-md);
  background: var(--surface-soft); padding: 11px 12px; margin-bottom: 8px;
}
.auto-passo__topo { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.auto-passo__selo {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 7px; border-radius: var(--r-pill);
  background: var(--surface-strong); color: var(--muted);
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.auto-passo--quando .auto-passo__selo { background: var(--info-soft); color: var(--brand-accent); }
.auto-passo--se .auto-passo__selo { background: var(--warning-soft); color: var(--warning); }
.auto-passo--entao .auto-passo__selo { background: var(--success-soft); color: var(--success); }
.auto-passo__campos { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.auto-passo__campos .field { flex: 1 1 190px; min-width: 168px; margin: 0; }
.auto-passo__campos .field--largo { flex: 1 1 100%; }
/* a coluna que escolhe o tipo (gatilho/condição/ação) precisa de mais folga:
   os nomes são frases, não palavras soltas */
[data-linha-acao] > .field:first-child,
[data-linha-condicao] > .field:first-child { flex: 1 1 246px; }

.auto-log {
  display: flex; align-items: flex-start; gap: 9px; padding: 9px 4px;
  border-bottom: 1px solid var(--hairline-soft); font-size: 12.5px;
}
.auto-log__ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--success); margin-top: 6px; flex-shrink: 0; }
.auto-log.is-erro .auto-log__ponto { background: var(--error); }

/* --------------------------------------------------------------------------
   39. Níveis de acesso (RBAC)
   -------------------------------------------------------------------------- */
.acesso-layout { display: grid; grid-template-columns: 236px 1fr; gap: var(--sp-lg); align-items: start; }
@media (max-width: 860px) { .acesso-layout { grid-template-columns: 1fr; } }

.perfil-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 11px;
  border: 1px solid transparent; border-radius: var(--r-md); background: none;
  cursor: pointer; text-align: left; transition: all var(--t-fast) var(--ease);
}
.perfil-item:hover { background: var(--surface-soft); }
.perfil-item.is-sel { background: var(--surface-soft); border-color: var(--hairline); }
.perfil-item__marca { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.perfil-item__nome { font-size: 13.5px; font-weight: 600; color: var(--ink); display: block; }
.perfil-item__meta { font-size: 11.5px; color: var(--muted); }

.perm-grupo { border-top: 1px solid var(--hairline-soft); padding-top: 14px; margin-top: 14px; }
.perm-grupo:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.perm-grupo__topo { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.perm-grupo__titulo { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.perm-grupo__desc { font-size: 12.5px; color: var(--muted); margin-bottom: 10px; line-height: 1.5; }
.perm-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(262px, 1fr)); gap: 2px; }

.perm-item {
  display: flex; align-items: flex-start; gap: 9px; padding: 9px 10px;
  border-radius: var(--r-sm); cursor: pointer; transition: background var(--t-fast) var(--ease);
}
.perm-item:hover { background: var(--surface-soft); }
.perm-item.is-travada { opacity: .55; cursor: not-allowed; }
.perm-item__nome { font-size: 13px; font-weight: 500; color: var(--ink); display: block; }
.perm-item__ajuda { font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.perm-item__perigo { color: var(--error); font-size: 10.5px; font-weight: 700; margin-left: 5px; }
.perm-item.is-herdada .perm-item__nome::after {
  content: "herdada"; margin-left: 7px; font-size: 10px; font-weight: 600;
  color: var(--brand-accent); background: var(--info-soft); padding: 1px 6px; border-radius: var(--r-pill);
}

/* --------------------------------------------------------------------------
   40. Período de teste e assinatura (Aleixo Labs)
   Uma linha de status logo abaixo da barra do topo, em toda tela: quantos
   dias faltam e o caminho para assinar. Nos dois últimos dias ela esquenta.
   -------------------------------------------------------------------------- */
.faixa-teste {
  flex-shrink: 0;
  background: var(--surface-card); border-bottom: 1px solid var(--hairline);
  font-size: 13px; line-height: 1.5; color: var(--body);
}
.faixa-teste__inner {
  max-width: 1560px; margin-inline: auto; min-height: var(--faixa-h);
  padding: 6px var(--sp-lg); display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap;
}
.faixa-teste__rotulo { font-weight: 700; color: var(--ink); }
.faixa-teste b { color: var(--ink); font-weight: 700; }
.faixa-teste__acao {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px;
}
.faixa-teste__acao svg { width: 14px; height: 14px; }
.faixa-teste.is-perto { background: var(--warning-soft); }
.faixa-teste.is-perto .faixa-teste__rotulo { color: var(--warning); }
/* a lousa ocupa a janela exata: com a faixa na tela, desconta a altura dela */
@media (min-width: 1025px) {
  body.com-faixa .qb-page { height: calc(100vh - var(--topnav-h) - var(--faixa-h)); }
}
@media (max-width: 720px) { .faixa-teste__inner { padding-inline: var(--sp-md); } }
@media print { .faixa-teste { display: none !important; } }

/* aviso do período de teste no cadastro, antes do botão */
.aviso-teste {
  display: flex; gap: 10px; padding: 12px 14px;
  background: var(--surface-card); border: 1px solid var(--hairline); border-radius: var(--r-sm);
  font-size: 13px; line-height: 1.55; color: var(--body);
}
.aviso-teste__rotulo { flex-shrink: 0; font-weight: 700; color: var(--ink); }
.aviso-teste b { color: var(--ink); }

/* "feito pela Aleixo Labs" no pé das telas de entrada e no rodapé */
.assinatura-empresa { margin-top: var(--sp-xl); font-size: 12px; color: var(--muted); text-align: center; }
.assinatura-empresa a,
.footer__assina a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.footer__assina { font-size: 13.5px; margin-top: 8px; }

/* tela de teste encerrado: a única coisa que a conta vê até ser liberada */
.bloqueio { min-height: 100vh; display: grid; place-items: center; padding: var(--sp-xl) var(--sp-lg); }
.bloqueio__caixa { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 14px; }
.bloqueio__caixa .brand { margin-bottom: var(--sp-lg); }
.bloqueio__rotulo { font-size: 13px; font-weight: 700; color: var(--warning); }
.bloqueio__acoes { display: flex; gap: var(--sp-xs); flex-wrap: wrap; margin-top: 6px; }
.bloqueio__rodape { margin-top: var(--sp-md); }

/* painel de assinaturas (só a conta dona da instalação) */
.assin-resumo { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--sp-md); }
.assin-conta { display: flex; align-items: center; gap: 10px; min-width: 0; }
.assin-conta__nome { font-weight: 700; color: var(--ink); }
.assin-conta.is-inativa { opacity: .55; }
.assin-acoes { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }

/* redes da Aleixo Labs: só o ícone — o nome vai no title e no aria-label */
.redes-empresa { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 12px; }
.redes-empresa a {
  display: inline-flex; border-radius: var(--r-sm);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.redes-empresa a:hover { opacity: .8; }
.redes-empresa img { width: 22px; height: 22px; object-fit: contain; }
/* no rodapé a coluna manda todo link virar bloco: aqui os dois ficam lado a lado */
.footer__col .redes-empresa { justify-content: flex-start; margin: 6px 0 2px; }
.footer__col .redes-empresa a { display: inline-flex; padding: 0; line-height: 1; }