/* Concix Design System v2.9

   O QUE A v2.9 MUDA — e o raciocinio e do Jimmy, nao meu:

   A BARRA LATERAL PASSA A USAR O TEAL DA CASA, o mesmo do botao Confirmar.
   O argumento que me convenceu: num ERP grande a barra esta em TODA tela, o
   tempo todo; o botao de confirmar aparece de vez em quando. Quem esta
   sempre presente e que deve carregar a cor da casa — e a cor que ja deu
   certo e agradou nao precisa ser reinventada para virar navegacao. O estado,
   que e ocasional, e que se ajusta.

   Isso inverte o que a v2.8 fez, e a v2.8 e que estava errada de premissa:
   ela protegia a paleta de estado como se ela fosse o centro do sistema.
   Numa tela de reservas ela quase e; num ERP inteiro, nao.

   E O CONFIRMAR ANDA UM POUCO PARA O VERDE — 14 graus de matiz. Isso resolve
   a colisao e, de quebra, conserta uma fraqueza que ja existia: success
   (169) e present (170) estavam a UM GRAU um do outro. Confirmar e presente
   eram praticamente a mesma cor, e ninguem tinha reparado. Agora sao 15
   graus, que e o suficiente para distinguir dois estados que aparecem lado a
   lado na mesma agenda.

   A NAVEGACAO NAO E ALIAS DE SUCCESS, e sim valores proprios que hoje
   coincidem com o teal original. Se um dia o confirmar mudar de novo, a
   barra nao muda junto — cor da casa e cor de estado sao decisoes
   diferentes, mesmo quando o hexadecimal nasce igual.

   Concix Design System v2.8

   O QUE A v2.8 MUDA EM RELACAO A v2.7 — pedido do Jimmy em 22/08, poucas
   horas depois. A v2.7 nunca chegou a tela nenhuma: nenhuma pagina apontou
   para ela, entao a troca nao muda nada por baixo de ninguem.

   1. UMA COR SO PARA A NAVEGACAO, nao cinco. A familia ametista de cinco
      passos saiu. Fica um verde folha unico para todos os icones da barra.
      Cinco tons pediam do leitor uma distincao que ele nao faz: quem
      identifica a secao e o icone e o nome, nao o passo da rampa.

   2. O VERDE E DE FOLHA, NAO DE TEAL — e isso importa. #3FAD98 (confirmar)
      e #69CCBB (chegou) estao os DOIS na matiz 169-170. Um "verde claro"
      naquela faixa nao colidiria com o confirmar, como se temia: colidiria
      com o PRESENTE. A navegacao foi para a matiz 122, a uns 48 graus de
      distancia — le como verde, nao le como estado de reserva.

   3. O ICONE EM REPOUSO USA A TINTA ESCURA da familia, nao a clara. Verde
      claro sobre marfim da menos de 2:1 e some. A cor clara e o
      PREENCHIMENTO do hover, com grafite por cima. Continua sendo "a cor
      sai do simbolo e toma o botao" — o que muda e qual tom faz cada papel.

   4. O AMETISTA DO BOTAO PRIMARIO FOI SUAVIZADO (menos saturado) e, no tema
      escuro, deixou de precisar da borda de muleta: #8851B8 passa 3:1 contra
      a pagina E contra o cartao sozinho.

   Concix Design System v2.7

   O QUE A v2.7 MUDA — decisao do Jimmy em 22/08, e ela vale para TODAS as telas:

   1. COR DE BASE NAO VESTE BOTAO. A doutrina dizia "o dourado e o preto
      trabalham na base, nao nas partes ativas". Faltava a consequencia: se a
      base e o que e estatico, pintar um botao com a cor da base faz ele
      PARECER estatico. O botao primario era grafite — a acao mais importante
      da tela vestida com a cor de "nao me clique". Agora ele e ametista.

   2. FAMILIA PROPRIA DE NAVEGACAO. Os icones da barra ganham cor, mas NAO a
      paleta de estado: verde e confirmar, vermelho e recusar, laranja e nao
      veio. Um icone de Relatorios em vermelho seria lido como erro pela mesma
      equipe que aprendeu isso. A navegacao ganha uma familia so dela —
      ametista virando magenta, cinco passos — que nao colide com estado
      nenhum. A barra le como uma progressao, nao como salada de frutas.

   3. A COR SAI DO SIMBOLO E TOMA O BOTAO. Em repouso o icone e colorido e o
      botao e base. No hover (ou no toque) a MESMA cor vira o preenchimento e
      o conteudo vira marfim. Mesmo hexadecimal, papel diferente.

   4. TOQUE NAO TEM HOVER. A expansao por hover passa a ser condicionada a
      @media (hover: hover). Em tablet o icone navega no primeiro toque e o
      botao "manter aberta" continua disponivel — nada de dois toques para
      tudo, e nada de atraso, que faz sistema parecer lento.

   5. CARTAO EXPANSIVEL (cx-card--expansivel), sobre <details>/<summary>
      nativo: abre no toque e no teclado, funciona antes do JS carregar.

   CONTRASTE: os 23 pares novos foram conferidos. Dois reprovaram e estao
   corrigidos onde ocorrem — o primario do tema escuro ganhou borda clara, e o
   item ativo ganhou barra indicadora, porque champanhe sobre marfim da 2,05:1
   e a WCAG 1.4.11 pede 3:1 para identificar ESTADO de componente.

   Concix Design System v2.6

   NOTA SOBRE A PROCEDENCIA: o cabecalho da v2.5 dizia "gerado por
   qa/build_tokens_css.py, nao edite". Esse gerador NAO existe no pacote — o
   arquivo sempre foi mantido a mao. A v2.6 assume isso: o JSON continua sendo
   a fonte da VERDADE dos valores, e o CSS e mantido em paralelo, com o
   qa/token_lint.py conferindo que os dois nao divergem.

   O QUE A v2.6 ACRESCENTA A v2.5 — um unico componente:
   · cx-rail — navegacao vertical flutuante. Recolhida mostra so icones;
     ao passar o mouse (ou receber foco pelo teclado) expande com os nomes,
     POR CIMA do conteudo — nada reflui atras dela. Em tela estreita vira
     barra inferior, porque balao flutuante em 375px come a tela toda.
   · --cx-rail-width, derivada de --cx-control: a largura recolhida e a
     altura de um controle mais o respiro dos dois lados. Nao e literal.

   A cor obedece a doutrina: a barra e BASE — marfim, filete e grafite. O
   champanhe marca o item ativo, que e estado, nao enfeite. Nenhuma familia
   semantica entra aqui: verde, vermelho e laranja pertencem a acao e ao
   estado da reserva, nunca a navegacao.

   Tudo o mais e identico a v2.5.

   O que a v2.5 consolidou, em relacao a v2.3:

   · paleta semantica PASTEL, derivada do tom #63C1BB e fechada em #3FAD98,
     #FB3C04, #FF9646, #69CCBB e #3C55D1;
   · cada familia em QUATRO papeis — surface, tint, ink, indicator — porque um
     valor unico nao serve ao mesmo tempo de fundo de botao e de cor de texto;
   · sete estados de reserva, nao cinco: no_show e recusada entraram;
   · botoes semanticos: o botao veste a cor do estado que ele cria;
   · brilho (--cx-gloss) e filete de marca (--cx-hairline);
   · --cx-page passou ao branco gelo da marca (#F6F4EF), nao ao cinza-azulado;
   · componentes novos: cx-select, cx-label, cx-hint, cx-field-error/success/
     warning, cx-scrim, cx-icon com pintura, cx-status--icon e --solid.

   DUAS EXCECOES DE ACESSIBILIDADE, documentadas onde ocorrem:
   · #FB3C04 opaco reprova com grafite (4,41) E com marfim (3,32). Sao os 88%
     de opacidade sobre superficie clara que o tornam legivel. A transparencia
     dele e acessibilidade, nao acabamento.
   · #3C55D1 e o inverso: so passa com texto marfim, e a 88% reprova. E o unico
     opaco e o unico com letra clara. */

/* DIFERENÇA DELIBERADA EM RELAÇÃO AO ARQUIVO DO PACOTE: o @import abaixo.
   O pacote não distribui as faces; quem as serve é o produto, de
   /painel/assets/fonts. Fora esta linha, os dois arquivos são idênticos. */
@import "./concix-fonts.css";


:root {
  color-scheme: light;

  /* marca */
  --cx-graphite: #1F2125;
  --cx-stone: #8A8D91;
  --cx-champagne: #C9B07A;
  /* v2.4.3 - filete de marca. Estrutural, nunca semantico: separa regioes,
     nao comunica estado. Espessura na escala para poder engrossar sem literal. */
  --cx-hairline: var(--cx-champagne);
  --cx-hairline-size: 3px;
  --cx-ivory: #F6F4EF;
  --cx-slate: #2A2F3A;
  --cx-mist: #DAD7D1;
  --cx-sand: #E5D4AB;
  --cx-white: #FFFFFF;

  /* semantica */

  /* v2.4 - familias semanticas em quatro papeis */
  --cx-success-surface: rgba(63,173,126,.88);
  --cx-success-tint: #E4F3EC;
  --cx-success-ink: #1A5A40;
  --cx-success-indicator: #34946B;
  --cx-success-on: var(--cx-graphite);
  --cx-error-surface: rgba(251,60,4,.88);
  --cx-error-tint: #FEECE5;
  --cx-error-ink: #8F2705;
  --cx-error-indicator: #E04A10;
  --cx-error-on: var(--cx-graphite);
  --cx-warning-surface: rgba(255,150,70,.88);
  --cx-warning-tint: #FFF0E1;
  --cx-warning-ink: #7F430E;
  --cx-warning-indicator: #E07B27;
  --cx-warning-on: var(--cx-graphite);
  --cx-present-surface: rgba(105,204,187,.88);
  --cx-present-tint: #E8F7F4;
  --cx-present-ink: #1D5D52;
  --cx-present-indicator: #4FB6A4;
  --cx-present-on: var(--cx-graphite);
  --cx-completed-surface: #3C55D1;
  --cx-completed-tint: #E8ECFB;
  --cx-completed-ink: #26368C;
  --cx-completed-indicator: #3C55D1;
  --cx-completed-on: var(--cx-ivory);
  --cx-requested-surface: rgba(143,176,220,.88);
  --cx-requested-tint: #EDF3FB;
  --cx-requested-ink: #2E4E7C;
  --cx-requested-indicator: #4A6FB3;
  --cx-requested-on: var(--cx-graphite);
  /* alias historicos: apontam para o `ink`, que era o uso majoritario */
  --cx-success: var(--cx-success-ink);
  --cx-error: var(--cx-error-ink);
  --cx-warning: var(--cx-warning-ink);
  --cx-info: var(--cx-requested-ink);
  --cx-on-surface: #1F2125;
  /* v2.4.1 - brilho. Clareia o topo da superficie; como o texto e grafite, o
     contraste so MELHORA. O pior caso continua sendo a base do botao, que e o
     valor verificado na tabela de contraste. */
  --cx-gloss: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0) 60%);

  /* superficie e texto - tema claro */
  --cx-page: #F6F4EF;   /* v2.4.3 - branco gelo da marca, nao o cinza-azulado */
  --cx-panel: #FCFCFD;
  --cx-panel-strong: #FFFFFF;
  --cx-subtle: #F0EEE8;
  --cx-text-primary: #1F2125;
  --cx-text-secondary: #5F636B;
  --cx-text-muted: #6B6F77;
  --cx-border: #DADFE5;
  --cx-border-strong: #BFC5CD;
  --cx-focus: #4A6FB3;
  --cx-text-subtle: #828689;
  --cx-focus-halo: rgba(74,111,179,.16);
  /* v2.3.2 - veu atras de modal. Existia so como literal nos produtos. */
  --cx-scrim: rgba(31,33,37,0.45);

  /* tipografia */
  --cx-font-heading: Manrope, Inter, system-ui, sans-serif;
  --cx-font-body: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --cx-font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
  --cx-text-h1-size: 48px;
  --cx-text-h1-line: 56px;
  --cx-text-h1-weight: 700;
  --cx-text-h1-tracking: -0.01em;
  --cx-text-h2-size: 32px;
  --cx-text-h2-line: 40px;
  --cx-text-h2-weight: 600;
  --cx-text-h2-tracking: 0;
  --cx-text-h3-size: 24px;
  --cx-text-h3-line: 32px;
  --cx-text-h3-weight: 500;
  --cx-text-h3-tracking: 0;
  --cx-text-body-size: 16px;
  --cx-text-body-line: 24px;
  --cx-text-body-weight: 400;
  --cx-text-body-tracking: 0;
  --cx-text-small-size: 14px;
  --cx-text-small-line: 20px;
  --cx-text-small-weight: 400;
  --cx-text-small-tracking: 0;
  --cx-text-caption-size: 12px;
  --cx-text-caption-line: 16px;
  --cx-text-caption-weight: 400;
  --cx-text-caption-tracking: 0;
  --cx-text-button-size: 14px;
  --cx-text-button-line: 20px;
  --cx-text-button-weight: 600;
  --cx-text-button-tracking: 0.005em;
  --cx-text-technical-size: 13px;
  --cx-text-technical-line: 20px;
  --cx-text-technical-weight: 400;
  --cx-text-technical-tracking: 0;

  /* espacamento */
  --cx-space-1: 4px;
  --cx-space-2: 8px;
  --cx-space-3: 12px;
  --cx-space-4: 16px;
  --cx-space-6: 24px;
  --cx-space-8: 32px;
  --cx-space-12: 48px;
  --cx-space-16: 64px;

  /* raio */
  --cx-radius-sm: 8px;
  --cx-radius-md: 12px;
  --cx-radius-lg: 16px;
  --cx-radius-xl: 24px;
  --cx-radius-pill: 999px;

  /* elevacao */
  --cx-shadow-surface: 0 2px 8px rgba(31,33,37,0.06);
  --cx-shadow-interactive: 0 8px 24px rgba(31,33,37,0.08);
  --cx-shadow-interactive-hover: 0 18px 48px rgba(31,33,37,0.10);

  /* foco */
  --cx-focus-outline: 2px solid #4A6FB3;
  --cx-focus-offset: 2px;
  --cx-focus-ring: 0 0 0 4px rgba(74,111,179,0.16);

  /* controles */
  --cx-control-compact: 36px;
  --cx-control: 44px;
  --cx-control-large: 52px;
  --cx-control-padding-inline: 24px;

  /* layout */
  --cx-content-max-width: 1440px;
  /* v2.3.2 - largura maxima de caixa de formulario (login, definir senha,
     modais). Substitui o calc(var(--cx-space-16) * 7) das excecoes do §10. */
  --cx-form-max-width: 448px;
  --cx-sidebar-width: 248px;
  /* v2.6 - largura da barra RECOLHIDA. Derivada: um controle (44px) mais o
     respiro dos dois lados. O icone mora numa caixa de --cx-control, entao
     ele cai no centro exato sem numero magico. --cx-sidebar-width continua
     sendo a largura EXPANDIDA. */
  --cx-rail-width: calc(var(--cx-control) + var(--cx-space-2) * 2);

  /* v2.7 - FAMILIA DE NAVEGACAO. Ametista virando magenta, cinco passos.
     Deliberadamente FORA da paleta de estado: nenhuma secao pode ser lida
     como confirmada, recusada ou atrasada. Em tema claro o mesmo hex serve
     de tinta do icone em repouso E de preenchimento no hover — o que muda e
     o papel, nao a cor. Todos passam 3:1 como icone sobre o painel e 4.5:1
     com marfim por cima. */
  /* v2.9 - o teal da casa. Valores PROPRIOS, nao alias de --cx-success:
     eles nascem iguais ao teal original de proposito, mas a cor da casa e a
     cor do estado sao decisoes independentes daqui em diante. */
  --cx-nav-ink:     #1A5A4F;                 /* icone em repouso — 7,8:1 sobre o painel */
  --cx-nav-surface: rgba(63,173,152,.88);    /* preenchimento do hover — grafite da 6,6:1 */
  --cx-nav-on:      var(--cx-graphite);

  /* v2.7 - ACAO PRIMARIA. Era o grafite, que e cor de base e por isso lia
     como estatico. Ametista mais fundo que o passo 1 da navegacao: mesma
     familia, mais peso. NAO e o #3C55D1 — aquele azul ja tem dono, e o
     'concluir mesa'. */
  --cx-primary: #684389;
  --cx-primary-on: var(--cx-ivory);
  --cx-primary-border: var(--cx-primary);
  --cx-header-height: 64px;
  --cx-margin-desktop: 64px;
  --cx-margin-tablet: 32px;
  --cx-margin-mobile: 16px;

  /* movimento */
  --cx-motion-fast: 160ms;
  --cx-motion-normal: 220ms;
  --cx-ease: cubic-bezier(0.2,0,0,1);
  --cx-hover-lift: -2px;
  --cx-press-translate: 1px;

  /* icones */
  --cx-icon-size: 20px;
  --cx-icon-size-compact: 16px;
  --cx-icon-size-large: 24px;
  --cx-icon-stroke: 1.75;
  --cx-icon-stroke-active: 2;

  /* v2.4 - estados de reserva: cada um aponta para a familia correspondente */
  --cx-status-requested-bg: var(--cx-requested-tint);
  --cx-status-requested-text: var(--cx-requested-ink);
  --cx-status-requested-indicator: var(--cx-requested-indicator);
  --cx-status-confirmed-bg: var(--cx-success-tint);
  --cx-status-confirmed-text: var(--cx-success-ink);
  --cx-status-confirmed-indicator: var(--cx-success-indicator);
  --cx-status-present-bg: var(--cx-present-tint);
  --cx-status-present-text: var(--cx-present-ink);
  --cx-status-present-indicator: var(--cx-present-indicator);
  --cx-status-completed-bg: var(--cx-completed-tint);
  --cx-status-completed-text: var(--cx-completed-ink);
  --cx-status-completed-indicator: var(--cx-completed-indicator);
  --cx-status-canceled-bg: var(--cx-error-tint);
  --cx-status-canceled-text: var(--cx-error-ink);
  --cx-status-canceled-indicator: var(--cx-error-indicator);
  --cx-status-no-show-bg: var(--cx-warning-tint);
  --cx-status-no-show-text: var(--cx-warning-ink);
  --cx-status-no-show-indicator: var(--cx-warning-indicator);
  --cx-status-refused-bg: var(--cx-error-tint);
  --cx-status-refused-text: var(--cx-error-ink);
  --cx-status-refused-indicator: var(--cx-error-indicator);
  /* v2.3.2 - no_show usa a familia Warning: nao veio e falha do cliente,
     nao decisao da casa. Contraste texto/fundo 7.00:1. */

  /* camada tenant (unicos overrides permitidos) */
  --tenant-accent: #C9B07A;
  --tenant-on-accent: #1F2125;
}

[data-theme="dark"] {
  color-scheme: dark;
  --cx-page: #15171A;
  --cx-panel: #1F2125;
  --cx-panel-strong: #24272C;
  --cx-subtle: #2A2F3A;
  --cx-text-primary: #F6F4EF;
  --cx-text-secondary: #C7C9CD;
  --cx-text-muted: #A4A8AE;
  --cx-border: #3D424B;

  /* v2.7 - navegacao no tema escuro: os mesmos cinco passos, claros o
     bastante para 3:1 sobre o painel escuro. Aqui o conteudo sobre o
     preenchimento e GRAFITE, nao marfim. */
  /* No escuro a tinta e o teal claro (10,9:1 sobre o painel) e o
     preenchimento e o teal cheio, com grafite por cima (5,9:1). */
  --cx-nav-ink:     #B1DDDA;
  --cx-nav-surface: #3FAD98;
  --cx-nav-on:      var(--cx-graphite);

  /* v2.7 - primario escuro. #62319B sumiria na pagina escura. Este passa
     5.06:1 com marfim e 3.23:1 contra a pagina; a borda mais clara garante
     o limite do componente tambem quando ele cai sobre um cartao. */
  --cx-primary: #8851B8;
  --cx-primary-on: var(--cx-ivory);
  /* Suavizado, e agora sem muleta: 3,35:1 contra a pagina e 3,01:1 contra o
     cartao. A borda deixou de ser necessaria e virou a propria cor. */
  --cx-primary-border: var(--cx-primary);
  --cx-border-strong: #565D68;
  --cx-focus: #86A8DF;
  --cx-text-subtle: #868B93;
  --cx-focus-halo: rgba(134,168,223,.18);
  --cx-scrim: rgba(10,11,13,0.62);
  /* No escuro a superficie pode clarear: o fundo da pagina ja e escuro,
     entao o botao precisa SUBIR de luminancia para flutuar. */
  --cx-focus-outline: 2px solid #86A8DF;
  --cx-focus-ring: 0 0 0 4px rgba(134,168,223,0.18);
  --cx-shadow-surface: 0 2px 8px rgba(0,0,0,0.22);
  --cx-shadow-interactive: 0 8px 24px rgba(0,0,0,0.30);
  --cx-shadow-interactive-hover: 0 18px 48px rgba(0,0,0,0.38);

  /* v2.4 - no escuro a superficie clareia levemente e o ink vira a propria
     familia clara; o tint vira o pastel a 18% sobre o painel. */
  --cx-success-ink: #B1DDD0;
  --cx-success-indicator: #63C1A5;
  --cx-error-ink: #E6ACA8;
  --cx-error-indicator: #DE7A72;
  --cx-warning-ink: #EDC9A1;
  --cx-warning-indicator: #E8A458;
  --cx-present-ink: #DCCFB2;
  --cx-present-indicator: #C9B07A;
  --cx-completed-ink: #C0C7CE;
  --cx-completed-indicator: #B4BEC7;
  --cx-requested-ink: #ACC3E1;
  --cx-requested-indicator: #8FB0DC;
  --cx-success-surface: #3FAD7E;
  --cx-success-tint: rgba(63,173,126,0.18);
  --cx-success-on: var(--cx-graphite);
  --cx-error-surface: #FF6A3D;
  --cx-error-tint: rgba(255,106,61,0.18);
  --cx-error-on: var(--cx-graphite);
  --cx-warning-surface: #FF9646;
  --cx-warning-tint: rgba(255,150,70,0.18);
  --cx-warning-on: var(--cx-graphite);
  --cx-present-surface: #69CCBB;
  --cx-present-tint: rgba(105,204,187,0.18);
  --cx-present-on: var(--cx-graphite);
  --cx-completed-surface: #3C55D1;
  --cx-completed-tint: rgba(60,85,209,0.18);
  --cx-completed-on: var(--cx-ivory);
  --cx-requested-surface: #8FB0DC;
  --cx-requested-tint: rgba(143,176,220,0.18);
  --cx-requested-on: var(--cx-graphite);
  /* No escuro nenhuma superficie e translucida: a cor escureceria contra
     o painel e o texto sumiria. E o #FB3C04, que no claro so passa GRACAS
     a transparencia, aqui precisa de um clareado proprio (#FF6A3D, 5,67:1
     com grafite) — opaco ele reprova com os dois textos. */
  --cx-gloss: none;
}

/* ------------------------------------------------------------------
   Camada de componentes.
   Regra: nada aqui pode conter valor literal de cor, raio, sombra,
   espacamento ou fonte. Tudo referencia var(--cx-*).
   ------------------------------------------------------------------ */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--cx-page);
  color: var(--cx-text-primary);
  font-family: var(--cx-font-body);
  font-size: var(--cx-text-body-size);
  line-height: var(--cx-text-body-line);
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: var(--cx-focus-outline);
  outline-offset: var(--cx-focus-offset);
  box-shadow: var(--cx-focus-ring);
}

/* tipografia */
.cx-h1 { font-family: var(--cx-font-heading); font-size: var(--cx-text-h1-size); line-height: var(--cx-text-h1-line); font-weight: var(--cx-text-h1-weight); letter-spacing: var(--cx-text-h1-tracking); margin: 0; }
.cx-h2 { font-family: var(--cx-font-heading); font-size: var(--cx-text-h2-size); line-height: var(--cx-text-h2-line); font-weight: var(--cx-text-h2-weight); letter-spacing: var(--cx-text-h2-tracking); margin: 0; }
.cx-h3 { font-family: var(--cx-font-heading); font-size: var(--cx-text-h3-size); line-height: var(--cx-text-h3-line); font-weight: var(--cx-text-h3-weight); letter-spacing: var(--cx-text-h3-tracking); margin: 0; }
.cx-body { font-family: var(--cx-font-body); font-size: var(--cx-text-body-size); line-height: var(--cx-text-body-line); font-weight: var(--cx-text-body-weight); }
.cx-small { font-family: var(--cx-font-body); font-size: var(--cx-text-small-size); line-height: var(--cx-text-small-line); font-weight: var(--cx-text-small-weight); }
.cx-caption { font-family: var(--cx-font-body); font-size: var(--cx-text-caption-size); line-height: var(--cx-text-caption-line); font-weight: var(--cx-text-caption-weight); }
.cx-technical { font-family: var(--cx-font-mono); font-size: var(--cx-text-technical-size); line-height: var(--cx-text-technical-line); font-weight: var(--cx-text-technical-weight); }

/* Texto que CARREGA informacao. Passa AA em toda superficie do sistema. */
.cx-text-muted { color: var(--cx-text-muted); }
/* Texto/tracos DECORATIVOS. Nunca use para informacao necessaria. */
.cx-text-subtle { color: var(--cx-text-subtle); }
.cx-text-secondary { color: var(--cx-text-secondary); }

/* superficies */
.cx-surface {
  background: var(--cx-panel);
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-lg);
  box-shadow: var(--cx-shadow-surface);
}

.cx-interactive {
  background: var(--cx-panel-strong);
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-md);
  box-shadow: var(--cx-shadow-interactive);
  transition: transform var(--cx-motion-fast) var(--cx-ease),
              box-shadow var(--cx-motion-fast) var(--cx-ease),
              border-color var(--cx-motion-fast) var(--cx-ease);
}
.cx-interactive:hover { transform: translateY(var(--cx-hover-lift)); box-shadow: var(--cx-shadow-interactive-hover); border-color: var(--cx-border-strong); }
.cx-interactive:active { transform: translateY(var(--cx-press-translate)); box-shadow: var(--cx-shadow-surface); }

/* botoes */
.cx-button {
  min-height: var(--cx-control);
  padding-inline: var(--cx-control-padding-inline);
  border-radius: var(--cx-radius-md);
  border: 1px solid transparent;
  font-family: var(--cx-font-heading);
  font-size: var(--cx-text-button-size);
  line-height: var(--cx-text-button-line);
  font-weight: var(--cx-text-button-weight);
  letter-spacing: var(--cx-text-button-tracking);
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--cx-space-2);
  cursor: pointer; text-decoration: none;
  transition: transform var(--cx-motion-fast) var(--cx-ease),
              box-shadow var(--cx-motion-fast) var(--cx-ease),
              background var(--cx-motion-fast) var(--cx-ease);
}
.cx-button:hover { transform: translateY(var(--cx-hover-lift)); box-shadow: var(--cx-shadow-interactive-hover); }
.cx-button:active { transform: translateY(var(--cx-press-translate)); }
.cx-button--compact { min-height: var(--cx-control-compact); padding-inline: var(--cx-space-4); }
.cx-button--large { min-height: var(--cx-control-large); }
.cx-button--primary { background: var(--cx-primary); color: var(--cx-primary-on); border-color: var(--cx-primary-border); box-shadow: var(--cx-shadow-interactive); }
.cx-button--accent { background: var(--cx-champagne); color: var(--cx-graphite); box-shadow: var(--cx-shadow-interactive); }
.cx-button--secondary { background: var(--cx-panel-strong); color: var(--cx-text-primary); border-color: var(--cx-border); box-shadow: var(--cx-shadow-interactive); }
.cx-button--tenant { background: var(--tenant-accent); color: var(--tenant-on-accent); box-shadow: var(--cx-shadow-interactive); }

/* v2.3.3 - SOLIDOS SEMANTICOS. Para a acao que faz a coisa acontecer. */
.cx-button--success { background: var(--cx-gloss), var(--cx-success-surface);   color: var(--cx-success-on); box-shadow: var(--cx-shadow-interactive); }
.cx-button--danger  { background: var(--cx-gloss), var(--cx-error-surface);     color: var(--cx-error-on); box-shadow: var(--cx-shadow-interactive); }
.cx-button--warning { background: var(--cx-gloss), var(--cx-warning-surface);   color: var(--cx-warning-on); box-shadow: var(--cx-shadow-interactive); }
.cx-button--present { background: var(--cx-gloss), var(--cx-present-surface);   color: var(--cx-present-on); box-shadow: var(--cx-shadow-interactive); }
.cx-button--neutral { background: var(--cx-gloss), var(--cx-completed-surface); color: var(--cx-completed-on); box-shadow: var(--cx-shadow-interactive); }

/* v2.3.3 - TONAIS SEMANTICOS. Mesma cor, menos peso: para a alternativa que
   convive com a acao principal sem disputar com ela. Reusam exatamente os
   tokens das etiquetas de estado - nenhuma cor nova entra por aqui. */
/* Versao atenuada da mesma familia, para a alternativa que convive com a acao
   principal sem disputar com ela. */
.cx-button--success-soft { background: var(--cx-success-tint);   color: var(--cx-success-ink);   border-color: var(--cx-success-indicator);   box-shadow: var(--cx-shadow-surface); }
.cx-button--danger-soft  { background: var(--cx-error-tint);     color: var(--cx-error-ink);     border-color: var(--cx-error-indicator);     box-shadow: var(--cx-shadow-surface); }
.cx-button--warning-soft { background: var(--cx-warning-tint);   color: var(--cx-warning-ink);   border-color: var(--cx-warning-indicator);   box-shadow: var(--cx-shadow-surface); }
.cx-button--neutral-soft { background: var(--cx-completed-tint); color: var(--cx-completed-ink); border-color: var(--cx-completed-indicator); box-shadow: var(--cx-shadow-surface); }
.cx-button:disabled, .cx-button[aria-disabled="true"] { opacity: .46; cursor: not-allowed; transform: none; box-shadow: none; }

/* campos */
.cx-input {
  min-height: var(--cx-control);
  padding-inline: var(--cx-space-4);
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-md);
  background: var(--cx-panel-strong);
  color: var(--cx-text-primary);
  font-family: var(--cx-font-body);
  font-size: var(--cx-text-small-size);
  line-height: var(--cx-text-small-line);
  box-shadow: var(--cx-shadow-interactive);
}
/* placeholder usa text-muted (AA), nunca text-subtle */
.cx-input::placeholder { color: var(--cx-text-muted); opacity: 1; }
.cx-input:hover { border-color: var(--cx-border-strong); }
.cx-input:focus { border-color: var(--cx-focus); }
.cx-label { display: block; font-family: var(--cx-font-body); font-size: var(--cx-text-small-size); line-height: var(--cx-text-small-line); font-weight: 600; color: var(--cx-text-secondary); margin-bottom: var(--cx-space-2); }
.cx-hint { font-family: var(--cx-font-body); font-size: var(--cx-text-caption-size); line-height: var(--cx-text-caption-line); color: var(--cx-text-muted); }
.cx-field-error { font-family: var(--cx-font-body); font-size: var(--cx-text-caption-size); line-height: var(--cx-text-caption-line); color: var(--cx-error); }
/* v2.3.2 - o token --cx-success existia desde a v2.3; faltava a classe. */
.cx-field-success { font-family: var(--cx-font-body); font-size: var(--cx-text-caption-size); line-height: var(--cx-text-caption-line); color: var(--cx-success); }
.cx-field-warning { font-family: var(--cx-font-body); font-size: var(--cx-text-caption-size); line-height: var(--cx-text-caption-line); color: var(--cx-warning); }

/* v2.3.2 - <select> nativo. Herda altura de controle, raio e foco do sistema;
   a seta fica por conta do navegador (nao ha appearance:none aqui, para nao
   perder o comportamento nativo em toque). */
.cx-select {
  min-height: var(--cx-control);
  padding-inline: var(--cx-space-3);
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-md);
  background: var(--cx-panel-strong);
  color: var(--cx-text-primary);
  font-family: var(--cx-font-body);
  font-size: var(--cx-text-small-size);
  line-height: var(--cx-text-small-line);
  box-shadow: var(--cx-shadow-interactive);
  cursor: pointer;
}
.cx-select:hover { border-color: var(--cx-border-strong); }
.cx-select:focus { border-color: var(--cx-focus); }
.cx-select--compact { min-height: var(--cx-control-compact); box-shadow: none; }

/* cartoes e navegacao */
.cx-card { background: var(--cx-panel); border: 1px solid var(--cx-border); border-radius: var(--cx-radius-lg); box-shadow: var(--cx-shadow-surface); }
.cx-card--interactive { background: var(--cx-panel-strong); box-shadow: var(--cx-shadow-interactive); transition: transform var(--cx-motion-fast) var(--cx-ease), box-shadow var(--cx-motion-fast) var(--cx-ease); }
.cx-card--interactive:hover { transform: translateY(var(--cx-hover-lift)); box-shadow: var(--cx-shadow-interactive-hover); }

.cx-nav-item { min-height: var(--cx-control); border-radius: var(--cx-radius-md); display: flex; align-items: center; gap: var(--cx-space-3); padding-inline: var(--cx-space-4); color: var(--cx-text-secondary); text-decoration: none; }
.cx-nav-item--active { background: var(--cx-panel-strong); color: var(--cx-text-primary); border: 1px solid var(--cx-border); box-shadow: var(--cx-shadow-interactive); }

/* estados de reserva - cor NUNCA sozinha: sempre com texto e icone */
.cx-status { display: inline-flex; align-items: center; gap: var(--cx-space-2); min-height: 28px; padding: var(--cx-space-1) var(--cx-space-3); border-radius: var(--cx-radius-pill); font-family: var(--cx-font-body); font-size: var(--cx-text-caption-size); line-height: var(--cx-text-caption-line); font-weight: 600; }
.cx-status::before { content: ""; width: var(--cx-space-2); height: var(--cx-space-2); border-radius: 50%; background: var(--status-indicator); flex: 0 0 auto; }
.cx-status--requested { --status-indicator: var(--cx-status-requested-indicator); background: var(--cx-status-requested-bg); color: var(--cx-status-requested-text); }
.cx-status--confirmed { --status-indicator: var(--cx-status-confirmed-indicator); background: var(--cx-status-confirmed-bg); color: var(--cx-status-confirmed-text); }
.cx-status--present   { --status-indicator: var(--cx-status-present-indicator);   background: var(--cx-status-present-bg);   color: var(--cx-status-present-text); }
.cx-status--completed { --status-indicator: var(--cx-status-completed-indicator); background: var(--cx-status-completed-bg); color: var(--cx-status-completed-text); }
.cx-status--canceled  { --status-indicator: var(--cx-status-canceled-indicator);  background: var(--cx-status-canceled-bg);  color: var(--cx-status-canceled-text); }
.cx-status--no-show   { --status-indicator: var(--cx-status-no-show-indicator);   background: var(--cx-status-no-show-bg);   color: var(--cx-status-no-show-text); }
.cx-status--refused   { --status-indicator: var(--cx-status-refused-indicator);   background: var(--cx-status-refused-bg);   color: var(--cx-status-refused-text); }
/* v2.3.2 - quando o chip traz o icone Lucide do estado, o ponto indicador sai:
   o icone JA e o indicador nao-cromatico exigido pelo RESERVATION_STATUS_SYSTEM.
   Ponto + icone + texto polui sem acrescentar informacao. */
.cx-status--icon::before { content: none; }
/* v2.4 - etiqueta solida. Por padrao a etiqueta e passiva (tint); esta variante
   existe para listas onde o estado e a informacao principal da linha. */
.cx-status--solid { color: var(--cx-on-surface); }
.cx-status--solid.cx-status--requested { background: var(--cx-requested-surface); color: var(--cx-requested-on); }
.cx-status--solid.cx-status--confirmed { background: var(--cx-success-surface); color: var(--cx-success-on); }
.cx-status--solid.cx-status--present   { background: var(--cx-present-surface); }
.cx-status--solid.cx-status--completed { background: var(--cx-completed-surface); color: var(--cx-completed-on); }
.cx-status--solid.cx-status--canceled  { background: var(--cx-error-surface); }
.cx-status--solid.cx-status--no-show   { background: var(--cx-warning-surface); }
.cx-status--solid.cx-status--refused   { background: var(--cx-error-surface); }

/* acoes flutuantes e modal */
.cx-floating-action {
  width: 72px; height: 72px; min-width: var(--cx-control); min-height: var(--cx-control);
  border-radius: 50%; border: 1px solid var(--cx-border);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cx-panel-strong); color: var(--cx-text-primary);
  box-shadow: var(--cx-shadow-interactive);
  transition: transform var(--cx-motion-fast) var(--cx-ease), box-shadow var(--cx-motion-fast) var(--cx-ease);
}
.cx-floating-action:hover { transform: translateY(var(--cx-hover-lift)); box-shadow: var(--cx-shadow-interactive-hover); }
.cx-floating-action--graphite { background: var(--cx-graphite); color: var(--cx-ivory); border-color: var(--cx-graphite); }
.cx-floating-action--champagne { background: var(--cx-champagne); color: var(--cx-graphite); border-color: var(--cx-champagne); }

.cx-hairline { height: var(--cx-hairline-size); background: var(--cx-hairline); border: 0; border-radius: var(--cx-radius-pill); }

.cx-modal { background: var(--cx-panel); border: 1px solid var(--cx-border); border-radius: var(--cx-radius-xl); box-shadow: var(--cx-shadow-interactive-hover); }
/* v2.3.2 - o veu era literal em todo produto que abria modal. */
.cx-scrim { position: fixed; inset: 0; background: var(--cx-scrim); overflow: auto; }

/* icones Lucide */
.cx-icon {
  width: var(--cx-icon-size); height: var(--cx-icon-size);
  stroke-width: var(--cx-icon-stroke); flex: 0 0 auto;
  fill: none; stroke: currentColor;
  stroke-linecap: round; stroke-linejoin: round;
}
.cx-icon--active { stroke-width: var(--cx-icon-stroke-active); }
.cx-icon--compact { width: var(--cx-icon-size-compact); height: var(--cx-icon-size-compact); }
.cx-icon--large { width: var(--cx-icon-size-large); height: var(--cx-icon-size-large); }

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

/* ============================================================
   cx-rail — NAVEGACAO VERTICAL FLUTUANTE          (novo na v2.6)
   ============================================================

   Um balao vertical fixo na lateral. Recolhido: so icones. Ao passar o
   mouse, ao receber foco pelo teclado (:focus-within) ou com a classe
   .cx-rail--fixa: expande com os nomes.

   Ele expande POR CIMA. O conteudo atras nao se mexe — quem reserva o
   espaco da barra recolhida e a margem da pagina, que nunca muda. Barra
   que empurra conteudo faz a agenda reflowar a cada passada de mouse, e
   numa tela que a equipe olha o dia inteiro isso cansa.

   COR: a barra e base. Marfim, filete e grafite. O champanhe marca o item
   ativo — mesmo tratamento da etiqueta de papel no cabecalho, para quem
   ja conhece a tela reconhecer sem aprender de novo. Nenhuma cor
   semantica entra aqui: verde e vermelho sao da acao, nao do menu.

   MARCACAO ESPERADA:
     <nav class="cx-rail" aria-label="Secoes">
       <button class="cx-rail-item ativa" aria-current="page">
         <span class="cx-rail-icone"><svg class="cx-icon">...</svg></span>
         <span class="cx-rail-rotulo">Reservas</span>
       </button>
       ...
     </nav>
*/

.cx-rail {
  position: fixed;
  left: var(--cx-space-4);
  /* Ancorada abaixo do cabecalho, nao centralizada na vertical. Centralizar
     so fica bem quando a barra e alta o bastante para parecer coluna; com
     meia duzia de itens ela vira uma ilha no meio da tela, longe do titulo
     e longe do rodape. Presa ao topo ela le como continuacao do cabecalho. */
  top: calc(var(--cx-header-height) + var(--cx-space-16));
  z-index: 40;

  display: flex;
  flex-direction: column;
  gap: var(--cx-space-1);

  width: var(--cx-rail-width);
  padding: var(--cx-space-2);

  background: var(--cx-panel);
  border: var(--cx-hairline-size) solid var(--cx-border);
  border-radius: var(--cx-radius-xl);
  box-shadow: var(--cx-shadow-interactive);

  overflow: hidden;
  transition: width var(--cx-motion-normal) var(--cx-ease),
              box-shadow var(--cx-motion-normal) var(--cx-ease);
}

/* v2.7 - a expansao por HOVER so vale onde hover existe de verdade. Em
   tela de toque o :hover "gruda" depois do tap e deixaria a barra aberta
   sem que ninguem tenha pedido. O foco continua abrindo em qualquer
   dispositivo — quem chega pelo teclado precisa ler os nomes —, e a classe
   --fixa e o caminho explicito do tablet. NAO ha atraso em lugar nenhum:
   atraso em resposta de hover faz o sistema parecer lento. */
@media (hover: hover) {
  .cx-rail:hover {
    width: var(--cx-sidebar-width);
    box-shadow: var(--cx-shadow-interactive-hover);
  }
}
.cx-rail:focus-within,
.cx-rail--fixa {
  width: var(--cx-sidebar-width);
  box-shadow: var(--cx-shadow-interactive-hover);
}

.cx-rail-item {
  display: flex;
  align-items: center;
  gap: var(--cx-space-2);

  width: 100%;
  min-height: var(--cx-control);
  padding: 0 var(--cx-space-2) 0 0;

  border: var(--cx-hairline-size) solid transparent;
  border-radius: var(--cx-radius-md);
  background: none;
  color: var(--cx-text-secondary);

  font-family: var(--cx-font-heading);
  font-size: var(--cx-text-button-size);
  line-height: var(--cx-text-button-line);
  font-weight: var(--cx-text-button-weight);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;

  transition: background var(--cx-motion-fast) var(--cx-ease),
              color var(--cx-motion-fast) var(--cx-ease);
}

/* A caixa do icone tem a largura de um controle. E o que mantem o icone no
   centro exato da barra recolhida sem depender de padding calculado. */
.cx-rail-icone {
  flex: 0 0 var(--cx-control);
  display: grid;
  place-items: center;
}

/* O rotulo nao usa display:none: ele precisa continuar no fluxo para o
   leitor de tela anunciar o nome da secao mesmo com a barra recolhida.
   Some por opacidade, e a barra recorta o excedente com overflow:hidden. */
.cx-rail-rotulo {
  opacity: 0;
  transition: opacity var(--cx-motion-fast) var(--cx-ease);
}
@media (hover: hover) {
  .cx-rail:hover .cx-rail-rotulo { opacity: 1; }
}
.cx-rail:focus-within .cx-rail-rotulo,
.cx-rail--fixa .cx-rail-rotulo {
  opacity: 1;
}

/* ---- v2.7: a cor sai do simbolo e toma o botao ----
   Em repouso o botao e base e o ICONE e colorido: e o que diz "isto aqui
   se clica" sem encher a barra de blocos coloridos. No hover a MESMA cor
   vira o preenchimento e o conteudo vira marfim (grafite no tema escuro).
   Mesmo hexadecimal, papel diferente — e por isso a transicao parece uma
   coisa so, nao uma troca de cor.

   v2.8: e UMA cor para todos os itens, nao uma por secao. Quem identifica a
   secao e o icone e o nome — cinco tons de verde pediriam do leitor uma
   distincao que ele nao faz. Consequencia boa: a marcacao encurtou, porque
   nenhum item precisa mais declarar a cor dele. */
.cx-rail-item .cx-icon { color: var(--cx-nav-ink); }

@media (hover: hover) {
  .cx-rail-item:hover {
    background: var(--cx-nav-surface);
    color: var(--cx-nav-on);
  }
  .cx-rail-item:hover .cx-icon { color: var(--cx-nav-on); }
}
/* No toque nao ha hover: o mesmo efeito aparece no instante do toque. */
.cx-rail-item:active {
  background: var(--cx-nav-surface);
  color: var(--cx-nav-on);
}
.cx-rail-item:active .cx-icon { color: var(--cx-nav-on); }

/* Estado, nao enfeite: o champanhe da base marca onde voce esta. Ele NAO
   segue a familia de navegacao de proposito — "voce esta aqui" nao e
   affordance, e a mesma logica da etiqueta de papel no cabecalho.

   A barra indicadora nao e decoracao: champanhe sobre o painel claro da
   2,05:1, e a WCAG 1.4.11 pede 3:1 para identificar ESTADO de componente.
   O grafite (15,7:1) e quem cumpre a regra; o champanhe fica pela marca. */
.cx-rail-item.ativa {
  background: var(--cx-champagne);
  color: var(--cx-graphite);
  box-shadow: inset var(--cx-space-1) 0 0 0 var(--cx-graphite);
}
.cx-rail-item.ativa .cx-icon { color: var(--cx-graphite); }
.cx-rail-item.ativa:hover,
.cx-rail-item.ativa:active {
  background: var(--cx-champagne);
  color: var(--cx-graphite);
}
.cx-rail-item.ativa:hover .cx-icon,
.cx-rail-item.ativa:active .cx-icon { color: var(--cx-graphite); }

[data-theme="dark"] .cx-rail-item.ativa {
  box-shadow: inset var(--cx-space-1) 0 0 0 var(--cx-ivory);
}

/* Separador antes do rodape da barra (fixar, sair). */
.cx-rail-separador {
  height: var(--cx-hairline-size);
  margin: var(--cx-space-2) var(--cx-space-2);
  background: var(--cx-border);
  border: 0;
  flex: 0 0 auto;
}

.cx-rail-espaco { flex: 1 1 auto; min-height: var(--cx-space-2); }

/* Item que so faz sentido em tela larga — o "manter aberta", por exemplo:
   na barra inferior nao ha o que manter aberto. Sai da barra e sai da ordem
   de tabulacao junto, senao o teclado para num botao invisivel. */
.cx-rail-item--so-desktop { display: flex; }

/* ---- Tela estreita: o balao vira barra inferior ----
   Balao flutuante lateral em 375px come um terco da largura util. Embaixo,
   com o polegar por perto, e o lugar certo. Os nomes somem: nao cabem. */
@media (max-width: 900px) {
  .cx-rail {
    left: 0; right: 0; bottom: 0;
    top: auto;
    transform: none;
    width: auto;
    flex-direction: row;
    justify-content: space-around;
    gap: 0;
    padding: var(--cx-space-2);
    border-radius: var(--cx-radius-xl) var(--cx-radius-xl) 0 0;
    border-inline: 0;
    border-bottom: 0;
  }
  .cx-rail:hover,
  .cx-rail:focus-within,
  .cx-rail--fixa { width: auto; }

  .cx-rail-item { width: auto; padding: 0; justify-content: center; }
  /* Deitada, a barra indicadora do item ativo vai para o TOPO: no rodape,
     uma marca na lateral esquerda do botao nao le como "voce esta aqui". */
  .cx-rail-item.ativa { box-shadow: inset 0 var(--cx-space-1) 0 0 var(--cx-graphite); }
  [data-theme="dark"] .cx-rail-item.ativa { box-shadow: inset 0 var(--cx-space-1) 0 0 var(--cx-ivory); }
  .cx-rail-rotulo,
  .cx-rail-separador,
  .cx-rail-espaco,
  .cx-rail-item--so-desktop { display: none; }
  .cx-rail:hover .cx-rail-rotulo,
  .cx-rail:focus-within .cx-rail-rotulo { opacity: 0; }
}

/* ============================================================
   cx-card--expansivel — CARTAO QUE ABRE          (novo na v2.7)
   ============================================================

   Para os baloes da coluna esquerda: fila de espera, avisos, ocupacao por
   ambiente. Recolhido mostra o resumo — os numeros que a pessoa le de
   relance, em pe, no meio do salao. Aberto mostra o detalhe.

   Feito sobre <details>/<summary> NATIVO, de proposito:
   · abre no toque e no teclado sem uma linha de JavaScript;
   · funciona antes do JS carregar, que e quando o maitre abre o painel;
   · o leitor de tela ja sabe anunciar "expandido/recolhido" — nao precisa
     de aria-expanded na mao, e o que se escreve na mao se esquece de
     atualizar.

   MARCACAO ESPERADA:
     <details class="cx-card cx-card--expansivel">
       <summary class="cx-card-resumo">
         <span class="cx-card-titulo">Fila</span>
         <span class="cx-card-numeros">4 grupos · 13 pessoas · 1º há 22 min</span>
       </summary>
       <div class="cx-card-detalhe"> ...lista... </div>
     </details>
*/

.cx-card--expansivel { padding: 0; overflow: hidden; }

.cx-card-resumo {
  display: flex;
  align-items: baseline;
  gap: var(--cx-space-3);
  flex-wrap: wrap;
  padding: var(--cx-space-4);
  cursor: pointer;
  list-style: none;
  min-height: var(--cx-control);
  transition: background var(--cx-motion-fast) var(--cx-ease);
}
/* O triangulo padrao do Safari/Chrome nao segue tipografia nenhuma. */
.cx-card-resumo::-webkit-details-marker { display: none; }
.cx-card-resumo::marker { content: ''; }

@media (hover: hover) {
  .cx-card-resumo:hover { background: var(--cx-subtle); }
}

.cx-card-titulo {
  font-family: var(--cx-font-heading);
  font-size: var(--cx-text-small-size);
  line-height: var(--cx-text-small-line);
  font-weight: var(--cx-text-button-weight);
  color: var(--cx-text-primary);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Os numeros do resumo sao o conteudo mais lido do cartao — nao sao
   legenda. Corpo, nao caption. */
.cx-card-numeros {
  font-family: var(--cx-font-body);
  font-size: var(--cx-text-body-size);
  line-height: var(--cx-text-body-line);
  color: var(--cx-text-primary);
}

/* A seta e o unico sinal de que o cartao abre: ela precisa existir, e
   precisa girar, senao ninguem descobre que ha detalhe embaixo. */
.cx-card-resumo::after {
  content: '';
  margin-left: auto;
  width: var(--cx-space-2);
  height: var(--cx-space-2);
  border-right: 2px solid var(--cx-text-secondary);
  border-bottom: 2px solid var(--cx-text-secondary);
  transform: rotate(45deg);
  transition: transform var(--cx-motion-fast) var(--cx-ease);
}
.cx-card--expansivel[open] .cx-card-resumo::after { transform: rotate(-135deg); }

.cx-card-detalhe {
  padding: 0 var(--cx-space-4) var(--cx-space-4);
  border-top: var(--cx-hairline-size) solid var(--cx-border);
  padding-top: var(--cx-space-4);
}

/* Cartao de coluna lateral tem altura util pequena. O detalhe rola por
   dentro em vez de empurrar o resto da coluna para fora da tela. */
.cx-card--expansivel .cx-card-detalhe { max-height: calc(var(--cx-space-16) * 5); overflow-y: auto; }

/* Variante estreita — para os baloes que ficam lado a lado numa faixa, tipo
   ocupacao por ambiente. Titulo e numeros empilham SEMPRE, em vez de caber
   numa linha quando o cartao e largo e quebrar quando e estreito: cartao
   irmao que quebra diferente do vizinho le como defeito, nao como layout. */
.cx-card--compacto .cx-card-resumo {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--cx-space-1);
  position: relative;
  padding-right: var(--cx-space-8);
}
.cx-card--compacto .cx-card-resumo::after {
  position: absolute;
  right: var(--cx-space-4);
  top: 50%;
  margin: 0;
  transform: translateY(-70%) rotate(45deg);
}
.cx-card--compacto[open] .cx-card-resumo::after { transform: translateY(-30%) rotate(-135deg); }
/* Os numeros sao o que se le de relance nestes: sobem de corpo. */
.cx-card--compacto .cx-card-numeros {
  font-family: var(--cx-font-heading);
  font-size: var(--cx-text-h3-size);
  line-height: var(--cx-text-h3-line);
  font-weight: var(--cx-text-h3-weight);
}