/* GENERATED por sincronizar-ds.mjs — NÃO EDITAR À MÃO.
   Fonte: potenzia-digital/cleomar-design-system@0aab8e4 03-ui-kit/dist/ct-ui.css
   Para atualizar: git -C <clone> pull && npm run build && node sincronizar-ds.mjs */

/* GENERATED por scripts/build.mjs a partir de 02-design-tokens/*.json — não editar à mão. */

/* ── foundations\base.css */
/* Foundations — base. Requer 02-design-tokens/tokens.css carregado antes. */

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

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

body {
  margin: 0;
  background: var(--ct-bg-canvas);
  color: var(--ct-text-primary);
  font-family: var(--ct-type-body-md-font);
  font-size: var(--ct-type-body-md-size);
  line-height: var(--ct-type-body-md-line);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* Foco: sempre outline (sobrevive a forced-colors), nunca removido sem reposição. */
:focus-visible {
  outline: var(--ct-size-focus-width) solid var(--ct-border-focus);
  outline-offset: var(--ct-size-focus-offset);
}

::selection {
  background: var(--ct-bg-accent);
  color: var(--ct-text-on-accent);
}

.ct-icon {
  display: inline-block;
  flex: none;
  width: var(--ct-size-icon-md);
  height: var(--ct-size-icon-md);
  vertical-align: middle;
}

.ct-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;
}

/* Spinner compartilhado (botão em loading, autocomplete buscando, upload). */
.ct-spinner {
  display: inline-block;
  width: var(--ct-size-icon-sm);
  height: var(--ct-size-icon-sm);
  border: var(--ct-border-width-thick) solid currentColor;
  border-right-color: transparent;
  border-radius: var(--ct-radius-full);
  animation: ct-spin 720ms var(--ct-motion-easing-linear) infinite;
}

@keyframes ct-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* O spinner continua girando devagar: é informação de estado, não decoração. */
  .ct-spinner {
    animation-duration: 1.6s !important;
    animation-iteration-count: infinite !important;
  }
}

@media (forced-colors: active) {
  :focus-visible {
    outline-color: Highlight;
  }
}

/* ── foundations\typography.css */
/* GENERATED por scripts/build.mjs a partir de 02-design-tokens/*.json — não editar à mão. */

.ct-text-display-xl {
  font-family: var(--ct-type-display-xl-font);
  font-weight: var(--ct-type-display-xl-weight);
  font-size: var(--ct-type-display-xl-size);
  line-height: var(--ct-type-display-xl-line);
  letter-spacing: var(--ct-type-display-xl-tracking);
  text-transform: var(--ct-type-display-xl-case);
}

.ct-text-display-lg {
  font-family: var(--ct-type-display-lg-font);
  font-weight: var(--ct-type-display-lg-weight);
  font-size: var(--ct-type-display-lg-size);
  line-height: var(--ct-type-display-lg-line);
  letter-spacing: var(--ct-type-display-lg-tracking);
  text-transform: var(--ct-type-display-lg-case);
}

.ct-text-display-md {
  font-family: var(--ct-type-display-md-font);
  font-weight: var(--ct-type-display-md-weight);
  font-size: var(--ct-type-display-md-size);
  line-height: var(--ct-type-display-md-line);
  letter-spacing: var(--ct-type-display-md-tracking);
  text-transform: var(--ct-type-display-md-case);
}

.ct-text-heading-xl {
  font-family: var(--ct-type-heading-xl-font);
  font-weight: var(--ct-type-heading-xl-weight);
  font-size: var(--ct-type-heading-xl-size);
  line-height: var(--ct-type-heading-xl-line);
  letter-spacing: var(--ct-type-heading-xl-tracking);
  text-transform: var(--ct-type-heading-xl-case);
}

.ct-text-heading-lg {
  font-family: var(--ct-type-heading-lg-font);
  font-weight: var(--ct-type-heading-lg-weight);
  font-size: var(--ct-type-heading-lg-size);
  line-height: var(--ct-type-heading-lg-line);
  letter-spacing: var(--ct-type-heading-lg-tracking);
  text-transform: var(--ct-type-heading-lg-case);
}

.ct-text-heading-md {
  font-family: var(--ct-type-heading-md-font);
  font-weight: var(--ct-type-heading-md-weight);
  font-size: var(--ct-type-heading-md-size);
  line-height: var(--ct-type-heading-md-line);
  letter-spacing: var(--ct-type-heading-md-tracking);
  text-transform: var(--ct-type-heading-md-case);
}

.ct-text-heading-sm {
  font-family: var(--ct-type-heading-sm-font);
  font-weight: var(--ct-type-heading-sm-weight);
  font-size: var(--ct-type-heading-sm-size);
  line-height: var(--ct-type-heading-sm-line);
  letter-spacing: var(--ct-type-heading-sm-tracking);
  text-transform: var(--ct-type-heading-sm-case);
}

.ct-text-heading-xs {
  font-family: var(--ct-type-heading-xs-font);
  font-weight: var(--ct-type-heading-xs-weight);
  font-size: var(--ct-type-heading-xs-size);
  line-height: var(--ct-type-heading-xs-line);
  letter-spacing: var(--ct-type-heading-xs-tracking);
  text-transform: var(--ct-type-heading-xs-case);
}

.ct-text-body-lg {
  font-family: var(--ct-type-body-lg-font);
  font-weight: var(--ct-type-body-lg-weight);
  font-size: var(--ct-type-body-lg-size);
  line-height: var(--ct-type-body-lg-line);
  letter-spacing: var(--ct-type-body-lg-tracking);
  text-transform: var(--ct-type-body-lg-case);
}

.ct-text-body-md {
  font-family: var(--ct-type-body-md-font);
  font-weight: var(--ct-type-body-md-weight);
  font-size: var(--ct-type-body-md-size);
  line-height: var(--ct-type-body-md-line);
  letter-spacing: var(--ct-type-body-md-tracking);
  text-transform: var(--ct-type-body-md-case);
}

.ct-text-body-sm {
  font-family: var(--ct-type-body-sm-font);
  font-weight: var(--ct-type-body-sm-weight);
  font-size: var(--ct-type-body-sm-size);
  line-height: var(--ct-type-body-sm-line);
  letter-spacing: var(--ct-type-body-sm-tracking);
  text-transform: var(--ct-type-body-sm-case);
}

.ct-text-caption {
  font-family: var(--ct-type-caption-font);
  font-weight: var(--ct-type-caption-weight);
  font-size: var(--ct-type-caption-size);
  line-height: var(--ct-type-caption-line);
  letter-spacing: var(--ct-type-caption-tracking);
  text-transform: var(--ct-type-caption-case);
}

.ct-text-label-lg {
  font-family: var(--ct-type-label-lg-font);
  font-weight: var(--ct-type-label-lg-weight);
  font-size: var(--ct-type-label-lg-size);
  line-height: var(--ct-type-label-lg-line);
  letter-spacing: var(--ct-type-label-lg-tracking);
  text-transform: var(--ct-type-label-lg-case);
}

.ct-text-label-md {
  font-family: var(--ct-type-label-md-font);
  font-weight: var(--ct-type-label-md-weight);
  font-size: var(--ct-type-label-md-size);
  line-height: var(--ct-type-label-md-line);
  letter-spacing: var(--ct-type-label-md-tracking);
  text-transform: var(--ct-type-label-md-case);
}

.ct-text-label-sm {
  font-family: var(--ct-type-label-sm-font);
  font-weight: var(--ct-type-label-sm-weight);
  font-size: var(--ct-type-label-sm-size);
  line-height: var(--ct-type-label-sm-line);
  letter-spacing: var(--ct-type-label-sm-tracking);
  text-transform: var(--ct-type-label-sm-case);
}

.ct-text-overline {
  font-family: var(--ct-type-overline-font);
  font-weight: var(--ct-type-overline-weight);
  font-size: var(--ct-type-overline-size);
  line-height: var(--ct-type-overline-line);
  letter-spacing: var(--ct-type-overline-tracking);
  text-transform: var(--ct-type-overline-case);
}

.ct-text-button {
  font-family: var(--ct-type-button-font);
  font-weight: var(--ct-type-button-weight);
  font-size: var(--ct-type-button-size);
  line-height: var(--ct-type-button-line);
  letter-spacing: var(--ct-type-button-tracking);
  text-transform: var(--ct-type-button-case);
}

.ct-text-data {
  font-family: var(--ct-type-data-font);
  font-weight: var(--ct-type-data-weight);
  font-size: var(--ct-type-data-size);
  line-height: var(--ct-type-data-line);
  letter-spacing: var(--ct-type-data-tracking);
  text-transform: var(--ct-type-data-case);
}

.ct-text-code {
  font-family: var(--ct-type-code-font);
  font-weight: var(--ct-type-code-weight);
  font-size: var(--ct-type-code-size);
  line-height: var(--ct-type-code-line);
  letter-spacing: var(--ct-type-code-tracking);
  text-transform: var(--ct-type-code-case);
}

.ct-text-data { font-variant-numeric: tabular-nums lining-nums; }

/* ── foundations\layout.css */
/* Foundations — containers e grid. Breakpoints: md 768px, lg 1024px, xl 1280px
   (literais porque var() não funciona em @media — espelham breakpoints.json). */

.ct-container {
  width: 100%;
  max-width: calc(var(--ct-container-default) + 2 * var(--ct-container-padding));
  margin-inline: auto;
  padding-inline: var(--ct-container-padding);
}
.ct-container--narrow { max-width: calc(var(--ct-container-narrow) + 2 * var(--ct-container-padding)); }
.ct-container--wide   { max-width: calc(var(--ct-container-wide) + 2 * var(--ct-container-padding)); }

/* Grid: 4 → 8 → 12 colunas. Filhos ocupam a largura toda por padrão;
   defina --span-sm / --span-md / --span-lg no filho para mudar. */
.ct-grid {
  --_cols: var(--ct-grid-columns-sm);
  display: grid;
  grid-template-columns: repeat(var(--_cols), minmax(0, 1fr));
  gap: var(--ct-gap-lg) var(--ct-grid-gutter-sm);
}
.ct-grid > * { grid-column: span min(var(--span-sm, 4), 4); }

@media (min-width: 768px) {
  .ct-grid { --_cols: var(--ct-grid-columns-md); column-gap: var(--ct-grid-gutter-md); }
  .ct-grid > * { grid-column: span min(var(--span-md, 8), 8); }
}
@media (min-width: 1024px) {
  .ct-grid { --_cols: var(--ct-grid-columns-lg); column-gap: var(--ct-grid-gutter-lg); }
  .ct-grid > * { grid-column: span min(var(--span-lg, 12), 12); }
}
@media (min-width: 1280px) {
  .ct-grid { column-gap: var(--ct-grid-gutter-xl); }
}

.ct-section { padding-block: var(--ct-section-y); }

/* ── _shared\popover.css */
/* Superfície flutuante + listbox compartilhados por select customizado, combobox,
   autocomplete, time picker e date picker. */

.ct-popover {
  position: absolute;
  z-index: var(--ct-z-popover);
  top: calc(100% + var(--ct-space-1));
  left: 0;
  min-width: 100%;
  padding: var(--ct-space-1);
  background: var(--ct-bg-surface-raised);
  border: var(--ct-border-width-hairline) solid var(--ct-border-default);
  border-radius: var(--ct-radius-overlay);
  box-shadow: var(--ct-shadow-2);
  animation: ct-pop-in var(--ct-motion-duration-moderate) var(--ct-motion-easing-enter);
}
.ct-popover.is-above { top: auto; bottom: calc(100% + var(--ct-space-1)); }
.ct-popover.is-end { left: auto; right: 0; }

@keyframes ct-pop-in {
  from { opacity: 0; transform: translateY(calc(-1 * var(--ct-motion-distance-sm))); }
}

.ct-listbox {
  margin: 0;
  list-style: none;
  max-height: calc(var(--ct-size-control-md) * 6.5);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ct-option {
  display: flex;
  align-items: center;
  gap: var(--ct-gap-sm);
  min-height: var(--ct-size-control-md);
  padding: var(--ct-space-2) var(--ct-space-3);
  border-radius: var(--ct-radius-sm);
  color: var(--ct-text-primary);
  font-family: var(--ct-type-body-md-font);
  font-size: var(--ct-type-body-md-size);
  line-height: var(--ct-font-line-height-snug);
  cursor: pointer;
  user-select: none;
}
.ct-option.is-active { background: var(--ct-state-hover); }
.ct-option[aria-selected="true"] { font-weight: var(--ct-font-weight-semibold); }
.ct-option[aria-disabled="true"] { color: var(--ct-text-disabled); cursor: not-allowed; }
.ct-option > .ct-icon:first-child { color: var(--ct-text-tertiary); }

.ct-option__body { display: flex; flex-direction: column; min-width: 0; }
.ct-option__desc {
  color: var(--ct-text-tertiary);
  font-size: var(--ct-font-size-sm);
  font-weight: var(--ct-font-weight-regular);
}
.ct-option__check { margin-left: auto; color: var(--ct-text-primary); visibility: hidden; }
.ct-option[aria-selected="true"] .ct-option__check { visibility: visible; }

.ct-option mark {
  background: none;
  color: inherit;
  font-weight: var(--ct-font-weight-semibold);
  text-decoration: underline;
  text-decoration-color: var(--ct-border-accent);
  text-decoration-thickness: var(--ct-border-width-thick);
  text-underline-offset: 0.2em;
}

.ct-listbox__group {
  padding: var(--ct-space-3) var(--ct-space-3) var(--ct-space-1);
  color: var(--ct-text-tertiary);
  font-family: var(--ct-type-overline-font);
  font-size: var(--ct-font-size-xs);
  font-weight: var(--ct-type-overline-weight);
  letter-spacing: var(--ct-type-overline-tracking);
  text-transform: uppercase;
}

.ct-listbox__empty {
  padding: var(--ct-space-3);
  color: var(--ct-text-tertiary);
  font-size: var(--ct-font-size-sm);
}

@media (forced-colors: active) {
  .ct-option.is-active { outline: var(--ct-size-focus-width) solid Highlight; }
}

/* ── button\button.css */
/* Button — ação. Variantes: primary (padrão), secondary, tertiary, ghost, danger.
   Tamanhos: sm 36 · md 44 · lg 52. Rótulo em Barlow Condensed caixa alta. */

.ct-btn {
  --_bg: var(--ct-action-primary-bg);
  --_bg-hover: var(--ct-action-primary-bg-hover);
  --_bg-pressed: var(--ct-action-primary-bg-pressed);
  --_fg: var(--ct-action-primary-fg);
  --_bd: transparent;
  --_h: var(--ct-size-control-md);
  --_px: var(--ct-space-6);
  --_fs: var(--ct-font-size-md);
  --_icon: var(--ct-size-icon-md);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ct-gap-sm);
  min-height: var(--_h);
  padding: 0 var(--_px);
  border: var(--ct-border-width-thick) solid var(--_bd);
  border-radius: var(--ct-radius-control);
  background: var(--_bg);
  color: var(--_fg);
  font-family: var(--ct-type-button-font);
  font-weight: var(--ct-type-button-weight);
  font-size: var(--_fs);
  line-height: var(--ct-type-button-line);
  letter-spacing: var(--ct-type-button-tracking);
  text-transform: var(--ct-type-button-case);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: var(--ct-transition-colors);
}
.ct-btn:hover { background: var(--_bg-hover); }
.ct-btn:active { background: var(--_bg-pressed); }
.ct-btn .ct-icon { width: var(--_icon); height: var(--_icon); }

.ct-btn--secondary {
  --_bg: var(--ct-action-secondary-bg);
  --_bg-hover: var(--ct-action-secondary-bg-hover);
  --_bg-pressed: var(--ct-action-secondary-bg-pressed);
  --_fg: var(--ct-action-secondary-fg);
}
.ct-btn--tertiary {
  --_bg: transparent;
  --_bg-hover: var(--ct-state-hover);
  --_bg-pressed: var(--ct-state-pressed);
  --_fg: var(--ct-action-neutral-fg);
  --_bd: var(--ct-action-neutral-fg);
}
.ct-btn--ghost {
  --_bg: transparent;
  --_bg-hover: var(--ct-state-hover);
  --_bg-pressed: var(--ct-state-pressed);
  --_fg: var(--ct-action-neutral-fg);
  --_px: var(--ct-space-3);
}
.ct-btn--danger {
  --_bg: var(--ct-action-danger-bg);
  --_bg-hover: var(--ct-action-danger-bg-hover);
  --_bg-pressed: var(--ct-action-danger-bg-hover);
  --_fg: var(--ct-action-danger-fg);
}

.ct-btn--sm { --_h: var(--ct-size-control-sm); --_px: var(--ct-space-4); --_fs: var(--ct-font-size-sm); --_icon: var(--ct-size-icon-sm); }
.ct-btn--lg { --_h: var(--ct-size-control-lg); --_px: var(--ct-space-8); --_fs: var(--ct-font-size-lg); }
.ct-btn--ghost.ct-btn--sm { --_px: var(--ct-space-2); }
.ct-btn--block { display: flex; width: 100%; }

/* Em touch, o botão sm ganha área de toque invisível até 44px. */
@media (pointer: coarse) {
  .ct-btn--sm::before {
    content: "";
    position: absolute;
    inset: calc((var(--ct-size-target-min) - var(--ct-size-control-sm)) / -2) 0;
  }
}

.ct-btn:is(:disabled, [aria-disabled="true"]) {
  --_bg: var(--ct-action-disabled-bg);
  --_bg-hover: var(--_bg);
  --_bg-pressed: var(--_bg);
  --_fg: var(--ct-action-disabled-fg);
  cursor: not-allowed;
}
.ct-btn--tertiary:is(:disabled, [aria-disabled="true"]) { --_bg: transparent; --_bd: var(--ct-border-default); }
.ct-btn--ghost:is(:disabled, [aria-disabled="true"]) { --_bg: transparent; }

/* Loading: mantém a largura, esconde rótulo e ícones, mostra spinner na cor do texto. */
.ct-btn[aria-busy="true"] { color: transparent; pointer-events: none; }
.ct-btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--_icon);
  height: var(--_icon);
  margin: auto;
  border: var(--ct-border-width-thick) solid var(--_fg);
  border-right-color: transparent;
  border-radius: var(--ct-radius-full);
  animation: ct-spin 720ms var(--ct-motion-easing-linear) infinite;
}

.ct-btn-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ct-gap-sm); }

/* ── icon-button\icon-button.css */
/* Icon Button — ação só com ícone. aria-label obrigatório.
   Variantes: ghost (padrão), tertiary, secondary, primary. Toggle via aria-pressed. */

.ct-icon-btn {
  --_bg: transparent;
  --_bg-hover: var(--ct-state-hover);
  --_bg-pressed: var(--ct-state-pressed);
  --_fg: var(--ct-action-neutral-fg);
  --_bd: transparent;
  --_size: var(--ct-size-control-md);
  --_icon: var(--ct-size-icon-md);

  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--_size);
  height: var(--_size);
  padding: 0;
  border: var(--ct-border-width-thick) solid var(--_bd);
  border-radius: var(--ct-radius-control);
  background: var(--_bg);
  color: var(--_fg);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: var(--ct-transition-colors);
}
.ct-icon-btn:hover { background: var(--_bg-hover); }
.ct-icon-btn:active { background: var(--_bg-pressed); }
.ct-icon-btn .ct-icon { width: var(--_icon); height: var(--_icon); }

.ct-icon-btn--tertiary { --_bd: var(--ct-border-control); }
.ct-icon-btn--secondary {
  --_bg: var(--ct-action-secondary-bg);
  --_bg-hover: var(--ct-action-secondary-bg-hover);
  --_bg-pressed: var(--ct-action-secondary-bg-pressed);
  --_fg: var(--ct-action-secondary-fg);
}
.ct-icon-btn--primary {
  --_bg: var(--ct-action-primary-bg);
  --_bg-hover: var(--ct-action-primary-bg-hover);
  --_bg-pressed: var(--ct-action-primary-bg-pressed);
  --_fg: var(--ct-action-primary-fg);
}

.ct-icon-btn--sm { --_size: var(--ct-size-control-sm); --_icon: var(--ct-size-icon-sm); }
.ct-icon-btn--lg { --_size: var(--ct-size-control-lg); --_icon: var(--ct-size-icon-lg); }

@media (pointer: coarse) {
  .ct-icon-btn--sm::before {
    content: "";
    position: absolute;
    inset: calc((var(--ct-size-target-min) - var(--ct-size-control-sm)) / -2);
  }
}

.ct-icon-btn[aria-pressed="true"] {
  --_bg: var(--ct-state-selected);
  --_bg-hover: var(--ct-state-selected);
  --_fg: var(--ct-text-accent);
}

.ct-icon-btn:is(:disabled, [aria-disabled="true"]) {
  --_bg-hover: var(--_bg);
  --_bg-pressed: var(--_bg);
  --_fg: var(--ct-action-disabled-fg);
  cursor: not-allowed;
}
.ct-icon-btn:is(.ct-icon-btn--primary, .ct-icon-btn--secondary):is(:disabled, [aria-disabled="true"]) { --_bg: var(--ct-action-disabled-bg); }
.ct-icon-btn--tertiary:is(:disabled, [aria-disabled="true"]) { --_bd: var(--ct-border-default); }

/* ── link\link.css */
/* Link — navegação. Inline (sublinhado sempre), standalone (com seta), neutral.
   Em blocos marinho, aplique data-theme="dark" no bloco: o link troca de cor sozinho. */

.ct-link {
  color: var(--ct-text-link);
  text-decoration-line: underline;
  text-decoration-thickness: var(--ct-border-width-hairline);
  text-decoration-color: currentColor;
  text-underline-offset: 0.2em;
  border-radius: var(--ct-radius-xs);
  cursor: pointer;
  transition: var(--ct-transition-colors), text-decoration-thickness var(--ct-motion-duration-fast) var(--ct-motion-easing-standard);
}
.ct-link:hover { color: var(--ct-text-link-hover); text-decoration-thickness: var(--ct-border-width-thick); }
.ct-link .ct-icon { width: 0.875em; height: 0.875em; margin-left: var(--ct-space-0-5); vertical-align: -0.05em; }

.ct-link--neutral { color: var(--ct-text-primary); }
.ct-link--neutral:hover { color: var(--ct-text-accent); }

.ct-link--standalone {
  display: inline-flex;
  align-items: center;
  gap: var(--ct-gap-xs);
  min-height: var(--ct-size-target-min-dense);
  font-family: var(--ct-type-label-lg-font);
  font-weight: var(--ct-type-label-lg-weight);
  text-decoration-line: none;
}
.ct-link--standalone:hover { text-decoration-line: underline; }
.ct-link--standalone .ct-icon {
  width: var(--ct-size-icon-sm);
  height: var(--ct-size-icon-sm);
  margin: 0;
  transition: transform var(--ct-motion-duration-fast) var(--ct-motion-easing-standard);
}
.ct-link--standalone:hover .ct-icon { transform: translateX(var(--ct-space-0-5)); }

.ct-link[aria-disabled="true"] {
  color: var(--ct-text-disabled);
  text-decoration-line: none;
  pointer-events: none;
}

/* ── input\input.css */
/* Field (label + controle + hint/erro) e Input. .ct-field é reutilizado por textarea,
   select, search, date/time picker, combobox e autocomplete. */

.ct-field {
  display: flex;
  flex-direction: column;
  gap: var(--ct-gap-sm);
  min-width: 0;
}

.ct-field__label {
  display: flex;
  align-items: baseline;
  gap: var(--ct-gap-xs);
  color: var(--ct-text-primary);
  font-family: var(--ct-type-label-md-font);
  font-size: var(--ct-type-label-md-size);
  font-weight: var(--ct-type-label-md-weight);
  line-height: var(--ct-type-label-md-line);
}
.ct-field__optional { color: var(--ct-text-tertiary); font-weight: var(--ct-font-weight-regular); }

.ct-field__hint,
.ct-field__error,
.ct-field__success {
  display: flex;
  align-items: flex-start;
  gap: var(--ct-gap-xs);
  margin-top: calc(-1 * var(--ct-space-1));
  font-family: var(--ct-type-body-sm-font);
  font-size: var(--ct-type-body-sm-size);
  line-height: var(--ct-type-body-sm-line);
  color: var(--ct-text-tertiary);
}
.ct-field__error { color: var(--ct-feedback-error-fg); }
.ct-field__success { color: var(--ct-feedback-success-fg); }
.ct-field__error .ct-icon,
.ct-field__success .ct-icon { width: var(--ct-size-icon-sm); height: var(--ct-size-icon-sm); margin-top: var(--ct-space-0-5); }

.ct-field__footer { display: flex; align-items: flex-start; gap: var(--ct-gap-md); margin-top: calc(-1 * var(--ct-space-1)); }
.ct-field__footer > .ct-field__hint,
.ct-field__footer > .ct-field__error { margin-top: 0; }
.ct-field__counter {
  margin-left: auto;
  color: var(--ct-text-tertiary);
  font-size: var(--ct-font-size-xs);
  line-height: var(--ct-type-body-sm-line);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ct-field__counter.is-over { color: var(--ct-feedback-error-fg); font-weight: var(--ct-font-weight-semibold); }

/* Input: wrapper com borda; o <input> interno é transparente. Permite ícones e ações. */
.ct-input {
  --_h: var(--ct-size-control-md);
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--ct-gap-sm);
  min-height: var(--_h);
  padding: 0 var(--ct-space-3);
  background: var(--ct-bg-surface);
  border: var(--ct-border-width-hairline) solid var(--ct-border-control);
  border-radius: var(--ct-radius-control);
  color: var(--ct-text-primary);
  cursor: text;
  transition: var(--ct-transition-colors);
}
.ct-input:hover { border-color: var(--ct-border-control-hover); }
.ct-input:focus-within {
  border-color: var(--ct-border-focus);
  box-shadow: 0 0 0 var(--ct-border-width-hairline) var(--ct-border-focus);
}

.ct-input__control {
  flex: 1;
  min-width: 0;
  height: calc(var(--_h) - 2 * var(--ct-border-width-hairline));
  padding: 0 var(--ct-space-1);
  border: 0;
  background: transparent;
  color: inherit;
  font-family: var(--ct-type-body-md-font);
  font-size: var(--ct-type-body-md-size);
  outline: none;
}
.ct-input__control::placeholder { color: var(--ct-text-placeholder); opacity: 1; }

.ct-input > .ct-icon { color: var(--ct-text-tertiary); }
.ct-input__affix { color: var(--ct-text-tertiary); font-size: var(--ct-font-size-md); white-space: nowrap; }

.ct-input__action {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--ct-space-8);
  height: var(--ct-space-8);
  margin-right: calc(-1 * var(--ct-space-1));
  padding: 0;
  border: 0;
  border-radius: var(--ct-radius-sm);
  background: transparent;
  color: var(--ct-text-secondary);
  cursor: pointer;
  transition: var(--ct-transition-colors);
}
.ct-input__action:hover { background: var(--ct-state-hover); color: var(--ct-text-primary); }
.ct-input__action .ct-icon { width: var(--ct-size-icon-md); height: var(--ct-size-icon-md); transition: transform var(--ct-motion-duration-base) var(--ct-motion-easing-standard); }

.ct-input--sm { --_h: var(--ct-size-control-sm); }
.ct-input--sm .ct-input__control { font-size: var(--ct-font-size-sm); }
.ct-input--lg { --_h: var(--ct-size-control-lg); padding: 0 var(--ct-space-4); }

/* Estados */
.ct-input:has(> .ct-input__control[aria-invalid="true"]),
.ct-input.is-invalid { border-color: var(--ct-feedback-error-fg); }
.ct-input:has(> .ct-input__control[aria-invalid="true"]):focus-within,
.ct-input.is-invalid:focus-within { box-shadow: 0 0 0 var(--ct-border-width-hairline) var(--ct-feedback-error-fg); }

.ct-input.is-success { border-color: var(--ct-feedback-success-fg); }
.ct-input.is-success > .ct-icon:last-child { color: var(--ct-feedback-success-fg); }

.ct-input:has(> .ct-input__control:read-only:not(:disabled)) {
  background: var(--ct-bg-surface-subtle);
  border-color: var(--ct-border-default);
}

.ct-input:has(> .ct-input__control:disabled),
.ct-input.is-disabled {
  background: var(--ct-bg-disabled);
  border-color: var(--ct-border-default);
  color: var(--ct-text-disabled);
  cursor: not-allowed;
}
.ct-input__control:disabled { cursor: not-allowed; }
.ct-input__control:disabled::placeholder { color: var(--ct-text-disabled); }
.ct-input:has(> .ct-input__control:disabled) > .ct-icon { color: var(--ct-text-disabled); }

/* ── textarea\textarea.css */
/* Textarea — texto longo. Mesmos estados do Input; contador opcional (textarea.js). */

.ct-textarea {
  display: block;
  width: 100%;
  min-height: calc(var(--ct-size-control-md) * 2.5);
  padding: var(--ct-space-3) var(--ct-space-4);
  background: var(--ct-bg-surface);
  border: var(--ct-border-width-hairline) solid var(--ct-border-control);
  border-radius: var(--ct-radius-control);
  color: var(--ct-text-primary);
  font-family: var(--ct-type-body-md-font);
  font-size: var(--ct-type-body-md-size);
  line-height: var(--ct-type-body-md-line);
  resize: vertical;
  transition: var(--ct-transition-colors);
}
.ct-textarea::placeholder { color: var(--ct-text-placeholder); opacity: 1; }
.ct-textarea:hover { border-color: var(--ct-border-control-hover); }
.ct-textarea:focus-visible {
  outline: none;
  border-color: var(--ct-border-focus);
  box-shadow: 0 0 0 var(--ct-border-width-hairline) var(--ct-border-focus);
}
.ct-textarea[aria-invalid="true"] { border-color: var(--ct-feedback-error-fg); }
.ct-textarea[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 var(--ct-border-width-hairline) var(--ct-feedback-error-fg); }
.ct-textarea:read-only:not(:disabled) { background: var(--ct-bg-surface-subtle); border-color: var(--ct-border-default); resize: none; }
.ct-textarea:disabled {
  background: var(--ct-bg-disabled);
  border-color: var(--ct-border-default);
  color: var(--ct-text-disabled);
  cursor: not-allowed;
  resize: none;
}
.ct-textarea--auto { field-sizing: content; max-height: calc(var(--ct-size-control-md) * 8); }

/* ── select\select.css */
/* Select — <select> nativo estilizado. Para busca dentro das opções, use Combobox. */

.ct-select {
  --_h: var(--ct-size-control-md);
  position: relative;
  display: grid;
  align-items: center;
}

.ct-select__control {
  grid-area: 1 / 1;
  width: 100%;
  height: var(--_h);
  padding: 0 var(--ct-space-10) 0 var(--ct-space-4);
  appearance: none;
  background: var(--ct-bg-surface);
  border: var(--ct-border-width-hairline) solid var(--ct-border-control);
  border-radius: var(--ct-radius-control);
  color: var(--ct-text-primary);
  font-family: var(--ct-type-body-md-font);
  font-size: var(--ct-type-body-md-size);
  cursor: pointer;
  transition: var(--ct-transition-colors);
}
.ct-select__control:hover { border-color: var(--ct-border-control-hover); }
.ct-select__control:focus-visible {
  outline: none;
  border-color: var(--ct-border-focus);
  box-shadow: 0 0 0 var(--ct-border-width-hairline) var(--ct-border-focus);
}
.ct-select__control:has(option[value=""]:checked) { color: var(--ct-text-placeholder); }
.ct-select__control option { color: var(--ct-text-primary); background: var(--ct-bg-surface-raised); }

.ct-select > .ct-icon {
  grid-area: 1 / 1;
  justify-self: end;
  margin-right: var(--ct-space-3);
  color: var(--ct-text-secondary);
  pointer-events: none;
}

.ct-select--sm { --_h: var(--ct-size-control-sm); }
.ct-select--sm .ct-select__control { font-size: var(--ct-font-size-sm); padding-left: var(--ct-space-3); }
.ct-select--lg { --_h: var(--ct-size-control-lg); }

.ct-select__control[aria-invalid="true"] { border-color: var(--ct-feedback-error-fg); }
.ct-select__control:disabled {
  background: var(--ct-bg-disabled);
  border-color: var(--ct-border-default);
  color: var(--ct-text-disabled);
  cursor: not-allowed;
}
.ct-select:has(.ct-select__control:disabled) > .ct-icon { color: var(--ct-text-disabled); }

/* ── checkbox\checkbox.css */
/* Checkbox — input nativo invisível sobre uma caixa desenhada. Linha com 44px de altura
   mínima (alvo de toque). Inclui .ct-choice-group, também usado por Radio e Switch. */

.ct-choice-group { display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 0; border: 0; }
.ct-choice-group > legend { padding: 0; margin-bottom: var(--ct-space-1); }
.ct-choice-group--inline { flex-direction: row; flex-wrap: wrap; column-gap: var(--ct-space-6); }

.ct-check {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: var(--ct-space-3);
  min-height: var(--ct-size-target-min);
  padding-block: calc((var(--ct-size-target-min) - var(--ct-size-icon-md)) / 2);
  color: var(--ct-text-primary);
  font-family: var(--ct-type-body-md-font);
  font-size: var(--ct-type-body-md-size);
  line-height: var(--ct-size-icon-md);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ct-check__input {
  position: absolute;
  top: 0;
  left: calc((var(--ct-size-icon-md) - var(--ct-size-target-min)) / 2);
  width: var(--ct-size-target-min);
  height: var(--ct-size-target-min);
  margin: 0;
  opacity: 0;
  cursor: inherit;
}

.ct-check__box {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--ct-size-icon-md);
  height: var(--ct-size-icon-md);
  background: var(--ct-bg-surface);
  border: var(--ct-border-width-thick) solid var(--ct-border-control);
  border-radius: var(--ct-radius-check);
  color: var(--ct-control-checked-fg);
  transition: var(--ct-transition-colors);
}
.ct-check__mark { width: var(--ct-size-icon-sm); height: var(--ct-size-icon-sm); fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ct-check__mark path { visibility: hidden; }

.ct-check:hover .ct-check__box { border-color: var(--ct-border-control-hover); }
.ct-check__input:focus-visible + .ct-check__box {
  outline: var(--ct-size-focus-width) solid var(--ct-border-focus);
  outline-offset: var(--ct-size-focus-offset);
}

.ct-check__input:is(:checked, :indeterminate) + .ct-check__box {
  background: var(--ct-control-checked-bg);
  border-color: var(--ct-control-checked-bg);
}
.ct-check:hover .ct-check__input:is(:checked, :indeterminate) + .ct-check__box {
  background: var(--ct-control-checked-bg-hover);
  border-color: var(--ct-control-checked-bg-hover);
}
.ct-check__input:checked:not(:indeterminate) + .ct-check__box .ct-check__tick,
.ct-check__input:indeterminate + .ct-check__box .ct-check__dash { visibility: visible; }

.ct-check__input[aria-invalid="true"]:not(:checked) + .ct-check__box { border-color: var(--ct-feedback-error-fg); }

.ct-check__text { display: flex; flex-direction: column; gap: var(--ct-space-0-5); }
.ct-check__desc { color: var(--ct-text-tertiary); font-size: var(--ct-font-size-sm); line-height: var(--ct-font-line-height-normal); }

.ct-check:has(.ct-check__input:disabled) { color: var(--ct-text-disabled); cursor: not-allowed; }
.ct-check:has(.ct-check__input:disabled) .ct-check__desc { color: var(--ct-text-disabled); }
.ct-check__input:disabled + .ct-check__box,
.ct-check:hover .ct-check__input:disabled + .ct-check__box { background: var(--ct-bg-disabled); border-color: var(--ct-border-default); }
.ct-check__input:disabled:is(:checked, :indeterminate) + .ct-check__box,
.ct-check:hover .ct-check__input:disabled:is(:checked, :indeterminate) + .ct-check__box {
  background: var(--ct-action-disabled-fg);
  border-color: var(--ct-action-disabled-fg);
}

/* ── radio\radio.css */
/* Radio — escolha única. Reaproveita .ct-check (layout, alvo de toque) e .ct-choice-group. */

.ct-radio .ct-check__box { border-radius: var(--ct-radius-full); }
.ct-radio .ct-check__box::after {
  content: "";
  width: calc(var(--ct-size-icon-md) / 2.5);
  height: calc(var(--ct-size-icon-md) / 2.5);
  border-radius: var(--ct-radius-full);
  background: var(--ct-control-checked-fg);
  transform: scale(0);
  transition: transform var(--ct-motion-duration-base) var(--ct-motion-easing-enter);
}
.ct-radio .ct-check__input:checked + .ct-check__box::after { transform: scale(1); }
.ct-radio .ct-check__input:disabled:checked + .ct-check__box::after { background: var(--ct-bg-disabled); }

/* ── switch\switch.css */
/* Switch — liga/desliga com efeito imediato. <input type="checkbox" role="switch">. */

.ct-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--ct-space-3);
  min-height: var(--ct-size-target-min);
  color: var(--ct-text-primary);
  font-family: var(--ct-type-body-md-font);
  font-size: var(--ct-type-body-md-size);
  line-height: var(--ct-font-line-height-snug);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ct-switch--end { display: flex; justify-content: space-between; }
.ct-switch--end .ct-switch__track { order: 2; }

.ct-switch__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}

.ct-switch__track {
  position: relative;
  flex: none;
  width: var(--ct-space-10);
  height: var(--ct-space-6);
  background: var(--ct-bg-surface-sunken);
  border: var(--ct-border-width-hairline) solid var(--ct-border-control);
  border-radius: var(--ct-radius-pill);
  transition: var(--ct-transition-colors);
}
.ct-switch__thumb {
  position: absolute;
  top: 50%;
  left: calc(var(--ct-space-1) - var(--ct-border-width-hairline));
  width: var(--ct-size-icon-sm);
  height: var(--ct-size-icon-sm);
  border-radius: var(--ct-radius-full);
  background: var(--ct-border-control);
  box-shadow: var(--ct-shadow-1);
  transform: translateY(-50%);
  transition: transform var(--ct-motion-duration-base) var(--ct-motion-easing-standard), background-color var(--ct-motion-duration-base) var(--ct-motion-easing-standard);
}

.ct-switch:hover .ct-switch__track { border-color: var(--ct-border-control-hover); }
.ct-switch__input:focus-visible ~ .ct-switch__track {
  outline: var(--ct-size-focus-width) solid var(--ct-border-focus);
  outline-offset: var(--ct-size-focus-offset);
}

.ct-switch__input:checked ~ .ct-switch__track { background: var(--ct-control-checked-bg); border-color: var(--ct-control-checked-bg); }
.ct-switch:hover .ct-switch__input:checked ~ .ct-switch__track { background: var(--ct-control-checked-bg-hover); border-color: var(--ct-control-checked-bg-hover); }
.ct-switch__input:checked ~ .ct-switch__track .ct-switch__thumb {
  background: var(--ct-control-checked-fg);
  transform: translate(var(--ct-space-4), -50%);
}

.ct-switch__text { display: flex; flex-direction: column; gap: var(--ct-space-0-5); }
.ct-switch__desc { color: var(--ct-text-tertiary); font-size: var(--ct-font-size-sm); line-height: var(--ct-font-line-height-normal); }

.ct-switch:has(.ct-switch__input:disabled) { color: var(--ct-text-disabled); cursor: not-allowed; }
.ct-switch__input:disabled ~ .ct-switch__track,
.ct-switch:hover .ct-switch__input:disabled ~ .ct-switch__track { background: var(--ct-bg-disabled); border-color: var(--ct-border-default); }
.ct-switch__input:disabled ~ .ct-switch__track .ct-switch__thumb { background: var(--ct-action-disabled-fg); box-shadow: none; }

/* ── slider\slider.css */
/* Slider — <input type="range"> nativo (teclado e leitor de tela de graça).
   slider.js preenche o trilho (--_pct) e atualiza o <output>. */

.ct-slider { display: flex; flex-direction: column; gap: var(--ct-space-1); }
.ct-slider__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ct-gap-md); }
.ct-slider__value {
  color: var(--ct-text-primary);
  font-family: var(--ct-type-label-lg-font);
  font-size: var(--ct-type-label-lg-size);
  font-weight: var(--ct-type-label-lg-weight);
  font-variant-numeric: tabular-nums;
}

.ct-slider__input {
  --_pct: 50%;
  --_thumb: var(--ct-size-icon-md);
  --_track: var(--ct-space-1);
  width: 100%;
  height: var(--ct-size-target-min);
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
.ct-slider__input:focus-visible { outline: none; }

.ct-slider__input::-webkit-slider-runnable-track {
  height: var(--_track);
  border-radius: var(--ct-radius-full);
  background: linear-gradient(to right, var(--ct-control-checked-bg) var(--_pct), var(--ct-control-track) var(--_pct));
}
.ct-slider__input::-webkit-slider-thumb {
  appearance: none;
  width: var(--_thumb);
  height: var(--_thumb);
  margin-top: calc((var(--_track) - var(--_thumb)) / 2);
  border: var(--ct-border-width-thick) solid var(--ct-control-checked-bg);
  border-radius: var(--ct-radius-full);
  background: var(--ct-bg-surface);
  box-shadow: var(--ct-shadow-1);
  transition: transform var(--ct-motion-duration-fast) var(--ct-motion-easing-standard);
}
.ct-slider__input:hover::-webkit-slider-thumb { transform: scale(1.1); }
.ct-slider__input:focus-visible::-webkit-slider-thumb {
  outline: var(--ct-size-focus-width) solid var(--ct-border-focus);
  outline-offset: var(--ct-size-focus-offset);
}

.ct-slider__input::-moz-range-track { height: var(--_track); border-radius: var(--ct-radius-full); background: var(--ct-control-track); }
.ct-slider__input::-moz-range-progress { height: var(--_track); border-radius: var(--ct-radius-full); background: var(--ct-control-checked-bg); }
.ct-slider__input::-moz-range-thumb {
  width: var(--_thumb);
  height: var(--_thumb);
  border: var(--ct-border-width-thick) solid var(--ct-control-checked-bg);
  border-radius: var(--ct-radius-full);
  background: var(--ct-bg-surface);
  box-shadow: var(--ct-shadow-1);
}
.ct-slider__input:focus-visible::-moz-range-thumb {
  outline: var(--ct-size-focus-width) solid var(--ct-border-focus);
  outline-offset: var(--ct-size-focus-offset);
}

.ct-slider__scale {
  display: flex;
  justify-content: space-between;
  color: var(--ct-text-tertiary);
  font-size: var(--ct-font-size-xs);
  font-variant-numeric: tabular-nums;
}

.ct-slider__input:disabled { cursor: not-allowed; }
.ct-slider__input:disabled::-webkit-slider-runnable-track { background: var(--ct-bg-disabled); }
.ct-slider__input:disabled::-webkit-slider-thumb { border-color: var(--ct-action-disabled-fg); box-shadow: none; }
.ct-slider__input:disabled::-moz-range-progress { background: var(--ct-action-disabled-fg); }
.ct-slider__input:disabled::-moz-range-thumb { border-color: var(--ct-action-disabled-fg); box-shadow: none; }
.ct-slider:has(.ct-slider__input:disabled) .ct-slider__value { color: var(--ct-text-disabled); }

/* ── search\search.css */
/* Search — .ct-input com lupa, botão limpar e atalho de teclado opcional.
   O botão limpar some sozinho quando o campo está vazio (exige placeholder). */

.ct-search .ct-input__control::-webkit-search-cancel-button,
.ct-search .ct-input__control::-webkit-search-decoration { appearance: none; }

.ct-search:has(.ct-input__control:placeholder-shown) .ct-search__clear { display: none; }

.ct-search__kbd {
  display: none;
  align-items: center;
  min-width: var(--ct-space-6);
  height: var(--ct-space-6);
  padding: 0 var(--ct-space-2);
  border: var(--ct-border-width-hairline) solid var(--ct-border-default);
  border-radius: var(--ct-radius-sm);
  color: var(--ct-text-tertiary);
  font-family: var(--ct-font-family-mono);
  font-size: var(--ct-font-size-xs);
  justify-content: center;
}
.ct-search:has(.ct-input__control:placeholder-shown):not(:focus-within) .ct-search__kbd { display: inline-flex; }

.ct-search.is-loading .ct-search__clear { display: none; }
.ct-search .ct-spinner { color: var(--ct-text-tertiary); }

/* ── file-upload\file-upload.css */
/* File upload — dropzone (label com input[type=file] escondido) + lista de arquivos. */

.ct-dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ct-space-2);
  padding: var(--ct-space-8) var(--ct-space-6);
  background: var(--ct-bg-surface-subtle);
  border: var(--ct-border-width-thick) var(--ct-border-style-dashed) var(--ct-border-strong);
  border-radius: var(--ct-radius-card);
  color: var(--ct-text-secondary);
  text-align: center;
  cursor: pointer;
  transition: var(--ct-transition-colors);
}
.ct-dropzone:hover { background: var(--ct-bg-surface); border-color: var(--ct-border-control-hover); }
.ct-dropzone:has(.ct-dropzone__input:focus-visible) {
  outline: var(--ct-size-focus-width) solid var(--ct-border-focus);
  outline-offset: var(--ct-size-focus-offset);
}
.ct-dropzone.is-dragover {
  background: var(--ct-state-selected);
  border-style: var(--ct-border-style-solid);
  border-color: var(--ct-border-focus);
}

.ct-dropzone__icon { width: var(--ct-size-icon-xl); height: var(--ct-size-icon-xl); color: var(--ct-text-tertiary); }
.ct-dropzone.is-dragover .ct-dropzone__icon { color: var(--ct-text-accent); }
.ct-dropzone__title {
  color: var(--ct-text-primary);
  font-family: var(--ct-type-label-lg-font);
  font-size: var(--ct-type-label-lg-size);
  font-weight: var(--ct-type-label-lg-weight);
}
.ct-dropzone__browse { color: var(--ct-text-link); text-decoration: underline; text-underline-offset: 0.2em; }
.ct-dropzone__hint { color: var(--ct-text-tertiary); font-size: var(--ct-font-size-sm); }

.ct-dropzone--compact { flex-direction: row; justify-content: flex-start; gap: var(--ct-space-3); padding: var(--ct-space-4); text-align: left; }
.ct-dropzone--compact .ct-dropzone__icon { width: var(--ct-size-icon-lg); height: var(--ct-size-icon-lg); }

.ct-dropzone:has(.ct-dropzone__input:disabled) {
  background: var(--ct-bg-disabled);
  border-color: var(--ct-border-default);
  color: var(--ct-text-disabled);
  cursor: not-allowed;
}
.ct-dropzone:has(.ct-dropzone__input:disabled) :is(.ct-dropzone__title, .ct-dropzone__browse, .ct-dropzone__hint, .ct-dropzone__icon) { color: var(--ct-text-disabled); }

.ct-file-list { display: flex; flex-direction: column; gap: var(--ct-space-2); margin: var(--ct-space-3) 0 0; padding: 0; list-style: none; }

.ct-file {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ct-space-3);
  padding: var(--ct-space-2) var(--ct-space-2) var(--ct-space-2) var(--ct-space-3);
  background: var(--ct-bg-surface);
  border: var(--ct-border-width-hairline) solid var(--ct-border-default);
  border-radius: var(--ct-radius-md);
}
.ct-file__icon { width: var(--ct-size-icon-lg); height: var(--ct-size-icon-lg); color: var(--ct-text-secondary); }
.ct-file__body { display: flex; flex-direction: column; gap: var(--ct-space-0-5); min-width: 0; }
.ct-file__name {
  overflow: hidden;
  color: var(--ct-text-primary);
  font-size: var(--ct-font-size-sm);
  font-weight: var(--ct-font-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ct-file__meta { display: flex; align-items: center; gap: var(--ct-gap-xs); color: var(--ct-text-tertiary); font-size: var(--ct-font-size-xs); font-variant-numeric: tabular-nums; }
.ct-file__meta .ct-icon { width: var(--ct-size-icon-xs); height: var(--ct-size-icon-xs); }
.ct-file__progress { height: var(--ct-space-1); margin-top: var(--ct-space-1); overflow: hidden; border-radius: var(--ct-radius-full); background: var(--ct-control-track); }
.ct-file__progress > span {
  display: block;
  width: var(--_progress, 0%);
  height: 100%;
  background: var(--ct-control-checked-bg);
  transition: width var(--ct-motion-duration-moderate) var(--ct-motion-easing-linear);
}

.ct-file.is-done .ct-file__meta { color: var(--ct-feedback-success-fg); }
.ct-file.is-error { background: var(--ct-feedback-error-bg); border-color: var(--ct-feedback-error-border); }
.ct-file.is-error :is(.ct-file__icon, .ct-file__meta) { color: var(--ct-feedback-error-fg); }

/* ── date-picker\date-picker.css */
/* Date picker — campo dd/mm/aaaa + calendário em popover (role="dialog", grid navegável). */

.ct-datepicker { position: relative; }

.ct-calendar {
  --_cell: min(var(--ct-size-control-md), calc((100vw - 4rem) / 7));
  width: max-content;
  min-width: 0;
  padding: var(--ct-space-3);
}

.ct-calendar__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ct-gap-sm); margin-bottom: var(--ct-space-2); }
.ct-calendar__title {
  color: var(--ct-text-primary);
  font-family: var(--ct-type-heading-sm-font);
  font-size: var(--ct-font-size-xl);
  font-weight: var(--ct-type-heading-sm-weight);
  letter-spacing: var(--ct-font-tracking-wide);
  text-transform: uppercase;
}

.ct-calendar__grid { border-collapse: separate; border-spacing: 0; }
.ct-calendar__grid th {
  width: var(--_cell);
  height: var(--ct-space-8);
  color: var(--ct-text-tertiary);
  font-size: var(--ct-font-size-xs);
  font-weight: var(--ct-font-weight-semibold);
  text-align: center;
}

.ct-calendar__day {
  position: relative;
  width: var(--_cell);
  height: var(--_cell);
  padding: 0;
  border-radius: var(--ct-radius-md);
  color: var(--ct-text-primary);
  font-size: var(--ct-font-size-md);
  font-variant-numeric: tabular-nums;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  transition: var(--ct-transition-colors);
}
.ct-calendar__day:hover { background: var(--ct-state-hover); }
.ct-calendar__day:focus-visible { outline-offset: calc(-1 * var(--ct-size-focus-width)); }
.ct-calendar__day.is-outside { color: var(--ct-text-tertiary); }
.ct-calendar__day[aria-current="date"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: var(--ct-space-1);
  width: var(--ct-space-1);
  height: var(--ct-space-1);
  border-radius: var(--ct-radius-full);
  background: var(--ct-bg-accent);
  transform: translateX(-50%);
}
.ct-calendar__day[aria-selected="true"] {
  background: var(--ct-control-checked-bg);
  color: var(--ct-control-checked-fg);
  font-weight: var(--ct-font-weight-semibold);
}
.ct-calendar__day[aria-selected="true"]:hover { background: var(--ct-control-checked-bg-hover); }
.ct-calendar__day[aria-disabled="true"] { color: var(--ct-text-disabled); background: none; cursor: not-allowed; }

.ct-calendar__foot {
  display: flex;
  justify-content: space-between;
  margin-top: var(--ct-space-2);
  padding-top: var(--ct-space-2);
  border-top: var(--ct-border-width-hairline) solid var(--ct-border-subtle);
}

/* ── time-picker\time-picker.css */
/* Time picker — campo hh:mm (24h) + lista de horários em intervalos. */

.ct-timepicker { position: relative; }
.ct-timepicker .ct-listbox { min-width: calc(var(--ct-size-control-md) * 3); }
.ct-timepicker .ct-option { font-variant-numeric: tabular-nums; }

/* ── combobox\combobox.css */
/* Combobox — escolher UM valor de uma lista longa, filtrando por digitação.
   Diferente do Autocomplete: o valor final precisa existir na lista. */

.ct-combobox { position: relative; }
.ct-combobox:has([aria-expanded="true"]) [data-ct-toggle] .ct-icon { transform: rotate(180deg); }

/* ── autocomplete\autocomplete.css */
/* Autocomplete — texto livre com sugestões. O trecho digitado aparece sublinhado em laranja. */

.ct-autocomplete { position: relative; }
.ct-autocomplete .ct-spinner { color: var(--ct-text-tertiary); }

/* ── tag\tag.css */
/* Tag (rótulo estático ou removível) e Chip (filtro alternável, <button aria-pressed>).
   Cantos de 4px — pílula fica reservada ao Badge. */

.ct-tag,
.ct-chip {
  --_h: var(--ct-space-8);
  --_px: var(--ct-space-3);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--ct-gap-xs);
  max-width: 100%;
  height: var(--_h);
  padding: 0 var(--_px);
  border: var(--ct-border-width-hairline) solid var(--ct-border-default);
  border-radius: var(--ct-radius-tag);
  background: var(--ct-bg-surface-subtle);
  color: var(--ct-text-secondary);
  font-family: var(--ct-type-label-md-font);
  font-size: var(--ct-type-label-md-size);
  font-weight: var(--ct-type-label-md-weight);
  line-height: 1;
  white-space: nowrap;
}
.ct-tag .ct-icon,
.ct-chip .ct-icon { width: var(--ct-size-icon-sm); height: var(--ct-size-icon-sm); }
.ct-tag__label { overflow: hidden; text-overflow: ellipsis; }

.ct-tag--sm, .ct-chip--sm { --_h: var(--ct-space-6); --_px: var(--ct-space-2); font-size: var(--ct-font-size-xs); }

.ct-tag--brand { background: var(--ct-bg-brand); border-color: var(--ct-bg-brand); color: var(--ct-text-on-brand); }
.ct-tag--accent { background: var(--ct-bg-accent-subtle); border-color: transparent; color: var(--ct-text-accent); }
.ct-tag--outline { background: transparent; border-color: var(--ct-border-strong); }

.ct-tag__remove {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(var(--_h) - var(--ct-space-2));
  height: calc(var(--_h) - var(--ct-space-2));
  margin-right: calc(-1 * var(--ct-space-2));
  padding: 0;
  border: 0;
  border-radius: var(--ct-radius-xs);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: var(--ct-transition-colors);
}
.ct-tag__remove::before { content: ""; position: absolute; inset: calc(-1 * var(--ct-space-1)); }
.ct-tag__remove:hover { background: var(--ct-state-pressed); }

/* Chip de filtro */
.ct-chip {
  background: var(--ct-bg-surface);
  border-color: var(--ct-border-strong);
  color: var(--ct-text-primary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: var(--ct-transition-colors);
}
.ct-chip:hover { border-color: var(--ct-border-control-hover); background: var(--ct-bg-surface-subtle); }
.ct-chip__check { display: none; }
.ct-chip[aria-pressed="true"] {
  background: var(--ct-control-checked-bg);
  border-color: var(--ct-control-checked-bg);
  color: var(--ct-control-checked-fg);
}
.ct-chip[aria-pressed="true"]:hover { background: var(--ct-control-checked-bg-hover); border-color: var(--ct-control-checked-bg-hover); }
.ct-chip[aria-pressed="true"] .ct-chip__check { display: inline-block; }
.ct-chip__count { color: inherit; font-variant-numeric: tabular-nums; opacity: var(--ct-opacity-muted); }

@media (pointer: coarse) {
  .ct-chip::before { content: ""; position: absolute; inset: calc((var(--ct-size-target-min) - var(--_h)) / -2) 0; }
}

.ct-chip:disabled { background: var(--ct-bg-disabled); border-color: var(--ct-border-default); color: var(--ct-text-disabled); cursor: not-allowed; }

.ct-tag-list { display: flex; flex-wrap: wrap; gap: var(--ct-gap-sm); margin: 0; padding: 0; list-style: none; }

/* ── badge\badge.css */
/* Badge — status e contagem. Não é clicável. Pílula (única forma arredondada do sistema).
   Status sempre com texto (e ponto ou ícone): cor nunca é o único canal. */

.ct-badge {
  --_bg: var(--ct-bg-surface-sunken);
  --_fg: var(--ct-text-secondary);
  display: inline-flex;
  align-items: center;
  gap: var(--ct-space-1);
  height: var(--ct-space-6);
  padding: 0 var(--ct-space-2);
  border-radius: var(--ct-radius-pill);
  background: var(--_bg);
  color: var(--_fg);
  font-family: var(--ct-type-overline-font);
  font-size: var(--ct-font-size-sm);
  font-weight: var(--ct-type-overline-weight);
  letter-spacing: var(--ct-font-tracking-wider);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ct-badge .ct-icon { width: var(--ct-size-icon-xs); height: var(--ct-size-icon-xs); }
.ct-badge__dot { width: calc(var(--ct-space-2) - var(--ct-space-0-5)); height: calc(var(--ct-space-2) - var(--ct-space-0-5)); border-radius: var(--ct-radius-full); background: currentColor; }

.ct-badge--success { --_bg: var(--ct-feedback-success-bg); --_fg: var(--ct-feedback-success-fg); }
.ct-badge--warning { --_bg: var(--ct-feedback-warning-bg); --_fg: var(--ct-feedback-warning-fg); }
.ct-badge--error   { --_bg: var(--ct-feedback-error-bg);   --_fg: var(--ct-feedback-error-fg); }
.ct-badge--info    { --_bg: var(--ct-feedback-info-bg);    --_fg: var(--ct-feedback-info-fg); }
.ct-badge--accent  { --_bg: var(--ct-bg-accent-subtle);    --_fg: var(--ct-text-accent); }
.ct-badge--brand   { --_bg: var(--ct-bg-brand);            --_fg: var(--ct-text-on-brand); }
.ct-badge--solid   { --_bg: var(--ct-action-primary-bg);   --_fg: var(--ct-action-primary-fg); }

.ct-badge--sm { height: var(--ct-space-5); padding: 0 var(--ct-space-1); font-size: var(--ct-font-size-xs); }

/* Contador sobre ícone/avatar */
.ct-badge-anchor { position: relative; display: inline-flex; }
.ct-badge--count {
  --_bg: var(--ct-action-primary-bg);
  --_fg: var(--ct-action-primary-fg);
  justify-content: center;
  min-width: var(--ct-space-5);
  height: var(--ct-space-5);
  padding: 0 var(--ct-space-1);
  font-family: var(--ct-type-label-sm-font);
  font-size: var(--ct-font-size-xs);
  letter-spacing: 0;
}
.ct-badge-anchor > .ct-badge--count {
  position: absolute;
  z-index: var(--ct-z-raised);
  top: 0;
  right: 0;
  box-shadow: 0 0 0 var(--ct-border-width-thick) var(--ct-bg-surface);
  transform: translate(30%, -30%);
  pointer-events: none;
}

/* Ponto de status isolado (sempre acompanhado de texto visível ou aria-label no pai) */
.ct-status-dot {
  display: inline-block;
  flex: none;
  width: var(--ct-space-2);
  height: var(--ct-space-2);
  border-radius: var(--ct-radius-full);
  background: var(--ct-border-control);
}
.ct-status-dot--success { background: var(--ct-feedback-success-solid); }
.ct-status-dot--warning { background: var(--ct-feedback-warning-solid); }
.ct-status-dot--error   { background: var(--ct-feedback-error-solid); }
.ct-status-dot--info    { background: var(--ct-feedback-info-solid); }

/* ── avatar\avatar.css */
/* Avatar — pessoa (círculo) ou empresa (quadrado). Foto, iniciais ou ícone. */

.ct-avatar {
  --_size: var(--ct-size-avatar-md);
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--_size);
  height: var(--_size);
  border-radius: var(--ct-radius-pill);
  background: var(--ct-bg-brand);
  color: var(--ct-text-on-brand);
  font-family: var(--ct-font-family-display);
  font-weight: var(--ct-font-weight-semibold);
  font-size: calc(var(--_size) * 0.4);
  line-height: 1;
  text-transform: uppercase;
  user-select: none;
}
.ct-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.ct-avatar > .ct-icon { width: 55%; height: 55%; }

.ct-avatar--xs { --_size: var(--ct-size-avatar-xs); }
.ct-avatar--sm { --_size: var(--ct-size-avatar-sm); }
.ct-avatar--lg { --_size: var(--ct-size-avatar-lg); }
.ct-avatar--xl { --_size: var(--ct-size-avatar-xl); }

.ct-avatar--org { border-radius: var(--ct-radius-md); }
.ct-avatar--subtle { background: var(--ct-bg-surface-sunken); color: var(--ct-text-secondary); }

.ct-avatar__status {
  position: absolute;
  right: 0;
  bottom: 0;
  width: calc(var(--_size) * 0.28);
  height: calc(var(--_size) * 0.28);
  min-width: var(--ct-space-2);
  min-height: var(--ct-space-2);
  border-radius: var(--ct-radius-full);
  background: var(--ct-feedback-success-solid);
  box-shadow: 0 0 0 var(--ct-border-width-thick) var(--ct-bg-surface);
}
.ct-avatar__status--away { background: var(--ct-feedback-warning-solid); }
.ct-avatar__status--busy { background: var(--ct-feedback-error-solid); }
.ct-avatar__status--offline { background: var(--ct-border-control); }

.ct-avatar-group { display: inline-flex; align-items: center; }
.ct-avatar-group > .ct-avatar { box-shadow: 0 0 0 var(--ct-border-width-thick) var(--ct-bg-surface); }
.ct-avatar-group > .ct-avatar + .ct-avatar { margin-left: calc(var(--_size) * -0.25); }
.ct-avatar--more { background: var(--ct-bg-surface-sunken); color: var(--ct-text-secondary); font-family: var(--ct-font-family-sans); font-size: calc(var(--_size) * 0.34); text-transform: none; }

.ct-avatar-label { display: inline-flex; align-items: center; gap: var(--ct-space-3); min-width: 0; }
.ct-avatar-label__text { display: flex; flex-direction: column; min-width: 0; }
.ct-avatar-label__name { color: var(--ct-text-primary); font-size: var(--ct-font-size-sm); font-weight: var(--ct-font-weight-semibold); line-height: var(--ct-font-line-height-snug); }
.ct-avatar-label__meta { color: var(--ct-text-tertiary); font-size: var(--ct-font-size-xs); line-height: var(--ct-font-line-height-normal); }

.ct-avatar.is-disabled { opacity: var(--ct-opacity-disabled); }

/* ── divider\divider.css */
/* Divider — separa grupos. Prefira espaço; use linha quando o espaço sozinho não basta.
   Horizontal: <hr class="ct-divider">. Vertical/rótulo: <div role="separator">. */

.ct-divider {
  flex: none;
  width: 100%;
  height: var(--ct-border-width-hairline);
  margin: 0;
  border: 0;
  background: var(--ct-border-default);
}
.ct-divider--subtle { background: var(--ct-border-subtle); }
.ct-divider--strong { background: var(--ct-border-strong); }

.ct-divider--vertical {
  align-self: stretch;
  width: var(--ct-border-width-hairline);
  height: auto;
  min-height: var(--ct-size-icon-md);
}

.ct-divider--label {
  display: flex;
  align-items: center;
  gap: var(--ct-gap-md);
  height: auto;
  background: none;
  color: var(--ct-text-tertiary);
  font-family: var(--ct-type-overline-font);
  font-size: var(--ct-font-size-xs);
  font-weight: var(--ct-type-overline-weight);
  letter-spacing: var(--ct-type-overline-tracking);
  text-transform: uppercase;
}
.ct-divider--label::before,
.ct-divider--label::after { content: ""; flex: 1; height: var(--ct-border-width-hairline); background: var(--ct-border-default); }

/* Linha-assinatura: barra laranja curta que abre um bloco de conteúdo. Uma por seção. */
.ct-divider--accent { width: var(--ct-space-12); height: var(--ct-border-width-accent); background: var(--ct-border-accent); }

/* ── tooltip\tooltip.css */
/* Tooltip — rótulo curto para ícones e atalhos. Nunca conteúdo essencial ou interativo.
   Criado pelo tooltip.js a partir de [data-ct-tooltip]; fica em <body> (position: fixed). */

.ct-tooltip {
  --_arrow: 50%;
  position: fixed;
  z-index: var(--ct-z-tooltip);
  top: 0;
  left: 0;
  max-width: calc(var(--ct-space-32) * 2);
  padding: var(--ct-space-2) var(--ct-space-3);
  border-radius: var(--ct-radius-tooltip);
  background: var(--ct-bg-inverse);
  color: var(--ct-text-inverse);
  box-shadow: var(--ct-shadow-2);
  font-family: var(--ct-type-body-sm-font);
  font-size: var(--ct-type-body-sm-size);
  line-height: var(--ct-font-line-height-snug);
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--ct-motion-distance-sm));
  transition:
    opacity var(--ct-motion-duration-fast) var(--ct-motion-easing-exit),
    transform var(--ct-motion-duration-fast) var(--ct-motion-easing-exit),
    visibility 0s linear var(--ct-motion-duration-fast);
}
.ct-tooltip[data-placement="bottom"] { transform: translateY(calc(-1 * var(--ct-motion-distance-sm))); }
.ct-tooltip[data-placement="left"] { transform: translateX(var(--ct-motion-distance-sm)); }
.ct-tooltip[data-placement="right"] { transform: translateX(calc(-1 * var(--ct-motion-distance-sm))); }

.ct-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: var(--ct-transition-enter), visibility 0s;
}

.ct-tooltip::after {
  content: "";
  position: absolute;
  width: var(--ct-space-2);
  height: var(--ct-space-2);
  background: inherit;
  transform: rotate(45deg);
}
.ct-tooltip[data-placement="top"]::after { bottom: calc(-1 * var(--ct-space-1)); left: var(--_arrow); margin-left: calc(-1 * var(--ct-space-1)); }
.ct-tooltip[data-placement="bottom"]::after { top: calc(-1 * var(--ct-space-1)); left: var(--_arrow); margin-left: calc(-1 * var(--ct-space-1)); }
.ct-tooltip[data-placement="left"]::after { right: calc(-1 * var(--ct-space-1)); top: var(--_arrow); margin-top: calc(-1 * var(--ct-space-1)); }
.ct-tooltip[data-placement="right"]::after { left: calc(-1 * var(--ct-space-1)); top: var(--_arrow); margin-top: calc(-1 * var(--ct-space-1)); }

.ct-tooltip kbd {
  margin-left: var(--ct-space-1);
  padding: 0 var(--ct-space-1);
  border: var(--ct-border-width-hairline) solid var(--ct-border-inverse);
  border-radius: var(--ct-radius-xs);
  font-family: var(--ct-font-family-mono);
  font-size: var(--ct-font-size-xs);
}