/* ==========================================================================
 * Code Law — padrão visual dos micro-SaaS
 *
 * Porte fiel do contrato visual do Hub Pimentel
 * (Sistema adv/frontend/src/styles/tokens.css). Mesmas cores, mesma
 * tipografia (Playfair Display + Inter), mesmos raios e sombras — para que
 * o mentorado não perceba que trocou de sistema ao abrir uma ferramenta.
 *
 * FONTE ÚNICA: nenhuma tela de micro-SaaS deve inventar cor, tamanho ou raio.
 * Se falta um token aqui, acrescente aqui — não no CSS da tela.
 *
 * Tema: atributo data-theme no <html>, igual ao Hub Pimentel. Claro é o
 * padrão. Quem troca é o codelaw-theme.js, que grava um cookie de domínio
 * para a escolha valer em todos os subdomínios.
 * ========================================================================== */

/* ---------- Fontes auto-hospedadas ---------- */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/playfair-display-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/playfair-display-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-latin-600-normal.woff2') format('woff2');
}

/* ==========================================================================
 * TOKENS — tema claro (padrão)
 * ========================================================================== */
:root,
:root[data-theme='light'] {
  /* Faz o browser desenhar select/date nativos na variante clara. */
  color-scheme: light;

  /* ---------- Primitivas ---------- */
  --color-grafite: #373738;
  --color-grafite-fundo-e: #191919;
  --color-grafite-fundo-c: #2E2E2D;
  --color-offwhite: #F1EFEA;
  --color-offwhite-teto: #EFECE8;
  --color-branco: #FFFFFF;
  --color-pedra: #C3B4A0;
  --color-cinza-claro: #C2BDB8;
  --color-taupe: #86827F;
  --color-bronze-terroso: #96692E;
  --color-bronze-mineral: #D49635;
  --color-ocre: #C9921E;
  --color-hairline: #E5E1DA;

  /* ---------- Funcional: status e prioridade ----------
   * Sempre dessaturado e fosco — linguagem de dado, não decoração. */
  --status-execucao-text: #3E6187;
  --status-execucao-bg: rgba(62, 97, 135, 0.12);
  --status-concluida-text: #4A7850;
  --status-concluida-bg: rgba(74, 120, 80, 0.13);
  --status-pausada-text: #9A6B1E;
  --status-pausada-bg: rgba(154, 107, 30, 0.14);

  --priority-alta-text: #A3402C;
  --priority-alta-bg: rgba(163, 64, 44, 0.11);
  --priority-media-text: #96692E;
  --priority-media-bg: rgba(150, 105, 46, 0.12);
  --priority-baixa-text: #4A7850;
  --priority-baixa-bg: rgba(74, 120, 80, 0.13);

  /* ---------- Semânticos ---------- */
  --text-primary: var(--color-grafite);
  --text-secondary: var(--color-taupe);
  --bg-light: var(--color-offwhite);
  --bg-teto: var(--color-offwhite-teto);
  --surface-card: var(--color-branco);
  --surface-card-hover: var(--bg-teto);
  --surface-data: var(--color-branco);
  --surface-data-text: var(--color-grafite);
  --surface-data-muted: var(--color-taupe);
  --surface-data-border: var(--color-hairline);
  --divider: var(--color-cinza-claro);
  --accent: var(--color-bronze-terroso);
  --accent-hover: #7C561F;
  --accent-watch: var(--color-ocre);

  --icon-neutral: var(--color-taupe);
  --icon-active: var(--accent);

  /* ---------- Superfície bronze ----------
   * O que é preenchido de bronze (botão principal, ícone da ferramenta) tem
   * par próprio porque o bronze TROCA DE CLARIDADE entre os temas: no claro
   * é o terroso escuro e pede texto offwhite; no escuro é o mineral claro e
   * pede texto grafite. Sem isto, o botão principal do tema escuro ficava
   * offwhite sobre bronze claro, com contraste de 2:1. */
  --bronze-fundo: var(--accent);
  --bronze-fundo-hover: var(--accent-hover);
  --sobre-bronze: var(--color-offwhite);

  /* ---------- Barra lateral ----------
   * Grafite escuro NOS DOIS TEMAS. No Hub Pimentel a lateral é o único
   * elemento que não muda de humor quando o tema vira — é justamente ela que
   * dá a sensação de "continuo no mesmo sistema". Por isso os valores abaixo
   * são quase todos idênticos no claro e no escuro; só o fundo tem par.
   *
   * O texto inativo (#C7C2BC sobre #191919) fica em ~9,9:1 de contraste:
   * legível de verdade, não cinza decorativo. Não escureça sem recalcular. */
  --sidebar-bg: var(--color-grafite-fundo-e);
  --sidebar-text: var(--color-offwhite);
  --sidebar-text-inactive: #C7C2BC;
  --sidebar-text-hover: var(--color-offwhite);
  /* Película branca: o fio que separa lateral de conteúdo, e que no tema
   * escuro passa a ser a ÚNICA separação (os dois fundos quase se encostam). */
  --sidebar-border: rgba(255, 255, 255, 0.06);
  --sidebar-item-active-bg: rgba(212, 150, 53, 0.14);
  --sidebar-item-hover-bg: rgba(255, 255, 255, 0.04);
  --sidebar-item-active-border: var(--color-bronze-mineral);
  /* Lavagem vermelha do "Sair". O texto NÃO vira vermelho como no modelo:
   * --color-danger sobre o grafite da lateral dá 2,8:1 e reprova. O aviso
   * vem do fundo; o texto continua claro e legível. */
  --sidebar-item-sair-bg: rgba(163, 64, 44, 0.22);
  /* A largura da lateral NÃO mora aqui: é medida, não cor, e ficar neste bloco
   * a quebrava. Ela está na seção da casca, junto dos degraus de tela. */

  /* Barra SUPERIOR: mesma paleta, e agora derivada da lateral para não haver
   * duas verdades. Continua viva porque as telas embutidas dos micro-SaaS
   * (fora do hub) ainda montam topbar. */
  --topbar-bg: var(--sidebar-bg);
  --topbar-text: var(--sidebar-text);
  --topbar-text-inactive: var(--sidebar-text-inactive);
  --topbar-item-active-bg: var(--sidebar-item-active-bg);
  --topbar-item-hover-bg: var(--sidebar-item-hover-bg);
  --topbar-item-active-border: var(--sidebar-item-active-border);

  /* ---------- Tipografia ---------- */
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --size-display: 56px;
  --size-h1: 48px;
  --size-h2: 36px;
  --size-h3: 24px;
  --size-body-lg: 18px;
  --size-body: 17px;
  --size-support: 14px;
  --size-label: 13px;

  --lh-display: 1.1;
  --lh-h1: 1.1;
  --lh-h2: 1.2;
  --lh-h3: 1.3;
  --lh-body: 1.6;
  --lh-support: 1.5;
  --lh-label: 1.4;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --tracking-label: 0.08em;
  --tracking-caps: 0.18em;

  /* ---------- Espaçamento (grade 4px) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* ---------- Raio ----------
   * Revisto em 16/09/2026: 6/4/4 dava cara de formulário de sistema interno.
   * Card 12, controle 8 e chip pílula é o acabamento de produto; a paleta
   * não mudou nada. */
  --radius-card: 12px;
  --radius-input: 8px;
  --radius-button: 8px;
  --radius-chip: 999px;

  /* ---------- Sombras ----------
   * Contato de 1px assenta a caixa + difusa larga puxada para cima (spread
   * negativo), sempre fosca. Constante no card; o botão principal tem a sua,
   * mais curta, e ela cresce um degrau no hover. */
  --shadow-card: 0 1px 2px rgba(55, 55, 56, 0.04), 0 14px 34px -22px rgba(55, 55, 56, 0.32);
  --shadow-card-sm: 0 1px 2px rgba(55, 55, 56, 0.04), 0 10px 24px -18px rgba(55, 55, 56, 0.28);
  --shadow-popup: 0 30px 70px -34px rgba(55, 55, 56, 0.55);
  --shadow-btn: 0 1px 2px rgba(55, 55, 56, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --shadow-btn-hover: 0 4px 12px -4px rgba(55, 55, 56, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --ring: 0 0 0 3px rgba(150, 105, 46, 0.18);
  /* Lavagem bronze: fundo do monograma, do avatar e do item ativo. */
  --accent-wash: rgba(150, 105, 46, 0.10);

  --transition-calm: 180ms ease;

  /* ---------- Larguras ----------
   * --width-page é a coluna de leitura de uma página SEM lateral (as telas
   * embutidas dos micro-SaaS). --width-conteudo é o teto da página dentro da
   * casca do hub: mais largo porque ali já se perdeu a lateral à esquerda e as
   * tabelas de mentorados e de instâncias precisam de coluna. Também não é
   * cor: sem par no bloco escuro. */
  --width-page: 1120px;
  --width-conteudo: 1440px;
  --width-form: 640px;

  /* Altura máxima de um bloco de log (saída de comando do servidor): dá para
   * ler o fim de um deploy sem que dezenas de linhas empurrem a página. */
  --height-log: 22rem;

  /* ---------- Aliases retro-compat ----------
   * CSS antigo dos micro-SaaS usa estes nomes. Mapeados para não cair em
   * fallback (era assim que aparecia indigo #6366f1 fora do sistema). */
  --bg-primary: var(--bg-light);
  --bg-secondary: var(--surface-card);
  --bg-tertiary: var(--bg-teto);
  --bg-hover: var(--bg-teto);
  --bg-active: var(--color-cinza-claro);
  --text-tertiary: var(--color-taupe);
  --text-link: var(--accent);
  --border-primary: var(--color-hairline);
  --border-secondary: var(--divider);
  --accent-primary: var(--accent);
  --accent-secondary: var(--color-bronze-mineral);
  --accent-tertiary: var(--accent-hover);
  --success: var(--status-concluida-text);
  --success-bg: var(--status-concluida-bg);
  --warning: var(--status-pausada-text);
  --warning-bg: var(--status-pausada-bg);
  --error: var(--priority-alta-text);
  --error-bg: var(--priority-alta-bg);
  --info: var(--status-execucao-text);
  --info-bg: var(--status-execucao-bg);
  --primary: var(--color-grafite);
  --color-primary: var(--color-grafite);
  --color-primary-dark: var(--color-grafite-fundo-e);
  --color-danger: var(--priority-alta-text);
}

/* ==========================================================================
 * TOKENS — tema escuro ("menos preto, mais grafite")
 * A profundidade vem da diferença entre superfícies (app → card → hover),
 * não do preto absoluto. O bronze conduz o olhar só onde há ação.
 * ========================================================================== */
:root[data-theme='dark'] {
  color-scheme: dark;

  /* Revisto em 18/09/2026. Os valores antigos (app #232323, card #2D2D2E)
   * tinham 10 pontos de diferença entre o fundo e o cartão: no monitor o
   * escuro parecia um cinza chapado, sem profundidade, e a borda de 10% de
   * branco sumia. Agora são quatro degraus de verdade, do fundo ao popover,
   * e a hairline é visível. A paleta não muda: o grafite fica mais fundo e
   * o bronze continua sendo a única cor de ação. */
  --dk-app: #141416;
  --dk-sidebar: #0F0F11;
  --dk-card: #1C1C1F;
  --dk-card-hover: #232327;
  --dk-elevado: #2A2A2F;
  --dk-border: rgba(255, 255, 255, 0.13);
  --dk-divider: rgba(255, 255, 255, 0.09);

  --text-primary: var(--color-offwhite);
  --text-secondary: #A8A39C;
  --bg-light: var(--dk-app);
  /* O "teto" é o degrau ACIMA do cartão (cabeçalho de tabela, campo de
   * formulário, pastilha do segmentado). No claro ele é mais escuro que o
   * card; no escuro tem de ser mais CLARO, senão o cabeçalho de tabela
   * some dentro do próprio cartão. */
  --bg-teto: var(--dk-elevado);
  --surface-card: var(--dk-card);
  --surface-card-hover: var(--dk-card-hover);
  --surface-data: var(--dk-card);
  --surface-data-text: var(--color-offwhite);
  --surface-data-muted: #B9B5AF;
  --surface-data-border: var(--dk-border);
  --divider: var(--dk-divider);
  --accent: var(--color-bronze-mineral);
  --accent-hover: var(--color-bronze-terroso);
  --accent-watch: var(--color-ocre);

  --icon-neutral: #BEB8B0;
  --icon-active: var(--accent);

  /* No escuro o bronze preenchido clareia e o texto sobre ele escurece: é o
   * inverso do tema claro, e é o que mantém o contraste acima de 7:1. */
  --bronze-fundo: var(--color-bronze-mineral);
  --bronze-fundo-hover: #E2A951;
  --sobre-bronze: #17171A;

  /* Funcional no escuro: os mesmos matizes, dois degraus mais claros. Os
   * valores do tema claro (#4A7850, #3E6187...) foram pensados para o
   * branco; sobre o card grafite davam 3:1 e o chip "no ar" sumia. Estes
   * ficam entre 6:1 e 8:1 sobre --dk-card, ainda foscos. */
  --status-execucao-text: #8FB0D4;
  --status-execucao-bg: rgba(143, 176, 212, 0.14);
  --status-concluida-text: #8CC393;
  --status-concluida-bg: rgba(140, 195, 147, 0.14);
  --status-pausada-text: #D9AD5A;
  --status-pausada-bg: rgba(217, 173, 90, 0.14);
  --priority-alta-text: #E08A7A;
  --priority-alta-bg: rgba(224, 138, 122, 0.14);
  --priority-media-text: #D9AD5A;
  --priority-media-bg: rgba(217, 173, 90, 0.14);
  --priority-baixa-text: #8CC393;
  --priority-baixa-bg: rgba(140, 195, 147, 0.14);

  /* No escuro a hairline é uma película branca sutil, nunca a linha clara. */
  --color-hairline: var(--dk-border);

  /* A lateral quase não muda: só o fundo sobe um degrau, porque no escuro o
   * conteúdo já é grafite e a lateral precisa continuar se distinguindo dele.
   * Os demais são repetidos com o MESMO valor de propósito — quem lê este
   * bloco não precisa voltar ao :root para saber como a lateral se comporta. */
  --sidebar-bg: var(--dk-sidebar);
  --sidebar-text: var(--color-offwhite);
  --sidebar-text-inactive: #C7C2BC;
  --sidebar-text-hover: var(--color-offwhite);
  --sidebar-border: rgba(255, 255, 255, 0.06);
  --sidebar-item-active-bg: rgba(212, 150, 53, 0.14);
  --sidebar-item-hover-bg: rgba(255, 255, 255, 0.04);
  --sidebar-item-active-border: var(--color-bronze-mineral);
  --sidebar-item-sair-bg: rgba(163, 64, 44, 0.22);

  --topbar-bg: var(--sidebar-bg);
  --topbar-text: var(--sidebar-text);
  --topbar-text-inactive: var(--sidebar-text-inactive);

  --shadow-card: 0 1px 2px rgba(20, 20, 21, 0.30), 0 14px 34px -22px rgba(0, 0, 0, 0.65);
  --shadow-card-sm: 0 1px 2px rgba(20, 20, 21, 0.30), 0 10px 24px -18px rgba(0, 0, 0, 0.60);
  --shadow-popup: 0 30px 70px -34px rgba(0, 0, 0, 0.85);
  --shadow-btn: 0 1px 2px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  --shadow-btn-hover: 0 4px 12px -4px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  --ring: 0 0 0 3px rgba(212, 150, 53, 0.22);
  --accent-wash: rgba(212, 150, 53, 0.12);

  --bg-primary: var(--bg-light);
  --bg-secondary: var(--surface-card);
  --bg-tertiary: var(--dk-card);
  --bg-hover: rgba(255, 255, 255, 0.05);
  --bg-active: rgba(255, 255, 255, 0.10);
  --text-tertiary: #8E8B87;
  --border-primary: var(--dk-border);
  --border-secondary: var(--dk-divider);
  --accent-primary: var(--accent);
  --accent-secondary: var(--color-bronze-mineral);
  --accent-tertiary: var(--accent-hover);
  --primary: var(--color-grafite);
  --color-primary: var(--color-grafite);
  --color-primary-dark: var(--color-grafite-fundo-e);
  --color-danger: var(--priority-alta-text);
}

/* ==========================================================================
 * BASE
 * ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background-color: var(--bg-light);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--size-support);
  line-height: var(--lh-support);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Títulos em Playfair; texto corrido em Inter. */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
  margin: 0;
  text-wrap: balance;
  letter-spacing: -0.01em;
}
h1 { font-size: 32px; line-height: var(--lh-h1); }
h2 { font-size: var(--size-h3); line-height: var(--lh-h3); }
h3 { font-size: 18px; line-height: var(--lh-h3); }
h4 { font-size: var(--size-body); line-height: var(--lh-h3); }

p { margin: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

code, kbd, samp, pre, .cl-mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}
code {
  background-color: var(--bg-teto);
  border-radius: 3px;
  padding: 0.1em 0.35em;
}

hr, .divider {
  border: none;
  border-top: 1px solid var(--color-hairline);
  margin: var(--space-6) 0;
  height: 0;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-input);
}

::selection { background-color: rgba(212, 150, 53, 0.28); }

/* ==========================================================================
 * LAYOUT
 * ========================================================================== */

/* Barra superior — o elemento que amarra todas as ferramentas entre si. */
.cl-topbar {
  background-color: var(--topbar-bg);
  color: var(--topbar-text);
  padding: 0 var(--space-6);
  position: sticky;
  top: 0;
  z-index: 100;
}
.cl-topbar-in {
  max-width: var(--width-page);
  margin: 0 auto;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.cl-brand {
  font-family: var(--font-serif);
  font-size: var(--size-body);
  font-weight: var(--weight-semibold);
  color: var(--topbar-text);
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.cl-brand:hover { color: var(--topbar-text); text-decoration: none; }
.cl-brand-mark { color: var(--color-bronze-mineral); }

/* Nome da ferramenta ao lado da marca, separado por um fio. */
.cl-topbar-app {
  font-family: var(--font-sans);
  font-size: var(--size-label);
  color: var(--topbar-text-inactive);
  padding-left: var(--space-4);
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.cl-topbar-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.cl-topbar-who {
  font-size: var(--size-label);
  color: var(--topbar-text-inactive);
  margin-right: var(--space-2);
}
.cl-topbar-link {
  font-size: var(--size-label);
  color: var(--topbar-text-inactive);
  padding: 6px var(--space-3);
  border-radius: var(--radius-button);
  transition: background-color var(--transition-calm), color var(--transition-calm);
}
.cl-topbar-link:hover {
  background-color: var(--topbar-item-hover-bg);
  color: var(--topbar-text);
  text-decoration: none;
}
.cl-topbar-link.is-active {
  background-color: var(--topbar-item-active-bg);
  color: var(--topbar-text);
}

/* Abas de área (Ferramentas, Mentorados, Sistemas, Servidor).
 * Classe própria porque .cl-topbar-nav empurra tudo para a direita com
 * margin-left:auto — e a barra fica mais legível separando "onde estou"
 * (à esquerda, colado ao nome da tela) de "quem sou" (à direita). */
.cl-topbar-areas {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
}

/* Alternador de tema. O padrão serve sobre superfície clara; dentro da barra
 * grafite ele é reescopado abaixo — assim a mesma marcação funciona nos dois
 * lugares sem a tela precisar de override. */
.cl-theme-switch {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-button);
  background-color: var(--bg-teto);
  flex: 0 0 auto;
}
.cl-theme-btn {
  background: transparent;
  border: none;
  border-radius: calc(var(--radius-button) - 3px);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: var(--size-label);
  font-weight: var(--weight-medium);
  padding: 5px var(--space-3);
  cursor: pointer;
  line-height: 1.4;
  transition: background-color var(--transition-calm), color var(--transition-calm);
}
.cl-theme-btn:hover { color: var(--text-primary); }
/* O escolhido é a "pastilha" que sobe: superfície branca e sombra curta. */
.cl-theme-btn[aria-pressed='true'] {
  background-color: var(--surface-card);
  color: var(--accent);
  box-shadow: var(--shadow-card-sm);
}

.cl-topbar .cl-theme-switch {
  border-color: rgba(255, 255, 255, 0.16);
  background-color: var(--topbar-item-hover-bg);
}
.cl-topbar .cl-theme-btn { color: var(--topbar-text-inactive); }
.cl-topbar .cl-theme-btn:hover { color: var(--topbar-text); }
.cl-topbar .cl-theme-btn[aria-pressed='true'] {
  background-color: var(--topbar-item-active-bg);
  color: var(--color-bronze-mineral);
  box-shadow: none;
}

/* Botão de sair: discreto na barra grafite, sem competir com o bronze. */
.cl-topbar-signout {
  background: transparent;
  border: none;
  color: var(--topbar-text-inactive);
  font-family: var(--font-sans);
  font-size: var(--size-label);
  padding: 6px var(--space-3);
  border-radius: var(--radius-button);
  cursor: pointer;
  transition: background-color var(--transition-calm), color var(--transition-calm);
}
.cl-topbar-signout:hover {
  background-color: var(--topbar-item-hover-bg);
  color: var(--topbar-text);
}

/* ==========================================================================
 * CASCA COM BARRA LATERAL — .cl-shell
 *
 * É a silhueta do Hub Pimentel: rail grafite fixo à esquerda, conteúdo à
 * direita começando colado no topo. A barra superior (.cl-topbar, acima)
 * continua existindo para as telas embutidas dos micro-SaaS; o hub usa esta.
 *
 * Anatomia:
 *   .cl-shell                      flex, 100vh, fundo do app
 *   └ aside.cl-sidebar[popover]    fixa; topo marca · meio nav · pé conta
 *   └ div.cl-conteudo              margem = largura da lateral
 *      └ header.cl-topo-movel      só abaixo de 768px, abre a gaveta
 *      └ main.cl-page              o que já existe, sem mudança de ritmo
 *
 * A lateral é position:fixed (e não coluna de flex) para não rolar junto com
 * a página; quem abre o espaço à esquerda é a margem do .cl-conteudo. As duas
 * medidas saem do MESMO token, então não têm como divergir.
 * ========================================================================== */

/* Largura da lateral — declarada aqui, e não no bloco de tokens lá em cima,
 * por causa de uma armadilha de especificidade que já custou o comportamento
 * responsivo inteiro:
 *
 *   lá o seletor é `:root, :root[data-theme='light']`. Como o codelaw-theme.js
 *   SEMPRE escreve data-theme no <html> (o padrão é 'light'), quem casava era a
 *   metade `[data-theme='light']`, com especificidade (0,2,0). Os degraus abaixo
 *   são `:root` puro, (0,1,0) — e @media não soma especificidade nenhuma. Então
 *   os 224px venciam os degraus no tema CLARO e perdiam no ESCURO (onde só
 *   `:root` casa): a mesma tela, no mesmo tamanho, mudava de largura ao trocar
 *   o tema, e no celular a gaveta nunca chegava aos 280px.
 *
 * Com as três declarações no mesmo peso, quem decide é a ordem — que é o que
 * se esperava desde o começo. Regra prática: medida que muda por @media não
 * pode nascer dentro do bloco temático.
 *
 * Os degraus: em notebook de 13" a lateral cede 24px ao conteúdo; no celular
 * ela deixa de ocupar lugar (vira gaveta) e volta a ser larga, porque lá o
 * alvo é o dedo. */
:root { --sidebar-width: 224px; }

@media (max-width: 1366px) {
  :root { --sidebar-width: 200px; }
}
@media (max-width: 768px) {
  :root { --sidebar-width: 280px; }
}

.cl-shell {
  display: flex;
  min-height: 100vh;
  background-color: var(--bg-light);
}

/* ---------- A lateral ----------
 * O atributo popover no <aside> é o motor da gaveta do celular: ele entrega
 * de graça, sem uma linha de JavaScript, tudo o que uma gaveta precisa —
 * fecha no Esc, fecha ao clicar fora, devolve o foco ao botão que abriu e
 * sobe para a top layer (nenhum overflow de ancestral consegue cortá-la).
 * No desktop o atributo fica parado e a regra abaixo devolve o display: estilo
 * de autor vence o do navegador por ORIGEM, não por especificidade, então o
 * [popover]:not(:popover-open){display:none} da UA não atrapalha.
 * As demais devoluções (margin, padding, border, height) desfazem o resto do
 * estilo que a UA dá a qualquer popover. */
.cl-sidebar {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-width);
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: none;
  border-right: 1px solid var(--sidebar-border);
  background-color: var(--sidebar-bg);
  color: var(--sidebar-text);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 100;
}

/* O bronze fosco do :focus-visible global é o terroso (escuro) no tema claro,
 * e ele some sobre o grafite da lateral. Aqui o foco usa o bronze mineral. */
.cl-sidebar :focus-visible,
.cl-topo-movel :focus-visible {
  outline-color: var(--color-bronze-mineral);
}

/* Topo: marca empilhada e centrada (nome em serif caps + tagline com muito
 * tracking). Esse par é metade da assinatura visual do modelo. */
.cl-sidebar-marca {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 88px;
  padding: var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--sidebar-border);
}
/* Marca como assinatura de produto: monograma bronze num ladrilho e, ao
 * lado, nome em serif com a linha de apoio. Alinhado à esquerda, como o
 * resto da lateral, em vez de centrado e solto. */
.cl-sidebar-marca-link {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--sidebar-text);
}
.cl-sidebar-marca-link:hover {
  color: var(--sidebar-text);
  text-decoration: none;
}
/* A marca é a arte do timbrado (dourado em degradê), então entra como
 * imagem e ocupa a largura da lateral. `height: auto` preserva a proporção
 * quando a lateral encolhe nos degraus de tela. */
.cl-sidebar-marca-img {
  display: block;
  width: 100%;
  max-width: 146px;
  height: auto;
  margin: 0 auto;
}

/* Monograma de letra, do desenho anterior: continua servindo a qualquer tela
 * que queira a marca sem imagem (barra dos micro-SaaS, por exemplo). */
.cl-sidebar-monograma {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-input);
  background: linear-gradient(160deg, rgba(212, 150, 53, 0.30), rgba(212, 150, 53, 0.10));
  border: 1px solid rgba(212, 150, 53, 0.35);
  color: var(--color-bronze-mineral);
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  line-height: 1;
}
.cl-sidebar-marca-texto { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cl-sidebar-nome {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: var(--weight-semibold);
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--sidebar-text);
  white-space: nowrap;
}
.cl-sidebar-tagline {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--sidebar-text-inactive);
  opacity: 0.8;
  white-space: nowrap;
}

/* ---------- Meio: navegação ----------
 * Só ela rola. Marca e rodapé ficam presos porque a nav é o único flex:1 —
 * é isso que faz a lateral parecer um painel, e não uma página comprida. */
.cl-sidebar-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-6) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  /* Firefox entende só estas duas; o resto é para os motores WebKit/Blink.
     Barra clara e fina — a barra padrão do sistema fura o grafite. */
  scrollbar-width: thin;
  scrollbar-color: var(--sidebar-border) transparent;
}
.cl-sidebar-nav::-webkit-scrollbar { width: 6px; }
.cl-sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.cl-sidebar-nav::-webkit-scrollbar-thumb {
  background-color: var(--sidebar-border);
  border-radius: 3px;
}
.cl-sidebar-nav::-webkit-scrollbar-thumb:hover {
  background-color: var(--sidebar-text-inactive);
}

/* Seção: bloco de itens com rótulo. Gap menor que o do nível de cima (4 contra
 * 8) — é o que faz o grupo LER como grupo. */
.cl-sidebar-secao {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--sidebar-border);
}
/* A última seção (conta) cola no fim da nav, encostando no rodapé — mesmo
 * quando há poucos itens. É o margin-top:auto do modelo. */
.cl-sidebar-secao-fim { margin-top: auto; }

.cl-sidebar-secao-titulo {
  padding: 0 14px;
  margin-bottom: 2px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: var(--lh-label);
  color: var(--sidebar-text-inactive);
  opacity: 0.65;
}

/* ---------- Item de navegação ----------
 * Contrato: o ativo se distingue por fundo bronze fosco + fio bronze de 2px na
 * borda esquerda + texto e ícone em bronze mineral + peso 600. Sem sombra
 * colorida, sem deslocamento — o item ativo não pula, ele acende. */
.cl-sidebar-item {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  /* 9 + 21 (14px × 1.5) + 9 = 39px de alvo; no celular sobe para 49. */
  min-height: 40px;
  border-radius: var(--radius-input);
  font-family: var(--font-sans);
  font-size: var(--size-support);
  font-weight: var(--weight-medium);
  line-height: var(--lh-support);
  color: var(--sidebar-text-inactive);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--transition-calm), color var(--transition-calm);
}
/* Item que é botão (o Sair, dentro do <form method="post">): mesmo desenho. */
button.cl-sidebar-item {
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}
.cl-sidebar-item:hover {
  background-color: var(--sidebar-item-hover-bg);
  color: var(--sidebar-text);
  text-decoration: none;
}

/* O fio bronze. Cresce da esquerda em vez de aparecer: a transição é o que
 * amarra a troca de página. */
.cl-sidebar-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background-color: var(--sidebar-item-active-border);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-calm);
}

/* Duas portas para o mesmo estado: a classe e o aria-current. Quem escrever a
 * tela pode esquecer um dos dois — o desenho não depende de qual. */
.cl-sidebar-item.is-active,
.cl-sidebar-item[aria-current='page'] {
  background-color: var(--sidebar-item-active-bg);
  color: var(--color-bronze-mineral);
  font-weight: var(--weight-semibold);
  box-shadow: none;
}
.cl-sidebar-item.is-active::before,
.cl-sidebar-item[aria-current='page']::before { transform: scaleX(1); }
.cl-sidebar-item.is-active:hover,
.cl-sidebar-item[aria-current='page']:hover {
  background-color: var(--sidebar-item-active-bg);
  color: var(--color-bronze-mineral);
}

/* Ícone opcional: se existir, é uma caixa de 20px alinhada com as outras.
 * SVG dentro dele DEVE usar currentColor — cor crua no template reprova no
 * teste que varre o HTML, e além disso não acompanharia o estado ativo. */
.cl-sidebar-icone {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  opacity: 0.85;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}
.cl-sidebar-icone svg { width: 100%; height: 100%; display: block; }
/* Rótulo longo trunca em vez de empurrar a lateral. */
.cl-sidebar-texto {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sair: o modelo pinta o texto de vermelho, e sobre o grafite isso dá 2,8:1 —
 * reprovado. Aqui o aviso vem da lavagem vermelha no fundo, e o texto fica
 * claro e legível. Mesmo significado, sem custo de leitura. */
.cl-sidebar-item-sair:hover {
  background-color: var(--sidebar-item-sair-bg);
  color: var(--sidebar-text);
}
/* Form do logout não pode abrir espaço nem quebrar a coluna da nav. */
.cl-sidebar-form { margin: 0; display: block; }

/* ---------- Rodapé: quem está logado + tema ---------- */
.cl-sidebar-rodape {
  flex: 0 0 auto;
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-top: 1px solid var(--sidebar-border);
  background-color: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.cl-sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  padding: 10px var(--space-3);
  border: 1px solid var(--sidebar-border);
  border-radius: var(--radius-card);
  background-color: var(--sidebar-item-hover-bg);
  color: var(--sidebar-text);
  text-decoration: none;
  transition: background-color var(--transition-calm), border-color var(--transition-calm);
}
/* Quando o cartão for clicável (link ou botão), responde; quando for só um
 * <div> informativo, fica quieto. */
a.cl-sidebar-user:hover,
button.cl-sidebar-user:hover {
  background-color: var(--sidebar-item-active-bg);
  border-color: transparent;
  color: var(--sidebar-text);
  text-decoration: none;
}
button.cl-sidebar-user {
  width: 100%;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}
/* Inicial do nome no lugar de foto: não temos avatar, e um círculo com letra
 * é mais honesto que um ícone genérico de pessoa. */
.cl-sidebar-user-inicial {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background-color: rgba(212, 150, 53, 0.16);
  border: 1px solid rgba(212, 150, 53, 0.30);
  color: var(--color-bronze-mineral);
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: var(--weight-semibold);
  line-height: 1;
}
.cl-sidebar-user-info { min-width: 0; flex: 1 1 auto; }
.cl-sidebar-user-nome {
  display: block;
  font-size: var(--size-label);
  font-weight: var(--weight-semibold);
  color: var(--sidebar-text-hover);
  line-height: var(--lh-label);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Segunda linha: o escritório. É o dado que diz ao mentorado em qual conta ele
 * está — some por último. */
.cl-sidebar-user-org {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--sidebar-text-inactive);
  line-height: var(--lh-label);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* O alternador de tema montado pelo codelaw-theme.js é o mesmo <div
 * data-cl-theme-switch> de sempre; dentro da lateral ele veste a paleta
 * grafite e ocupa a largura toda, virando um par de abas do rodapé. */
.cl-sidebar .cl-theme-switch {
  width: 100%;
  border-color: var(--sidebar-border);
  background-color: var(--sidebar-item-hover-bg);
}
.cl-sidebar .cl-theme-btn {
  flex: 1 1 0;
  min-height: 30px;
  color: var(--sidebar-text-inactive);
}
.cl-sidebar .cl-theme-btn:hover { color: var(--sidebar-text); }
.cl-sidebar .cl-theme-btn[aria-pressed='true'] {
  background-color: var(--sidebar-item-active-bg);
  color: var(--color-bronze-mineral);
  box-shadow: none;
}

/* ---------- Conteúdo ----------
 * Sem padding próprio: o ritmo vertical continua morando no .cl-page, que já
 * está certo (32px do topo + 24px do cabeçalho = título encostado no topo,
 * exatamente o do modelo). Aqui só se abre o espaço da lateral. */
.cl-conteudo {
  flex: 1 1 auto;
  /* Sem isto, uma tabela larga estica o item de flex e cria rolagem lateral. */
  min-width: 0;
  margin-left: var(--sidebar-width);
}

/* Dentro da casca a página deixa de ser uma coluna estreita centrada sob uma
 * faixa e passa a ser o painel à direita da lateral: o teto sobe, para tabela
 * de mentorados e de instâncias respirarem. Segue centrado para não esticar
 * linha de dado em monitor ultralargo. */
.cl-conteudo .cl-page { max-width: var(--width-conteudo); }
/* Reposto depois, de propósito: as telas de formulário (senha, recado)
 * continuam estreitas — as duas regras têm a mesma força, vence a de baixo. */
.cl-conteudo .cl-page-narrow { max-width: var(--width-form); }

/* ---------- Barra do celular ----------
 * Existe só abaixo de 768px. Pintada de grafite (e não do fundo claro do
 * conteúdo, como no modelo, onde ela fica com texto invisível no tema claro):
 * assim ela lê como a mesma peça que a lateral. */
.cl-topo-movel { display: none; }
.cl-topo-movel-btn {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--sidebar-border);
  border-radius: var(--radius-input);
  background-color: var(--sidebar-item-hover-bg);
  color: var(--sidebar-text);
  cursor: pointer;
  transition: background-color var(--transition-calm), color var(--transition-calm);
}
.cl-topo-movel-btn:hover {
  background-color: var(--sidebar-item-active-bg);
  color: var(--color-bronze-mineral);
}
.cl-topo-movel-marca {
  font-family: var(--font-serif);
  font-size: var(--size-body);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sidebar-text);
  white-space: nowrap;
}
.cl-topo-movel-marca:hover { color: var(--sidebar-text); text-decoration: none; }

/* Fechar a gaveta: aparece no lugar da marca dentro da lateral, no celular.
 * Redundante com o Esc e o clique fora — mas é o único dos três que se vê. */
.cl-sidebar-fechar {
  display: none;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--sidebar-border);
  border-radius: var(--radius-input);
  background-color: var(--sidebar-item-hover-bg);
  color: var(--sidebar-text);
  cursor: pointer;
}
.cl-sidebar-fechar:hover {
  background-color: var(--sidebar-item-active-bg);
  color: var(--color-bronze-mineral);
}

/* Hambúrguer e X desenhados em CSS: assim nenhum template precisa carregar
 * SVG com cor dentro (que reprovaria na varredura de cor crua) e os dois
 * seguem a cor do botão sozinhos. */
.cl-icone-menu,
.cl-icone-menu::before,
.cl-icone-menu::after,
.cl-icone-x::before,
.cl-icone-x::after {
  display: block;
  width: 18px;
  height: 2px;
  background-color: currentColor;
  border-radius: 1px;
}
.cl-icone-menu { position: relative; }
.cl-icone-menu::before,
.cl-icone-menu::after { content: ''; position: absolute; left: 0; }
.cl-icone-menu::before { top: -6px; }
.cl-icone-menu::after { top: 6px; }
.cl-icone-x {
  position: relative;
  width: 18px;
  height: 18px;
}
.cl-icone-x::before,
.cl-icone-x::after {
  content: '';
  position: absolute;
  top: 8px;
  left: 0;
}
.cl-icone-x::before { transform: rotate(45deg); }
.cl-icone-x::after { transform: rotate(-45deg); }

/* ---------- Celular: a lateral vira gaveta ---------- */
@media (max-width: 768px) {
  /* A casca deixa de ser flex: com a lateral fora da tela não há duas colunas,
     e no modo de emergência (sem popover, abaixo) a lateral empilha sozinha. */
  .cl-shell { display: block; }

  .cl-sidebar {
    transform: translateX(-100%);
    /* visibility, e não só transform: sem ela a gaveta fechada continuaria no
       caminho do Tab, com links invisíveis recebendo foco. */
    visibility: hidden;
    box-shadow: none;
    transition: transform var(--transition-calm), visibility var(--transition-calm);
  }
  .cl-sidebar:popover-open {
    transform: translateX(0);
    visibility: visible;
    box-shadow: var(--shadow-popup);
  }
  /* Véu do popover — o mesmo tom do .cl-overlay, de graça e sem marcação. */
  .cl-sidebar::backdrop { background-color: rgba(25, 25, 25, 0.55); }

  .cl-sidebar-fechar { display: inline-flex; }
  /* Sem o botão de fechar ao lado, a marca centrada ficaria fora do eixo; com
     ele, o topo da gaveta fica marca à esquerda e fechar à direita. */
  .cl-sidebar-marca { min-height: 64px; padding: var(--space-4); }
  .cl-sidebar-marca-link { align-items: flex-start; text-align: left; }

  /* Alvo de dedo: 14 + 21 + 14 = 49px. */
  .cl-sidebar-item { padding: 14px 18px; min-height: 49px; }
  .cl-sidebar-secao-titulo { padding: 0 18px; }

  .cl-conteudo { margin-left: 0; }

  .cl-topo-movel {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    position: sticky;
    top: 0;
    z-index: 90;
    min-height: 52px;
    padding: var(--space-2) var(--space-4);
    background-color: var(--sidebar-bg);
    color: var(--sidebar-text);
    border-bottom: 1px solid var(--sidebar-border);
  }
}

/* Navegador antigo, sem popover: em vez de uma gaveta que nunca abre, a
 * lateral vira uma faixa empilhada acima do conteúdo. Menos bonito, e
 * navegável — que é o que importa. */
@supports not selector(:popover-open) {
  @media (max-width: 768px) {
    .cl-sidebar {
      position: static;
      width: auto;
      height: auto;
      transform: none;
      visibility: visible;
      border-right: none;
      border-bottom: 1px solid var(--sidebar-border);
    }
    .cl-sidebar-nav { overflow: visible; }
    .cl-topo-movel,
    .cl-sidebar-fechar { display: none; }
  }
}

/* Corpo da página */
.cl-page {
  max-width: var(--width-page);
  margin: 0 auto;
  padding: var(--space-8) var(--space-8) var(--space-16);
}
.cl-page-narrow { max-width: var(--width-form); }

/* Cabeçalho sereno: fio embaixo, título em serif, nada de faixa colorida.
 * Acima do título vai a "sobrelinha": a área em caixa alta miúda (MEU PAINEL,
 * ADMINISTRAÇÃO), que situa antes de o título nomear. */
.cl-page-header {
  padding: var(--space-4) 0 var(--space-6);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-hairline);
}
.cl-page-eyebrow {
  margin: 0 0 var(--space-2);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.cl-page-eyebrow a { color: inherit; }
.cl-page-eyebrow a:hover { color: var(--accent); text-decoration: none; }
.cl-page-title {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: var(--weight-semibold);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0;
}
.cl-page-desc {
  margin: var(--space-2) 0 0;
  font-family: var(--font-sans);
  font-size: var(--size-support);
  color: var(--text-secondary);
  line-height: var(--lh-support);
  max-width: 68ch;
}
.cl-page-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}

/* ---------- Faixa de abertura ----------
 * Um cabeçalho de página com corpo, para a tela não começar com um título
 * solto sobre o fundo. Grafite nos dois temas, como a lateral: as duas peças
 * lidas juntas dão moldura à página. O brilho bronze no canto é radial e
 * fosco, e existe para o retângulo não ser um bloco chapado. */
.cl-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  background-color: var(--sidebar-bg);
  background-image:
    radial-gradient(120% 140% at 100% 0%, rgba(212, 150, 53, 0.16), transparent 58%),
    radial-gradient(90% 120% at 0% 100%, rgba(255, 255, 255, 0.05), transparent 60%);
  color: var(--sidebar-text);
  padding: var(--space-6) var(--space-8);
  margin-bottom: var(--space-6);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.cl-hero-texto { min-width: 0; }
.cl-hero .cl-page-eyebrow { color: var(--sidebar-text-inactive); margin-bottom: var(--space-1); }
.cl-hero .cl-page-title { color: var(--sidebar-text); }
.cl-hero .cl-page-desc { color: var(--sidebar-text-inactive); }
.cl-hero .cl-page-desc strong { color: var(--color-bronze-mineral); font-weight: var(--weight-semibold); }
/* Números da faixa: o dado que resume a tela, alinhado à direita. */
.cl-hero-num {
  display: flex;
  gap: var(--space-8);
  flex: 0 0 auto;
}
.cl-hero-num > div { text-align: right; }
.cl-hero-num b {
  display: block;
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: var(--weight-semibold);
  line-height: 1;
  color: var(--color-bronze-mineral);
  font-variant-numeric: tabular-nums;
}
.cl-hero-num span {
  display: block;
  margin-top: var(--space-1);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--sidebar-text-inactive);
}
@media (max-width: 768px) {
  .cl-hero { padding: var(--space-5) var(--space-4); }
  .cl-hero-num { gap: var(--space-6); }
}

/* Barra da tela: filtros e escolhas à esquerda, ações à direita. Fica entre
 * a faixa de abertura e o conteúdo, e é o lugar de tudo que age sobre a tela
 * inteira (trocar de servidor, reler o estado). */
.cl-barra {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

/* ---------- Formulário guardado atrás de um botão ----------
 * Formulário de criação (subir sistema, novo mentorado) morava aberto no pé
 * da página, com seis campos e quatro linhas de ajuda que o admin lia toda
 * vez sem precisar. Agora é um <details>: a tela abre curta e o formulário
 * aparece no clique, sem JavaScript. */
.cl-abrir { margin-bottom: var(--space-6); }
.cl-abrir > summary {
  list-style: none;
  display: inline-flex;
  width: auto;
}
.cl-abrir > summary::-webkit-details-marker { display: none; }
.cl-abrir > summary::after { content: ''; }
.cl-abrir[open] > summary { margin-bottom: var(--space-4); }
/* Enquanto fechado, o botão convida; aberto, ele vira o rótulo do painel. */
.cl-abrir[open] > summary .cl-abrir-mais { display: none; }
.cl-abrir:not([open]) > summary .cl-abrir-menos { display: none; }

/* Telas de entrada (login, troca de senha): coluna estreita e centrada,
 * sem barra superior — a marca faz o papel de cabeçalho. */
.cl-auth {
  max-width: 400px;
  margin: 10vh auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.cl-auth .cl-card { padding: var(--space-8); }
.cl-auth-head { text-align: center; }
.cl-auth-brand {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  line-height: 1.1;
}
.cl-auth-brand span { color: var(--accent); }
.cl-auth-foot {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

/* Título de seção: caixa alta miúda seguida de um fio que corre até a
 * margem. O fio é o que faz a seção ler como seção, sem caixa em volta. */
.cl-section-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: var(--space-8) 0 var(--space-3);
}
.cl-section-title::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background-color: var(--color-hairline);
}
/* Logo abaixo do cabeçalho ou da fila de números o respiro grande vira
 * buraco: os dois já têm o seu, e somar os dois separava o título do que ele
 * nomeia. */
.cl-page-header + .cl-section-title,
.cl-stats + .cl-section-title,
.cl-alert + .cl-section-title { margin-top: var(--space-6); }

.cl-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.cl-row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: flex-end; }
.cl-row > * { flex: 1 1 180px; }
.cl-row > .cl-shrink { flex: 0 0 auto; }
.cl-grid {
  display: grid;
  gap: var(--space-4);
  /* Cartões largos, duas colunas na tela cheia. Com 300px cabiam três ou
     quatro por linha, e aí a descrição vivia cortada no meio da frase e
     cada seção com uma ferramenta só deixava dois terços da linha vazios.
     min(..., 100%) evita rolagem lateral abaixo do próprio mínimo. */
  grid-template-columns: repeat(auto-fill, minmax(min(440px, 100%), 1fr));
}
/* Item de grade nasce com min-width:auto, e um filho nowrap (nome, endereço)
 * pode impedi-lo de encolher até a coluna. Zero aqui, uma vez, para todos. */
.cl-grid > *, .cl-stats > * { min-width: 0; }
.cl-spacer { flex: 1 1 auto; }

/* ==========================================================================
 * CARD
 * ========================================================================== */
.card, .cl-card {
  background-color: var(--surface-card);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
  position: relative;
}
.cl-card-sm { padding: var(--space-4); box-shadow: var(--shadow-card-sm); }
.cl-card-flush { padding: 0; overflow: hidden; }

/* Fio bronze de 3px no topo, revelado só no hover de card clicável. */
.cl-card-hover::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background-color: var(--accent);
  opacity: 0;
  transition: opacity var(--transition-calm);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}
.cl-card-hover:hover::before { opacity: 1; }
.cl-card-hover:hover { border-color: var(--accent-secondary); }

.cl-card-title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin: 0;
}
.cl-card-sub {
  font-size: var(--size-label);
  color: var(--text-secondary);
  margin: var(--space-1) 0 0;
  line-height: var(--lh-support);
}

/* ---------- Cartão de ferramenta no catálogo ----------
 * O card INTEIRO é o alvo de clique (Fitts): o link do título se estica por
 * cima de tudo com um ::after. Os links auxiliares do rodapé sobem de camada
 * para continuarem clicáveis. Isso evita <a> dentro de <a>, que é HTML
 * inválido, e mantém um só ponto de ação por card.
 *
 * Desenho de 18/09/2026: o monograma ocupa a coluna da esquerda e o texto
 * corre ao lado dele, de cima a baixo. Antes o monograma ficava numa faixa
 * própria em cima, a descrição atravessava o card inteiro e o rodapé tinha
 * um fio com "Abrir" preso embaixo: o card ficava alto, vazio no meio, e a
 * seta repetia o que o cursor já dizia. Agora o cartão tem duas colunas, é
 * mais baixo, e a seta só aparece quando o mouse chega.
 */
.cl-app {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px var(--space-4);
  align-content: start;
  position: relative;
  overflow: hidden;
  padding: var(--space-5) var(--space-6);
  transition: border-color var(--transition-calm),
              box-shadow var(--transition-calm),
              transform var(--transition-calm);
}

/* Fio bronze no topo, revelado no hover: é a régua do card clicável do
 * contrato (.cl-card-hover), aqui aplicada ao cartão de ferramenta. */
.cl-app-aberto::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background-color: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-calm);
}
.cl-app-aberto:hover::before,
.cl-app-aberto:focus-within::before { transform: scaleX(1); }

/* O monograma atravessa as linhas do texto. */
.cl-app-head {
  grid-row: 1 / span 3;
  display: block;
}

/* Monograma no lugar do emoji: sóbrio, e distingue as ferramentas sem colorir. */
/* Bloco bronze com o ícone da ferramenta (ou o monograma, quando não há
 * desenho próprio). Era uma lavagem clarinha com a sigla bronze, e sumia no
 * card branco — o cartão ficava sem um ponto de cor que o ancorasse. */
.cl-app-sigla {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border-radius: var(--radius-input);
  background-image: linear-gradient(155deg, var(--bronze-fundo-hover), var(--bronze-fundo) 70%);
  border: 1px solid transparent;
  box-shadow: 0 6px 16px -10px rgba(150, 105, 46, 0.9);
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.03em;
  color: var(--sobre-bronze);
  transition: transform var(--transition-calm), box-shadow var(--transition-calm);
}
/* O SVG herda a cor pelo currentColor e ocupa metade do bloco. */
.cl-app-sigla svg { width: 26px; height: 26px; display: block; }

.cl-app-id { min-width: 0; }

.cl-app-name {
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  line-height: 1.2;
  transition: color var(--transition-calm);
  /* Nome longo quebra em duas linhas em vez de virar "Liquidação trabalhi…":
   * o nome é a única coisa que o card precisa dizer inteira. Só a partir da
   * terceira linha ele trunca, e aí é nome demais para um card. */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}
.cl-app-name a { color: inherit; text-decoration: none; }

/* O link do título cobre o card todo — é ele que responde ao clique. */
.cl-app-name a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
}

/* Etiqueta ao lado do nome (hoje só "Beta"), e não uma linha própria: era
 * mais uma linha de altura em todo card só para uma ferramenta usá-la. */
.cl-app-cat {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 2px 8px;
  border-radius: var(--radius-chip);
  background-color: var(--status-pausada-bg);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--status-pausada-text);
  vertical-align: middle;
}

/* Três linhas fixas: é o que alinha os cards de uma mesma fileira. Eram
 * duas, e duas linhas de 13px cortavam a frase que explica a ferramenta. */
.cl-app-desc {
  grid-column: 2;
  font-size: var(--size-support);
  color: var(--text-secondary);
  line-height: var(--lh-support);
  margin: 6px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(var(--lh-support) * 3em);
}

/* Rodapé: a chamada de abrir à esquerda, os links auxiliares à direita. */
.cl-app-foot {
  grid-column: 2;
  margin-top: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.cl-app-abrir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--size-label);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  color: var(--accent);
}
.cl-app-abrir span { transition: transform var(--transition-calm); }
.cl-app-foot .cl-app-link:first-of-type { margin-left: auto; }

/* Links auxiliares: acima da camada do link esticado, e discretos. */
.cl-app-link {
  position: relative;
  z-index: 1;
  font-size: var(--size-label);
  color: var(--text-secondary);
}
.cl-app-link:hover { color: var(--accent); }

/* Resto do desenho antigo: a seta solta no canto saiu quando "Abrir
 * ferramenta" voltou ao rodapé. A classe fica para quem ainda a use. */
.cl-app-seta {
  margin-left: auto;
  font-size: var(--size-label);
  font-weight: var(--weight-medium);
  color: var(--accent);
  white-space: nowrap;
  transition: transform var(--transition-calm);
}

/* Hover e foco moram no card, não no botão — a resposta é calma: o fio ganha
   bronze e a superfície sobe um degrau. Sem salto, sem sombra nova. */
/* Hover: o card sobe, o fio bronze corre no topo, o nome vira bronze e o
 * monograma cresce um fio. Sem trocar a superfície — ela é a mesma no
 * repouso e no hover, como manda o contrato. */
.cl-app-aberto:hover {
  border-color: var(--accent);
  box-shadow: 0 18px 38px -22px rgba(55, 55, 56, 0.55);
  transform: translateY(-3px);
}
.cl-app-aberto:hover .cl-app-name { color: var(--accent); }
.cl-app-aberto:hover .cl-app-sigla {
  transform: scale(1.04);
  box-shadow: 0 10px 22px -10px rgba(150, 105, 46, 0.95);
}
.cl-app-aberto:hover .cl-app-abrir span,
.cl-app-aberto:focus-within .cl-app-abrir span { transform: translateX(4px); }
:root[data-theme='dark'] .cl-app-aberto:hover {
  box-shadow: 0 18px 38px -22px rgba(0, 0, 0, 0.85);
}
.cl-app-aberto:focus-within {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Bloqueado: sem opacity — ela derruba o contraste do texto no tema escuro.
   A diferença vem da superfície e da ausência de bronze. */
.cl-app-locked {
  background-color: var(--bg-teto);
  border-style: dashed;
  box-shadow: none;
}
.cl-app-locked .cl-app-name { color: var(--text-secondary); }
.cl-app-locked .cl-app-sigla {
  background-image: none;
  background-color: transparent;
  border: 1px dashed var(--divider);
  box-shadow: none;
  color: var(--text-secondary);
}

/* KPI / número grande.
 * Os cartões têm teto de largura (auto-fit até 1fr esticava três "3", "11",
 * "0" em caixas de 375px, quase vazias): cada um cresce só até 300px e a fila
 * encosta à esquerda, como uma linha de leitura. Os do Servidor, que carregam
 * medidor e linha de apoio, ficam no teto; os de contagem ficam compactos. */
.cl-stats {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  /* O teto de 300px por cartão mora na largura do grupo, e não no track:
   * `minmax(160px, 300px)` faz o auto-fit contar a repetição pelo máximo, e
   * a 600px de tela cabia um cartão por linha. Com 1fr e o grupo limitado a
   * três cartões de 300, o desktop fica igual e a tela estreita divide. */
  max-width: calc(3 * 300px + 2 * var(--space-3));
}
/* Rótulo em cima, número embaixo: é a ordem em que o cartão é lido ("no ar:
 * 5"), e o número grande fecha o bloco. Fio bronze de 3px à esquerda,
 * discreto, para o grupo de números ler como painel. */
.cl-stat {
  background-color: var(--surface-card);
  border: 1px solid var(--color-hairline);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card-sm);
  padding: var(--space-4) var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
}
.cl-stat-num {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: var(--weight-semibold);
  line-height: 1.05;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  display: block;
  order: 2;
}
.cl-stat-label {
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-secondary);
  display: block;
  margin: 0 0 var(--space-2);
  order: 1;
}
.cl-stat-sub { order: 3; }
.cl-stat .cl-meter { order: 4; }
/* Terceira linha do cartão de número: o número bruto por trás do percentual
 * ("5,0 / 8,0 GB", "carga 0,31 · 2 vCPU"). Sem ela o admin vê a porcentagem
 * e não sabe de quanto. Não é .cl-stat-label — esta não é caixa alta. */
.cl-stat-sub {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--size-label);
  color: var(--text-secondary);
  line-height: var(--lh-support);
}

/* ---------- Medidor de ocupação ----------
 * <progress> nativo em vez de uma <div> com largura no style: a tela não pode
 * cravar tamanho e o elemento já anuncia o valor sozinho. O preenchimento
 * precisa ser repetido em -webkit- e -moz-: não existe propriedade única
 * aceita pelos dois motores. Os limiares (65% atenção, 85% alerta) são a
 * mesma régua do painel antigo. */
.cl-meter {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: var(--space-2);
  margin-top: var(--space-3);
  border: none;
  border-radius: var(--radius-chip);
  background-color: var(--bg-active);
  overflow: hidden;
  color: var(--accent);
}
.cl-meter::-webkit-progress-bar {
  background-color: var(--bg-active);
  border-radius: var(--radius-chip);
}
.cl-meter::-webkit-progress-value {
  background-color: var(--accent);
  border-radius: var(--radius-chip);
}
.cl-meter::-moz-progress-bar {
  background-color: var(--accent);
  border-radius: var(--radius-chip);
}
.cl-meter-espera::-webkit-progress-value { background-color: var(--status-pausada-text); }
.cl-meter-espera::-moz-progress-bar { background-color: var(--status-pausada-text); }
.cl-meter-alerta::-webkit-progress-value { background-color: var(--priority-alta-text); }
.cl-meter-alerta::-moz-progress-bar { background-color: var(--priority-alta-text); }

/* ==========================================================================
 * BOTÕES
 * CTA primário bronze cheio — um único por tela. Hover escurece, nunca
 * acende cor nova. Área de toque nunca abaixo de 42px no tamanho padrão.
 * ========================================================================== */
.btn, .cl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--size-support);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.005em;
  line-height: 1;
  min-height: 40px;
  padding: 0 18px;
  border-radius: var(--radius-button);
  border: 1px solid var(--bronze-fundo-hover);
  /* Bronze com uma luz no topo: é o que tira o botão do "retângulo pintado". */
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 55%);
  background-color: var(--bronze-fundo);
  color: var(--sobre-bronze);
  box-shadow: var(--shadow-btn);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--transition-calm),
              border-color var(--transition-calm),
              box-shadow var(--transition-calm),
              color var(--transition-calm),
              transform var(--transition-calm);
}
.btn:hover:not(:disabled), .cl-btn:hover:not(:disabled) {
  background-color: var(--bronze-fundo-hover);
  color: var(--sobre-bronze);
  box-shadow: var(--shadow-btn-hover);
  transform: translateY(-1px);
  text-decoration: none;
}
.btn:active:not(:disabled), .cl-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: var(--shadow-btn);
}
.btn:focus-visible, .cl-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-btn), var(--ring);
}
.btn:disabled, .cl-btn:disabled, .btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.btn-sm, .cl-btn-sm {
  min-height: 32px;
  padding: 0 var(--space-3);
  font-size: var(--size-label);
  font-weight: var(--weight-medium);
}
.btn-lg, .cl-btn-lg {
  min-height: 46px;
  padding: 0 var(--space-6);
  font-size: 15px;
}

.btn-primary, .cl-btn-primary {
  background-color: var(--bronze-fundo);
  color: var(--sobre-bronze);
}

/* Secundário: superfície branca com contorno hairline. Lê como botão de
 * verdade (tem corpo), mas não disputa com o bronze. */
.btn-secondary, .btn-outline, .cl-btn-secondary {
  background-image: none;
  background-color: var(--surface-card);
  color: var(--text-primary);
  border-color: var(--color-hairline);
  box-shadow: 0 1px 2px rgba(55, 55, 56, 0.06);
}
.btn-secondary:hover:not(:disabled),
.btn-outline:hover:not(:disabled),
.cl-btn-secondary:hover:not(:disabled) {
  background-color: var(--bg-teto);
  border-color: var(--divider);
  color: var(--text-primary);
  box-shadow: 0 2px 6px -2px rgba(55, 55, 56, 0.18);
}
.cl-btn-secondary:focus-visible { box-shadow: var(--ring); }

/* Silencioso: só texto até o mouse chegar. */
.btn-ghost, .cl-btn-ghost {
  background-image: none;
  background-color: transparent;
  color: var(--text-secondary);
  border-color: transparent;
  box-shadow: none;
}
.btn-ghost:hover:not(:disabled), .cl-btn-ghost:hover:not(:disabled) {
  background-color: var(--bg-hover);
  color: var(--text-primary);
  box-shadow: none;
  transform: none;
}
.cl-btn-ghost:focus-visible { box-shadow: var(--ring); }

.btn-danger, .cl-btn-danger {
  background-color: var(--priority-alta-text);
  border-color: var(--priority-alta-text);
  color: var(--color-offwhite);
}
.btn-danger:hover:not(:disabled), .cl-btn-danger:hover:not(:disabled) {
  filter: brightness(0.92);
  background-color: var(--priority-alta-text);
}

.btn-block, .cl-btn-block { width: 100%; }

/* Perigo em repouso: texto na cor de alerta, sem preenchimento. É o que uma
 * ação destrutiva veste enquanto ainda não foi confirmada — numa tabela com
 * dez linhas, dez "Remover" cheios de vermelho gritam o tempo inteiro e o
 * olho para de ouvir. O cheio (.cl-btn-danger) fica para o clique final,
 * dentro da confirmação. */
.cl-btn-danger-quiet {
  background-image: none;
  background-color: transparent;
  color: var(--priority-alta-text);
  border-color: transparent;
  box-shadow: none;
}
.cl-btn-danger-quiet:hover:not(:disabled) {
  background-color: var(--priority-alta-bg);
  color: var(--priority-alta-text);
  box-shadow: none;
  transform: none;
}

/* Segmentado: um grupo de opções excludentes (qual servidor, liberado ou
 * bloqueado) desenhado como o alternador de tema — um contorno só, o
 * escolhido aceso em bronze sobre a superfície de teto. Lê como estado, não
 * como fileira de botões iguais disputando o clique. Aceita <a> e <button>. */
.cl-seg {
  display: inline-flex;
  align-items: stretch;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-button);
  background-color: var(--bg-teto);
  vertical-align: middle;
}
.cl-seg > * {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 var(--space-3);
  border: none;
  border-radius: calc(var(--radius-button) - 3px);
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--size-label);
  font-weight: var(--weight-medium);
  line-height: 1;
  color: var(--text-secondary);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--transition-calm), color var(--transition-calm), box-shadow var(--transition-calm);
}
.cl-seg > *:hover { color: var(--text-primary); text-decoration: none; }
/* O escolhido é a pastilha que sobe: superfície branca, bronze e sombra curta. */
.cl-seg > .is-active,
.cl-seg > [aria-current],
.cl-seg > [aria-pressed='true'] {
  background-color: var(--surface-card);
  color: var(--accent);
  font-weight: var(--weight-semibold);
  box-shadow: var(--shadow-card-sm);
  cursor: default;
}
.cl-seg > *:focus-visible { outline: none; box-shadow: var(--ring); }
.cl-seg-lg > * { min-height: 34px; padding: 0 var(--space-4); font-size: var(--size-support); }

/* Spinner dentro do botão */
.cl-spin {
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: cl-spin 0.6s linear infinite;
}
@keyframes cl-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
 * FORMULÁRIO
 * ========================================================================== */
.cl-field { display: block; margin-bottom: var(--space-4); }

label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--size-label);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin-bottom: 6px;
}
.cl-hint {
  font-size: var(--size-label);
  color: var(--text-secondary);
  line-height: var(--lh-support);
  margin-bottom: var(--space-2);
}
.cl-req { color: var(--priority-alta-text); }
.cl-opt { color: var(--text-secondary); font-weight: var(--weight-regular); }

input[type='text'],
input[type='email'],
input[type='password'],
input[type='number'],
input[type='search'],
input[type='date'],
input[type='tel'],
select,
textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--size-support);
  line-height: 1.4;
  color: var(--text-primary);
  background-color: var(--surface-card);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-input);
  padding: 9px var(--space-3);
  min-height: 40px;
  /* Sombra interna rasa: o campo lê como cavidade, o botão como relevo. */
  box-shadow: inset 0 1px 2px rgba(55, 55, 56, 0.05);
  transition: border-color var(--transition-calm), box-shadow var(--transition-calm);
}
textarea { min-height: 96px; resize: vertical; }

input:hover:not(:disabled),
select:hover:not(:disabled),
textarea:hover:not(:disabled) { border-color: var(--divider); }

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: inset 0 1px 2px rgba(55, 55, 56, 0.05), var(--ring);
}

input::placeholder, textarea::placeholder { color: var(--text-secondary); opacity: 1; }
input:disabled, select:disabled, textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Interruptor (dry-run e afins) */
.cl-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex: 0 0 auto;
  margin: 0;
}
.cl-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.cl-switch-slider {
  position: absolute;
  inset: 0;
  background-color: var(--divider);
  border-radius: var(--radius-chip);
  cursor: pointer;
  transition: background-color var(--transition-calm);
}
.cl-switch-slider::before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  top: 3px;
  background-color: var(--color-branco);
  border-radius: 50%;
  transition: transform var(--transition-calm);
}
.cl-switch input:checked + .cl-switch-slider { background-color: var(--accent); }
.cl-switch input:checked + .cl-switch-slider::before { transform: translateX(20px); }
.cl-switch input:focus-visible + .cl-switch-slider { outline: 2px solid var(--accent); outline-offset: 2px; }

.cl-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
}

/* Zona de arrastar arquivo */
.cl-drop {
  position: relative;
  border: 1px dashed var(--divider);
  border-radius: var(--radius-card);
  background-color: var(--bg-teto);
  padding: var(--space-6);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition-calm), background-color var(--transition-calm);
}
.cl-drop:hover { border-color: var(--accent); }
.cl-drop.drag-over { border-color: var(--accent); background-color: var(--surface-card-hover); }
.cl-drop.has-files { border-style: solid; border-color: var(--status-concluida-text); }
.cl-drop input[type='file'] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  min-height: 0;
  padding: 0;
}
.cl-drop-icon { font-size: 26px; line-height: 1; color: var(--icon-neutral); }
.cl-drop-text {
  font-size: var(--size-support);
  color: var(--text-secondary);
  margin-top: var(--space-2);
}
.cl-drop-files {
  font-size: var(--size-label);
  color: var(--status-concluida-text);
  font-weight: var(--weight-medium);
  margin-top: var(--space-2);
  word-break: break-word;
}

/* ==========================================================================
 * TABELA — superfície de dados
 * ========================================================================== */
.table-container, .cl-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--surface-data-border);
  border-radius: var(--radius-card);
  background-color: var(--surface-data);
  color: var(--surface-data-text);
  --text-primary: var(--surface-data-text);
  --text-secondary: var(--surface-data-muted);
}
.table-container table, .cl-table-wrap table, table.cl-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: var(--size-support);
  color: var(--surface-data-text);
}
.table-container th, .cl-table-wrap th, table.cl-table th {
  text-align: left;
  padding: 11px var(--space-4);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--surface-data-muted);
  background-color: var(--bg-teto);
  border-bottom: 1px solid var(--surface-data-border);
  white-space: nowrap;
}
/* 12px e não 16: uma tabela de administração é lida em varredura, e cada
 * 4px a mais por linha é uma linha a menos na tela sem ganho de leitura. */
.table-container td, .cl-table-wrap td, table.cl-table td {
  padding: 12px var(--space-4);
  border-bottom: 1px solid var(--surface-data-border);
  color: var(--surface-data-text);
  vertical-align: middle;
}
.table-container tr:last-child td,
.cl-table-wrap tr:last-child td,
table.cl-table tr:last-child td { border-bottom: none; }
.cl-table-wrap tbody tr { transition: background-color var(--transition-calm); }
.cl-table-wrap tbody tr:hover { background-color: var(--bg-hover); }
/* Primeira coluna é o nome da linha: um degrau de peso acima do resto. */
.cl-table-wrap tbody td:first-child { font-weight: var(--weight-medium); }

.cl-num { font-variant-numeric: tabular-nums; text-align: right; }
.cl-nowrap { white-space: nowrap; }
.cl-wrap { white-space: normal; }
/* Coluna de ações: encosta à direita e ocupa só o que os botões pedem, para
 * o dado ficar à esquerda e a ação à direita sem um vão de 600px no meio. */
/* `width: 1%` + `nowrap` é o par que faz a coluna medir pelo conteúdo: sem o
 * nowrap a célula encolhe ao mínimo e joga o último botão para um segundo
 * andar, que era o que empilhava "Limpar" na tela do mentorado. */
.cl-col-acoes { width: 1%; text-align: right; white-space: nowrap; }
/* Uma fileira só. O `nowrap` daqui depende de a coluna ter largura: é o
 * encurtamento do endereço (só o subdomínio) que a libera. Abaixo de 1100px
 * a tabela rola na horizontal, que é melhor que empilhar botão. */
.cl-col-acoes .cl-acoes { justify-content: flex-end; flex-wrap: nowrap; }
@media (max-width: 1100px) {
  .cl-col-acoes .cl-acoes { flex-wrap: wrap; min-width: 170px; }
}
/* Linha de apoio sob o dado principal de uma célula (o slug sob o nome). */
.cl-cel-sub {
  display: block;
  margin-top: 2px;
  font-size: var(--size-label);
  color: var(--surface-data-muted);
}

.cl-empty {
  padding: var(--space-12) var(--space-6);
  text-align: center;
  color: var(--surface-data-muted);
  font-size: var(--size-support);
}

/* ==========================================================================
 * CHIPS E ETIQUETAS
 * Fundo fosco + texto na cor. Nunca preenchimento saturado.
 * ========================================================================== */
.cl-chip, .status-chip, .tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-chip);
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  line-height: 1.4;
  white-space: nowrap;
  border: 1px solid transparent;
  color: var(--text-primary);
}
/* Ponto de estado antes do texto: o olho lê a cor antes da palavra. */
.cl-chip-ok::before, .cl-chip-info::before, .cl-chip-espera::before, .cl-chip-alerta::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
  flex: 0 0 auto;
}
/* Marca: silêncio quase total — só contorno. */
.cl-chip-marca, .status-chip-marca {
  background-color: transparent;
  border-color: var(--color-hairline);
  color: var(--text-secondary);
}
.cl-chip-ok, .status-chip-concluida {
  color: var(--status-concluida-text);
  background-color: var(--status-concluida-bg);
}
.cl-chip-info, .status-chip-execucao {
  color: var(--status-execucao-text);
  background-color: var(--status-execucao-bg);
}
.cl-chip-espera, .status-chip-pausada {
  color: var(--status-pausada-text);
  background-color: var(--status-pausada-bg);
}
.cl-chip-alerta {
  color: var(--priority-alta-text);
  background-color: var(--priority-alta-bg);
}

/* Ponto de status, para listas densas */
.cl-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
  background-color: var(--icon-neutral);
}
.cl-dot-ok { background-color: var(--status-concluida-text); }
.cl-dot-info { background-color: var(--status-execucao-text); }
.cl-dot-espera { background-color: var(--status-pausada-text); }
.cl-dot-alerta { background-color: var(--priority-alta-text); }

/* ==========================================================================
 * AVISOS
 * ========================================================================== */
/* Fio de 3px à esquerda na cor do estado: o aviso lê como aviso de longe,
 * e o resto fica fosco como manda o contrato. */
.cl-alert, .alert, .flash {
  border: 1px solid transparent;
  border-left-width: 3px;
  border-left-color: currentColor;
  border-radius: var(--radius-input);
  padding: var(--space-3) var(--space-4);
  font-size: var(--size-support);
  line-height: var(--lh-support);
  margin-bottom: var(--space-4);
}
.cl-alert-info, .alert.info, .flash.info {
  color: var(--status-execucao-text);
  background-color: var(--status-execucao-bg);
  border-color: rgba(62, 97, 135, 0.28);
}
.cl-alert-ok, .alert.ok, .alert.success, .flash.ok, .flash.success {
  color: var(--status-concluida-text);
  background-color: var(--status-concluida-bg);
  border-color: rgba(74, 120, 80, 0.30);
}
.cl-alert-espera, .alert.warn, .alert.warning, .flash.warn, .flash.warning {
  color: var(--status-pausada-text);
  background-color: var(--status-pausada-bg);
  border-color: rgba(154, 107, 30, 0.32);
}
.cl-alert-erro, .alert.erro, .alert.error, .flash.erro, .flash.error {
  color: var(--priority-alta-text);
  background-color: var(--priority-alta-bg);
  border-color: rgba(163, 64, 44, 0.28);
}

/* ==========================================================================
 * MODAL
 * ========================================================================== */
.cl-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(25, 25, 25, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  z-index: 200;
}
.cl-modal {
  background-color: var(--surface-card);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-popup);
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cl-modal-header {
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.cl-modal-header h2, .cl-modal-header h3 { font-size: 18px; }
.cl-modal-body { padding: var(--space-6); overflow-y: auto; }
.cl-modal-footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-hairline);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
}
.cl-modal-close {
  background: transparent;
  border: none;
  color: var(--icon-neutral);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: var(--space-1);
  border-radius: var(--radius-button);
}
.cl-modal-close:hover { background-color: var(--bg-hover); color: var(--text-primary); }

/* Aviso flutuante */
.cl-toast {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-grafite-fundo-e);
  color: var(--color-offwhite);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-popup);
  font-size: var(--size-support);
  z-index: 300;
}

/* ==========================================================================
 * CONFIRMAÇÃO DE AÇÃO DESTRUTIVA (sem JavaScript)
 * <details> guarda a ação atrás de um clique e o painel que abre exige o nome
 * digitado. Usamos o elemento nativo em vez de modal com script porque a tela
 * de sistemas é operada por uma pessoa só, no servidor, e um confirm em JS
 * seria mais código para o mesmo efeito. O painel abre no fluxo do documento
 * (não flutuando): dentro de .cl-table-wrap, que tem overflow, um elemento
 * posicionado seria cortado.
 * ========================================================================== */
/* Coluna de ações da tabela de instâncias.
 *
 * Era `white-space: nowrap`, o que forçava as quatro ações numa linha só e
 * empurrava a largura da tabela para muito além da tela. Como `.cl-table-wrap`
 * rola na horizontal, a caixa de confirmação nascia fora da área visível e o
 * admin a via cortada pela metade — justo o painel que pede o nome digitado
 * antes de apagar banco e volume.
 *
 * Com flex-wrap as ações se acomodam na largura que a coluna tem, e a
 * confirmação ocupa uma linha inteira da célula (flex-basis: 100%), abrindo
 * para baixo em vez de para o lado. */
.cl-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
}
/* Fechada, a confirmação é só mais um botão da fileira; aberta, ela toma a
 * linha inteira da célula (regra mais abaixo, junto do <details>). */
.cl-acoes > .cl-confirm { flex-basis: auto; }
/* A caixa de confirmação abre à direita quando a coluna encosta à direita. */
.cl-col-acoes .cl-confirm-box { margin-left: auto; }

.cl-confirm { display: inline-block; }
/* Aberta, a confirmação toma a linha inteira da célula, e não só o seu
 * canto: o painel que pede o nome digitado precisa de largura para ser lido. */
.cl-acoes > .cl-confirm[open] { flex-basis: 100%; }
/* Some com o triângulo para o <summary> poder vestir .cl-btn. */
.cl-confirm > summary { list-style: none; }
.cl-confirm > summary::-webkit-details-marker { display: none; }
.cl-confirm-box {
  margin-top: var(--space-3);
  /* Sem teto, o <details> é inline-block e adota a largura máxima do texto:
     o painel abriria numa linha só e esticaria a coluna de ações da tabela. */
  max-width: 320px;
  padding: var(--space-3);
  border: 1px solid var(--priority-alta-bg);
  border-radius: var(--radius-input);
  background-color: var(--bg-teto);
  white-space: normal;
  text-align: left;
}
.cl-confirm-box input[type='text'] { margin-bottom: var(--space-2); }

/* Saída crua de comando do servidor. Fundo grafite nos dois temas: é um
 * terminal, e ler log em superfície clara cansa. Rolagem própria para o log
 * não empurrar a página. */
.cl-log {
  margin: 0;
  padding: var(--space-4);
  background-color: var(--color-grafite-fundo-e);
  color: var(--color-offwhite);
  border-radius: var(--radius-card);
  max-height: var(--height-log);
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: var(--lh-support);
}

/* ==========================================================================
 * RODAPÉ
 * ========================================================================== */
.cl-footer {
  max-width: var(--width-page);
  margin: 0 auto;
  padding: var(--space-6);
  border-top: 1px solid var(--color-hairline);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-size: var(--size-label);
  color: var(--text-secondary);
}

/* ==========================================================================
 * UTILITÁRIOS
 * ========================================================================== */
.cl-muted { color: var(--text-secondary); }
.cl-small { font-size: var(--size-label); }
.cl-flush { margin: 0 !important; }

/* Observação abaixo de um bloco (a diferença do .cl-hint é a margem). */
.cl-note {
  font-size: var(--size-label);
  color: var(--text-secondary);
  line-height: var(--lh-support);
  margin: var(--space-3) 0 0;
}

/* Linha de ações no fim de um formulário ou card. */
.cl-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
}
.cl-actions-end { justify-content: flex-end; }

/* Senha provisória: para ser lida em voz alta ou copiada sem erro. */
.cl-senha {
  font-family: var(--font-mono);
  font-size: 22px;
  letter-spacing: 0.06em;
  color: var(--text-primary);
  background-color: var(--bg-teto);
  border: 1px dashed var(--divider);
  border-radius: var(--radius-input);
  padding: var(--space-3) var(--space-4);
  display: inline-block;
  -webkit-user-select: all;
  user-select: all;
}

/* Só para leitor de tela — cabeçalho de coluna sem rótulo visível. */
.cl-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Lista dentro de aviso */
.cl-alert ul { margin: var(--space-2) 0 0; padding-left: 18px; }
.cl-alert li { margin-top: 2px; }
.cl-label-caps {
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.cl-serif { font-family: var(--font-serif); }
.cl-center { text-align: center; }
.cl-inline { display: inline; }
.cl-hidden { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 768px) {
  .cl-page { padding: var(--space-6) var(--space-4) var(--space-12); }
  .cl-page-header { padding: var(--space-4) 0 var(--space-6); }
  .cl-page-title { font-size: 27px; }
  h1 { font-size: 27px; }
  .card, .cl-card { padding: var(--space-4); }
  .cl-topbar { padding: 0 var(--space-4); }
  /* Com as abas de área na barra, o nome de quem está logado é o item menos
     útil no celular — some primeiro para as abas caberem em uma linha. */
  .cl-topbar-who { display: none; }
}