@layer base, leiaute, componentes, utilitarios;

:root {
  color-scheme: light;
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --font-family-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.8125rem;
  --font-size-base: 0.9375rem;
  --font-size-md: 1.0625rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 2.5rem;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-leading-tight: 1.2;
  --font-leading-normal: 1.5;
  --font-tracking-tight: -0.02em;
  --size-border-width: 1px;
  --size-focus-width: 3px;
  --size-focus-offset: 2px;
  --size-border-strong: 2px;
  --size-overlay-blur: 2px;
  --size-control-sm: 1.75rem;
  --size-control-md: 2.25rem;
  --size-control-lg: 2.75rem;
  --size-icon-sm: 0.875rem;
  --size-icon-md: 1rem;
  --size-icon-lg: 1.25rem;
  --size-icon-xl: 2rem;
  --size-sidebar-width: 15rem;
  --size-content-max: 120rem;
  --size-prose-max: 42rem;
  --size-dialog-width: 32rem;
  --size-field-inline: 16rem;
  --size-bar-height: 0.5rem;
  --motion-duration-fast: 120ms;
  --motion-duration-base: 200ms;
  --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --z-topbar: 10;
  --z-sidebar: 20;
  --z-dialog: 100;
  --color-bg: #f5f5f7;
  --color-surface: #ffffff;
  --color-surface-sunken: #fafafc;
  --color-surface-hover: #f0f0f3;
  --color-surface-selected: #e8f1fc;
  --color-overlay: rgb(0 0 0 / 0.32);
  --color-text: #1d1d1f;
  --color-text-secondary: #636368;
  --color-text-tertiary: #6e6e73;
  --color-border: #d2d2d7;
  --color-border-subtle: #e5e5ea;
  --color-accent: #0066cc;
  --color-accent-solid: #0071e3;
  --color-accent-solid-hover: #0058b0;
  --color-on-accent: #ffffff;
  --color-focus: #0071e3;
  --color-neutro-fg: #48484a;
  --color-neutro-bg: #f0f0f3;
  --color-neutro-border: #d2d2d7;
  --color-neutro-solid: #8e8e93;
  --color-info-fg: #0058b0;
  --color-info-bg: #e8f1fc;
  --color-info-border: #b3d4f5;
  --color-info-solid: #0071e3;
  --color-sucesso-fg: #1a7f37;
  --color-sucesso-bg: #e8f5ec;
  --color-sucesso-border: #b4dfc0;
  --color-sucesso-solid: #248a3d;
  --color-alerta-fg: #8a5300;
  --color-alerta-bg: #fff4e0;
  --color-alerta-border: #f5d49a;
  --color-alerta-solid: #c77700;
  --color-perigo-fg: #c4001a;
  --color-perigo-bg: #fdecee;
  --color-perigo-border: #f5b8bf;
  --color-perigo-solid: #d70015;
  --color-on-perigo: #ffffff;
  --color-cat-1-fg: #3a3aa8;
  --color-cat-1-bg: #ecebfd;
  --color-cat-1-border: #c9c7f5;
  --color-cat-2-fg: #0b6b66;
  --color-cat-2-bg: #e3f5f3;
  --color-cat-2-border: #aee0db;
  --color-cat-3-fg: #7a2fb0;
  --color-cat-3-bg: #f4e9fc;
  --color-cat-3-border: #dcc0f0;
  --color-cat-4-fg: #a8246a;
  --color-cat-4-bg: #fce8f2;
  --color-cat-4-border: #f1bcd7;
  --color-cat-5-fg: #0a5f86;
  --color-cat-5-bg: #e2f3fb;
  --color-cat-5-border: #a9d9ef;
  --color-cat-6-fg: #7a4a1c;
  --color-cat-6-bg: #f7ede3;
  --color-cat-6-border: #e3cbb3;
  --color-cat-7-fg: #4a5a14;
  --color-cat-7-bg: #f0f4de;
  --color-cat-7-border: #d3dea6;
  --color-cat-8-fg: #5a4a8a;
  --color-cat-8-bg: #efecf8;
  --color-cat-8-border: #d2cbeb;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
  --shadow-md: 0 2px 8px rgb(0 0 0 / 0.06), 0 1px 2px rgb(0 0 0 / 0.04);
  --shadow-lg: 0 12px 32px rgb(0 0 0 / 0.12), 0 2px 6px rgb(0 0 0 / 0.06);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
  color-scheme: dark;
  --color-bg: #000000;
  --color-surface: #1c1c1e;
  --color-surface-sunken: #141416;
  --color-surface-hover: #2c2c2e;
  --color-surface-selected: #0c2340;
  --color-overlay: rgb(0 0 0 / 0.6);
  --color-text: #f5f5f7;
  --color-text-secondary: #a1a1a6;
  --color-text-tertiary: #8e8e93;
  --color-border: #3a3a3c;
  --color-border-subtle: #2c2c2e;
  --color-accent: #4da3ff;
  --color-accent-solid: #0071e3;
  --color-accent-solid-hover: #1a82f0;
  --color-on-accent: #ffffff;
  --color-focus: #4da3ff;
  --color-neutro-fg: #d1d1d6;
  --color-neutro-bg: #2c2c2e;
  --color-neutro-border: #48484a;
  --color-neutro-solid: #8e8e93;
  --color-info-fg: #4da3ff;
  --color-info-bg: #0c2340;
  --color-info-border: #1d4270;
  --color-info-solid: #0a84ff;
  --color-sucesso-fg: #4cd970;
  --color-sucesso-bg: #0f2e18;
  --color-sucesso-border: #1f5530;
  --color-sucesso-solid: #30d158;
  --color-alerta-fg: #ffb340;
  --color-alerta-bg: #33240a;
  --color-alerta-border: #5c4312;
  --color-alerta-solid: #ff9f0a;
  --color-perigo-fg: #ff6961;
  --color-perigo-bg: #3a1215;
  --color-perigo-border: #6b2227;
  --color-perigo-solid: #d70015;
  --color-on-perigo: #ffffff;
  --color-cat-1-fg: #b0b0ff;
  --color-cat-1-bg: #1e1d4a;
  --color-cat-1-border: #3b3a85;
  --color-cat-2-fg: #5fd4cc;
  --color-cat-2-bg: #0b2b29;
  --color-cat-2-border: #1a5c57;
  --color-cat-3-fg: #d9a8ff;
  --color-cat-3-bg: #2d1540;
  --color-cat-3-border: #5a2f7e;
  --color-cat-4-fg: #ff94cb;
  --color-cat-4-bg: #3b1228;
  --color-cat-4-border: #752a50;
  --color-cat-5-fg: #6ccbf7;
  --color-cat-5-bg: #0a2635;
  --color-cat-5-border: #1a5470;
  --color-cat-6-fg: #e3b78c;
  --color-cat-6-bg: #2e2013;
  --color-cat-6-border: #5e452d;
  --color-cat-7-fg: #c3d67a;
  --color-cat-7-bg: #232a0c;
  --color-cat-7-border: #4a5620;
  --color-cat-8-fg: #c4b5f5;
  --color-cat-8-bg: #231d3a;
  --color-cat-8-border: #473d72;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.5);
  --shadow-md: 0 2px 8px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.04);
  --shadow-lg: 0 12px 32px rgb(0 0 0 / 0.7), 0 0 0 1px rgb(255 255 255 / 0.06);
}
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #000000;
  --color-surface: #1c1c1e;
  --color-surface-sunken: #141416;
  --color-surface-hover: #2c2c2e;
  --color-surface-selected: #0c2340;
  --color-overlay: rgb(0 0 0 / 0.6);
  --color-text: #f5f5f7;
  --color-text-secondary: #a1a1a6;
  --color-text-tertiary: #8e8e93;
  --color-border: #3a3a3c;
  --color-border-subtle: #2c2c2e;
  --color-accent: #4da3ff;
  --color-accent-solid: #0071e3;
  --color-accent-solid-hover: #1a82f0;
  --color-on-accent: #ffffff;
  --color-focus: #4da3ff;
  --color-neutro-fg: #d1d1d6;
  --color-neutro-bg: #2c2c2e;
  --color-neutro-border: #48484a;
  --color-neutro-solid: #8e8e93;
  --color-info-fg: #4da3ff;
  --color-info-bg: #0c2340;
  --color-info-border: #1d4270;
  --color-info-solid: #0a84ff;
  --color-sucesso-fg: #4cd970;
  --color-sucesso-bg: #0f2e18;
  --color-sucesso-border: #1f5530;
  --color-sucesso-solid: #30d158;
  --color-alerta-fg: #ffb340;
  --color-alerta-bg: #33240a;
  --color-alerta-border: #5c4312;
  --color-alerta-solid: #ff9f0a;
  --color-perigo-fg: #ff6961;
  --color-perigo-bg: #3a1215;
  --color-perigo-border: #6b2227;
  --color-perigo-solid: #d70015;
  --color-on-perigo: #ffffff;
  --color-cat-1-fg: #b0b0ff;
  --color-cat-1-bg: #1e1d4a;
  --color-cat-1-border: #3b3a85;
  --color-cat-2-fg: #5fd4cc;
  --color-cat-2-bg: #0b2b29;
  --color-cat-2-border: #1a5c57;
  --color-cat-3-fg: #d9a8ff;
  --color-cat-3-bg: #2d1540;
  --color-cat-3-border: #5a2f7e;
  --color-cat-4-fg: #ff94cb;
  --color-cat-4-bg: #3b1228;
  --color-cat-4-border: #752a50;
  --color-cat-5-fg: #6ccbf7;
  --color-cat-5-bg: #0a2635;
  --color-cat-5-border: #1a5470;
  --color-cat-6-fg: #e3b78c;
  --color-cat-6-bg: #2e2013;
  --color-cat-6-border: #5e452d;
  --color-cat-7-fg: #c3d67a;
  --color-cat-7-bg: #232a0c;
  --color-cat-7-border: #4a5620;
  --color-cat-8-fg: #c4b5f5;
  --color-cat-8-bg: #231d3a;
  --color-cat-8-border: #473d72;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.5);
  --shadow-md: 0 2px 8px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.04);
  --shadow-lg: 0 12px 32px rgb(0 0 0 / 0.7), 0 0 0 1px rgb(255 255 255 / 0.06);
}

/* base */
/* Base: reset mínimo, tipografia e foco. Só usa tokens. */

/*
 * Documento FORA de @layer: estilos sem camada vencem estilos em camada, então
 * um CSS externo (visualizador, extensão, embed) com `body { background }` claro
 * derrotaria o fundo do tema escuro e deixaria texto claro sobre fundo claro.
 */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--color-bg);
  color: var(--color-text);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  line-height: var(--font-leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  h1,
  h2,
  h3,
  h4 {
    margin: 0;
    line-height: var(--font-leading-tight);
    letter-spacing: var(--font-tracking-tight);
    font-weight: var(--font-weight-semibold);
  }

  h1 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
  }

  h2 {
    font-size: var(--font-size-xl);
  }

  h3 {
    font-size: var(--font-size-lg);
  }

  h4 {
    font-size: var(--font-size-md);
  }

  p {
    margin: 0;
  }

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

  a:hover {
    text-decoration: underline;
  }

  code,
  kbd,
  pre {
    font-family: var(--font-family-mono);
    font-size: 0.92em;
  }

  img,
  svg {
    display: block;
    max-width: 100%;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
    color: inherit;
  }

  table {
    border-collapse: collapse;
  }

  :focus-visible {
    outline: var(--size-focus-width) solid var(--color-focus);
    outline-offset: var(--size-focus-offset);
  }

  ::selection {
    background: var(--color-surface-selected);
  }

  [hidden] {
    /* biome-ignore lint/complexity/noImportantStyles: [hidden] deve vencer qualquer display de componente */
    display: none !important;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      /* biome-ignore lint/complexity/noImportantStyles: preferência de acessibilidade do usuário prevalece */
      animation-duration: 0.01ms !important;
      /* biome-ignore lint/complexity/noImportantStyles: idem */
      transition-duration: 0.01ms !important;
    }
  }
}

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

  /** Texto longo digitado pelo usuário: preserva parágrafos, largura de leitura. */
  .u-texto-longo {
    max-width: var(--size-prose-max);
    white-space: pre-line;
    line-height: var(--font-leading-normal);
  }

  .u-lista-limpa {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .u-mono {
    font-family: var(--font-family-mono);
  }

  .u-num {
    font-variant-numeric: tabular-nums;
  }

  .u-secundario {
    color: var(--color-text-secondary);
  }

  .u-pequeno {
    font-size: var(--font-size-sm);
  }

  /* Recuo lateral do corpo do cartão, para conteúdo dentro de um cartão `semRecuo`. */
  .u-recuo {
    padding-inline: var(--space-5);
  }
}


/* leiaute */
/* Primitivas de leiaute: pilha, linha, grade. Espaço sempre por token. */
@layer leiaute {
  .l-pilha {
    display: flex;
    flex-direction: column;
    gap: var(--l-gap, var(--space-4));
  }

  .l-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--l-gap, var(--space-3));
  }

  .l-linha--entre {
    justify-content: space-between;
  }

  .l-linha--fim {
    justify-content: flex-end;
  }

  .l-linha--topo {
    align-items: flex-start;
  }

  .l-grade {
    display: grid;
    gap: var(--l-gap, var(--space-4));
    grid-template-columns: repeat(auto-fill, minmax(var(--l-min, 14rem), 1fr));
  }

  .l-gap-1 {
    --l-gap: var(--space-1);
  }
  .l-gap-2 {
    --l-gap: var(--space-2);
  }
  .l-gap-3 {
    --l-gap: var(--space-3);
  }
  .l-gap-4 {
    --l-gap: var(--space-4);
  }
  .l-gap-6 {
    --l-gap: var(--space-6);
  }
  .l-gap-8 {
    --l-gap: var(--space-8);
  }
  .l-gap-12 {
    --l-gap: var(--space-12);
  }

  .l-min-sm {
    --l-min: 11rem;
  }
  .l-min-md {
    --l-min: 16rem;
  }
  .l-min-lg {
    --l-min: 22rem;
  }
}


/* icone */
@layer componentes {
  .ui-icone {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    color: currentColor;
  }

  .ui-icone svg {
    width: 100%;
    height: 100%;
  }

  .ui-icone--sm {
    width: var(--size-icon-sm);
    height: var(--size-icon-sm);
  }

  .ui-icone--md {
    width: var(--size-icon-md);
    height: var(--size-icon-md);
  }

  .ui-icone--lg {
    width: var(--size-icon-lg);
    height: var(--size-icon-lg);
  }

  .ui-icone--xl {
    width: var(--size-icon-xl);
    height: var(--size-icon-xl);
  }

  .ui-icone--girando svg {
    animation: ui-girar 0.9s linear infinite;
  }

  @keyframes ui-girar {
    to {
      transform: rotate(360deg);
    }
  }
}


/* botao */
@layer componentes {
  .ui-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: var(--size-control-md);
    padding: 0 var(--space-4);
    border: var(--size-border-width) solid transparent;
    border-radius: var(--radius-pill);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition:
      background-color var(--motion-duration-fast) var(--motion-ease-standard),
      border-color var(--motion-duration-fast) var(--motion-ease-standard),
      transform var(--motion-duration-fast) var(--motion-ease-standard);
  }

  .ui-botao:hover {
    text-decoration: none;
  }

  .ui-botao:active:not(:disabled) {
    transform: scale(0.98);
  }

  .ui-botao:disabled,
  .ui-botao[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
  }

  /* Variantes */
  .ui-botao--primario {
    background: var(--color-accent-solid);
    color: var(--color-on-accent);
  }

  .ui-botao--primario:hover:not(:disabled) {
    background: var(--color-accent-solid-hover);
  }

  .ui-botao--secundario {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
  }

  .ui-botao--secundario:hover:not(:disabled) {
    background: var(--color-surface-hover);
  }

  .ui-botao--fantasma {
    background: transparent;
    color: var(--color-accent);
  }

  .ui-botao--fantasma:hover:not(:disabled) {
    background: var(--color-surface-hover);
  }

  .ui-botao--perigo {
    background: var(--color-perigo-solid);
    color: var(--color-on-perigo);
  }

  .ui-botao--perigo:hover:not(:disabled) {
    filter: brightness(0.92);
  }

  /* Tamanhos */
  .ui-botao--p {
    height: var(--size-control-sm);
    padding: 0 var(--space-3);
    font-size: var(--font-size-sm);
    gap: var(--space-1);
  }

  .ui-botao--g {
    height: var(--size-control-lg);
    padding: 0 var(--space-6);
    font-size: var(--font-size-md);
  }

  .ui-botao--icone {
    padding: 0;
    width: var(--size-control-md);
  }

  .ui-botao--icone.ui-botao--p {
    width: var(--size-control-sm);
  }

  .ui-botao--icone.ui-botao--g {
    width: var(--size-control-lg);
  }

  .ui-botao--largo {
    width: 100%;
  }

  /* htmx: enquanto a requisição corre */
  .ui-botao.htmx-request {
    opacity: 0.7;
    cursor: progress;
  }

  .ui-grupo-botoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
  }

  .ui-grupo-botoes--fim {
    justify-content: flex-end;
  }
}


/* etiqueta */
@layer componentes {
  .ui-etiqueta {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: var(--space-1);
    min-height: var(--space-6);
    padding: 0 var(--space-2);
    border: var(--size-border-width) solid var(--ui-etq-border);
    border-radius: var(--radius-pill);
    background: var(--ui-etq-bg);
    color: var(--ui-etq-fg);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
  }

  .ui-etiqueta__ponto {
    width: var(--space-2);
    height: var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--ui-etq-solid);
  }

  .ui-etiqueta--neutro,
  .ui-contador--neutro {
    --ui-etq-fg: var(--color-neutro-fg);
    --ui-etq-bg: var(--color-neutro-bg);
    --ui-etq-border: var(--color-neutro-border);
    --ui-etq-solid: var(--color-neutro-solid);
  }

  .ui-etiqueta--info,
  .ui-contador--info {
    --ui-etq-fg: var(--color-info-fg);
    --ui-etq-bg: var(--color-info-bg);
    --ui-etq-border: var(--color-info-border);
    --ui-etq-solid: var(--color-info-solid);
  }

  .ui-etiqueta--sucesso,
  .ui-contador--sucesso {
    --ui-etq-fg: var(--color-sucesso-fg);
    --ui-etq-bg: var(--color-sucesso-bg);
    --ui-etq-border: var(--color-sucesso-border);
    --ui-etq-solid: var(--color-sucesso-solid);
  }

  .ui-etiqueta--alerta,
  .ui-contador--alerta {
    --ui-etq-fg: var(--color-alerta-fg);
    --ui-etq-bg: var(--color-alerta-bg);
    --ui-etq-border: var(--color-alerta-border);
    --ui-etq-solid: var(--color-alerta-solid);
  }

  .ui-etiqueta--perigo,
  .ui-contador--perigo {
    --ui-etq-fg: var(--color-perigo-fg);
    --ui-etq-bg: var(--color-perigo-bg);
    --ui-etq-border: var(--color-perigo-border);
    --ui-etq-solid: var(--color-perigo-solid);
  }

  .ui-contador {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--space-5);
    height: var(--space-5);
    padding: 0 var(--space-1);
    border-radius: var(--radius-pill);
    background: var(--ui-etq-bg);
    color: var(--ui-etq-fg);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
  }

  .ui-etiqueta--cat-1 {
    --ui-etq-fg: var(--color-cat-1-fg);
    --ui-etq-bg: var(--color-cat-1-bg);
    --ui-etq-border: var(--color-cat-1-border);
    --ui-etq-solid: var(--color-cat-1-fg);
  }

  .ui-etiqueta--cat-2 {
    --ui-etq-fg: var(--color-cat-2-fg);
    --ui-etq-bg: var(--color-cat-2-bg);
    --ui-etq-border: var(--color-cat-2-border);
    --ui-etq-solid: var(--color-cat-2-fg);
  }

  .ui-etiqueta--cat-3 {
    --ui-etq-fg: var(--color-cat-3-fg);
    --ui-etq-bg: var(--color-cat-3-bg);
    --ui-etq-border: var(--color-cat-3-border);
    --ui-etq-solid: var(--color-cat-3-fg);
  }

  .ui-etiqueta--cat-4 {
    --ui-etq-fg: var(--color-cat-4-fg);
    --ui-etq-bg: var(--color-cat-4-bg);
    --ui-etq-border: var(--color-cat-4-border);
    --ui-etq-solid: var(--color-cat-4-fg);
  }

  .ui-etiqueta--cat-5 {
    --ui-etq-fg: var(--color-cat-5-fg);
    --ui-etq-bg: var(--color-cat-5-bg);
    --ui-etq-border: var(--color-cat-5-border);
    --ui-etq-solid: var(--color-cat-5-fg);
  }

  .ui-etiqueta--cat-6 {
    --ui-etq-fg: var(--color-cat-6-fg);
    --ui-etq-bg: var(--color-cat-6-bg);
    --ui-etq-border: var(--color-cat-6-border);
    --ui-etq-solid: var(--color-cat-6-fg);
  }

  .ui-etiqueta--cat-7 {
    --ui-etq-fg: var(--color-cat-7-fg);
    --ui-etq-bg: var(--color-cat-7-bg);
    --ui-etq-border: var(--color-cat-7-border);
    --ui-etq-solid: var(--color-cat-7-fg);
  }

  .ui-etiqueta--cat-8 {
    --ui-etq-fg: var(--color-cat-8-fg);
    --ui-etq-bg: var(--color-cat-8-bg);
    --ui-etq-border: var(--color-cat-8-border);
    --ui-etq-solid: var(--color-cat-8-fg);
  }
}


/* cartao */
@layer componentes {
  .ui-cartao {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--color-surface);
    border: var(--size-border-width) solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    color: inherit;
  }

  .ui-cartao--link {
    text-decoration: none;
    transition:
      box-shadow var(--motion-duration-base) var(--motion-ease-standard),
      border-color var(--motion-duration-base) var(--motion-ease-standard);
  }

  .ui-cartao--link:hover {
    text-decoration: none;
    border-color: var(--color-border);
    box-shadow: var(--shadow-md);
  }

  .ui-cartao__cabecalho {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-5) 0;
  }

  .ui-cartao__titulos {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
  }

  .ui-cartao__titulo {
    font-size: var(--font-size-md);
  }

  .ui-cartao__descricao {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
  }

  .ui-cartao__acoes {
    display: flex;
    gap: var(--space-2);
    flex: none;
  }

  .ui-cartao__corpo {
    padding: var(--space-5);
  }

  .ui-cartao__corpo--sem-recuo {
    padding: var(--space-4) 0 0;
  }

  .ui-cartao__rodape {
    padding: var(--space-3) var(--space-5);
    border-top: var(--size-border-width) solid var(--color-border-subtle);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
  }
}


/* aviso */
@layer componentes {
  .ui-aviso {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
    border: var(--size-border-width) solid var(--ui-aviso-border);
    border-radius: var(--radius-md);
    background: var(--ui-aviso-bg);
    color: var(--color-text);
  }

  .ui-aviso__icone {
    color: var(--ui-aviso-fg);
  }

  .ui-aviso__conteudo {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
  }

  .ui-aviso__titulo {
    font-weight: var(--font-weight-semibold);
    color: var(--ui-aviso-fg);
  }

  .ui-aviso__texto {
    font-size: var(--font-size-sm);
    color: var(--color-text);
  }

  .ui-aviso__acoes {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
  }

  .ui-aviso--discreto {
    background: transparent;
    border-width: 0 0 0 var(--size-focus-width);
    border-radius: 0;
    padding: var(--space-1) var(--space-3);
  }

  .ui-aviso--neutro {
    --ui-aviso-fg: var(--color-neutro-fg);
    --ui-aviso-bg: var(--color-neutro-bg);
    --ui-aviso-border: var(--color-neutro-border);
  }

  .ui-aviso--info {
    --ui-aviso-fg: var(--color-info-fg);
    --ui-aviso-bg: var(--color-info-bg);
    --ui-aviso-border: var(--color-info-border);
  }

  .ui-aviso--sucesso {
    --ui-aviso-fg: var(--color-sucesso-fg);
    --ui-aviso-bg: var(--color-sucesso-bg);
    --ui-aviso-border: var(--color-sucesso-border);
  }

  .ui-aviso--alerta {
    --ui-aviso-fg: var(--color-alerta-fg);
    --ui-aviso-bg: var(--color-alerta-bg);
    --ui-aviso-border: var(--color-alerta-border);
  }

  .ui-aviso--perigo {
    --ui-aviso-fg: var(--color-perigo-fg);
    --ui-aviso-bg: var(--color-perigo-bg);
    --ui-aviso-border: var(--color-perigo-border);
  }
}


/* estado-vazio */
@layer componentes {
  .ui-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-12) var(--space-6);
    text-align: center;
  }

  .ui-vazio__icone {
    display: flex;
    padding: var(--space-4);
    border-radius: var(--radius-pill);
    background: var(--color-surface-hover);
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-2);
  }

  .ui-vazio__titulo {
    font-weight: var(--font-weight-semibold);
  }

  .ui-vazio__descricao {
    max-width: var(--size-prose-max);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
  }

  .ui-vazio__acao {
    margin-top: var(--space-3);
  }
}


/* carregando */
@layer componentes {
  .ui-carregando {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
  }

  .ui-carregando.htmx-indicator {
    display: none;
  }

  .htmx-request .ui-carregando.htmx-indicator,
  .ui-carregando.htmx-indicator.htmx-request {
    display: inline-flex;
  }

  .ui-esqueleto {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .ui-esqueleto__linha {
    height: var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--color-surface-hover);
    animation: ui-pulsar 1.4s ease-in-out infinite;
  }

  .ui-esqueleto__linha:last-child {
    width: 60%;
  }

  @keyframes ui-pulsar {
    50% {
      opacity: 0.5;
    }
  }
}


/* dialogo */
@layer componentes {
  .ui-dialogo {
    width: min(var(--size-dialog-width), calc(100vw - var(--space-8)));
    padding: 0;
    border: var(--size-border-width) solid var(--color-border-subtle);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-lg);
  }

  .ui-dialogo::backdrop {
    background: var(--color-overlay);
    backdrop-filter: blur(var(--size-overlay-blur));
  }

  .ui-dialogo__cabecalho {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-5) 0;
  }

  .ui-dialogo__titulo {
    font-size: var(--font-size-lg);
  }

  .ui-dialogo__descricao {
    margin-top: var(--space-1);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
  }

  .ui-dialogo__corpo {
    padding: var(--space-5);
  }

  .ui-dialogo__rodape {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    border-top: var(--size-border-width) solid var(--color-border-subtle);
  }
}


/* formulario */
@layer componentes {
  /* Moldura */
  .ui-campo {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
  }

  .ui-campo__rotulo {
    padding: 0;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
  }

  .ui-campo__obrigatorio {
    margin-left: var(--space-1);
    color: var(--color-perigo-fg);
  }

  .ui-campo__dica {
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
  }

  .ui-campo__erro {
    color: var(--color-perigo-fg);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
  }

  /* Controle de texto / seleção */
  .ui-controle {
    position: relative;
    display: flex;
    align-items: center;
  }

  .ui-entrada {
    width: 100%;
    height: var(--size-control-md);
    padding: 0 var(--space-3);
    border: var(--size-border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--font-size-base);
    transition:
      border-color var(--motion-duration-fast) var(--motion-ease-standard),
      box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
  }

  .ui-entrada::placeholder {
    color: var(--color-text-tertiary);
  }

  .ui-entrada:hover:not(:disabled) {
    border-color: var(--color-text-tertiary);
  }

  .ui-entrada:focus-visible {
    outline: none;
    border-color: var(--color-focus);
    box-shadow: 0 0 0 var(--size-focus-width) var(--color-info-border);
  }

  .ui-entrada:disabled {
    background: var(--color-surface-sunken);
    color: var(--color-text-tertiary);
    cursor: not-allowed;
  }

  .ui-entrada[aria-invalid="true"] {
    border-color: var(--color-perigo-solid);
  }

  .ui-entrada--area {
    height: auto;
    padding: var(--space-2) var(--space-3);
    resize: vertical;
    line-height: var(--font-leading-normal);
  }

  .ui-controle--com-icone .ui-entrada {
    padding-left: var(--space-8);
  }

  .ui-controle__icone {
    position: absolute;
    left: var(--space-3);
    color: var(--color-text-tertiary);
    pointer-events: none;
  }

  .ui-controle--selecao select {
    appearance: none;
    padding-right: var(--space-8);
    cursor: pointer;
  }

  .ui-controle__seta {
    position: absolute;
    right: var(--space-3);
    color: var(--color-text-secondary);
    pointer-events: none;
  }

  /* Caixa, rádio e interruptor */
  .ui-escolha {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .ui-escolha__rotulo {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    cursor: pointer;
    font-size: var(--font-size-base);
  }

  .ui-escolha__dica {
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
  }

  .ui-caixa,
  .ui-radio {
    flex: none;
    width: var(--size-icon-lg);
    height: var(--size-icon-lg);
    margin: 0;
    accent-color: var(--color-accent-solid);
    cursor: pointer;
  }

  .ui-interruptor {
    appearance: none;
    position: relative;
    flex: none;
    width: var(--space-10);
    height: var(--space-6);
    margin: 0;
    border-radius: var(--radius-pill);
    background: var(--color-border);
    cursor: pointer;
    transition: background-color var(--motion-duration-base) var(--motion-ease-standard);
  }

  .ui-interruptor::after {
    content: "";
    position: absolute;
    top: var(--space-1);
    left: var(--space-1);
    width: var(--space-4);
    height: var(--space-4);
    border-radius: var(--radius-pill);
    background: var(--color-on-accent);
    box-shadow: var(--shadow-sm);
    transition: transform var(--motion-duration-base) var(--motion-ease-standard);
  }

  .ui-interruptor:checked {
    background: var(--color-sucesso-solid);
  }

  .ui-interruptor:checked::after {
    transform: translateX(var(--space-4));
  }

  .ui-interruptor:disabled,
  .ui-caixa:disabled,
  .ui-radio:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }

  /* Grupo de opções */
  .ui-opcoes {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
  }

  .ui-opcoes > legend {
    margin-bottom: var(--space-2);
  }

  .ui-opcoes__itens {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .ui-opcoes__itens--colunas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--space-2) var(--space-4);
  }

  .ui-opcoes > .ui-campo__dica,
  .ui-opcoes > .ui-campo__erro {
    margin-top: var(--space-2);
  }

  /* Controle segmentado */
  .ui-segmentado .ui-opcoes__itens {
    display: inline-flex;
    flex-direction: row;
    gap: 0;
    padding: var(--space-1);
    border-radius: var(--radius-md);
    background: var(--color-surface-hover);
  }

  .ui-segmentado .ui-escolha {
    position: relative;
  }

  .ui-segmentado__radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .ui-segmentado .ui-escolha__rotulo {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
  }

  .ui-segmentado__radio:checked + .ui-escolha__rotulo {
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-sm);
  }

  .ui-segmentado__radio:focus-visible + .ui-escolha__rotulo {
    outline: var(--size-focus-width) solid var(--color-focus);
  }

  /* Envio de arquivo */
  .ui-arquivo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-8) var(--space-6);
    border: var(--size-border-strong) dashed var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-sunken);
    color: var(--color-text-secondary);
    text-align: center;
    cursor: pointer;
    transition:
      border-color var(--motion-duration-fast) var(--motion-ease-standard),
      background-color var(--motion-duration-fast) var(--motion-ease-standard);
  }

  .ui-arquivo:hover,
  .ui-arquivo[data-arrastando] {
    border-color: var(--color-accent-solid);
    background: var(--color-surface-selected);
  }

  .ui-arquivo:focus-within {
    outline: var(--size-focus-width) solid var(--color-focus);
    outline-offset: var(--size-focus-offset);
  }

  .ui-arquivo__icone {
    color: var(--color-accent);
  }

  .ui-arquivo__instrucao {
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
  }

  .ui-arquivo__aceita {
    font-size: var(--font-size-xs);
    font-family: var(--font-family-mono);
  }

  .ui-arquivo__nomes:not(:empty) {
    margin-top: var(--space-2);
    color: var(--color-text);
    font-size: var(--font-size-sm);
  }

  /* Barra de filtros */
  .ui-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
  }

  .ui-filtros__campos {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
  }

  .ui-filtros__campos > * {
    min-width: 12rem;
  }

  .ui-filtros__acoes {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  /* Seleção por etiquetas com busca (CampoTags). Sem JS: lista de opções. */
  .ui-tags {
    position: relative;
    display: grid;
    gap: var(--space-2);
    min-inline-size: 12rem;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .ui-tags__opcoes {
    display: grid;
    gap: var(--space-1);
  }

  .ui-tags__opcao {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
  }

  .ui-tags__controle {
    display: none;
  }

  /* Com JS (app.js marca data-tags-pronto) */
  .ui-tags[data-tags-pronto] .ui-tags__controle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    min-height: var(--size-control-md);
    padding: var(--space-1) var(--space-2);
    border: var(--size-border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    cursor: text;
  }

  .ui-tags[data-tags-pronto] .ui-tags__controle:focus-within {
    border-color: var(--color-focus);
    box-shadow: 0 0 0 var(--size-focus-width) var(--color-info-border);
  }

  .ui-tags__selecionadas {
    display: contents;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Etiqueta de texto simples (ex.: curso); opções que já trazem etiqueta própria (campus) ficam como vêm. */
  .ui-tags__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: var(--space-6);
    padding: 0 var(--space-1) 0 var(--space-2);
    border: var(--size-border-width) solid var(--color-neutro-border);
    border-radius: var(--radius-pill);
    background: var(--color-neutro-bg);
    color: var(--color-neutro-fg);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
  }

  .ui-tags__chip:has(.ui-etiqueta) {
    padding: 0;
    border: 0;
    background: none;
  }

  .ui-tags__remover {
    display: inline-grid;
    place-items: center;
    width: var(--space-5);
    height: var(--space-5);
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--motion-duration-fast) var(--motion-ease-standard);
  }

  .ui-tags__chip:hover .ui-tags__remover,
  .ui-tags__remover:focus-visible {
    opacity: 1;
  }

  .ui-tags__remover:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
  }

  @media (hover: none) {
    .ui-tags__remover {
      opacity: 1;
    }
  }

  .ui-tags__busca {
    flex: 1 1 8rem;
    min-width: 8rem;
    height: var(--size-control-sm);
    padding: 0 var(--space-1);
    border: 0;
    background: transparent;
    color: var(--color-text);
    font-size: var(--font-size-sm);
  }

  .ui-tags__busca:focus {
    outline: none;
  }

  .ui-tags[data-tags-pronto] .ui-tags__opcoes {
    position: absolute;
    z-index: 20;
    inset: 100% 0 auto;
    display: none;
    max-height: 18rem;
    margin-top: var(--space-1);
    padding: var(--space-1);
    overflow-y: auto;
    border: var(--size-border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
  }

  .ui-tags[data-tags-pronto][data-aberto] .ui-tags__opcoes {
    display: grid;
  }

  .ui-tags[data-tags-pronto] .ui-tags__opcao {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
  }

  .ui-tags[data-tags-pronto] .ui-tags__opcao:hover,
  .ui-tags[data-tags-pronto] .ui-tags__opcao[data-ativa] {
    background: var(--color-surface-hover);
  }

  .ui-tags[data-tags-pronto] .ui-tags__opcao input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .ui-tags[data-tags-pronto] .ui-tags__opcao:has(input:checked),
  .ui-tags[data-tags-pronto] .ui-tags__opcao[data-oculta],
  .ui-tags[data-tags-pronto] [data-tags-nenhum] {
    display: none;
  }

  .ui-tags__vazio {
    margin: 0;
    padding: var(--space-1) var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
  }

  /* Formulário em linha de tabela (corrigir um item no lugar): campos lado a lado. */
  .ui-form-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .ui-form-linha > .ui-campo {
    flex: 1 1 var(--size-field-inline);
    min-width: min(100%, var(--size-field-inline));
  }
}


/* navegacao */
@layer componentes {
  /* Migalhas */
  .ui-migalhas ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--font-size-sm);
  }

  .ui-migalhas li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-text-secondary);
  }

  .ui-migalhas a {
    color: var(--color-text-secondary);
  }

  .ui-migalhas a:hover {
    color: var(--color-text);
  }

  .ui-migalhas__sep {
    color: var(--color-text-tertiary);
  }

  /* Abas */
  .ui-abas {
    display: flex;
    gap: var(--space-6);
    border-bottom: var(--size-border-width) solid var(--color-border-subtle);
    overflow-x: auto;
  }

  .ui-abas__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) 0;
    border-bottom: var(--size-border-strong) solid transparent;
    margin-bottom: calc(-1 * var(--size-border-width));
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
  }

  .ui-abas__item:hover {
    color: var(--color-text);
    text-decoration: none;
  }

  .ui-abas__item[aria-current="page"] {
    color: var(--color-text);
    border-bottom-color: var(--color-text);
  }

  /* Paginação */
  .ui-paginacao {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .ui-paginacao__resumo {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-variant-numeric: tabular-nums;
  }

  .ui-paginacao__paginas {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ui-paginacao__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--size-control-sm);
    height: var(--size-control-sm);
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-variant-numeric: tabular-nums;
  }

  a.ui-paginacao__item:hover {
    background: var(--color-surface-hover);
    text-decoration: none;
  }

  .ui-paginacao__item[aria-current="page"] {
    background: var(--color-text);
    color: var(--color-surface);
    font-weight: var(--font-weight-semibold);
  }

  .ui-paginacao__item[aria-disabled="true"] {
    color: var(--color-text-tertiary);
    opacity: 0.5;
  }

  .ui-paginacao__reticencias {
    padding: 0 var(--space-1);
    color: var(--color-text-tertiary);
  }

  /* Cabeçalho de página e seção */
  .ui-cabecalho {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .ui-cabecalho__linha {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
  }

  .ui-cabecalho__titulos {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
  }

  .ui-cabecalho__titulo-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
  }

  .ui-cabecalho__titulo {
    font-size: var(--font-size-2xl);
  }

  .ui-cabecalho__subtitulo {
    color: var(--color-text-secondary);
    font-size: var(--font-size-md);
  }

  .ui-cabecalho__acoes,
  .ui-secao__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .ui-secao {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .ui-secao__cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .ui-secao__titulo {
    font-size: var(--font-size-lg);
  }

  .ui-secao__descricao {
    margin-top: var(--space-1);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
  }

  /* Menu suspenso */
  .ui-menu {
    position: relative;
  }

  .ui-menu__gatilho {
    list-style: none;
    cursor: pointer;
    border-radius: var(--radius-md);
  }

  .ui-menu__gatilho::-webkit-details-marker {
    display: none;
  }

  .ui-menu__painel {
    position: absolute;
    z-index: var(--z-dialog);
    top: calc(100% + var(--space-2));
    min-width: 12rem;
    padding: var(--space-1);
    border: var(--size-border-width) solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
  }

  .ui-menu--fim .ui-menu__painel {
    right: 0;
  }

  .ui-menu--inicio .ui-menu__painel {
    left: 0;
  }

  .ui-menu__painel ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ui-menu__cabecalho {
    padding: var(--space-2) var(--space-3);
    border-bottom: var(--size-border-width) solid var(--color-border-subtle);
    margin-bottom: var(--space-1);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
  }

  .ui-menu__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    text-align: left;
    cursor: pointer;
  }

  .ui-menu__item:hover {
    background: var(--color-surface-hover);
    text-decoration: none;
  }

  .ui-menu__rodape {
    margin-top: var(--space-1);
    padding-top: var(--space-1);
    border-top: var(--size-border-width) solid var(--color-border-subtle);
  }

  .ui-menu__rodape form {
    margin: 0;
  }

  .ui-menu__marca {
    margin-left: auto;
    color: var(--color-accent);
  }

  /* Seletor de semestre */
  .ui-semestre {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--size-control-md);
    padding: 0 var(--space-3);
    border: var(--size-border-width) solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    font-size: var(--font-size-sm);
  }

  .ui-semestre:hover {
    background: var(--color-surface-hover);
  }

  .ui-semestre__rotulo {
    color: var(--color-text-secondary);
  }
}


/* tabela */
@layer componentes {
  .ui-tabela {
    width: 100%;
    overflow-x: auto;
  }

  .ui-tabela table {
    width: 100%;
    font-size: var(--font-size-sm);
  }

  .ui-tabela th,
  .ui-tabela td {
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--size-border-width) solid var(--color-border-subtle);
    text-align: left;
    vertical-align: middle;
  }

  .ui-tabela thead th {
    position: sticky;
    top: 0;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
  }

  .ui-tabela tbody th {
    font-weight: var(--font-weight-medium);
  }

  .ui-tabela tbody tr:hover {
    background: var(--color-surface-sunken);
  }

  .ui-tabela tbody tr:last-child > * {
    border-bottom: 0;
  }

  .ui-tabela tfoot td,
  .ui-tabela tfoot th {
    border-top: var(--size-border-width) solid var(--color-border);
    border-bottom: 0;
    font-weight: var(--font-weight-semibold);
  }

  .ui-tabela .ui-tabela__num {
    width: 1%;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .ui-tabela .ui-tabela__sem-quebra {
    width: 1%;
    white-space: nowrap;
  }

  .ui-tabela__ordenar {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
  }

  .ui-tabela__num .ui-tabela__ordenar {
    flex-direction: row-reverse;
  }

  [aria-sort] > .ui-tabela__ordenar {
    color: var(--color-text);
  }

  [aria-sort] > .ui-tabela__ordenar .ui-icone {
    opacity: 1;
  }

  .ui-tabela__seta--asc,
  .ui-tabela__seta--desc,
  [aria-sort] .ui-tabela__seta--nenhuma {
    display: none;
  }

  [aria-sort="ascending"] .ui-tabela__seta--asc,
  [aria-sort="descending"] .ui-tabela__seta--desc {
    display: inline-flex;
  }

  .ui-tabela__ordenar .ui-icone {
    opacity: 0.4;
  }

  .ui-tabela__ordenar:hover,
  .ui-tabela__ordenar--ativa {
    color: var(--color-text);
    text-decoration: none;
  }

  .ui-tabela__ordenar--ativa .ui-icone,
  .ui-tabela__ordenar:hover .ui-icone {
    opacity: 1;
  }

  .ui-tabela.ui-tabela--densa th,
  .ui-tabela.ui-tabela--densa td {
    padding: var(--space-2) var(--space-3);
  }

  .ui-tabela .ui-tabela__vazio {
    padding: var(--space-10) var(--space-4);
    color: var(--color-text-secondary);
    text-align: center;
  }

  /* Estado da linha: marca na borda esquerda, sem pintar a linha inteira. */
  .ui-tabela [class*="ui-tabela__linha--"] > :first-child {
    box-shadow: inset var(--size-focus-width) 0 0 var(--ui-linha-cor);
  }

  .ui-tabela__linha--info {
    --ui-linha-cor: var(--color-info-solid);
  }
  .ui-tabela__linha--sucesso {
    --ui-linha-cor: var(--color-sucesso-solid);
  }
  .ui-tabela__linha--alerta {
    --ui-linha-cor: var(--color-alerta-solid);
  }
  .ui-tabela__linha--perigo {
    --ui-linha-cor: var(--color-perigo-solid);
  }
  .ui-tabela__linha--neutro {
    --ui-linha-cor: var(--color-neutro-solid);
  }
}


/* dados */
@layer componentes {
  /* Lista de descrição */
  .ui-descricao {
    display: grid;
    gap: var(--space-4) var(--space-8);
    margin: 0;
  }

  .ui-descricao--2 {
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  }

  .ui-descricao--3 {
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  }

  .ui-descricao__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
  }

  .ui-descricao--1 .ui-descricao__item {
    display: grid;
    grid-template-columns: minmax(8rem, 14rem) 1fr;
    gap: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: var(--size-border-width) solid var(--color-border-subtle);
  }

  .ui-descricao dt {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
  }

  .ui-descricao dd {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0;
  }

  .ui-descricao__ajuda {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-xs);
  }

  /* Indicador */
  .ui-indicador {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    border: var(--size-border-width) solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    color: var(--color-text);
    container-type: inline-size;
  }

  .ui-indicador--link:hover {
    text-decoration: none;
    border-color: var(--color-border);
    box-shadow: var(--shadow-md);
  }

  .ui-indicador__rotulo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
  }

  .ui-indicador__valor {
    display: flex;
    align-items: baseline;
    gap: var(--space-1);
    /* Números longos (ex.: pessoas informadas na casa dos bilhões) encolhem com o cartão em vez de serem cortados. */
    font-size: clamp(var(--font-size-xl), 12cqi, var(--font-size-3xl));
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--font-tracking-tight);
    line-height: 1;
    overflow-wrap: anywhere;
  }

  .ui-indicador__unidade {
    color: var(--color-text-secondary);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-regular);
    letter-spacing: 0;
  }

  .ui-indicador__detalhe {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
  }

  .ui-indicador__detalhe--sucesso {
    color: var(--color-sucesso-fg);
  }
  .ui-indicador__detalhe--alerta {
    color: var(--color-alerta-fg);
  }
  .ui-indicador__detalhe--perigo {
    color: var(--color-perigo-fg);
  }
  .ui-indicador__detalhe--info {
    color: var(--color-info-fg);
  }

  .ui-indicador__rodape {
    margin-top: auto;
    padding-top: var(--space-2);
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
  }

  /* Barra de progresso e faixa */
  .ui-progresso,
  .ui-faixa {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
    font-size: var(--font-size-sm);
  }

  .ui-progresso__topo,
  .ui-faixa__topo {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    color: var(--color-text-secondary);
  }

  .ui-faixa__topo strong {
    color: var(--color-text);
  }

  .ui-progresso__trilho,
  .ui-faixa__trilho {
    position: relative;
    height: var(--size-bar-height);
    border-radius: var(--radius-pill);
    background: var(--color-surface-hover);
    overflow: hidden;
  }

  .ui-progresso__barra {
    display: block;
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--ui-cor-estado);
  }

  .ui-faixa__trilho {
    overflow: visible;
  }

  .ui-faixa__alvo {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: var(--radius-pill);
    background: var(--color-sucesso-border);
  }

  .ui-faixa__marca {
    position: absolute;
    top: 50%;
    width: var(--space-4);
    height: var(--space-4);
    border: var(--size-border-strong) solid var(--color-surface);
    border-radius: var(--radius-pill);
    background: var(--ui-cor-estado);
    box-shadow: var(--shadow-sm);
    transform: translate(-50%, -50%);
  }

  .ui-faixa__escala {
    position: relative;
    height: var(--space-4);
    color: var(--color-text-tertiary);
    font-size: var(--font-size-xs);
  }

  .ui-faixa__escala span {
    position: absolute;
    transform: translateX(-50%);
  }

  .ui-progresso--neutro,
  .ui-faixa--neutro {
    --ui-cor-estado: var(--color-neutro-solid);
  }
  .ui-progresso--info,
  .ui-faixa--info {
    --ui-cor-estado: var(--color-info-solid);
  }
  .ui-progresso--sucesso,
  .ui-faixa--sucesso {
    --ui-cor-estado: var(--color-sucesso-solid);
  }
  .ui-progresso--alerta,
  .ui-faixa--alerta {
    --ui-cor-estado: var(--color-alerta-solid);
  }
  .ui-progresso--perigo,
  .ui-faixa--perigo {
    --ui-cor-estado: var(--color-perigo-solid);
  }

  /* Linha do tempo */
  .ui-tempo {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ui-tempo__evento {
    position: relative;
    display: flex;
    gap: var(--space-3);
    padding-bottom: var(--space-6);
  }

  .ui-tempo__evento:not(:last-child)::before {
    content: "";
    position: absolute;
    top: var(--space-8);
    bottom: 0;
    left: calc(var(--space-4) - var(--size-border-width) / 2);
    width: var(--size-border-width);
    background: var(--color-border);
  }

  .ui-tempo__marcador {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--space-8);
    height: var(--space-8);
    border-radius: var(--radius-pill);
    background: var(--ui-tempo-bg);
    color: var(--ui-tempo-fg);
  }

  .ui-tempo__evento--neutro {
    --ui-tempo-bg: var(--color-neutro-bg);
    --ui-tempo-fg: var(--color-neutro-fg);
  }
  .ui-tempo__evento--info {
    --ui-tempo-bg: var(--color-info-bg);
    --ui-tempo-fg: var(--color-info-fg);
  }
  .ui-tempo__evento--sucesso {
    --ui-tempo-bg: var(--color-sucesso-bg);
    --ui-tempo-fg: var(--color-sucesso-fg);
  }
  .ui-tempo__evento--alerta {
    --ui-tempo-bg: var(--color-alerta-bg);
    --ui-tempo-fg: var(--color-alerta-fg);
  }
  .ui-tempo__evento--perigo {
    --ui-tempo-bg: var(--color-perigo-bg);
    --ui-tempo-fg: var(--color-perigo-fg);
  }

  .ui-tempo__corpo {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
    padding-top: var(--space-1);
  }

  .ui-tempo__titulo {
    font-weight: var(--font-weight-medium);
  }

  .ui-tempo__meta {
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
  }

  .ui-tempo__descricao {
    font-size: var(--font-size-sm);
  }

  .ui-alteracoes {
    margin-top: var(--space-2);
    font-size: var(--font-size-xs);
  }

  .ui-alteracoes th,
  .ui-alteracoes td {
    padding: var(--space-1) var(--space-3) var(--space-1) 0;
    text-align: left;
  }

  .ui-alteracoes thead th {
    color: var(--color-text-tertiary);
    font-weight: var(--font-weight-medium);
  }

  .ui-alteracoes tbody th {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-regular);
  }

  .ui-alteracoes__antes {
    color: var(--color-perigo-fg);
    text-decoration: line-through;
  }

  .ui-alteracoes__vazio {
    color: var(--color-text-tertiary);
  }

  .ui-alteracoes__depois {
    color: var(--color-sucesso-fg);
  }

  /* Gráfico de série (GraficoSerie): uma linha, eixo único, grade discreta. */
  .ui-grafico {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    font-size: var(--font-size-xs);
  }

  .ui-grafico__grade line {
    stroke: var(--color-border-subtle);
    stroke-width: 1;
  }

  .ui-grafico__grade text,
  .ui-grafico__eixo-x {
    fill: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
  }

  .ui-grafico__linha {
    fill: none;
    stroke: var(--color-accent-solid);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
  }

  .ui-grafico__marca {
    fill: var(--color-accent-solid);
    stroke: var(--color-surface);
    stroke-width: 2;
  }

  .ui-grafico__marca--fragil {
    fill: var(--color-surface);
    stroke: var(--color-accent-solid);
  }

  .ui-grafico__alvo {
    fill: transparent;
  }

  .ui-grafico__rotulo,
  .ui-grafico__dica {
    fill: var(--color-text);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
  }

  .ui-grafico__dica {
    opacity: 0;
    transition: opacity var(--motion-duration-fast) var(--motion-ease-standard);
  }

  .ui-grafico__ponto:hover .ui-grafico__dica,
  .ui-grafico__ponto:focus-visible .ui-grafico__dica {
    opacity: 1;
  }

  .ui-grafico__ponto:focus-visible {
    outline: none;
  }

  .ui-grafico__ponto:focus-visible .ui-grafico__marca {
    stroke: var(--color-focus);
  }

  /* Histograma: barras contíguas por faixa; a cor da barra indica o estado. */
  .ui-histograma {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    font-size: var(--font-size-xs);
  }

  .ui-histograma__alvo {
    fill: transparent;
  }

  .ui-histograma__marca {
    fill: var(--ui-barra-cor, var(--color-info-solid));
    transition: opacity var(--motion-duration-fast) var(--motion-ease-standard);
  }

  .ui-histograma__barra--info {
    --ui-barra-cor: var(--color-info-solid);
  }
  .ui-histograma__barra--sucesso {
    --ui-barra-cor: var(--color-sucesso-solid);
  }
  .ui-histograma__barra--alerta {
    --ui-barra-cor: var(--color-alerta-solid);
  }
  .ui-histograma__barra--perigo {
    --ui-barra-cor: var(--color-perigo-solid);
  }
  .ui-histograma__barra--neutro {
    --ui-barra-cor: var(--color-neutro-solid);
  }

  .ui-histograma__dica {
    fill: var(--color-text);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
    opacity: 0;
    transition: opacity var(--motion-duration-fast) var(--motion-ease-standard);
  }

  .ui-histograma__barra:hover .ui-histograma__dica,
  .ui-histograma__barra:focus-visible .ui-histograma__dica {
    opacity: 1;
  }

  .ui-histograma__barra:hover .ui-histograma__marca {
    opacity: 0.8;
  }

  .ui-histograma__barra:focus-visible {
    outline: none;
  }

  .ui-histograma__barra:focus-visible .ui-histograma__marca {
    stroke: var(--color-focus);
    stroke-width: 2;
  }
}


/* dominio */
@layer componentes {
  .ui-codigo {
    font-family: var(--font-family-mono);
    font-size: 0.92em;
    color: var(--color-text-secondary);
  }

  .ui-rotulo-entidade {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-1);
    color: inherit;
  }

  a.ui-rotulo-entidade:hover span:last-child {
    text-decoration: underline;
  }

  a.ui-rotulo-entidade:hover {
    text-decoration: none;
  }

  .ui-rotulo-entidade__sep {
    color: var(--color-text-tertiary);
  }

  .ui-ref-regra {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0 var(--space-1);
    border-radius: var(--radius-sm);
    background: var(--color-surface-hover);
    color: var(--color-text-secondary);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    white-space: nowrap;
  }

  .ui-ref-regra:hover {
    color: var(--color-accent);
    text-decoration: none;
  }

  /* Declarado × considerado */
  .ui-valor-declarado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
  }

  .ui-valor-declarado__par {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .ui-valor-declarado__rotulo {
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
  }

  .ui-valor-declarado__numero {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
  }

  .ui-valor-declarado__numero--declarado {
    color: var(--color-text-tertiary);
  }

  .ui-valor-declarado__seta {
    color: var(--color-text-tertiary);
  }

  .ui-valor-declarado__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }

  .ui-valor-declarado__metodo {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
  }

  /* Violação */
  .ui-violacao {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: var(--size-border-width) solid var(--color-border-subtle);
  }

  .ui-violacao:last-child {
    border-bottom: 0;
  }

  .ui-violacao__icone--alerta {
    color: var(--color-alerta-fg);
  }

  .ui-violacao__icone--perigo {
    color: var(--color-perigo-fg);
  }

  .ui-violacao__corpo {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
    flex: 1;
  }

  .ui-violacao__mensagem a {
    color: var(--color-text);
  }

  .ui-violacao__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
  }

  .ui-violacao__acoes {
    display: flex;
    gap: var(--space-2);
  }

  .ui-progresso-carga {
    display: grid;
    gap: var(--space-1);
    min-inline-size: 10rem;
  }

  .ui-progresso-carga__texto {
    margin: 0;
    font-size: var(--font-size-sm);
  }
}


/* app-shell */
@layer componentes {
  .ui-shell {
    display: grid;
    grid-template-columns: var(--size-sidebar-width) minmax(0, 1fr);
    min-height: 100vh;
  }

  /* Lateral: fixa no desktop; gaveta (popover) em telas estreitas. */
  .ui-lateral {
    position: sticky;
    inset: auto;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    width: auto;
    height: 100vh;
    margin: 0;
    padding: var(--space-5) var(--space-3);
    overflow-y: auto;
    border: 0;
    border-right: var(--size-border-width) solid var(--color-border-subtle);
    background: var(--color-surface-sunken);
    color: var(--color-text);
    z-index: var(--z-sidebar);
  }

  .ui-lateral__marca {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--space-2);
    color: var(--color-text);
    line-height: var(--font-leading-tight);
  }

  .ui-lateral__marca:hover {
    text-decoration: none;
  }

  .ui-lateral__logo {
    display: inline-flex;
    padding: var(--space-2);
    border-radius: var(--radius-md);
    background: var(--color-accent-solid);
    color: var(--color-on-accent);
  }

  .ui-lateral__sub {
    display: block;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
  }

  .ui-lateral__grupo ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ui-lateral__titulo {
    padding: 0 var(--space-3) var(--space-2);
    color: var(--color-text-tertiary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .ui-lateral__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: var(--font-size-sm);
  }

  .ui-lateral__item .ui-icone {
    color: var(--color-text-secondary);
  }

  .ui-lateral__item .ui-contador {
    margin-left: auto;
  }

  .ui-lateral__item:hover {
    background: var(--color-surface-hover);
    text-decoration: none;
  }

  .ui-lateral__item[aria-current="page"] {
    background: var(--color-surface-selected);
    color: var(--color-info-fg);
    font-weight: var(--font-weight-medium);
  }

  .ui-lateral__item[aria-current="page"] .ui-icone {
    color: var(--color-info-fg);
  }

  /* Área principal */
  .ui-shell__area {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .ui-topo {
    position: sticky;
    top: 0;
    z-index: var(--z-topbar);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: calc(var(--size-control-md) + var(--space-6));
    padding: var(--space-3) var(--space-8);
    border-bottom: var(--size-border-width) solid var(--color-border-subtle);
    background: color-mix(in srgb, var(--color-bg) 82%, transparent);
    backdrop-filter: saturate(180%) blur(var(--space-4));
  }

  .ui-topo__menu {
    display: none;
  }

  .ui-topo__fim {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
  }

  .ui-topo__usuario {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-pill);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
  }

  .ui-topo__usuario:hover {
    background: var(--color-surface-hover);
  }

  .ui-conteudo {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    width: 100%;
    max-width: var(--size-content-max);
    padding: var(--space-8);
  }

  @media (max-width: 60rem) {
    .ui-shell {
      grid-template-columns: minmax(0, 1fr);
    }

    .ui-lateral {
      position: fixed;
      inset: 0 auto 0 0;
      width: min(var(--size-sidebar-width), 85vw);
      box-shadow: var(--shadow-lg);
    }

    .ui-lateral:not(:popover-open) {
      display: none;
    }

    .ui-lateral::backdrop {
      background: var(--color-overlay);
    }

    .ui-topo {
      padding: var(--space-2) var(--space-4);
    }

    .ui-topo__menu {
      display: inline-flex;
    }

    .ui-topo__nome,
    .ui-semestre__rotulo {
      display: none;
    }

    .ui-conteudo {
      padding: var(--space-4);
      gap: var(--space-6);
    }
  }
}


/* pagina-central */
@layer componentes {
  .ui-central {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: var(--space-6) var(--space-4);
  }

  .ui-central__coluna {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    width: min(100%, 24rem);
  }

  .ui-central__marca {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    line-height: var(--font-leading-tight);
  }

  .ui-central__cartao {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-8) var(--space-6);
    border: var(--size-border-width) solid var(--color-border-subtle);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
  }

  .ui-central__cabecalho {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    text-align: center;
  }

  .ui-central__cabecalho h1 {
    font-size: var(--font-size-xl);
  }

  .ui-central__cabecalho p {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
  }

  .ui-central__rodape {
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    text-align: center;
  }
}


/* catalogo */
/* Estilos exclusivos da página de catálogo (/design-system). */
@layer componentes {
  .ds-secao {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    scroll-margin-top: var(--space-16);
  }

  .ds-secao__cabecalho {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-bottom: var(--space-4);
    border-bottom: var(--size-border-width) solid var(--color-border-subtle);
  }

  .ds-secao__cabecalho p {
    max-width: var(--size-prose-max);
    color: var(--color-text-secondary);
  }

  .ds-exemplo {
    display: flex;
    flex-direction: column;
    border: var(--size-border-width) solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    overflow: hidden;
    scroll-margin-top: var(--space-16);
  }

  .ds-exemplo__cabecalho {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-5);
    border-bottom: var(--size-border-width) solid var(--color-border-subtle);
  }

  .ds-exemplo__cabecalho h3 {
    font-size: var(--font-size-md);
  }

  .ds-exemplo__cabecalho p {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
  }

  .ds-exemplo__palco {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-5);
    background: var(--color-bg);
  }

  .ds-exemplo__codigo {
    border-top: var(--size-border-width) solid var(--color-border-subtle);
  }

  .ds-exemplo__codigo summary {
    padding: var(--space-2) var(--space-5);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    cursor: pointer;
  }

  .ds-exemplo__codigo pre {
    margin: 0;
    padding: var(--space-4) var(--space-5);
    overflow-x: auto;
    background: var(--color-surface-sunken);
    font-size: var(--font-size-xs);
    line-height: var(--font-leading-normal);
  }

  /* Amostras de fundamentos */
  .ds-amostras {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: var(--space-3);
  }

  .ds-cor {
    display: flex;
    flex-direction: column;
    border: var(--size-border-width) solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    overflow: hidden;
    font-size: var(--font-size-xs);
  }

  .ds-cor__amostra {
    height: var(--space-12);
    border-bottom: var(--size-border-width) solid var(--color-border-subtle);
  }

  .ds-cor__nome {
    padding: var(--space-2);
    font-family: var(--font-family-mono);
    word-break: break-all;
  }

  .ds-grupo-cores {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .ds-grupo-cores h4 {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
  }

  .ds-escala {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .ds-escala__item {
    display: grid;
    grid-template-columns: 11rem 1fr;
    align-items: center;
    gap: var(--space-4);
  }

  .ds-escala__nome {
    color: var(--color-text-secondary);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
  }

  .ds-espaco {
    height: var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--color-accent-solid);
  }

  .ds-raio,
  .ds-sombra {
    width: var(--space-16);
    height: var(--space-12);
    border: var(--size-border-width) solid var(--color-border);
    background: var(--color-surface);
  }

  .ds-sombra {
    border-color: var(--color-border-subtle);
    border-radius: var(--radius-md);
  }

  .ds-icones {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
    gap: var(--space-2);
  }

  .ds-icone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-2);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--font-size-xs);
  }

  .ds-icone span:last-child {
    color: var(--color-text-secondary);
    font-family: var(--font-family-mono);
  }

  .ds-intro {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: var(--size-prose-max);
  }

  .ds-intro p {
    color: var(--color-text-secondary);
    font-size: var(--font-size-md);
  }

  .ds-principios {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: var(--space-4);
  }

  .ds-principio {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .ds-principio h3 {
    font-size: var(--font-size-md);
  }

  .ds-principio p {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
  }

  .ds-moldura {
    border: var(--size-border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-bg);
  }

  .ds-moldura .ui-central {
    min-height: auto;
  }
}