/* ============================================================================
   AUREUM DESIGN SYSTEM · tokens.css
   Programa Empresário Estratégico · Itallo Pontes
   ----------------------------------------------------------------------------
   Fundação de variáveis. TODO app importa este arquivo PRIMEIRO:
     <link rel="stylesheet" href="/aureum-ds/tokens.css">
   Estética: Tech Noir / Aureum Command — "The Void & The Light".
   Prefixo: --au-*  (nunca colide com CSS legado dos apps)
   ============================================================================ */

/* ---------------------------------------------------------------------------
   FONTES
   Stack robusto de sistema como base (offline-friendly — os apps rodam
   estáticos no Nginx e precisam funcionar sem rede externa).
   PARA PLUGAR AS FONTES REAIS (Google Fonts), descomente o @import abaixo
   OU sirva os .woff2 localmente e declare @font-face aqui:

   @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Geist:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

   Se as fontes não carregarem, os fallbacks abaixo mantêm a hierarquia.
--------------------------------------------------------------------------- */

:root {

  /* =========================================================================
     1 · COR — Superfícies ("The Void")
     ========================================================================= */
  --au-bg:               #0A0A0A;   /* fundo-mãe de todo app                  */
  --au-surface-lowest:   #0e0e0e;   /* faixas de página / wells               */
  --au-surface:          #141414;   /* superfície padrão (cards, sidebar)     */
  --au-surface-high:     #1a1a1a;   /* cards em destaque, hover de linha      */
  --au-surface-higher:   #201f1f;   /* inputs, sub-cards, kanban card         */
  --au-surface-highest:  #2a2a2a;   /* hover de superfície, thumb, divisores  */

  /* Bordas */
  --au-border:           rgba(255, 255, 255, 0.08);
  --au-border-strong:    rgba(255, 255, 255, 0.14);
  --au-border-gold:      rgba(247, 189, 72, 0.18);  /* borda-assinatura glass */
  --au-border-gold-hi:   rgba(247, 189, 72, 0.40);

  /* =========================================================================
     2 · COR — Marca ("The Light")
     ========================================================================= */
  --au-gold:             #f7bd48;   /* ouro-marca (secondary do Stitch)       */
  --au-gold-alt:         #D4AF37;   /* ouro metálico alternativo              */
  --au-gold-bright:      #ffd700;   /* pico de luz (glow, texto em destaque)  */
  --au-gold-dim:         #e9c400;   /* ouro ativo / scroll hover              */
  --au-on-gold:          #1a1300;   /* texto sobre fundo ouro                 */
  --au-gold-a04:         rgba(247, 189, 72, 0.04);
  --au-gold-a08:         rgba(247, 189, 72, 0.08);
  --au-gold-a12:         rgba(247, 189, 72, 0.12);
  --au-gold-a20:         rgba(247, 189, 72, 0.20);

  /* CTA / ação positiva */
  --au-cta:              #00E676;
  --au-cta-hover:        #33eb91;
  --au-on-cta:           #001a0d;
  --au-cta-a12:          rgba(0, 230, 118, 0.12);
  --au-cta-a30:          rgba(0, 230, 118, 0.30);

  /* =========================================================================
     3 · COR — Texto
     ========================================================================= */
  --au-text:             #FFFFFF;   /* títulos, números-chave                 */
  --au-text-body:        #e5e2e1;   /* corpo padrão                           */
  --au-text-dim:         #A0A0A0;   /* secundário                             */
  --au-text-mute:        #6B6B6B;   /* terciário, placeholders, micro-copy    */
  --au-text-gold-soft:   #d0c6ab;   /* variante quente (labels sobre escuro)  */

  /* =========================================================================
     4 · COR — Status (Farol e feedback)
     ========================================================================= */
  --au-success:          #00E676;
  --au-success-soft:     #4ade80;
  --au-success-a12:      rgba(0, 230, 118, 0.12);
  --au-warning:          #fbbf24;
  --au-warning-a12:      rgba(251, 191, 36, 0.12);
  --au-danger:           #ef4444;
  --au-danger-soft:      #ff6b6b;
  --au-danger-a12:       rgba(239, 68, 68, 0.12);
  --au-info:             #60a5fa;
  --au-info-a12:         rgba(96, 165, 250, 0.12);

  /* Série de dados p/ gráficos (ouro sempre 1º = foco) */
  --au-chart-1:          var(--au-gold);
  --au-chart-2:          #60a5fa;
  --au-chart-3:          #34d399;
  --au-chart-4:          #a78bfa;
  --au-chart-5:          #f472b6;
  --au-chart-6:          #22d3ee;
  --au-chart-muted:      #4a4a4a;  /* série de fundo — o ouro fica em 1º plano */

  /* =========================================================================
     5 · TIPOGRAFIA
     ========================================================================= */
  /* Famílias — comente/pluge conforme nota de fontes no topo */
  --au-font-display: 'Space Grotesk', 'Segoe UI', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --au-font-body:    'Geist', 'Inter', -apple-system, 'Segoe UI', system-ui, Roboto, sans-serif;
  --au-font-mono:    'JetBrains Mono', 'Cascadia Code', Consolas, 'SF Mono', Menlo, monospace;

  /* Escala de tamanho (rem sobre base 16px) */
  --au-text-2xs:  0.6875rem;  /* 11px — micro-labels mono                     */
  --au-text-xs:   0.75rem;    /* 12px — labels, breadcrumb                    */
  --au-text-sm:   0.8125rem;  /* 13px — tabelas, nav                          */
  --au-text-md:   0.875rem;   /* 14px — corpo compacto (apps)                 */
  --au-text-base: 1rem;       /* 16px — corpo padrão                          */
  --au-text-lg:   1.125rem;   /* 18px — lead                                  */
  --au-text-xl:   1.25rem;    /* 20px — título de card                        */
  --au-text-2xl:  1.5rem;     /* 24px — headline-lg mobile                    */
  --au-text-3xl:  2rem;       /* 32px — headline-lg                           */
  --au-text-4xl:  2.5rem;     /* 40px — número-herói                          */
  --au-text-5xl:  3rem;       /* 48px — headline-xl                           */

  /* Pesos */
  --au-weight-regular:  400;
  --au-weight-medium:   500;
  --au-weight-semibold: 600;
  --au-weight-bold:     700;
  --au-weight-black:    800;

  /* Line-heights */
  --au-leading-none:   1.05;  /* números grandes / display                    */
  --au-leading-tight:  1.2;   /* headlines                                    */
  --au-leading-snug:   1.4;   /* subtítulos                                   */
  --au-leading-normal: 1.55;  /* corpo                                        */
  --au-leading-loose:  1.7;   /* texto longo de leitura                       */

  /* Tracking */
  --au-tracking-tight:  -0.02em;  /* display "engineered"                     */
  --au-tracking-normal: 0;
  --au-tracking-wide:   0.05em;   /* labels mono                              */
  --au-tracking-caps:   0.14em;   /* eyebrows / micro-copy MAIÚSCULA          */

  /* =========================================================================
     6 · ESPAÇAMENTO — grade de 4px
     ========================================================================= */
  --au-space-0:  0;
  --au-space-1:  0.25rem;   /*  4px */
  --au-space-2:  0.5rem;    /*  8px — stack-sm (itens relacionados)           */
  --au-space-3:  0.75rem;   /* 12px */
  --au-space-4:  1rem;      /* 16px — stack-md / column-gap                   */
  --au-space-5:  1.25rem;   /* 20px */
  --au-space-6:  1.5rem;    /* 24px — gutter                                  */
  --au-space-8:  2rem;      /* 32px — stack-lg (quebra de seção)              */
  --au-space-10: 2.5rem;    /* 40px */
  --au-space-12: 3rem;      /* 48px */
  --au-space-16: 4rem;      /* 64px */
  --au-space-20: 5rem;      /* 80px — respiro entre seções de landing         */

  /* Larguras de referência */
  --au-container:      1440px;  /* grid máximo desktop                        */
  --au-content:        1100px;  /* área de conteúdo de app                    */
  --au-prose:          46rem;   /* texto longo                                */
  --au-sidebar-w:      240px;
  --au-sidebar-w-min:  64px;    /* sidebar colapsada (só ícones)              */
  --au-topbar-h:       56px;

  /* =========================================================================
     7 · RAIOS
     ========================================================================= */
  --au-radius-xs:   4px;    /* chips mono, mini-tags                          */
  --au-radius-sm:   7px;    /* botões pequenos, inputs compactos              */
  --au-radius-md:   10px;   /* inputs, botões                                 */
  --au-radius-lg:   14px;   /* cards                                          */
  --au-radius-xl:   20px;   /* painéis-herói, modais                          */
  --au-radius-full: 999px;  /* pills, avatars, farol                          */

  /* =========================================================================
     8 · ELEVAÇÃO — sombra + luz (glow no lugar de sombra p/ interativos)
     ========================================================================= */
  --au-shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.35);
  --au-shadow-md:    0 8px 24px rgba(0, 0, 0, 0.40);
  --au-shadow-lg:    0 14px 40px rgba(0, 0, 0, 0.50);
  --au-inner-light:  inset 0 1px 0 0 rgba(255, 255, 255, 0.05); /* fio de luz no topo */
  --au-glow-gold:    0 0 20px rgba(233, 196, 0, 0.15);
  --au-glow-gold-hi: 0 0 28px rgba(233, 196, 0, 0.30);
  --au-glow-cta:     0 0 25px rgba(0, 230, 118, 0.30);
  --au-bloom-gold:   drop-shadow(0 0 8px rgba(233, 196, 0, 0.40)); /* p/ filter */

  /* Glass */
  --au-glass-bg:     rgba(26, 26, 26, 0.60);
  --au-glass-blur:   20px;
  --au-overlay-bg:   rgba(5, 5, 5, 0.82);
  --au-overlay-blur: 6px;

  /* =========================================================================
     9 · Z-INDEX
     ========================================================================= */
  --au-z-base:     0;
  --au-z-raised:   10;    /* dropdowns, sticky headers de tabela              */
  --au-z-sidebar:  100;
  --au-z-topbar:   110;
  --au-z-drawer:   900;
  --au-z-modal:    1000;
  --au-z-toast:    1100;
  --au-z-tooltip:  1200;

  /* =========================================================================
     10 · MOVIMENTO — sóbrio, premium
     ========================================================================= */
  --au-dur-fast:   120ms;   /* hover, foco                                    */
  --au-dur-base:   200ms;   /* transições padrão                              */
  --au-dur-slow:   320ms;   /* modais, drawers                                */
  --au-dur-lazy:   600ms;   /* barras de progresso, gauges                    */
  --au-ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --au-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);   /* entradas suaves       */
  --au-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); /* toque de vida (leve) */

  color-scheme: dark;
}

/* ---------------------------------------------------------------------------
   HOOK DE TEMA CLARO (opt-in) — os apps são dark por padrão.
   Pra experimentar: <html data-au-theme="light">. Cobertura básica; o dark
   é o tema canônico da marca.
--------------------------------------------------------------------------- */
:root[data-au-theme="light"] {
  --au-bg:              #f5f3ef;
  --au-surface-lowest:  #efede8;
  --au-surface:         #ffffff;
  --au-surface-high:    #faf8f4;
  --au-surface-higher:  #f1efe9;
  --au-surface-highest: #e6e3db;
  --au-border:          rgba(0, 0, 0, 0.10);
  --au-border-strong:   rgba(0, 0, 0, 0.18);
  --au-text:            #171410;
  --au-text-body:       #2b2721;
  --au-text-dim:        #6b6558;
  --au-text-mute:       #98917f;
  --au-gold:            #b8860b;      /* ouro escurece pra manter contraste   */
  --au-gold-dim:        #9a7209;
  --au-on-gold:         #ffffff;
  --au-glass-bg:        rgba(255, 255, 255, 0.65);
  --au-overlay-bg:      rgba(30, 28, 24, 0.45);
  --au-inner-light:     inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
  color-scheme: light;
}

/* ---------------------------------------------------------------------------
   BASE MÍNIMA — reset leve + defaults tipográficos.
   (Só o essencial: apps legados já têm CSS próprio; nada aqui é agressivo.)
--------------------------------------------------------------------------- */
.au-app, .au-app * , .au-app *::before, .au-app *::after { box-sizing: border-box; }

.au-app {
  background: var(--au-bg);
  color: var(--au-text-body);
  font-family: var(--au-font-body);
  font-size: var(--au-text-md);
  line-height: var(--au-leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* padrão dos apps em produção — conteúdo largo rola DENTRO dos wraps */
}

/* Tipos utilitários */
.au-display { font-family: var(--au-font-display); font-weight: var(--au-weight-bold); letter-spacing: var(--au-tracking-tight); color: var(--au-text); line-height: var(--au-leading-tight); }
.au-mono    { font-family: var(--au-font-mono); font-variant-numeric: tabular-nums; }
.au-label   { font-family: var(--au-font-mono); font-size: var(--au-text-2xs); font-weight: var(--au-weight-bold); letter-spacing: var(--au-tracking-caps); text-transform: uppercase; color: var(--au-text-mute); }
.au-label--gold { color: var(--au-gold); }
.au-num     { font-family: var(--au-font-mono); font-variant-numeric: tabular-nums; font-weight: var(--au-weight-bold); letter-spacing: -0.01em; color: var(--au-text); }

/* Cores utilitárias de texto */
.au-text-gold   { color: var(--au-gold); }
.au-text-cta    { color: var(--au-cta); }
.au-text-dim    { color: var(--au-text-dim); }
.au-text-mute   { color: var(--au-text-mute); }
.au-text-danger { color: var(--au-danger-soft); }

/* Foco visível — acessibilidade AA em TODO elemento interativo */
.au-app :focus-visible {
  outline: 2px solid var(--au-gold);
  outline-offset: 2px;
  border-radius: var(--au-radius-xs);
}

/* Seleção de texto na marca */
.au-app ::selection { background: var(--au-gold); color: var(--au-on-gold); }

/* Scrollbar-assinatura */
.au-app ::-webkit-scrollbar { width: 6px; height: 6px; }
.au-app ::-webkit-scrollbar-track { background: transparent; }
.au-app ::-webkit-scrollbar-thumb { background: var(--au-surface-highest); border-radius: 10px; }
.au-app ::-webkit-scrollbar-thumb:hover { background: var(--au-gold-dim); }

/* Movimento reduzido — respeita o usuário */
@media (prefers-reduced-motion: reduce) {
  .au-app *, .au-app *::before, .au-app *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* ============================================================================
   AUREUM DESIGN SYSTEM · components.css
   Biblioteca de componentes · requer tokens.css importado ANTES.
   Prefixo au- em todas as classes.
   ----------------------------------------------------------------------------
   ÍNDICE
   01 · Botões            06 · Forms              11 · Badges & Chips
   02 · Cards & Glass     07 · Modais & Drawers   12 · Avatars
   03 · Tabelas           08 · Toasts & Alerts    13 · Tooltips
   04 · Kanban            09 · Tabs & Breadcrumb  14 · Progress & Rings
   05 · Farol             10 · Dropdown/Menu      15 · Empty & Skeleton
   ============================================================================ */


/* ===========================================================================
   01 · BOTÕES
   Primário = ouro sólido (luz). CTA = verde (ação de dinheiro).
   Secundário = outline ouro. Ghost = silencioso. Perigo = crimson.
   =========================================================================== */
.au-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--au-space-2);
  font-family: var(--au-font-body);
  font-size: var(--au-text-md);
  font-weight: var(--au-weight-bold);
  line-height: 1;
  padding: 0 var(--au-space-5);
  height: 42px;
  border: 1px solid transparent;
  border-radius: var(--au-radius-md);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--au-dur-fast) var(--au-ease),
              color var(--au-dur-fast) var(--au-ease),
              border-color var(--au-dur-fast) var(--au-ease),
              box-shadow var(--au-dur-base) var(--au-ease),
              transform var(--au-dur-fast) var(--au-ease);
}
.au-btn:active { transform: translateY(1px) scale(0.99); }

/* Primário — ouro é fonte de luz */
.au-btn--primary { background: var(--au-gold); color: var(--au-on-gold); }
.au-btn--primary:hover { background: var(--au-gold-bright); box-shadow: var(--au-glow-gold-hi); }

/* CTA — verde de ação positiva (comprar, salvar, confirmar) */
.au-btn--cta { background: var(--au-cta); color: #000; font-weight: var(--au-weight-black); box-shadow: var(--au-glow-cta); }
.au-btn--cta:hover { background: var(--au-cta-hover); transform: translateY(-1px); }
.au-btn--cta:active { transform: translateY(1px) scale(0.99); }

/* Secundário — outline ouro */
.au-btn--secondary { background: transparent; color: var(--au-gold); border-color: var(--au-border-gold-hi); }
.au-btn--secondary:hover { background: var(--au-gold-a08); border-color: var(--au-gold); box-shadow: var(--au-glow-gold); }

/* Ghost — silencioso, ações terciárias */
.au-btn--ghost { background: transparent; color: var(--au-text-dim); }
.au-btn--ghost:hover { background: var(--au-surface-highest); color: var(--au-text); }

/* Perigo */
.au-btn--danger { background: transparent; color: var(--au-danger-soft); border-color: rgba(239,68,68,.4); }
.au-btn--danger:hover { background: var(--au-danger-a12); border-color: var(--au-danger); }
.au-btn--danger-solid { background: var(--au-danger); color: #fff; }
.au-btn--danger-solid:hover { background: #f87171; }

/* Botão de ícone (quadrado) */
.au-btn--icon { width: 42px; padding: 0; }
.au-btn--icon.au-btn--sm { width: 32px; }
.au-btn--icon.au-btn--lg { width: 52px; }

/* Tamanhos */
.au-btn--sm { height: 32px; padding: 0 var(--au-space-3); font-size: var(--au-text-sm); border-radius: var(--au-radius-sm); }
.au-btn--lg { height: 52px; padding: 0 var(--au-space-8); font-size: var(--au-text-base); border-radius: var(--au-radius-lg); }
.au-btn--block { width: 100%; }

/* Desabilitado */
.au-btn:disabled, .au-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
  pointer-events: none;
}

/* Loading — spinner embutido: <button class="au-btn au-btn--primary au-is-loading"> */
.au-btn.au-is-loading { color: transparent !important; pointer-events: none; position: relative; }
.au-btn.au-is-loading::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-color: rgba(0,0,0,.85) transparent rgba(0,0,0,.85) rgba(0,0,0,.85);
  border-radius: 50%;
  animation: au-spin 700ms linear infinite;
}
.au-btn--secondary.au-is-loading::after,
.au-btn--ghost.au-is-loading::after,
.au-btn--danger.au-is-loading::after { border-color: var(--au-gold) transparent var(--au-gold) var(--au-gold); }
@keyframes au-spin { to { transform: rotate(360deg); } }

/* Grupo de botões colados */
.au-btn-group { display: inline-flex; }
.au-btn-group .au-btn { border-radius: 0; }
.au-btn-group .au-btn:first-child { border-radius: var(--au-radius-md) 0 0 var(--au-radius-md); }
.au-btn-group .au-btn:last-child { border-radius: 0 var(--au-radius-md) var(--au-radius-md) 0; }
.au-btn-group .au-btn + .au-btn { margin-left: 1px; }


/* ===========================================================================
   02 · CARDS, PAINÉIS & GLASS
   Profundidade por camada tonal + fio de luz no topo — não por sombra pesada.
   =========================================================================== */
.au-card {
  background: var(--au-surface-high);
  border: 1px solid var(--au-border);
  border-radius: var(--au-radius-lg);
  box-shadow: var(--au-inner-light);
  padding: var(--au-space-6);
}

/* Glass-module — a superfície-assinatura Aureum */
.au-glass {
  background: var(--au-glass-bg);
  -webkit-backdrop-filter: blur(var(--au-glass-blur));
  backdrop-filter: blur(var(--au-glass-blur));
  border: 1px solid var(--au-border-gold);
  border-top-color: var(--au-gold-a20);
  border-radius: var(--au-radius-lg);
  padding: var(--au-space-6);
}

/* Modificadores compartilhados por card e glass */
.au-card--interactive, .au-glass--interactive {
  cursor: pointer;
  transition: border-color var(--au-dur-base) var(--au-ease),
              box-shadow var(--au-dur-base) var(--au-ease),
              transform var(--au-dur-base) var(--au-ease);
}
.au-card--interactive:hover, .au-glass--interactive:hover {
  border-color: var(--au-border-gold-hi);
  box-shadow: var(--au-glow-gold);
  transform: translateY(-2px);
}
.au-card--critical, .au-glass--critical { border-left: 4px solid var(--au-gold); }
.au-card--glow, .au-glass--glow { box-shadow: var(--au-glow-gold); }
.au-card--flat { padding: 0; overflow: hidden; }

/* Cabeçalho/rodapé de card */
.au-card__header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--au-space-3);
  margin: calc(-1 * var(--au-space-6)) calc(-1 * var(--au-space-6)) var(--au-space-5);
  padding: var(--au-space-4) var(--au-space-6);
  border-bottom: 1px solid var(--au-border);
}
.au-card__title { font-family: var(--au-font-display); font-size: var(--au-text-base); font-weight: var(--au-weight-bold); color: var(--au-text); letter-spacing: var(--au-tracking-tight); }
.au-card__footer {
  margin: var(--au-space-5) calc(-1 * var(--au-space-6)) calc(-1 * var(--au-space-6));
  padding: var(--au-space-4) var(--au-space-6);
  border-top: 1px solid var(--au-border);
  display: flex; justify-content: flex-end; gap: var(--au-space-2);
}

/* Stat card — número-herói de dashboard */
.au-stat { display: flex; flex-direction: column; gap: var(--au-space-1); }
.au-stat__label { font-family: var(--au-font-mono); font-size: var(--au-text-2xs); letter-spacing: var(--au-tracking-caps); text-transform: uppercase; color: var(--au-text-mute); font-weight: var(--au-weight-bold); }
.au-stat__value { font-family: var(--au-font-mono); font-size: var(--au-text-3xl); font-weight: var(--au-weight-bold); color: var(--au-text); line-height: var(--au-leading-none); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.au-stat__value--gold { color: var(--au-gold); text-shadow: 0 0 14px rgba(212,175,55,.35); }
.au-stat__delta { font-family: var(--au-font-mono); font-size: var(--au-text-xs); font-weight: var(--au-weight-bold); display: inline-flex; align-items: center; gap: 3px; }
.au-stat__delta--up { color: var(--au-success-soft); }
.au-stat__delta--down { color: var(--au-danger-soft); }
.au-stat__delta--flat { color: var(--au-text-mute); }

/* Divider */
.au-divider { border: none; border-top: 1px solid var(--au-border); margin: var(--au-space-5) 0; }
.au-divider--gold { border-top-color: var(--au-border-gold); }


/* ===========================================================================
   03 · TABELAS
   Zebra sutil, header sticky em mono, hover dourado. Envolva SEMPRE em
   .au-table-wrap para scroll horizontal correto no mobile.
   =========================================================================== */
.au-table-wrap {
  overflow: auto;
  border: 1px solid var(--au-border);
  border-radius: var(--au-radius-lg);
  background: var(--au-surface);
  max-height: 480px; /* header sticky funciona dentro do wrap */
}
.au-table { width: 100%; border-collapse: collapse; font-size: var(--au-text-sm); }
.au-table th {
  position: sticky; top: 0; z-index: var(--au-z-raised);
  background: var(--au-surface-higher);
  font-family: var(--au-font-mono);
  font-size: var(--au-text-2xs);
  font-weight: var(--au-weight-bold);
  letter-spacing: var(--au-tracking-caps);
  text-transform: uppercase;
  color: var(--au-text-mute);
  text-align: left;
  padding: var(--au-space-3) var(--au-space-4);
  border-bottom: 1px solid var(--au-border-strong);
  white-space: nowrap;
}
.au-table td {
  padding: var(--au-space-3) var(--au-space-4);
  border-bottom: 1px solid var(--au-border);
  color: var(--au-text-body);
  vertical-align: middle;
}
.au-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.018); } /* zebra sutil */
.au-table tbody tr { transition: background var(--au-dur-fast) var(--au-ease); }
.au-table tbody tr:hover { background: var(--au-gold-a04); }
.au-table tbody tr:last-child td { border-bottom: none; }
.au-table .au-td-num { font-family: var(--au-font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.au-table th.au-td-num { text-align: right; }
.au-table tr.au-tr-highlight { background: var(--au-gold-a08) !important; }
.au-table tr.au-tr-highlight td { color: var(--au-gold); font-weight: var(--au-weight-semibold); }
.au-table--compact th, .au-table--compact td { padding: var(--au-space-2) var(--au-space-3); }


/* ===========================================================================
   04 · KANBAN
   Colunas roláveis + cards "arrastáveis" (estilo pronto; o drag em si é do
   app — classes au-is-dragging / au-is-over já estilizadas).
   =========================================================================== */
.au-kanban {
  display: flex;
  gap: var(--au-space-4);
  overflow-x: auto;
  padding-bottom: var(--au-space-3);
  align-items: flex-start;
}
.au-kanban__col {
  flex: 0 0 280px;
  max-width: 280px;
  background: var(--au-surface);
  border: 1px solid var(--au-border);
  border-radius: var(--au-radius-lg);
  display: flex; flex-direction: column;
  max-height: 70vh;
}
.au-kanban__head {
  display: flex; align-items: center; gap: var(--au-space-2);
  padding: var(--au-space-3) var(--au-space-4);
  border-bottom: 1px solid var(--au-border);
  font-family: var(--au-font-mono);
  font-size: var(--au-text-2xs);
  font-weight: var(--au-weight-bold);
  letter-spacing: var(--au-tracking-caps);
  text-transform: uppercase;
  color: var(--au-text-dim);
  position: sticky; top: 0;
}
.au-kanban__count {
  margin-left: auto;
  background: var(--au-surface-highest);
  color: var(--au-text-dim);
  font-size: var(--au-text-2xs);
  border-radius: var(--au-radius-full);
  padding: 1px 8px;
}
/* pip de status da coluna */
.au-kanban__pip { width: 8px; height: 8px; border-radius: 50%; background: var(--au-text-mute); flex-shrink: 0; }
.au-kanban__col--todo  .au-kanban__pip { background: var(--au-text-mute); }
.au-kanban__col--doing .au-kanban__pip { background: var(--au-gold); box-shadow: 0 0 8px var(--au-gold-a20); }
.au-kanban__col--done  .au-kanban__pip { background: var(--au-success); }

.au-kanban__body {
  padding: var(--au-space-3);
  display: flex; flex-direction: column; gap: var(--au-space-2);
  overflow-y: auto;
  min-height: 60px;
}
.au-kanban__card {
  background: var(--au-surface-higher);
  border: 1px solid var(--au-border);
  border-radius: var(--au-radius-md);
  padding: var(--au-space-3) var(--au-space-4);
  cursor: grab;
  box-shadow: var(--au-inner-light);
  transition: border-color var(--au-dur-fast) var(--au-ease),
              box-shadow var(--au-dur-base) var(--au-ease),
              transform var(--au-dur-fast) var(--au-ease);
}
.au-kanban__card:hover { border-color: var(--au-border-gold-hi); box-shadow: var(--au-glow-gold); transform: translateY(-1px); }
.au-kanban__card:active { cursor: grabbing; }
.au-kanban__card.au-is-dragging { opacity: 0.45; transform: rotate(2deg) scale(1.02); box-shadow: var(--au-shadow-lg); }
.au-kanban__body.au-is-over { outline: 2px dashed var(--au-border-gold-hi); outline-offset: -4px; border-radius: var(--au-radius-md); background: var(--au-gold-a04); }
.au-kanban__card-title { font-size: var(--au-text-sm); font-weight: var(--au-weight-semibold); color: var(--au-text); margin-bottom: var(--au-space-1); line-height: var(--au-leading-snug); }
.au-kanban__card-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--au-space-2); margin-top: var(--au-space-2); font-size: var(--au-text-2xs); color: var(--au-text-mute); font-family: var(--au-font-mono); }


/* ===========================================================================
   05 · FAROL — o semáforo-assinatura do método
   Verde = bateu · Amarelo = atenção · Vermelho = não bateu · Cinza = sem dado
   Formas: dot (célula de tabela), badge (com texto), hero (grande de painel).
   =========================================================================== */
.au-farol-dot {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--au-text-mute);
  vertical-align: middle;
}
.au-farol-dot--sm { width: 8px; height: 8px; }
.au-farol-dot--lg { width: 16px; height: 16px; }

.au-farol-badge {
  display: inline-flex; align-items: center; gap: var(--au-space-2);
  font-family: var(--au-font-mono);
  font-size: var(--au-text-2xs);
  font-weight: var(--au-weight-bold);
  letter-spacing: var(--au-tracking-wide);
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--au-radius-full);
  border: 1px solid var(--au-border);
  background: var(--au-surface-higher);
  color: var(--au-text-dim);
}
.au-farol-badge .au-farol-dot { width: 8px; height: 8px; }

/* Versão grande — herói de painel */
.au-farol-hero {
  display: inline-flex; flex-direction: column; align-items: center; gap: var(--au-space-2);
  text-align: center;
}
.au-farol-hero__light {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--au-surface-highest);
  border: 1px solid var(--au-border-strong);
  position: relative;
}
.au-farol-hero__light::after { /* reflexo de vidro */
  content: ""; position: absolute; inset: 12% 18% 55% 18%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.35), transparent);
}
.au-farol-hero__label { font-family: var(--au-font-mono); font-size: var(--au-text-2xs); letter-spacing: var(--au-tracking-caps); text-transform: uppercase; color: var(--au-text-mute); font-weight: var(--au-weight-bold); }

/* Estados — aplicáveis a dot, badge e hero (no hero, na __light) */
.au-farol--verde    { background: var(--au-success); box-shadow: 0 0 12px var(--au-cta-a30); }
.au-farol--amarelo  { background: var(--au-warning); box-shadow: 0 0 12px rgba(251,191,36,.35); }
.au-farol--vermelho { background: var(--au-danger);  box-shadow: 0 0 12px rgba(239,68,68,.35); }
.au-farol--neutro   { background: var(--au-text-mute); box-shadow: none; }

.au-farol-badge.au-farol--verde    { background: var(--au-success-a12); border-color: rgba(0,230,118,.35); color: var(--au-success-soft); box-shadow: none; }
.au-farol-badge.au-farol--amarelo  { background: var(--au-warning-a12); border-color: rgba(251,191,36,.35); color: var(--au-warning); box-shadow: none; }
.au-farol-badge.au-farol--vermelho { background: var(--au-danger-a12);  border-color: rgba(239,68,68,.35);  color: var(--au-danger-soft); box-shadow: none; }
.au-farol-badge.au-farol--neutro   { background: var(--au-surface-higher); color: var(--au-text-mute); }
.au-farol-badge .au-farol--verde,
.au-farol-badge .au-farol--amarelo,
.au-farol-badge .au-farol--vermelho { box-shadow: none; }

.au-farol-hero__light.au-farol--verde,
.au-farol-hero__light.au-farol--amarelo,
.au-farol-hero__light.au-farol--vermelho { border-color: transparent; }
.au-farol-hero__light.au-farol--verde    { box-shadow: 0 0 32px rgba(0,230,118,.45), inset 0 -8px 16px rgba(0,0,0,.25); }
.au-farol-hero__light.au-farol--amarelo  { box-shadow: 0 0 32px rgba(251,191,36,.45), inset 0 -8px 16px rgba(0,0,0,.25); }
.au-farol-hero__light.au-farol--vermelho { box-shadow: 0 0 32px rgba(239,68,68,.45), inset 0 -8px 16px rgba(0,0,0,.25); }

/* Pulso opcional (chamar atenção pra vermelho) */
.au-farol--pulse { animation: au-farol-pulse 2s var(--au-ease) infinite; }
@keyframes au-farol-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }


/* ===========================================================================
   06 · FORMS
   Labels mono maiúsculos acima do campo. Foco = ouro. Erro = crimson.
   =========================================================================== */
.au-field { display: flex; flex-direction: column; gap: var(--au-space-2); margin-bottom: var(--au-space-4); }
.au-field__label {
  font-family: var(--au-font-mono);
  font-size: var(--au-text-2xs);
  font-weight: var(--au-weight-bold);
  letter-spacing: var(--au-tracking-caps);
  text-transform: uppercase;
  color: var(--au-text-dim);
}
.au-field__label .au-req { color: var(--au-gold); }
.au-field__hint { font-size: var(--au-text-xs); color: var(--au-text-mute); }
.au-field__error { font-size: var(--au-text-xs); color: var(--au-danger-soft); display: none; }
.au-field.au-is-invalid .au-field__error { display: block; }

.au-input, .au-select, .au-textarea {
  width: 100%;
  background: var(--au-surface-higher);
  border: 1px solid var(--au-border-strong);
  border-radius: var(--au-radius-md);
  color: var(--au-text);
  font-family: var(--au-font-body);
  font-size: var(--au-text-base);
  padding: 11px 14px;
  outline: none;
  transition: border-color var(--au-dur-fast) var(--au-ease), box-shadow var(--au-dur-base) var(--au-ease), background var(--au-dur-fast) var(--au-ease);
}
.au-input::placeholder, .au-textarea::placeholder { color: var(--au-text-mute); }
.au-input:hover, .au-select:hover, .au-textarea:hover { border-color: var(--au-border-gold-hi); }
.au-input:focus, .au-select:focus, .au-textarea:focus {
  border-color: var(--au-gold);
  box-shadow: 0 0 0 3px var(--au-gold-a12);
  background: var(--au-surface-high);
}
.au-input:disabled, .au-select:disabled, .au-textarea:disabled { opacity: 0.45; cursor: not-allowed; }
.au-field.au-is-invalid .au-input,
.au-field.au-is-invalid .au-select,
.au-field.au-is-invalid .au-textarea { border-color: var(--au-danger); box-shadow: 0 0 0 3px var(--au-danger-a12); }

.au-textarea { min-height: 96px; resize: vertical; line-height: var(--au-leading-normal); }

/* Select com seta custom (ouro) */
.au-select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23f7bd48' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  cursor: pointer;
}

/* Input com prefixo/ícone: <div class="au-input-group"><span>R$</span><input …></div> */
.au-input-group { display: flex; align-items: stretch; }
.au-input-group > span {
  display: flex; align-items: center;
  padding: 0 var(--au-space-3);
  background: var(--au-surface-highest);
  border: 1px solid var(--au-border-strong);
  border-right: none;
  border-radius: var(--au-radius-md) 0 0 var(--au-radius-md);
  color: var(--au-gold);
  font-family: var(--au-font-mono);
  font-size: var(--au-text-sm);
  font-weight: var(--au-weight-bold);
}
.au-input-group .au-input { border-radius: 0 var(--au-radius-md) var(--au-radius-md) 0; }

/* Checkbox & Radio — custom, ouro */
.au-check {
  display: inline-flex; align-items: center; gap: var(--au-space-3);
  cursor: pointer; font-size: var(--au-text-md); color: var(--au-text-body);
  user-select: none;
}
.au-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.au-check__box {
  width: 20px; height: 20px; flex-shrink: 0;
  border: 1.5px solid var(--au-border-strong);
  border-radius: 6px;
  background: var(--au-surface-higher);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--au-dur-fast) var(--au-ease);
}
.au-check--radio .au-check__box { border-radius: 50%; }
.au-check__box::after {
  content: ""; opacity: 0; transform: scale(0.4);
  transition: all var(--au-dur-fast) var(--au-ease-spring);
}
.au-check:not(.au-check--radio) .au-check__box::after {
  width: 11px; height: 6px;
  border-left: 2.5px solid var(--au-on-gold);
  border-bottom: 2.5px solid var(--au-on-gold);
  transform: rotate(-45deg) scale(0.4) translateY(-1px);
}
.au-check--radio .au-check__box::after { width: 8px; height: 8px; border-radius: 50%; background: var(--au-on-gold); }
.au-check input:checked + .au-check__box { background: var(--au-gold); border-color: var(--au-gold); box-shadow: var(--au-glow-gold); }
.au-check input:checked + .au-check__box::after { opacity: 1; }
.au-check:not(.au-check--radio) input:checked + .au-check__box::after { transform: rotate(-45deg) scale(1) translateY(-1px); }
.au-check--radio input:checked + .au-check__box::after { transform: scale(1); }
.au-check input:focus-visible + .au-check__box { outline: 2px solid var(--au-gold); outline-offset: 2px; }
.au-check:hover .au-check__box { border-color: var(--au-border-gold-hi); }
.au-check input:disabled ~ * { opacity: 0.45; cursor: not-allowed; }

/* Toggle (switch) */
.au-toggle { display: inline-flex; align-items: center; gap: var(--au-space-3); cursor: pointer; user-select: none; font-size: var(--au-text-md); }
.au-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.au-toggle__track {
  width: 44px; height: 24px; flex-shrink: 0;
  background: var(--au-surface-highest);
  border: 1px solid var(--au-border-strong);
  border-radius: var(--au-radius-full);
  position: relative;
  transition: background var(--au-dur-base) var(--au-ease), border-color var(--au-dur-base) var(--au-ease), box-shadow var(--au-dur-base) var(--au-ease);
}
.au-toggle__track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--au-text-dim);
  transition: transform var(--au-dur-base) var(--au-ease-spring), background var(--au-dur-base) var(--au-ease);
}
.au-toggle input:checked + .au-toggle__track { background: var(--au-gold); border-color: var(--au-gold); box-shadow: var(--au-glow-gold); }
.au-toggle input:checked + .au-toggle__track::after { transform: translateX(20px); background: var(--au-on-gold); }
.au-toggle input:focus-visible + .au-toggle__track { outline: 2px solid var(--au-gold); outline-offset: 2px; }
.au-toggle input:disabled ~ * { opacity: 0.45; cursor: not-allowed; }
.au-toggle--cta input:checked + .au-toggle__track { background: var(--au-cta); border-color: var(--au-cta); box-shadow: var(--au-glow-cta); }
.au-toggle--cta input:checked + .au-toggle__track::after { background: #003b1e; }

/* Slider (range) — trilho fino, thumb ouro */
.au-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; background: transparent; cursor: pointer; }
.au-slider::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--au-gold) var(--au-slider-fill, 50%), var(--au-surface-highest) var(--au-slider-fill, 50%)); }
.au-slider::-moz-range-track { height: 4px; border-radius: 2px; background: var(--au-surface-highest); }
.au-slider::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--au-gold); }
.au-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; margin-top: -7px;
  border-radius: 50%;
  background: var(--au-gold);
  border: 2px solid var(--au-on-gold);
  box-shadow: var(--au-glow-gold);
  transition: transform var(--au-dur-fast) var(--au-ease);
}
.au-slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--au-gold); border: 2px solid var(--au-on-gold); box-shadow: var(--au-glow-gold); }
.au-slider:hover::-webkit-slider-thumb { transform: scale(1.15); }
.au-slider:focus-visible { outline: 2px solid var(--au-gold); outline-offset: 4px; border-radius: var(--au-radius-full); }


/* ===========================================================================
   07 · MODAIS & DRAWERS
   Ative com .au-is-open no overlay. body.au-lock trava o scroll de fundo.
   =========================================================================== */
body.au-lock { overflow: hidden; }

.au-overlay {
  position: fixed; inset: 0;
  z-index: var(--au-z-modal);
  display: flex; align-items: center; justify-content: center;
  padding: var(--au-space-5);
  background: var(--au-overlay-bg);
  -webkit-backdrop-filter: blur(var(--au-overlay-blur));
  backdrop-filter: blur(var(--au-overlay-blur));
  opacity: 0; visibility: hidden;
  transition: opacity var(--au-dur-slow) var(--au-ease), visibility var(--au-dur-slow) var(--au-ease);
}
.au-overlay.au-is-open { opacity: 1; visibility: visible; }

.au-modal {
  width: 100%; max-width: 520px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--au-surface-high);
  border: 1px solid var(--au-border-gold);
  border-top-color: var(--au-gold-a20);
  border-radius: var(--au-radius-xl);
  box-shadow: var(--au-shadow-lg), var(--au-glow-gold);
  padding: var(--au-space-8);
  transform: translateY(16px) scale(0.97);
  transition: transform var(--au-dur-slow) var(--au-ease-out);
}
.au-overlay.au-is-open .au-modal { transform: none; }
.au-modal--lg { max-width: 760px; }
.au-modal--sm { max-width: 400px; }
.au-modal__title { font-family: var(--au-font-display); font-size: var(--au-text-2xl); font-weight: var(--au-weight-bold); color: var(--au-text); letter-spacing: var(--au-tracking-tight); margin-bottom: var(--au-space-2); }
.au-modal__close {
  position: absolute; /* dentro de .au-modal { position:relative } via wrapper */
  top: var(--au-space-4); right: var(--au-space-4);
  background: none; border: none; cursor: pointer;
  color: var(--au-text-mute); font-size: 22px; line-height: 1;
  width: 32px; height: 32px; border-radius: var(--au-radius-sm);
  transition: color var(--au-dur-fast) var(--au-ease), background var(--au-dur-fast) var(--au-ease);
}
.au-modal { position: relative; }
.au-modal__close:hover { color: var(--au-text); background: var(--au-surface-highest); }
.au-modal__actions { display: flex; justify-content: flex-end; gap: var(--au-space-2); margin-top: var(--au-space-6); }

/* Drawer — painel lateral direito */
.au-drawer-overlay { justify-content: flex-end; padding: 0; align-items: stretch; z-index: var(--au-z-drawer); }
.au-drawer {
  width: min(420px, 92vw);
  height: 100%;
  overflow-y: auto;
  background: var(--au-surface);
  border-left: 1px solid var(--au-border-gold);
  box-shadow: var(--au-shadow-lg);
  padding: var(--au-space-6);
  transform: translateX(100%);
  transition: transform var(--au-dur-slow) var(--au-ease-out);
  position: relative;
}
.au-overlay.au-is-open .au-drawer { transform: none; }
.au-drawer--left { border-left: none; border-right: 1px solid var(--au-border-gold); transform: translateX(-100%); }
.au-drawer-overlay--left { justify-content: flex-start; }


/* ===========================================================================
   08 · TOASTS & ALERTS
   Toast: container fixo + .au-toast com au-is-in / au-is-out (JS adiciona).
   Alert: bloco estático inline.
   =========================================================================== */
.au-toast-stack {
  position: fixed;
  bottom: var(--au-space-5); right: var(--au-space-5);
  z-index: var(--au-z-toast);
  display: flex; flex-direction: column; gap: var(--au-space-2);
  max-width: min(380px, calc(100vw - 32px));
}
.au-toast {
  display: flex; align-items: flex-start; gap: var(--au-space-3);
  background: var(--au-glass-bg);
  -webkit-backdrop-filter: blur(var(--au-glass-blur));
  backdrop-filter: blur(var(--au-glass-blur));
  border: 1px solid var(--au-border-strong);
  border-left-width: 3px;
  border-radius: var(--au-radius-md);
  padding: var(--au-space-3) var(--au-space-4);
  box-shadow: var(--au-shadow-md);
  font-size: var(--au-text-sm);
  color: var(--au-text-body);
  opacity: 0; transform: translateX(24px);
  transition: opacity var(--au-dur-slow) var(--au-ease-out), transform var(--au-dur-slow) var(--au-ease-out);
}
.au-toast.au-is-in { opacity: 1; transform: none; }
.au-toast.au-is-out { opacity: 0; transform: translateY(8px); }
.au-toast__icon { flex-shrink: 0; font-size: 16px; line-height: 1.3; }
.au-toast__title { font-weight: var(--au-weight-bold); color: var(--au-text); display: block; }
.au-toast--success { border-left-color: var(--au-success); } .au-toast--success .au-toast__icon { color: var(--au-success); }
.au-toast--warning { border-left-color: var(--au-warning); } .au-toast--warning .au-toast__icon { color: var(--au-warning); }
.au-toast--danger  { border-left-color: var(--au-danger); }  .au-toast--danger .au-toast__icon  { color: var(--au-danger-soft); }
.au-toast--info    { border-left-color: var(--au-info); }    .au-toast--info .au-toast__icon    { color: var(--au-info); }
.au-toast--gold    { border-left-color: var(--au-gold); }    .au-toast--gold .au-toast__icon    { color: var(--au-gold); }

/* Alert inline */
.au-alert {
  display: flex; gap: var(--au-space-3); align-items: flex-start;
  border: 1px solid var(--au-border);
  border-left-width: 3px;
  border-radius: var(--au-radius-md);
  padding: var(--au-space-4);
  font-size: var(--au-text-md);
  background: var(--au-surface-high);
}
.au-alert__title { font-weight: var(--au-weight-bold); color: var(--au-text); display: block; margin-bottom: 2px; }
.au-alert--success { border-left-color: var(--au-success); background: var(--au-success-a12); }
.au-alert--warning { border-left-color: var(--au-warning); background: var(--au-warning-a12); }
.au-alert--danger  { border-left-color: var(--au-danger);  background: var(--au-danger-a12); }
.au-alert--info    { border-left-color: var(--au-info);    background: var(--au-info-a12); }
.au-alert--gold    { border-left-color: var(--au-gold);    background: var(--au-gold-a08); }


/* ===========================================================================
   09 · TABS & BREADCRUMB
   =========================================================================== */
.au-tabs {
  display: flex; gap: var(--au-space-1);
  border-bottom: 1px solid var(--au-border);
  overflow-x: auto;
}
.au-tab {
  background: none; border: none; cursor: pointer;
  font-family: var(--au-font-body);
  font-size: var(--au-text-sm);
  font-weight: var(--au-weight-semibold);
  color: var(--au-text-dim);
  padding: var(--au-space-3) var(--au-space-4);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color var(--au-dur-fast) var(--au-ease), border-color var(--au-dur-fast) var(--au-ease);
}
.au-tab:hover { color: var(--au-text); }
.au-tab.au-is-active, .au-tab[aria-selected="true"] { color: var(--au-gold); border-bottom-color: var(--au-gold); }

/* Tabs em pílula (segmented) */
.au-tabs--pill { border-bottom: none; background: var(--au-surface); border: 1px solid var(--au-border); border-radius: var(--au-radius-md); padding: 3px; display: inline-flex; }
.au-tabs--pill .au-tab { border: none; margin: 0; border-radius: var(--au-radius-sm); padding: var(--au-space-2) var(--au-space-4); }
.au-tabs--pill .au-tab.au-is-active, .au-tabs--pill .au-tab[aria-selected="true"] { background: var(--au-gold); color: var(--au-on-gold); box-shadow: var(--au-glow-gold); }

.au-tabpanel[hidden] { display: none; }

/* Breadcrumb */
.au-breadcrumb { display: flex; align-items: center; gap: var(--au-space-2); font-family: var(--au-font-mono); font-size: var(--au-text-xs); letter-spacing: var(--au-tracking-wide); list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.au-breadcrumb a { color: var(--au-text-mute); text-decoration: none; transition: color var(--au-dur-fast) var(--au-ease); }
.au-breadcrumb a:hover { color: var(--au-gold); }
.au-breadcrumb li { display: flex; align-items: center; gap: var(--au-space-2); }
.au-breadcrumb li + li::before { content: "/"; color: var(--au-text-mute); opacity: 0.5; }
.au-breadcrumb [aria-current="page"] { color: var(--au-text); font-weight: var(--au-weight-bold); }


/* ===========================================================================
   10 · DROPDOWN / MENU
   =========================================================================== */
.au-menu {
  position: absolute;
  min-width: 200px;
  background: var(--au-surface-high);
  border: 1px solid var(--au-border-gold);
  border-radius: var(--au-radius-md);
  box-shadow: var(--au-shadow-md);
  padding: var(--au-space-1);
  z-index: var(--au-z-raised);
}
.au-menu__item {
  display: flex; align-items: center; gap: var(--au-space-2);
  width: 100%;
  background: none; border: none; cursor: pointer; text-decoration: none;
  font-size: var(--au-text-sm); color: var(--au-text-body); text-align: left;
  padding: var(--au-space-2) var(--au-space-3);
  border-radius: var(--au-radius-sm);
  transition: background var(--au-dur-fast) var(--au-ease), color var(--au-dur-fast) var(--au-ease);
}
.au-menu__item:hover { background: var(--au-gold-a08); color: var(--au-text); }
.au-menu__item--danger { color: var(--au-danger-soft); }
.au-menu__item--danger:hover { background: var(--au-danger-a12); }
.au-menu__sep { border: none; border-top: 1px solid var(--au-border); margin: var(--au-space-1) 0; }


/* ===========================================================================
   11 · BADGES & CHIPS
   Badge = estado (retangular mono). Chip = filtro/tag (pill, removível).
   =========================================================================== */
.au-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--au-font-mono);
  font-size: var(--au-text-2xs);
  font-weight: var(--au-weight-bold);
  letter-spacing: var(--au-tracking-wide);
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--au-radius-xs);
  background: var(--au-surface-highest);
  color: var(--au-text-dim);
  border: 1px solid transparent;
}
.au-badge--gold    { background: var(--au-gold-a12);    color: var(--au-gold);         border-color: var(--au-border-gold); }
.au-badge--solid   { background: var(--au-gold);        color: var(--au-on-gold); }
.au-badge--success { background: var(--au-success-a12); color: var(--au-success-soft); border-color: rgba(0,230,118,.25); }
.au-badge--warning { background: var(--au-warning-a12); color: var(--au-warning);      border-color: rgba(251,191,36,.25); }
.au-badge--danger  { background: var(--au-danger-a12);  color: var(--au-danger-soft);  border-color: rgba(239,68,68,.25); }
.au-badge--info    { background: var(--au-info-a12);    color: var(--au-info);         border-color: rgba(96,165,250,.25); }

.au-chip {
  display: inline-flex; align-items: center; gap: var(--au-space-2);
  font-size: var(--au-text-sm);
  font-weight: var(--au-weight-medium);
  color: var(--au-text-body);
  background: var(--au-surface-higher);
  border: 1px solid var(--au-border);
  border-radius: var(--au-radius-full);
  padding: 5px 14px;
  cursor: pointer;
  transition: all var(--au-dur-fast) var(--au-ease);
}
.au-chip:hover { border-color: var(--au-border-gold-hi); }
.au-chip.au-is-active { background: var(--au-gold-a12); border-color: var(--au-gold); color: var(--au-gold); }
.au-chip__x { border: none; background: none; cursor: pointer; color: var(--au-text-mute); font-size: 14px; line-height: 1; padding: 0; }
.au-chip__x:hover { color: var(--au-danger-soft); }


/* ===========================================================================
   12 · AVATARS
   =========================================================================== */
.au-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--au-surface-highest), var(--au-surface-higher));
  border: 1px solid var(--au-border-gold);
  color: var(--au-gold);
  font-family: var(--au-font-display);
  font-weight: var(--au-weight-bold);
  font-size: var(--au-text-md);
  overflow: hidden;
  user-select: none;
}
.au-avatar img { width: 100%; height: 100%; object-fit: cover; }
.au-avatar--sm { width: 28px; height: 28px; font-size: var(--au-text-2xs); }
.au-avatar--lg { width: 64px; height: 64px; font-size: var(--au-text-xl); }
.au-avatar--gold { background: var(--au-gold); color: var(--au-on-gold); border-color: var(--au-gold); box-shadow: var(--au-glow-gold); }

/* Pilha de avatars */
.au-avatar-stack { display: inline-flex; }
.au-avatar-stack .au-avatar { margin-left: -10px; border: 2px solid var(--au-bg); }
.au-avatar-stack .au-avatar:first-child { margin-left: 0; }

/* Ponto de presença */
.au-avatar-wrap { position: relative; display: inline-flex; }
.au-avatar-wrap .au-presence {
  position: absolute; bottom: 0; right: 0;
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid var(--au-bg);
  background: var(--au-success);
}


/* ===========================================================================
   13 · TOOLTIPS — CSS puro via data-au-tip
   <button data-au-tip="Texto" data-au-tip-pos="top">…</button>
   =========================================================================== */
[data-au-tip] { position: relative; }
[data-au-tip]::after {
  content: attr(data-au-tip);
  position: absolute;
  left: 50%; bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  background: var(--au-surface-highest);
  border: 1px solid var(--au-border-gold);
  color: var(--au-text);
  font-family: var(--au-font-body);
  font-size: var(--au-text-xs);
  font-weight: var(--au-weight-medium);
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: var(--au-radius-sm);
  box-shadow: var(--au-shadow-md);
  opacity: 0; visibility: hidden;
  pointer-events: none;
  z-index: var(--au-z-tooltip);
  transition: opacity var(--au-dur-fast) var(--au-ease), transform var(--au-dur-fast) var(--au-ease);
}
[data-au-tip]:hover::after, [data-au-tip]:focus-visible::after {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
}
[data-au-tip-pos="bottom"]::after { bottom: auto; top: calc(100% + 8px); transform: translateX(-50%) translateY(-4px); }
[data-au-tip-pos="bottom"]:hover::after, [data-au-tip-pos="bottom"]:focus-visible::after { transform: translateX(-50%) translateY(0); }


/* ===========================================================================
   14 · PROGRESS BARS & RINGS
   Barra fina (2–6px) com fill ouro "vivo". Ring via conic-gradient.
   =========================================================================== */
.au-progress {
  width: 100%; height: 6px;
  background: var(--au-surface-highest);
  border-radius: var(--au-radius-full);
  overflow: hidden;
}
.au-progress--thin { height: 3px; }
.au-progress__fill {
  height: 100%;
  width: 0; /* defina inline: style="width:64%" */
  background: var(--au-gold);
  border-radius: var(--au-radius-full);
  box-shadow: 0 0 10px var(--au-gold-a20);
  transition: width var(--au-dur-lazy) var(--au-ease-out);
}
.au-progress__fill--cta     { background: var(--au-cta); box-shadow: 0 0 10px var(--au-cta-a30); }
.au-progress__fill--danger  { background: var(--au-danger); box-shadow: none; }
.au-progress__fill--warning { background: var(--au-warning); box-shadow: none; }
/* fill "vivo" — gradiente em movimento p/ processos em andamento */
.au-progress__fill--live {
  background: linear-gradient(90deg, var(--au-gold-alt), var(--au-gold-bright), var(--au-gold-alt));
  background-size: 200% 100%;
  animation: au-live 2.2s linear infinite;
}
@keyframes au-live { to { background-position: -200% 0; } }

/* Linha de progresso com rótulo */
.au-progress-row { display: flex; align-items: center; gap: var(--au-space-3); }
.au-progress-row .au-progress { flex: 1; }
.au-progress-row__val { font-family: var(--au-font-mono); font-size: var(--au-text-xs); font-weight: var(--au-weight-bold); color: var(--au-text); min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; }

/* Ring — anel de % via conic-gradient. Use --au-ring-val (0–100) inline. */
.au-ring {
  --au-ring-val: 0;
  --au-ring-color: var(--au-gold);
  --au-ring-size: 96px;
  --au-ring-stroke: 8px;
  width: var(--au-ring-size); height: var(--au-ring-size);
  border-radius: 50%;
  background:
    radial-gradient(closest-side, var(--au-surface-high) calc(100% - var(--au-ring-stroke) - 1px), transparent calc(100% - var(--au-ring-stroke))),
    conic-gradient(var(--au-ring-color) calc(var(--au-ring-val) * 1%), var(--au-surface-highest) 0);
  display: inline-flex; align-items: center; justify-content: center;
  flex-direction: column;
}
.au-ring__value { font-family: var(--au-font-mono); font-weight: var(--au-weight-bold); font-size: calc(var(--au-ring-size) * 0.22); color: var(--au-text); line-height: 1; }
.au-ring__label { font-family: var(--au-font-mono); font-size: 9px; letter-spacing: var(--au-tracking-wide); text-transform: uppercase; color: var(--au-text-mute); margin-top: 3px; }
.au-ring--cta { --au-ring-color: var(--au-cta); }
.au-ring--danger { --au-ring-color: var(--au-danger); }
.au-ring--warning { --au-ring-color: var(--au-warning); }


/* ===========================================================================
   15 · EMPTY STATES & SKELETON LOADERS
   =========================================================================== */
.au-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: var(--au-space-12) var(--au-space-6);
  border: 1px dashed var(--au-border-strong);
  border-radius: var(--au-radius-lg);
  color: var(--au-text-dim);
}
.au-empty__icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--au-gold-a08);
  border: 1px solid var(--au-border-gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: var(--au-gold);
  margin-bottom: var(--au-space-4);
}
.au-empty__title { font-family: var(--au-font-display); font-size: var(--au-text-lg); font-weight: var(--au-weight-bold); color: var(--au-text); margin-bottom: var(--au-space-1); }
.au-empty__text { font-size: var(--au-text-sm); max-width: 34ch; margin-bottom: var(--au-space-5); }

/* Skeleton — shimmer sóbrio */
.au-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--au-surface-higher);
  border-radius: var(--au-radius-sm);
  min-height: 14px;
}
.au-skeleton::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
  transform: translateX(-100%);
  animation: au-shimmer 1.6s var(--au-ease) infinite;
}
@keyframes au-shimmer { to { transform: translateX(100%); } }
.au-skeleton--text { height: 14px; }
.au-skeleton--title { height: 22px; width: 55%; }
.au-skeleton--circle { border-radius: 50%; width: 40px; height: 40px; }
.au-skeleton--card { height: 120px; border-radius: var(--au-radius-lg); }


/* ===========================================================================
   UTILITÁRIOS DE LAYOUT — o mínimo necessário (não é um Tailwind)
   =========================================================================== */
.au-row { display: flex; align-items: center; gap: var(--au-space-3); }
.au-row--between { justify-content: space-between; }
.au-row--wrap { flex-wrap: wrap; }
.au-stack { display: flex; flex-direction: column; gap: var(--au-space-4); }
.au-stack--sm { gap: var(--au-space-2); }
.au-stack--lg { gap: var(--au-space-8); }
.au-grid { display: grid; gap: var(--au-space-4); }
.au-grid > * { min-width: 0; } /* impede que conteúdo interno estoure a coluna */
.au-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.au-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.au-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.au-grid--split { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } /* principal + lateral */
@media (max-width: 900px) { .au-grid--3, .au-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .au-grid--split { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .au-grid--2, .au-grid--3, .au-grid--4 { grid-template-columns: 1fr; } }
.au-hide-mobile { display: initial; }
@media (max-width: 768px) { .au-hide-mobile { display: none !important; } }
/* ============================================================================
   AUREUM DESIGN SYSTEM · shell.css
   Layout-mãe de um app: sidebar + topbar + conteúdo. Mobile-first.
   Requer tokens.css.
   ----------------------------------------------------------------------------
   ESTRUTURA:
   <body class="au-app au-shell">
     <a class="au-skip" href="#au-main">Pular pro conteúdo</a>
     <aside class="au-sidebar" id="auSidebar"> …nav… </aside>
     <div class="au-shell__scrim" id="auScrim"></div>
     <div class="au-shell__main">
       <header class="au-topbar"> …hambúrguer/título/ações… </header>
       <main class="au-content" id="au-main"> …app… </main>
     </div>
   </body>
   Comportamento:
   - Mobile (<900px): sidebar vira off-canvas; body.au-nav-open abre.
   - Desktop: sidebar fixa; body.au-nav-collapsed encolhe pra só-ícones.
   JS necessário: só alternar essas 2 classes no <body>.
   ============================================================================ */

/* ===========================================================================
   ESQUELETO
   =========================================================================== */
.au-shell { min-height: 100vh; min-height: 100dvh; }
.au-shell__main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  transition: padding-left var(--au-dur-slow) var(--au-ease);
}

/* Link "pular pro conteúdo" — acessibilidade */
.au-skip {
  position: fixed; top: -48px; left: var(--au-space-4);
  z-index: calc(var(--au-z-tooltip) + 1);
  background: var(--au-gold); color: var(--au-on-gold);
  font-weight: var(--au-weight-bold); font-size: var(--au-text-sm);
  padding: var(--au-space-2) var(--au-space-4);
  border-radius: 0 0 var(--au-radius-md) var(--au-radius-md);
  text-decoration: none;
  transition: top var(--au-dur-base) var(--au-ease);
}
.au-skip:focus { top: 0; }

/* ===========================================================================
   SIDEBAR
   =========================================================================== */
.au-sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--au-sidebar-w);
  z-index: var(--au-z-sidebar);
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #151515 0%, #0c0c0c 100%);
  border-right: 1px solid var(--au-border);
  box-shadow: inset -1px 0 0 0 rgba(255, 255, 255, 0.03);
  padding: var(--au-space-4) var(--au-space-3) var(--au-space-6);
  overflow-y: auto;
  overflow-x: hidden;
  /* mobile-first: escondida fora da tela */
  transform: translateX(-100%);
  transition: transform var(--au-dur-slow) var(--au-ease-out), width var(--au-dur-slow) var(--au-ease);
}
body.au-nav-open .au-sidebar { transform: none; box-shadow: var(--au-shadow-lg); }

/* Scrim mobile (fundo escurecido quando o menu abre) */
.au-shell__scrim {
  position: fixed; inset: 0;
  z-index: calc(var(--au-z-sidebar) - 1);
  background: var(--au-overlay-bg);
  opacity: 0; visibility: hidden;
  transition: opacity var(--au-dur-slow) var(--au-ease), visibility var(--au-dur-slow) var(--au-ease);
}
body.au-nav-open .au-shell__scrim { opacity: 1; visibility: visible; }

/* Marca no topo da sidebar */
.au-sidebar__brand {
  display: flex; align-items: center; gap: var(--au-space-3);
  padding: var(--au-space-2) var(--au-space-3) var(--au-space-5);
  text-decoration: none;
}
.au-sidebar__logo { width: 34px; height: 34px; flex-shrink: 0; filter: var(--au-bloom-gold); }
.au-sidebar__name {
  font-family: var(--au-font-display);
  font-size: var(--au-text-base);
  font-weight: var(--au-weight-bold);
  color: var(--au-text);
  letter-spacing: var(--au-tracking-tight);
  white-space: nowrap;
}
.au-sidebar__name em { color: var(--au-gold); font-style: normal; }
.au-sidebar__tagline {
  display: block;
  font-family: var(--au-font-mono);
  font-size: 9px; letter-spacing: var(--au-tracking-caps);
  text-transform: uppercase; color: var(--au-text-mute);
  margin-top: 2px; white-space: nowrap;
}

/* Grupos e itens de navegação */
.au-sidebar__group {
  font-family: var(--au-font-mono);
  font-size: 9px; font-weight: var(--au-weight-bold);
  letter-spacing: var(--au-tracking-caps); text-transform: uppercase;
  color: var(--au-text-mute);
  margin: var(--au-space-5) var(--au-space-3) var(--au-space-2);
  white-space: nowrap;
}
.au-sidebar__nav { display: flex; flex-direction: column; gap: 2px; }
.au-nav-item {
  display: flex; align-items: center; gap: var(--au-space-3);
  width: 100%;
  background: transparent; border: none; cursor: pointer;
  text-decoration: none; text-align: left;
  color: var(--au-text-dim);
  font-family: var(--au-font-body);
  font-size: var(--au-text-sm);
  font-weight: var(--au-weight-medium);
  padding: var(--au-space-2) var(--au-space-3);
  border-radius: var(--au-radius-sm);
  white-space: nowrap;
  transition: background var(--au-dur-fast) var(--au-ease), color var(--au-dur-fast) var(--au-ease);
}
.au-nav-item:hover { background: var(--au-gold-a08); color: var(--au-text); }
.au-nav-item.au-is-active, .au-nav-item[aria-current="page"] {
  background: var(--au-gold);
  color: var(--au-on-gold);
  font-weight: var(--au-weight-bold);
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.28);
}
.au-nav-item__icon { flex-shrink: 0; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }
.au-nav-item__badge { margin-left: auto; }
.au-nav-item.au-is-active .au-nav-item__badge.au-badge--gold { background: rgba(0,0,0,.22); color: var(--au-on-gold); border-color: transparent; }

/* Rodapé da sidebar (usuário / versão) */
.au-sidebar__footer {
  margin-top: auto;
  padding: var(--au-space-4) var(--au-space-3) 0;
  border-top: 1px solid var(--au-border);
  display: flex; align-items: center; gap: var(--au-space-3);
  white-space: nowrap;
}

/* ===========================================================================
   TOPBAR
   =========================================================================== */
.au-topbar {
  position: sticky; top: 0;
  z-index: var(--au-z-topbar);
  height: var(--au-topbar-h);
  display: flex; align-items: center; gap: var(--au-space-3);
  padding: 0 var(--au-space-4);
  background: rgba(10, 10, 10, 0.80);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--au-border);
}
.au-topbar__title {
  font-family: var(--au-font-display);
  font-size: var(--au-text-lg);
  font-weight: var(--au-weight-bold);
  color: var(--au-text);
  letter-spacing: var(--au-tracking-tight);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.au-topbar__title em { color: var(--au-gold); font-style: normal; }
.au-topbar__actions { margin-left: auto; display: flex; align-items: center; gap: var(--au-space-2); }

/* Botão hambúrguer / colapso (JS alterna as classes do body) */
.au-burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--au-border);
  border-radius: var(--au-radius-sm);
  color: var(--au-text-dim);
  cursor: pointer;
  transition: color var(--au-dur-fast) var(--au-ease), border-color var(--au-dur-fast) var(--au-ease), background var(--au-dur-fast) var(--au-ease);
}
.au-burger:hover { color: var(--au-gold); border-color: var(--au-border-gold-hi); background: var(--au-gold-a08); }
.au-burger svg { width: 18px; height: 18px; }

/* ===========================================================================
   CONTEÚDO
   =========================================================================== */
.au-content {
  flex: 1;
  width: 100%;
  max-width: var(--au-content);
  margin: 0 auto;
  padding: var(--au-space-5) var(--au-space-4) var(--au-space-16);
}
.au-content--wide { max-width: var(--au-container); }
.au-content--full { max-width: none; }

/* Cabeçalho de página dentro do conteúdo */
.au-page-head { margin-bottom: var(--au-space-6); }
.au-page-head__title {
  font-family: var(--au-font-display);
  font-size: var(--au-text-2xl);
  font-weight: var(--au-weight-bold);
  color: var(--au-text);
  letter-spacing: var(--au-tracking-tight);
  line-height: var(--au-leading-tight);
}
.au-page-head__sub { color: var(--au-text-dim); font-size: var(--au-text-sm); margin-top: var(--au-space-1); }
.au-page-head__row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--au-space-4); flex-wrap: wrap; }

/* Seções */
.au-section { margin-bottom: var(--au-space-10); }
.au-section__eyebrow {
  font-family: var(--au-font-mono);
  font-size: var(--au-text-2xs);
  font-weight: var(--au-weight-bold);
  letter-spacing: var(--au-tracking-caps);
  text-transform: uppercase;
  color: var(--au-gold);
}
.au-section__title {
  font-family: var(--au-font-display);
  font-size: var(--au-text-xl);
  font-weight: var(--au-weight-bold);
  color: var(--au-text);
  letter-spacing: var(--au-tracking-tight);
  margin: var(--au-space-1) 0 var(--au-space-2);
}
.au-section__desc { color: var(--au-text-dim); font-size: var(--au-text-md); max-width: var(--au-prose); margin-bottom: var(--au-space-5); }

/* ===========================================================================
   DESKTOP (≥900px) — sidebar fixa visível; colapso opcional
   =========================================================================== */
@media (min-width: 900px) {
  .au-sidebar { transform: none; }
  .au-shell__main { padding-left: var(--au-sidebar-w); }
  .au-shell__scrim { display: none; }
  .au-burger--mobile { display: none; } /* hambúrguer só no mobile */

  /* Colapsada: só ícones */
  body.au-nav-collapsed .au-sidebar { width: var(--au-sidebar-w-min); padding-left: var(--au-space-2); padding-right: var(--au-space-2); }
  body.au-nav-collapsed .au-shell__main { padding-left: var(--au-sidebar-w-min); }
  body.au-nav-collapsed .au-sidebar__name,
  body.au-nav-collapsed .au-sidebar__tagline,
  body.au-nav-collapsed .au-sidebar__group,
  body.au-nav-collapsed .au-nav-item__label,
  body.au-nav-collapsed .au-nav-item__badge,
  body.au-nav-collapsed .au-sidebar__footer > :not(.au-avatar) { display: none; }
  body.au-nav-collapsed .au-nav-item { justify-content: center; padding: var(--au-space-2); }
  body.au-nav-collapsed .au-sidebar__brand { justify-content: center; padding-left: 0; padding-right: 0; }
}

@media (max-width: 899px) {
  .au-burger--desktop { display: none; } /* botão de colapso só no desktop */
  .au-topbar { padding-left: var(--au-space-3); }
}

/* Impressão: esconde chrome, imprime só o conteúdo */
@media print {
  .au-sidebar, .au-topbar, .au-shell__scrim, .au-skip { display: none !important; }
  .au-shell__main { padding-left: 0 !important; }
  .au-app { background: #fff; color: #000; }
}
/* ============================================================================
   AUREUM DESIGN SYSTEM · brand.css
   Como a marca "O Sistema" (R2 Rota do Cofre espelhado) entra no shell.
   Requer tokens.css + shell.css.
   ----------------------------------------------------------------------------
   USO — topo da sidebar (o símbolo é SVG inline pra herdar currentColor):

   <a class="au-sidebar__brand" href="/">
     <svg class="au-sidebar__logo au-brand-symbol" viewBox="0 0 48 48"
          fill="none" aria-hidden="true">
       <g class="lg-mark" stroke="currentColor" stroke-width="6" fill="none">
         <path d="M6 9H39V39H9V21H27"/>
         <line class="lg-accent" x1="27" y1="18" x2="27" y2="30"/>
       </g>
     </svg>
     <span class="au-sidebar__name">O <em>Sistema</em>
       <span class="au-sidebar__tagline">Empresário Estratégico</span>
     </span>
   </a>

   Lockup avulso (login, splash, e-mail-safe): logo-lockup.svg inline com
   class="au-brand-lockup" (+ modificador --mono ou --sm).
   Favicon: <link rel="icon" type="image/svg+xml" href=".../final/favicon.svg">
   ============================================================================ */

/* ===========================================================================
   SÍMBOLO — cor, glow e hover
   =========================================================================== */
.au-brand-symbol {
  color: var(--au-gold);                 /* o traço inteiro herda o ouro   */
  display: block;
  transition: color var(--au-dur-base) var(--au-ease),
              filter var(--au-dur-base) var(--au-ease);
}
/* O tique central (o "coração do cofre") acende um ponto acima do ouro-base */
.au-brand-symbol .lg-accent { stroke: var(--au-gold-bright); }

/* Dentro da sidebar: shell.css já dá 34px + bloom via .au-sidebar__logo.
   O hover da marca inteira intensifica o símbolo — resposta sutil, sem pulo. */
.au-sidebar__brand:hover .au-brand-symbol,
.au-sidebar__brand:focus-visible .au-brand-symbol {
  color: var(--au-gold-bright);
  filter: var(--au-bloom-gold) brightness(1.08);
}
.au-sidebar__brand:focus-visible {
  outline: 2px solid var(--au-gold);
  outline-offset: 2px;
  border-radius: var(--au-radius-sm);
}

/* Sidebar colapsada (só ícones): shell.css esconde o nome; o símbolo basta. */
body.au-nav-collapsed .au-sidebar__logo.au-brand-symbol { margin: 0 auto; }

/* ===========================================================================
   LOCKUP — símbolo + wordmark outlinado (logo-lockup.svg inline)
   =========================================================================== */
.au-brand-lockup {
  color: var(--au-gold);                 /* ouro sobre preto (padrão)      */
  display: block;
  height: 28px;                          /* proporção 183:48 → largura auto */
  width: auto;
}
.au-brand-lockup .lg-accent { stroke: var(--au-gold-bright); }

.au-brand-lockup--sm { height: 20px; }   /* topbar, rodapé                 */
.au-brand-lockup--lg { height: 40px; }   /* login, splash, slides          */

/* Mono: branco sobre escuro / tinta sobre claro — herda o texto do tema.
   O tique acompanha (uma cor só), pra versão carimbo/embosso. */
.au-brand-lockup--mono { color: var(--au-text); }
.au-brand-lockup--mono .lg-accent { stroke: currentColor; }

/* Área de respiro mínima em volta da marca (regra de uso) */
.au-brand-clearspace { padding: 12px; }