/* =============================================================================
   IDENTIDADE CAVE — sistema visual do ecossistema
   -----------------------------------------------------------------------------
   Este é o arquivo único da aparência do grupo CAVE. Cor, tipografia, espaço,
   raio, sombra, botão, cartão, formulário, tabela, selo e cabeçalho nascem aqui.

   Como usar em qualquer ambiente do ecossistema, nesta ordem:
     1. cave-ds.css          este arquivo, sempre primeiro
     2. o CSS próprio do produto, que cuida só do arranjo da página
     3. cave-aplicacao.css   liga os nomes antigos de cada produto ao sistema

   Regra de convivência: nenhum produto define cor, raio, sombra ou tamanho de
   letra por conta própria. Todos leem as variáveis abaixo. Para mudar a
   aparência do ecossistema inteiro, muda-se aqui e roda-se `sincronizar.cjs`.
   ========================================================================== */

/* --- Fonte ---------------------------------------------------------------- */
@font-face {
  font-family: "Nunito CAVE";
  src: url("nunito.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

/* =============================================================================
   1. FICHAS DO SISTEMA (tokens)
   ========================================================================== */
:root {
  /* Escala da marca, colhida da logo: 500 é o verde claro do "cave",
     600 é o verde-petróleo de trabalho, 900 é a tinta e o fundo escuro. */
  --cave-50:  #eff8f8;
  --cave-100: #d8eded;
  --cave-200: #b2dcdd;
  --cave-300: #7dc8c9;
  --cave-400: #38b0b1;
  --cave-500: #00a7a8;
  --cave-600: #0b7476;
  --cave-700: #0a5f62;
  --cave-800: #114b4f;
  --cave-900: #103e43;

  /* Papéis de cor. Sempre use estes nomes, não os números acima. */
  --cave-brand:        var(--cave-600);
  --cave-brand-hover:  var(--cave-700);
  --cave-brand-active: var(--cave-800);
  --cave-bright:       #69d8d0;   /* destaque sobre fundo escuro */

  --cave-ink:    var(--cave-900); /* títulos e texto corrido */
  --cave-muted:  #526c72;         /* texto de apoio, aprovado AA em toda superfície */
  --cave-faint:  #5a747a;         /* legenda discreta, só sobre branco ou fundo claro */

  /* Escala neutra. Não é cinza puro: puxa levemente para o verde da marca, para
     que texto de apoio, traço e fundo pertençam à mesma família das cores acima.
     Do 500 em diante todo passo tem contraste AA sobre branco e sobre o fundo. */
  --cave-n-50:  #f7fafa;
  --cave-n-100: #eef3f4;
  --cave-n-200: #dbe5e7;
  --cave-n-300: #c2d5d8;
  --cave-n-400: #8ba4aa;
  --cave-n-500: #5a747a;
  --cave-n-600: #526c72;
  --cave-n-700: #3d585e;
  --cave-n-800: #26464c;
  --cave-n-900: #103e43;

  --cave-canvas:     #f3f6f7;     /* fundo da página */
  --cave-surface:    #ffffff;     /* cartões e painéis */
  --cave-surface-2:  #fafcfc;     /* superfície rebaixada, cabeçalho de tabela */
  --cave-tint:       #e7f1f2;     /* realce claro da marca */
  --cave-line:       #dbe5e7;     /* traço padrão */
  --cave-line-strong:#c2d5d8;     /* traço de campo e divisor forte */

  --cave-dark:           var(--cave-900);
  --cave-on-dark:        #e6f2f2;
  --cave-on-dark-muted:  #b9d5d6;
  --cave-on-dark-line:   #ffffff26;

  /* Estados. Um só conjunto para todo o ecossistema. */
  --cave-ok:        #16704f;  --cave-ok-bg:      #e7f4ee;  --cave-ok-line:      #a9d6c3;
  --cave-warn:      #8a5714;  --cave-warn-bg:    #fbf1de;  --cave-warn-line:    #e8cd97;
  --cave-risk:      #a02b2b;  --cave-risk-bg:    #fbecec;  --cave-risk-line:    #eebebe;
  /* Um degrau escuro por estado, para o botão cheio ao passar o cursor. */
  --cave-ok-hover:   #115a40;
  --cave-risk-hover: #8a2424;
  --cave-warn-bg-hover: #f5e6c8;
  --cave-info:      var(--cave-600);
  --cave-info-bg:   var(--cave-tint);
  --cave-info-line: #bcd8da;
  --cave-neutral:   #4d6267;  --cave-neutral-bg: #eef3f4;  --cave-neutral-line: var(--cave-line);

  /* Categoria, não estado. Servem para distinguir TIPOS que convivem na mesma
     tela — os nove tipos de evento do calendário, "com a CAVE" x "em análise" —
     onde verde/âmbar/vermelho diriam algo errado. Três tons só, na mesma faixa
     de contraste dos estados, para conviverem com o verde da marca sem brigar. */
  --cave-cat-azul:      #1f5f8b;  --cave-cat-azul-bg:    #e6f0f7;  --cave-cat-azul-line:    #b3cfe3;
  --cave-cat-roxo:      #5b4499;  --cave-cat-roxo-bg:    #eeeaf8;  --cave-cat-roxo-line:    #cbc0e8;
  --cave-cat-laranja:   #9a4a15;  --cave-cat-laranja-bg: #fbeee3;  --cave-cat-laranja-line: #eccdb2;
  /* Acrescentados na rodada de maquetes: com nove tipos de evento, três tons
     obrigavam a repetir o azul (Reunião e Revisão de documento saíam iguais) e
     a empurrar três tipos para o âmbar de estado. Rosa e oliva foram escolhidos
     pela distância de matiz das cores que já existem — o oliva fica a 48° do
     vizinho mais próximo — e ambos passam AA sobre branco, sobre canvas e
     sobre o próprio fundo. */
  --cave-cat-rosa:      #8b2a5e;  --cave-cat-rosa-bg:    #f7e6ee;  --cave-cat-rosa-line:    #e3b9cf;
  --cave-cat-oliva:     #556b2f;  --cave-cat-oliva-bg:   #eef2e3;  --cave-cat-oliva-line:   #ccd9b0;

  /* Superfícies sobre fundo escuro. Cartão dentro de área escura não pode ser
     branco nem um segundo hexadecimal fixo: é o próprio fundo clareado, para
     acompanhar qualquer escuro que venha. Sobre --cave-dark rendem #1c484c e
     #285156, com o texto on-dark a 8,8:1 e 7,6:1. */
  --cave-dark-surface:   #ffffff0d;
  --cave-dark-surface-2: #ffffff1a;
  --cave-dark-line:      #ffffff26;

  /* Cinza de coisa desligada. É o mesmo --cave-n-400, batizado para deixar a
     regra explícita: 2,6:1 sobre branco NÃO serve para informação. Só para
     campo bloqueado, texto de exemplo e botão desabilitado. */
  --cave-disabled:      var(--cave-n-400);
  --cave-disabled-bg:   var(--cave-n-200);

  /* Tipografia. Um nome de fonte só em todo o ecossistema. */
  --cave-font: "Nunito CAVE", Nunito, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Nota de auditoria e percentual grande pedem um degrau acima do display. */
  --cave-text-mega:    clamp(3rem, 6vw, 5rem);
  --cave-text-display: clamp(2.25rem, 4.2vw, 3.5rem);
  --cave-text-title:   clamp(1.75rem, 3vw, 2.5rem);
  --cave-text-h2:      clamp(1.375rem, 2.2vw, 1.875rem);
  --cave-text-h3:      1.375rem;
  --cave-text-h4:      1.0625rem;
  --cave-text-lead:    1.125rem;
  --cave-text-body:    1rem;
  --cave-text-small:   0.875rem;
  --cave-text-micro:   0.75rem;

  --cave-lh-tight: 1.12;
  --cave-lh-snug:  1.3;
  --cave-lh-body:  1.65;

  --cave-track-display: -0.04em;
  --cave-track-title:   -0.035em;
  --cave-track-h2:      -0.03em;
  --cave-track-h3:      -0.02em;
  --cave-track-eyebrow:  0.1em;

  --cave-weight-body:   400;
  --cave-weight-medium: 650;
  --cave-weight-strong: 800;
  --cave-weight-title:  850;

  /* Hierarquia de número. Painel com doze indicadores precisa dizer o que se
     olha primeiro. Três degraus, todos no peso de título:
       agir hoje > acompanhar > contexto. */
  --cave-num-agir:       3.5rem;    /* 56px */
  --cave-num-acompanhar: 1.75rem;   /* 28px */
  --cave-num-contexto:   1.375rem;  /* 22px */

  /* Espaço, em passos de 4. Não invente valores fora desta escala. */
  --cave-1: 4px;   --cave-2: 8px;   --cave-3: 12px;  --cave-4: 16px;
  --cave-5: 20px;  --cave-6: 24px;  --cave-7: 32px;  --cave-8: 40px;
  --cave-9: 48px;  --cave-10: 64px; --cave-11: 80px;

  --cave-gutter:  clamp(20px, 4vw, 48px);
  --cave-width:   1320px;
  --cave-section: clamp(48px, 6vw, 72px);

  /* Raio: quatro passos, nem um a mais. */
  --cave-r-xs:   4px;    /* caixa de marcar e topo de barra de gráfico */
  --cave-r-sm:   8px;    /* selos e controles pequenos */
  --cave-r-md:   10px;   /* botões, campos, itens de menu */
  --cave-r-lg:   16px;   /* cartões e painéis */
  --cave-r-xl:   22px;   /* blocos de destaque */
  --cave-r-full: 999px;

  /* Sombra: três passos, todas puxadas para o verde da marca. */
  --cave-shadow-sm: 0 1px 2px rgba(16,62,67,.05), 0 1px 3px rgba(16,62,67,.04);
  --cave-shadow-md: 0 2px 4px rgba(16,62,67,.04), 0 8px 24px rgba(16,62,67,.06);
  --cave-shadow-lg: 0 4px 12px rgba(16,62,67,.05), 0 18px 48px rgba(16,62,67,.10);
  --cave-shadow-none: none;

  /* Movimento e foco. */
  --cave-ease: cubic-bezier(.4, 0, .2, 1);
  --cave-fast: 140ms;
  --cave-slow: 240ms;
  --cave-focus-ring: 2px solid var(--cave-brand);
  --cave-focus-halo: 0 0 0 4px rgba(11,116,118,.20);

  --cave-tap: 44px;      /* alvo mínimo de toque */
  --cave-control: 48px;  /* altura padrão de botão e campo */

  /* `color-scheme` NÃO entra aqui de propósito. A Plataforma é clara por decisão
     de produto e declara isso no seu próprio globals.css; o CAVE Check tem modo
     escuro. Um sistema compartilhado que impusesse `light` quebraria os
     controles nativos do Check quando o usuário escolhesse o escuro. */
}

/* =============================================================================
   2. BASE
   ========================================================================== */
.cave-base,
.cave-base *,
.cave-base *::before,
.cave-base *::after { box-sizing: border-box; }

.cave-base {
  margin: 0;
  background: var(--cave-canvas);
  color: var(--cave-ink);
  font-family: var(--cave-font);
  font-size: var(--cave-text-body);
  line-height: var(--cave-lh-body);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* O reset da base usa :where() de propósito: assim ele tem força zero e qualquer
   componente daqui para baixo (.cv-btn, .cv-link, .cv-input) vence sem precisar
   de !important. Escrito como ".cave-base button" ele venceria ".cv-btn" e o
   botão principal apareceria com a cor do texto em vez da cor do sistema. */
:where(.cave-base) :where(img, svg) { display: block; max-width: 100%; }
:where(.cave-base) :where(a) { color: inherit; text-underline-offset: 5px; }
:where(.cave-base) :where(button, input, select, textarea) { font: inherit; color: inherit; }

/* Um único foco visível para todo o ecossistema. */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--cave-focus-ring);
  outline-offset: 2px;
  box-shadow: var(--cave-focus-halo);
  border-radius: var(--cave-r-sm);
}

::selection { background: var(--cave-100); color: var(--cave-900); }

/* Uma transição só, aplicada onde importa. */
:where(a, button, summary, input, select, textarea, [role="button"], .cv-card--interactive) {
  transition: color var(--cave-fast) var(--cave-ease),
              background-color var(--cave-fast) var(--cave-ease),
              border-color var(--cave-fast) var(--cave-ease),
              box-shadow var(--cave-fast) var(--cave-ease),
              opacity var(--cave-fast) var(--cave-ease);
}

/* Barra de rolagem discreta. */
.cave-base * { scrollbar-width: thin; scrollbar-color: var(--cave-line-strong) transparent; }
.cave-base ::-webkit-scrollbar { width: 10px; height: 10px; }
.cave-base ::-webkit-scrollbar-thumb {
  background: var(--cave-line-strong);
  border: 2px solid transparent;
  background-clip: content-box;
  border-radius: var(--cave-r-full);
}
.cave-base ::-webkit-scrollbar-thumb:hover { background: #9db8bc; background-clip: content-box; }

/* =============================================================================
   3. ARRANJO
   ========================================================================== */
.cv-wrap { width: min(var(--cave-width), 100%); margin-inline: auto; padding-inline: var(--cave-gutter); }
.cv-section { padding-block: var(--cave-section); }
.cv-section + .cv-section { padding-top: 0; }
.cv-stack > * + * { margin-top: var(--cave-4); }
.cv-grid { display: grid; gap: var(--cave-6); }
.cv-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cv-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cv-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .cv-grid--3, .cv-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px)  { .cv-grid--2, .cv-grid--3, .cv-grid--4 { grid-template-columns: minmax(0, 1fr); } }

.cv-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.cv-skip { position: fixed; top: 12px; left: 12px; z-index: 100; padding: 12px 20px; background: var(--cave-surface); border-radius: var(--cave-r-md); box-shadow: var(--cave-shadow-lg); transform: translateY(-200%); }
.cv-skip:focus { transform: none; }

/* =============================================================================
   4. TIPOGRAFIA
   ========================================================================== */
.cv-display, .cv-title, .cv-h2, .cv-h3, .cv-h4 { margin: 0; text-wrap: balance; color: var(--cave-ink); }

.cv-display { font-size: var(--cave-text-display); font-weight: var(--cave-weight-title); line-height: 1.06; letter-spacing: var(--cave-track-display); }
.cv-title   { font-size: var(--cave-text-title);   font-weight: var(--cave-weight-title); line-height: var(--cave-lh-tight); letter-spacing: var(--cave-track-title); }
.cv-h2      { font-size: var(--cave-text-h2);      font-weight: var(--cave-weight-title); line-height: 1.18; letter-spacing: var(--cave-track-h2); }
.cv-h3      { font-size: var(--cave-text-h3);      font-weight: var(--cave-weight-strong); line-height: 1.25; letter-spacing: var(--cave-track-h3); }
.cv-h4      { font-size: var(--cave-text-h4);      font-weight: var(--cave-weight-strong); line-height: var(--cave-lh-snug); }

.cv-eyebrow {
  margin: 0 0 var(--cave-3);
  font-size: var(--cave-text-micro);
  font-weight: var(--cave-weight-title);
  letter-spacing: var(--cave-track-eyebrow);
  text-transform: uppercase;
  color: var(--cave-brand);
}
.cv-lead  { font-size: var(--cave-text-lead); line-height: var(--cave-lh-body); color: var(--cave-muted); max-width: 68ch; margin: 0; }
.cv-body  { font-size: var(--cave-text-body); line-height: var(--cave-lh-body); margin: 0; }
.cv-small { font-size: var(--cave-text-small); line-height: 1.55; margin: 0; }
.cv-muted { color: var(--cave-muted); }
.cv-faint { color: var(--cave-faint); }

.cv-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--cave-5); margin-bottom: var(--cave-6); }
.cv-section-head > span:last-child { font-size: var(--cave-text-small); color: var(--cave-muted); max-width: 30ch; text-align: right; line-height: 1.5; }
@media (max-width: 760px) { .cv-section-head { flex-direction: column; align-items: flex-start; gap: var(--cave-3); } .cv-section-head > span:last-child { display: none; } }

.cv-link { display: inline-flex; align-items: center; gap: var(--cave-2); min-height: var(--cave-tap); font-weight: var(--cave-weight-strong); font-size: var(--cave-text-small); color: var(--cave-brand); text-decoration: none; }
.cv-link:hover { color: var(--cave-brand-hover); text-decoration: underline; }

/* =============================================================================
   5. BOTÕES — uma definição, cinco intenções
   ========================================================================== */
.cv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cave-3);
  min-height: var(--cave-control);
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: var(--cave-r-md);
  background: var(--cave-brand);
  color: #fff;
  font-family: var(--cave-font);
  font-size: var(--cave-text-small);
  font-weight: var(--cave-weight-strong);
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.cv-btn:hover  { background: var(--cave-brand-hover); color: #fff; text-decoration: none; }
.cv-btn:active { background: var(--cave-brand-active); }
.cv-btn[disabled], .cv-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.cv-btn--secondary { background: var(--cave-surface); border-color: var(--cave-line-strong); color: var(--cave-brand); }
.cv-btn--secondary:hover { background: var(--cave-tint); border-color: var(--cave-brand); color: var(--cave-brand-hover); }

.cv-btn--ghost { background: transparent; border-color: transparent; color: var(--cave-brand); padding-inline: var(--cave-3); }
.cv-btn--ghost:hover { background: var(--cave-tint); color: var(--cave-brand-hover); }

.cv-btn--danger { background: var(--cave-risk); }
.cv-btn--danger:hover { background: #8a2424; }

/* Sobre superfície escura o botão inverte, mantendo o mesmo desenho. */
.cv-btn--on-dark { background: var(--cave-bright); color: var(--cave-dark); }
.cv-btn--on-dark:hover { background: #a3e9e4; color: var(--cave-dark); }
.cv-btn--on-dark-secondary { background: transparent; border-color: var(--cave-on-dark-line); color: var(--cave-on-dark); }
.cv-btn--on-dark-secondary:hover { background: #ffffff14; border-color: var(--cave-on-dark-muted); color: #fff; }

.cv-btn--sm    { min-height: var(--cave-tap); padding: 8px 14px; font-size: var(--cave-text-small); }
.cv-btn--lg    { min-height: 56px; padding: 14px 26px; font-size: var(--cave-text-body); }
.cv-btn--block { display: flex; width: 100%; }
/* Botão de cartão: rótulo à esquerda, seta à direita. */
.cv-btn--wide  { display: flex; justify-content: space-between; text-align: left; }

/* =============================================================================
   6. CARTÕES
   ========================================================================== */
.cv-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--cave-6);
  border: 1px solid var(--cave-line);
  border-radius: var(--cave-r-lg);
  background: var(--cave-surface);
  box-shadow: var(--cave-shadow-sm);
}
.cv-card--flat    { box-shadow: var(--cave-shadow-none); }
.cv-card--raised  { border-color: transparent; box-shadow: var(--cave-shadow-md); }
.cv-card--tinted  { background: var(--cave-tint); border-color: var(--cave-info-line); box-shadow: none; }
.cv-card--quiet   { background: var(--cave-surface-2); box-shadow: none; }
.cv-card--dashed  { border-style: dashed; background: var(--cave-surface-2); box-shadow: none; }
.cv-card--dark    { background: var(--cave-dark); border-color: var(--cave-dark); color: var(--cave-on-dark); box-shadow: var(--cave-shadow-md); }
.cv-card--interactive { cursor: pointer; }
.cv-card--interactive:hover { border-color: var(--cave-300); box-shadow: var(--cave-shadow-md); }
.cv-card--accent { box-shadow: inset 0 3px var(--cave-brand), var(--cave-shadow-sm); }

.cv-card__head   { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--cave-4); margin-bottom: var(--cave-4); }
.cv-card__brand  { display: flex; align-items: center; gap: var(--cave-3); height: 64px; margin-bottom: var(--cave-5); }
.cv-card__brand img { width: auto; max-width: 200px; max-height: 60px; object-fit: contain; object-position: left center; }
.cv-card__body   { flex: 1; min-width: 0; }
.cv-card__foot   { margin-top: auto; padding-top: var(--cave-5); }
.cv-card__foot--divided { border-top: 1px solid var(--cave-line); margin-top: var(--cave-5); }
.cv-card .cv-btn:last-child { margin-top: auto; }

/* Métrica / indicador. Um desenho só, usado por Plataforma, Check e Docs. */
/* Bloco de posse. Diz de quem é a bola e quanto disso existe: chapéu em caixa
   alta, número grande, uma linha de apoio e, quando cabe, um link de ação. O
   raio subiu de 14 para 16 — 14 não estava na escala. */
.cv-metric { display: flex; flex-direction: column; gap: var(--cave-1); padding: var(--cave-5); border: 1px solid var(--cave-line); border-radius: var(--cave-r-lg); background: var(--cave-surface); text-align: left; }
.cv-metric__eyebrow { font-size: var(--cave-text-micro); font-weight: var(--cave-weight-strong); letter-spacing: var(--cave-track-eyebrow); text-transform: uppercase; color: var(--cave-muted); }
.cv-metric__value { font-size: var(--cave-num-acompanhar); font-weight: var(--cave-weight-title); letter-spacing: -.045em; line-height: 1.1; color: var(--cave-ink); }
.cv-metric__label { font-size: var(--cave-text-small); line-height: 1.4; color: var(--cave-muted); }
.cv-metric__support { font-size: var(--cave-text-small); line-height: 1.5; color: var(--cave-muted); }
.cv-metric__link { text-decoration: none; margin-top: var(--cave-2); font-size: var(--cave-text-small); font-weight: var(--cave-weight-strong); }

/* Três degraus de número. Um painel escolhe UM por bloco, nunca dois iguais
   lado a lado com importância diferente. */
.cv-metric--agir       .cv-metric__value { font-size: var(--cave-num-agir); }
.cv-metric--contexto   .cv-metric__value { font-size: var(--cave-num-contexto); }

.cv-metric--ok    { border-color: var(--cave-ok-line); }
.cv-metric--warn  { border-color: var(--cave-warn-line); }
.cv-metric--risk  { border-color: var(--cave-risk-line); }
.cv-metric--active{ border-color: var(--cave-400); background: var(--cave-50); box-shadow: inset 0 3px var(--cave-400); }

/* Variante cheia: o bloco inteiro ganha o fundo do estado. Reservada ao que
   exige ação hoje — se tudo for cheio, nada é. */
.cv-metric--fill-risk { background: var(--cave-risk-bg); border-color: var(--cave-risk-line); }
.cv-metric--fill-risk :is(.cv-metric__eyebrow, .cv-metric__value, .cv-metric__label, .cv-metric__support) { color: var(--cave-risk); }
.cv-metric--fill-warn { background: var(--cave-warn-bg); border-color: var(--cave-warn-line); }
.cv-metric--fill-warn :is(.cv-metric__eyebrow, .cv-metric__value, .cv-metric__label, .cv-metric__support) { color: var(--cave-warn); }
.cv-metric--fill-ok   { background: var(--cave-ok-bg); border-color: var(--cave-ok-line); }
.cv-metric--fill-ok   :is(.cv-metric__eyebrow, .cv-metric__value, .cv-metric__label, .cv-metric__support) { color: var(--cave-ok); }

/* =============================================================================
   7. SELOS DE ESTADO
   ========================================================================== */
.cv-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--cave-2);
  padding: 5px 12px;
  border: 1px solid var(--cave-neutral-line);
  border-radius: var(--cave-r-full);
  background: var(--cave-neutral-bg);
  color: var(--cave-neutral);
  font-size: var(--cave-text-micro);
  font-weight: var(--cave-weight-strong);
  line-height: 1.4;
  white-space: nowrap;
}
.cv-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 7px; }
.cv-badge--plain::before { display: none; }
.cv-badge--ok   { background: var(--cave-ok-bg);   border-color: var(--cave-ok-line);   color: var(--cave-ok); }
.cv-badge--warn { background: var(--cave-warn-bg); border-color: var(--cave-warn-line); color: var(--cave-warn); }
.cv-badge--risk { background: var(--cave-risk-bg); border-color: var(--cave-risk-line); color: var(--cave-risk); }
.cv-badge--info { background: var(--cave-info-bg); border-color: var(--cave-info-line); color: var(--cave-info); }
.cv-badge--on-dark { background: #ffffff1a; border-color: var(--cave-on-dark-line); color: var(--cave-on-dark); }

/* =============================================================================
   8. FORMULÁRIOS
   ========================================================================== */
.cv-field { display: grid; gap: var(--cave-2); min-width: 0; }
.cv-field > label { font-size: var(--cave-text-small); font-weight: var(--cave-weight-strong); color: var(--cave-ink); }
.cv-input, .cv-select, .cv-textarea,
.cv-field input:not([type="checkbox"]):not([type="radio"]),
.cv-field select,
.cv-field textarea {
  width: 100%;
  min-height: var(--cave-control);
  padding: 12px 14px;
  border: 1px solid var(--cave-line-strong);
  border-radius: var(--cave-r-md);
  background: var(--cave-surface);
  color: var(--cave-ink);
  font-family: var(--cave-font);
  font-size: var(--cave-text-body);
  line-height: 1.5;
}
.cv-textarea, .cv-field textarea { min-height: 120px; padding-block: 12px; resize: vertical; }
.cv-input::placeholder, .cv-field textarea::placeholder { color: var(--cave-faint); }
.cv-input:hover, .cv-select:hover, .cv-textarea:hover { border-color: var(--cave-300); }
.cv-input:disabled, .cv-select:disabled, .cv-textarea:disabled { background: var(--cave-surface-2); color: var(--cave-muted); cursor: not-allowed; }
.cv-field__hint  { font-size: var(--cave-text-small); color: var(--cave-muted); }
.cv-field__error { font-size: var(--cave-text-small); font-weight: var(--cave-weight-strong); color: var(--cave-risk); }
.cv-field[data-invalid="true"] :is(input, select, textarea) { border-color: var(--cave-risk); }
.cv-select { appearance: none; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--cave-muted) 50%), linear-gradient(135deg, var(--cave-muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.cv-check { display: flex; align-items: flex-start; gap: var(--cave-3); min-height: var(--cave-tap); font-size: var(--cave-text-body); }
.cv-check input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--cave-brand); flex: 0 0 20px; }

/* =============================================================================
   9. TABELAS
   ========================================================================== */
.cv-table-scroll { overflow-x: auto; border: 1px solid var(--cave-line); border-radius: var(--cave-r-lg); background: var(--cave-surface); }
.cv-table { width: 100%; border-collapse: collapse; font-size: var(--cave-text-small); }
.cv-table th, .cv-table td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--cave-line); }
.cv-table thead th { background: var(--cave-surface-2); font-weight: var(--cave-weight-strong); color: var(--cave-muted); font-size: var(--cave-text-micro); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.cv-table tbody tr:last-child :is(td, th) { border-bottom: 0; }
.cv-table tbody tr:hover { background: var(--cave-50); }
.cv-table td.cv-num, .cv-table th.cv-num { text-align: right; font-variant-numeric: tabular-nums; }

/* =============================================================================
   10. LISTAS E AVISOS
   ========================================================================== */
.cv-list { list-style: none; margin: var(--cave-5) 0; padding: 0; display: grid; gap: var(--cave-2); font-size: var(--cave-text-small); }
.cv-list li { display: flex; align-items: baseline; gap: var(--cave-3); }
.cv-list li::before { content: "—"; color: var(--cave-brand); font-weight: var(--cave-weight-strong); flex-shrink: 0; }
.cv-list--check li::before { content: "✓"; font-weight: 900; }
.cv-list--divided { gap: 0; }
.cv-list--divided li { padding-block: var(--cave-3); border-top: 1px solid var(--cave-line); }
.cv-list--divided li::before { display: none; }
.cv-list--divided li:last-child { border-bottom: 1px solid var(--cave-line); }

.cv-note { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: var(--cave-4); padding: var(--cave-5) var(--cave-6); border: 1px solid var(--cave-info-line); border-radius: var(--cave-r-lg); background: var(--cave-info-bg); }
.cv-note__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--cave-r-md); background: var(--cave-surface); border: 1px solid var(--cave-info-line); color: var(--cave-brand); font-size: 1.3rem; }
.cv-note--warn { background: var(--cave-warn-bg); border-color: var(--cave-warn-line); }
.cv-note--warn .cv-note__icon { border-color: var(--cave-warn-line); color: var(--cave-warn); }
.cv-note--risk { background: var(--cave-risk-bg); border-color: var(--cave-risk-line); }
.cv-note--risk .cv-note__icon { border-color: var(--cave-risk-line); color: var(--cave-risk); }
@media (max-width: 620px) { .cv-note { grid-template-columns: minmax(0, 1fr); } .cv-note__icon { display: none; } }

/* =============================================================================
   11. CABEÇALHO DO PRODUTO E BARRA DO ECOSSISTEMA
   ========================================================================== */
.cv-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--cave-6); padding-block: var(--cave-6); background: var(--cave-surface); }
.cv-topbar__brand { display: flex; align-items: center; gap: var(--cave-5); min-height: var(--cave-tap); text-decoration: none; }
.cv-topbar__brand img { width: 150px; max-height: 50px; object-fit: contain; }
.cv-topbar__brand > span { padding-left: var(--cave-5); border-left: 1px solid var(--cave-line-strong); font-size: var(--cave-text-small); font-weight: var(--cave-weight-medium); color: var(--cave-muted); }
.cv-topbar nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--cave-5); font-size: var(--cave-text-small); font-weight: var(--cave-weight-strong); }
.cv-topbar nav a { display: inline-flex; align-items: center; gap: var(--cave-2); min-height: var(--cave-tap); text-decoration: none; }
.cv-topbar nav a:hover { color: var(--cave-brand); }

.cv-family-bar {
  position: relative; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: var(--cave-4);
  min-height: 40px;
  padding-inline: max(var(--cave-5), calc((100vw - var(--cave-width)) / 2));
  background: var(--cave-dark);
  color: var(--cave-on-dark);
  font: var(--cave-weight-strong) var(--cave-text-micro) / 1.4 var(--cave-font);
  letter-spacing: .025em;
}
.cv-family-bar a { color: inherit; text-decoration: none; }
.cv-family-bar a:hover { text-decoration: underline; }
.cv-family-bar__label { display: inline-flex; align-items: center; gap: var(--cave-2); min-height: 40px; }
.cv-family-bar__label svg, .cv-family-bar__label img { width: 16px; height: 16px; flex-shrink: 0; }
.cv-family-bar__context { color: var(--cave-on-dark-muted); font-weight: var(--cave-weight-medium); }
.cv-family-bar :focus-visible { outline-color: var(--cave-bright); box-shadow: none; }
@media (max-width: 600px) { .cv-family-bar { min-height: var(--cave-tap); } .cv-family-bar__context { display: none; } }

.cv-footer { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: var(--cave-4); padding-block: var(--cave-6); border-top: 1px solid var(--cave-line); font-size: var(--cave-text-small); color: var(--cave-muted); }
.cv-footer > span:first-child { font-weight: var(--cave-weight-title); color: var(--cave-ink); }
.cv-footer a { display: inline-flex; align-items: center; min-height: var(--cave-tap); }

/* =============================================================================
   12. SUPERFÍCIE ESCURA
   ========================================================================== */
.cv-on-dark { background: var(--cave-dark); color: var(--cave-on-dark); }
.cv-on-dark :is(h1, h2, h3, h4, .cv-display, .cv-title, .cv-h2, .cv-h3, .cv-h4) { color: #fff; }
.cv-on-dark .cv-eyebrow { color: var(--cave-bright); }
.cv-on-dark :is(.cv-lead, .cv-muted, .cv-small) { color: var(--cave-on-dark-muted); }
.cv-on-dark .cv-list li::before { color: var(--cave-bright); }
.cv-on-dark :focus-visible { outline-color: var(--cave-bright); box-shadow: 0 0 0 4px #69d8d033; }

/* =============================================================================
   13. COMPONENTES DA APLICAÇÃO
   -----------------------------------------------------------------------------
   Nasceram da rodada de maquetes das 20 telas: era tudo o que cada tela estava
   improvisando por conta própria. Enquanto viviam soltos, cada tela reinventava
   a barra, a aba e o balão de conversa — que é exatamente como o ecossistema
   ficou disperso da primeira vez.

   REGRAS DE COR QUE ESTES COMPONENTES CARREGAM
   1. Prazo tem cor por horizonte: vencido = risco; até 15 dias = atenção;
      depois disso = texto de apoio. Sem isso, ou tudo é vermelho ou nada é.
   2. Estado sobrepõe tipo. Um evento de calendário mostra a cor do TIPO até o
      momento em que vence; vencido, passa a mostrar a de risco.
   3. Linha inteira colorida só para risco. Atenção mora no texto e na pílula —
      pintar a linha toda de âmbar transforma a lista em um bloco só.
   ========================================================================== */

/* --- Prazo: a cor diz o horizonte, não a opinião de quem escreveu a tela ---- */
.cv-prazo { font-weight: var(--cave-weight-strong); font-size: var(--cave-text-small); white-space: nowrap; color: var(--cave-muted); }
.cv-prazo--vencido  { color: var(--cave-risk); }
.cv-prazo--proximo  { color: var(--cave-warn); }   /* até 15 dias */
.cv-prazo--distante { color: var(--cave-muted); }

/* --- Barra segmentada: quanto de cada estado dentro de um todo -------------- */
.cv-bar { display: flex; gap: 2px; height: 8px; border-radius: var(--cave-r-full); overflow: hidden; background: var(--cave-line); }
.cv-bar > span { display: block; height: 100%; }
.cv-bar__ok    { background: var(--cave-ok); }
.cv-bar__warn  { background: var(--cave-warn-line); }
.cv-bar__risk  { background: var(--cave-risk); }
.cv-bar__rest  { background: var(--cave-line); }
.cv-bar--xs { height: 6px; }
.cv-bar--md { height: 12px; }
.cv-bar--lg { height: 16px; }

/* --- Progresso com marcador de referência (meta, média, prazo-alvo) --------- */
.cv-progress { position: relative; height: 12px; border-radius: var(--cave-r-full); background: var(--cave-line); overflow: hidden; }
.cv-progress__fill { height: 100%; background: var(--cave-brand); border-radius: inherit; }
.cv-progress__mark { position: absolute; inset-block: -2px; width: 2px; background: var(--cave-ink); }
.cv-progress__mark--warn { background: var(--cave-warn); }

/* --- Filtro: segmento (uma escolha) e pílula (várias) ----------------------- */
.cv-segment { display: inline-flex; padding: 3px; gap: 3px; border: 1px solid var(--cave-line); border-radius: var(--cave-r-md); background: var(--cave-surface); }
.cv-segment > button { min-height: 40px; padding: 0 var(--cave-4); border: 0; border-radius: 8px; background: transparent; color: var(--cave-muted); font-size: var(--cave-text-small); font-weight: var(--cave-weight-medium); cursor: pointer; }
.cv-segment > button[aria-pressed="true"] { background: var(--cave-ink); color: #fff; }

.cv-pill { display: inline-flex; align-items: center; gap: var(--cave-2); min-height: 36px; padding: 0 14px; border: 1px solid var(--cave-line); border-radius: var(--cave-r-full); background: var(--cave-surface); color: var(--cave-muted); font-size: var(--cave-text-small); font-weight: var(--cave-weight-medium); cursor: pointer; }
.cv-pill--sm { min-height: 32px; padding: 0 12px; }
.cv-pill[aria-pressed="true"] { border-color: var(--cave-brand); background: var(--cave-tint); color: var(--cave-brand); }
.cv-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: 0 0 8px; }

/* --- Linha de tabela em dois níveis, paginação e coluna de ação ------------- */
.cv-table__main { font-size: var(--cave-text-h4); font-weight: var(--cave-weight-strong); color: var(--cave-ink); line-height: var(--cave-lh-snug); }
.cv-table__meta { font-size: var(--cave-text-micro); color: var(--cave-muted); }
.cv-table td:last-child:has(.cv-btn, .cv-link) { text-align: right; white-space: nowrap; }
/* Regra 3: linha inteira pintada é privilégio do risco. */
.cv-table tbody tr.is-risco { background: var(--cave-risk-bg); }
.cv-table tbody tr.is-risco:hover { background: var(--cave-risk-bg); }
.cv-table__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--cave-4); padding: 12px var(--cave-4); border-top: 1px solid var(--cave-line); background: var(--cave-surface-2); font-size: var(--cave-text-small); color: var(--cave-muted); }

/* --- Cartão de linha: a mesma informação da tabela, em tela estreita -------- */
.cv-rowcard { display: flex; flex-direction: column; gap: var(--cave-2); padding: var(--cave-4); border: 1px solid var(--cave-line); border-radius: var(--cave-r-lg); background: var(--cave-surface); }
.cv-rowcard__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cave-2); font-size: var(--cave-text-micro); font-weight: var(--cave-weight-strong); letter-spacing: var(--cave-track-eyebrow); text-transform: uppercase; color: var(--cave-muted); }
.cv-rowcard__title { font-size: var(--cave-text-body); font-weight: var(--cave-weight-strong); line-height: var(--cave-lh-snug); color: var(--cave-ink); }
.cv-rowcard--risco { border-color: var(--cave-risk-line); background: var(--cave-risk-bg); }

/* --- Conversa: o canto reto aponta para quem falou -------------------------- */
.cv-bubble { max-width: 46ch; padding: 12px var(--cave-4); border-radius: var(--cave-r-lg); background: var(--cave-neutral-bg); color: var(--cave-ink); font-size: var(--cave-text-small); line-height: var(--cave-lh-body); }
.cv-bubble--mine  { margin-inline-start: auto; background: var(--cave-tint); border-end-end-radius: var(--cave-r-xs); }
.cv-bubble--other { background: var(--cave-surface); border: 1px solid var(--cave-line); border-end-start-radius: var(--cave-r-xs); }
.cv-bubble__who { display: block; margin-bottom: var(--cave-1); font-size: var(--cave-text-micro); font-weight: var(--cave-weight-strong); color: var(--cave-muted); }

/* --- Estado vazio: não é um parágrafo solto no meio do nada ----------------- */
.cv-empty { display: grid; justify-items: center; gap: var(--cave-3); padding: var(--cave-9) var(--cave-6); border: 1px dashed var(--cave-line-strong); border-radius: var(--cave-r-lg); background: var(--cave-n-100); text-align: center; }
.cv-empty svg, .cv-empty img { width: 40px; height: 40px; color: var(--cave-n-400); }
.cv-empty__title { font-size: var(--cave-text-h4); font-weight: var(--cave-weight-strong); color: var(--cave-ink); }
.cv-empty__text { max-width: 52ch; font-size: var(--cave-text-small); color: var(--cave-muted); }
.cv-empty__next { font-size: var(--cave-text-small); font-weight: var(--cave-weight-strong); color: var(--cave-ink); }

/* --- Evento de calendário: a cor é do TIPO, até vencer ---------------------- */
.cv-event { display: block; width: 100%; padding: 5px 8px; border-radius: var(--cave-r-sm); background: var(--cave-neutral-bg); border: 1px solid var(--cave-neutral-line); color: var(--cave-neutral); font-size: var(--cave-text-micro); font-weight: var(--cave-weight-medium); line-height: 1.35; text-align: left; }
.cv-event--azul    { background: var(--cave-cat-azul-bg);    border-color: var(--cave-cat-azul-line);    color: var(--cave-cat-azul); }
.cv-event--roxo    { background: var(--cave-cat-roxo-bg);    border-color: var(--cave-cat-roxo-line);    color: var(--cave-cat-roxo); }
.cv-event--laranja { background: var(--cave-cat-laranja-bg); border-color: var(--cave-cat-laranja-line); color: var(--cave-cat-laranja); }
.cv-event--rosa    { background: var(--cave-cat-rosa-bg);    border-color: var(--cave-cat-rosa-line);    color: var(--cave-cat-rosa); }
.cv-event--oliva   { background: var(--cave-cat-oliva-bg);   border-color: var(--cave-cat-oliva-line);   color: var(--cave-cat-oliva); }
.cv-event--marca   { background: var(--cave-100);            border-color: var(--cave-200);              color: var(--cave-800); }
.cv-event--warn    { background: var(--cave-warn-bg);        border-color: var(--cave-warn-line);        color: var(--cave-warn); }
/* Regra 2: vencido cala o tipo. Vem depois de todas as variantes de propósito. */
.cv-event--vencido { background: var(--cave-risk-bg); border-color: var(--cave-risk-line); color: var(--cave-risk); font-weight: var(--cave-weight-strong); }
/* A célula do dia nunca engole evento: o que não couber vira "+N". */
.cv-day { display: flex; flex-direction: column; gap: 3px; min-height: 104px; padding: 6px; overflow: hidden; }
.cv-day__more { margin-top: auto; font-size: var(--cave-text-micro); font-weight: var(--cave-weight-strong); color: var(--cave-brand); }

/* --- Abas roláveis com contador -------------------------------------------- */
.cv-tabs { display: flex; gap: var(--cave-5); overflow-x: auto; border-bottom: 1px solid var(--cave-line); scrollbar-width: thin; }
.cv-tabs > a, .cv-tabs > button { text-decoration: none; display: inline-flex; align-items: center; gap: var(--cave-2); min-height: var(--cave-tap); padding-block: 10px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--cave-muted); font-size: var(--cave-text-small); font-weight: var(--cave-weight-medium); white-space: nowrap; cursor: pointer; }
.cv-tabs [aria-current="page"], .cv-tabs [aria-selected="true"] { border-bottom-color: var(--cave-brand); color: var(--cave-brand); font-weight: var(--cave-weight-strong); }
.cv-tabs__count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--cave-r-full); background: var(--cave-neutral-bg); color: var(--cave-neutral); font-size: 11px; font-weight: var(--cave-weight-strong); }
.cv-tabs__count--warn { background: var(--cave-warn-bg); color: var(--cave-warn); }

/* --- Marcar e escolher ----------------------------------------------------- */
.cv-check input { border-radius: var(--cave-r-xs); }
.cv-option { display: flex; gap: var(--cave-3); padding: var(--cave-4); border: 1px solid var(--cave-line); border-radius: var(--cave-r-lg); background: var(--cave-surface); cursor: pointer; }
.cv-option:has(input:checked) { border: 2px solid var(--cave-brand); background: var(--cave-tint); padding: 15px; }
.cv-option__title { font-weight: var(--cave-weight-strong); color: var(--cave-ink); }
.cv-option__text { font-size: var(--cave-text-small); color: var(--cave-muted); }

/* --- Campo com unidade e resposta de validação ------------------------------ */
.cv-field__unit { position: relative; display: grid; }
.cv-field__unit > :is(input, select) { padding-inline-end: 64px; }
.cv-field__unit > span { position: absolute; inset-block: 0; inset-inline-end: 14px; display: flex; align-items: center; font-size: var(--cave-text-small); font-weight: var(--cave-weight-strong); color: var(--cave-muted); pointer-events: none; }
.cv-field__ok { font-size: var(--cave-text-small); font-weight: var(--cave-weight-strong); color: var(--cave-ok); }

/* --- Barra inferior de celular --------------------------------------------- */
.cv-tabbar { position: sticky; bottom: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; height: 64px; border-top: 1px solid var(--cave-line); background: var(--cave-surface); }
.cv-tabbar > a { text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: var(--cave-text-micro); font-weight: var(--cave-weight-strong); color: var(--cave-muted); }
.cv-tabbar [aria-current="page"] { color: var(--cave-brand); }

/* --- Desligado ------------------------------------------------------------- */
/* Desligado não é invisível: a maquete pedia texto branco sobre o traço forte,
   o que dá 1,5:1 — some. Fundo neutro com texto de apoio dá 4,4:1: lê-se que o
   botão existe e que está fora de alcance. */
.cv-btn:disabled, .cv-btn[aria-disabled="true"] { background: var(--cave-disabled-bg); border-color: var(--cave-line-strong); color: var(--cave-muted); box-shadow: none; cursor: not-allowed; }
:is(input, select, textarea):disabled { background: var(--cave-n-100); color: var(--cave-disabled); cursor: not-allowed; }

/* --- Navegação escura: é a marca da área CAVE, não decoração ---------------- */
.cv-nav--dark { background: var(--cave-dark); color: var(--cave-on-dark); }
.cv-nav--dark a { text-decoration: none; display: flex; align-items: center; gap: var(--cave-3); min-height: var(--cave-tap); padding: 0 var(--cave-3); border-radius: var(--cave-r-md); color: var(--cave-on-dark-muted); font-size: var(--cave-text-small); font-weight: var(--cave-weight-medium); }
.cv-nav--dark a:hover { background: var(--cave-dark-surface); color: var(--cave-on-dark); }
.cv-nav--dark a[aria-current="page"] { background: var(--cave-dark-surface-2); color: var(--cave-bright); font-weight: var(--cave-weight-strong); }
.cv-nav--dark .cv-eyebrow { color: var(--cave-on-dark-muted); }

/* --- Cartão dentro de área escura ------------------------------------------ */
.cv-on-dark .cv-panel { padding: var(--cave-5); border: 1px solid var(--cave-dark-line); border-radius: var(--cave-r-lg); background: var(--cave-dark-surface); }
.cv-on-dark .cv-panel--raised { background: var(--cave-dark-surface-2); }

/* --- Número gigante (nota de auditoria, percentual de conformidade) --------- */
.cv-mega { font-size: var(--cave-text-mega); font-weight: var(--cave-weight-title); line-height: 1; letter-spacing: -.05em; color: var(--cave-ink); }

/* =============================================================================
   14. IMPRESSÃO E MOVIMENTO
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media print {
  .cv-family-bar, .cv-skip, .cv-topbar nav { display: none !important; }
  .cave-base { background: #fff; }
  .cv-card, .cv-note, .cv-metric { box-shadow: none; break-inside: avoid; }
}