@layer ec.components {
  .ec-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ec-space-2);
    /* Mobile-first: alvo de toque de 44px no celular; ≥30rem vale a altura do token
       (a densidade compacta reduz só a partir daí). */
    min-height: var(--ec-touch-target-min);
    padding-inline: var(--ec-comp-button-padding-inline);
    border: var(--ec-border-width-thin) solid transparent;
    border-radius: var(--ec-comp-button-radius);
    background: transparent;
    color: inherit;
    font-size: var(--ec-type-label-lg-size);
    font-weight: var(--ec-font-weight-bold);
    line-height: var(--ec-type-label-lg-line);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition:
      background-color var(--ec-motion-duration-medium) var(--ec-motion-easing-standard),
      border-color var(--ec-motion-duration-medium) var(--ec-motion-easing-standard),
      color var(--ec-motion-duration-medium) var(--ec-motion-easing-standard),
      box-shadow var(--ec-motion-duration-medium) var(--ec-motion-easing-standard),
      transform var(--ec-motion-duration-fast) var(--ec-motion-easing-standard);
  }

  .ec-button:hover {
    text-decoration: none;
  }

  .ec-button:active:not(:disabled):not([aria-disabled="true"]) {
    transform: translateY(1px);
  }

  .ec-button:disabled,
  .ec-button[aria-disabled="true"] {
    opacity: 0.48;
    cursor: not-allowed;
    pointer-events: none;
  }

  .ec-button--primary {
    background: var(--ec-sys-color-primary);
    color: var(--ec-sys-color-on-primary);
    box-shadow: var(--ec-elevation-1);
  }

  .ec-button--primary:hover {
    background: var(--ec-sys-color-primary-hover);
    color: var(--ec-sys-color-on-primary);
    box-shadow: var(--ec-elevation-2);
  }

  .ec-button--primary:active {
    background: var(--ec-sys-color-primary-pressed);
  }

  .ec-button--conversion {
    background: var(--ec-sys-color-accent);
    color: var(--ec-sys-color-on-accent);
    box-shadow: var(--ec-elevation-2);
  }

  .ec-button--conversion:hover {
    background: var(--ec-sys-color-accent-hover);
    color: var(--ec-sys-color-on-accent);
    box-shadow: var(--ec-elevation-3);
  }

  .ec-button--conversion:active {
    background: var(--ec-sys-color-accent-pressed);
  }

  /* Desabilitado: superfície neutra (não ouro pálido). O CTA de conversão precisa
     parecer inequivocamente inativo — um ouro lavado por opacidade lê como
     "ativo, porém apagado". Sobrepõe o opacity:0.48 do estado base. */
  .ec-button--conversion:disabled,
  .ec-button--conversion[aria-disabled="true"] {
    background: var(--ec-sys-color-surface-muted);
    color: var(--ec-sys-color-on-surface-muted);
    box-shadow: none;
    opacity: 1;
  }

  .ec-button--secondary {
    border-color: var(--ec-sys-color-outline-subtle);
    background: var(--ec-sys-color-surface);
    color: var(--ec-sys-color-primary);
  }

  .ec-button--secondary:hover {
    border-color: var(--ec-sys-color-primary);
    background: var(--ec-sys-color-interactive-subtle);
  }

  /* Ação terciária de linha (listas densas): sem fundo nem borda, texto primário. */
  .ec-button--ghost {
    background: transparent;
    color: var(--ec-sys-color-primary);
  }

  .ec-button--ghost:hover {
    background: var(--ec-sys-color-interactive-subtle);
  }

  .ec-button--critical {
    background: var(--ec-sys-color-error);
    color: var(--ec-sys-color-on-error);
  }

  .ec-button--block {
    width: 100%;
  }

  .ec-button__spinner {
    width: 1.125rem;
    height: 1.125rem;
    animation: ec-button-spin var(--ec-motion-duration-emphasis) linear infinite;
  }

  .ec-button__spinner svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
  }

  @keyframes ec-button-spin {
    to { transform: rotate(1turn); }
  }

  .ec-card {
    overflow: clip;
    border: var(--ec-border-width-thin) solid var(--ec-sys-color-outline-subtle);
    border-radius: var(--ec-comp-card-radius);
    background: var(--ec-sys-color-surface);
    color: var(--ec-sys-color-on-surface);
    box-shadow: var(--ec-elevation-1);
  }

  .ec-card__header,
  .ec-card__body,
  .ec-card__footer {
    padding: var(--ec-space-4);
  }

  .ec-card__header + .ec-card__body,
  .ec-card__body + .ec-card__footer {
    border-top: var(--ec-border-width-thin) solid var(--ec-sys-color-divider);
  }

  .ec-card--raised {
    border-color: transparent;
    box-shadow: var(--ec-elevation-2);
  }

  .ec-field {
    display: grid;
    gap: var(--ec-comp-field-gap);
    /* Guard de reflow (WCAG 1.4.10): controles de min-content longos (ex.: <select>
       de eventos com títulos extensos) forçariam o grid a estourar o corpo no
       eixo horizontal. min-width:0 permite o item encolher — o .ec-field__control
       já é width:100%. */
    min-width: 0;
  }

  .ec-field__label {
    color: var(--ec-sys-color-on-surface-strong);
    font-size: var(--ec-type-label-lg-size);
    font-weight: var(--ec-font-weight-semibold);
    line-height: var(--ec-type-label-lg-line);
  }

  .ec-field__control {
    width: 100%;
    min-height: var(--ec-comp-field-height);
    padding: var(--ec-comp-field-padding-block) var(--ec-comp-field-padding-inline);
    border: var(--ec-border-width-thin) solid var(--ec-sys-color-outline);
    border-radius: var(--ec-comp-field-radius);
    background: var(--ec-sys-color-surface);
    color: var(--ec-sys-color-on-surface);
    line-height: 1.4;
    transition:
      border-color var(--ec-motion-duration-medium) var(--ec-motion-easing-standard),
      box-shadow var(--ec-motion-duration-medium) var(--ec-motion-easing-standard);
  }

  /* Densidade compacta: fonte do campo vem do token (16px no celular, 14px ≥64rem). */
  [data-ec-density="compact"] .ec-field__control {
    font-size: var(--ec-comp-field-font-size);
  }

  textarea.ec-field__control {
    min-height: 7.5rem;
    resize: vertical;
  }

  .ec-field__control:hover:not(:disabled) {
    border-color: var(--ec-sys-color-primary);
  }

  .ec-field__control:focus-visible {
    border-color: var(--ec-sys-color-interactive);
  }

  .ec-field__control:disabled {
    background: var(--ec-sys-color-surface-muted);
    color: var(--ec-sys-color-on-surface-muted);
    cursor: not-allowed;
  }

  .ec-field__help,
  .ec-field__error,
  .ec-field__error-list {
    font-size: var(--ec-type-body-md-size);
    line-height: var(--ec-type-body-md-line);
  }

  .ec-field__help {
    color: var(--ec-sys-color-on-surface-muted);
  }

  .ec-field__error,
  .ec-field__error-list {
    color: var(--ec-sys-color-error);
    font-weight: var(--ec-font-weight-semibold);
  }

  .ec-field__error-list {
    display: grid;
    gap: var(--ec-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ec-field[data-state="error"] .ec-field__control,
  .ec-field__control[aria-invalid="true"] {
    border-color: var(--ec-sys-color-error);
  }

  /* Marca "(opcional)" dentro do rótulo: peso regular, tom apagado (texto, não cor). */
  .ec-field__optional {
    color: var(--ec-sys-color-on-surface-muted);
    font-weight: var(--ec-font-weight-regular);
  }

  .ec-required-mark {
    color: var(--ec-sys-color-error);
    font-weight: var(--ec-font-weight-extrabold);
  }

  .ec-checkbox {
    display: flex;
    min-height: var(--ec-touch-target-min);
    align-items: flex-start;
    gap: var(--ec-space-3);
    color: var(--ec-sys-color-on-surface);
    cursor: pointer;
    font-size: var(--ec-type-body-md-size);
    line-height: var(--ec-type-body-md-line);
  }

  .ec-checkbox__input,
  .ec-checkbox input {
    width: 1.25rem;
    height: 1.25rem;
    min-height: 1.25rem;
    flex: 0 0 auto;
    margin-block-start: 0.125rem;
    padding: 0;
    accent-color: var(--ec-sys-color-primary);
  }

  /* Grupo de escolhas (CANDIDATO — painel de cupons, ADR 0012): fieldset + legend
     visível + opções .ec-checkbox (rádio ou caixa; o rótulo é o <label> da opção).
     __options em linha com quebra; --stack em coluna (opções com texto de apoio);
     --nested agrupa sub-opções numa moldura (ex.: lotes de um tipo). Alvos ≥44px
     vêm do .ec-checkbox. Erros/ajuda: .ec-field__help / .ec-field__error-list com id
     ligado por aria-describedby no fieldset. */
  .ec-choice-group {
    display: grid;
    gap: var(--ec-space-1);
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .ec-choice-group__legend {
    float: inline-start;
    inline-size: 100%;
    margin: 0;
    padding: 0;
    color: var(--ec-sys-color-on-surface-strong);
    font-size: var(--ec-type-label-lg-size);
    font-weight: var(--ec-font-weight-semibold);
    line-height: var(--ec-type-label-lg-line);
  }

  .ec-choice-group__options {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--ec-space-5);
  }

  .ec-choice-group--stack > .ec-choice-group__options {
    flex-direction: column;
  }

  .ec-choice-group .ec-checkbox {
    align-items: center;
  }

  .ec-choice-group--stack .ec-checkbox {
    align-items: flex-start;
    padding-block: var(--ec-space-2);
  }

  .ec-choice-group .ec-checkbox__copy {
    display: grid;
    gap: var(--ec-space-1);
  }

  .ec-choice-group .ec-checkbox:has(.ec-checkbox__input:disabled) {
    color: var(--ec-sys-color-on-surface-muted);
    cursor: not-allowed;
  }

  .ec-choice-group--nested {
    padding: var(--ec-space-2) var(--ec-space-3);
    border: var(--ec-border-width-thin) solid var(--ec-sys-color-outline-subtle);
    border-radius: var(--ec-radius-md);
  }

  .ec-choice-group--nested > .ec-choice-group__legend {
    font-size: var(--ec-type-label-md-size);
    line-height: var(--ec-type-label-md-line);
  }

  .ec-acceptance {
    display: grid;
    gap: var(--ec-space-3);
    padding: var(--ec-space-4);
    border: var(--ec-border-width-thin) solid var(--ec-sys-color-outline-subtle);
    border-radius: var(--ec-radius-md);
    background: var(--ec-sys-color-surface);
  }

  .ec-acceptance__title {
    color: var(--ec-sys-color-on-surface-strong);
    font-size: var(--ec-type-label-lg-size);
    font-weight: var(--ec-font-weight-bold);
    line-height: var(--ec-type-label-lg-line);
  }

  .ec-acceptance details {
    color: var(--ec-sys-color-on-surface-muted);
    font-size: var(--ec-type-body-md-size);
    line-height: var(--ec-type-body-md-line);
  }

  .ec-acceptance summary {
    min-height: var(--ec-touch-target-min);
    color: var(--ec-sys-color-primary);
    cursor: pointer;
    font-weight: var(--ec-font-weight-semibold);
  }

  .ec-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ec-space-1);
    min-height: var(--ec-comp-badge-height);
    padding-inline: var(--ec-space-3);
    border-radius: var(--ec-radius-full);
    background: var(--ec-sys-color-surface-muted);
    color: var(--ec-sys-color-on-surface-muted);
    font-size: var(--ec-type-label-md-size);
    font-weight: var(--ec-font-weight-bold);
    line-height: var(--ec-type-label-md-line);
    white-space: nowrap;
  }

  .ec-badge--info {
    background: var(--ec-sys-color-info-container);
    color: var(--ec-sys-color-on-info-container);
  }

  .ec-badge--success {
    background: var(--ec-sys-color-success-container);
    color: var(--ec-sys-color-on-success-container);
  }

  .ec-badge--warning {
    background: var(--ec-sys-color-warning-container);
    color: var(--ec-sys-color-on-warning-container);
  }

  .ec-badge--critical {
    background: var(--ec-sys-color-error-container);
    color: var(--ec-sys-color-on-error-container);
  }

  /* Badge de situação com ponto (listas densas): o ponto herda a cor do texto e só
     reforça; o estado é sempre o texto do badge. */
  .ec-badge--dot::before {
    content: "";
    inline-size: 0.375rem;
    block-size: 0.375rem;
    flex: none;
    border-radius: var(--ec-radius-full);
    background: currentColor;
  }

  .ec-badge--sm {
    min-height: 1.375rem;
    padding-inline: var(--ec-space-2);
  }

  .ec-feedback {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--ec-space-3);
    padding: var(--ec-space-4);
    border: var(--ec-border-width-thin) solid var(--ec-sys-color-outline-subtle);
    border-radius: var(--ec-radius-md);
    background: var(--ec-sys-color-surface);
  }

  /* Faixa de feedback compacta (1 linha em telas operacionais densas). */
  .ec-feedback--compact {
    align-items: baseline;
    gap: var(--ec-space-2);
    padding: var(--ec-space-2) var(--ec-space-3);
    font-size: var(--ec-type-body-sm-size);
    line-height: var(--ec-type-body-sm-line);
  }

  .ec-feedback--info {
    border-color: var(--ec-sys-color-info);
    background: var(--ec-sys-color-info-container);
    color: var(--ec-sys-color-on-info-container);
  }

  .ec-feedback--success {
    border-color: var(--ec-sys-color-success);
    background: var(--ec-sys-color-success-container);
    color: var(--ec-sys-color-on-success-container);
  }

  .ec-feedback--warning {
    border-color: var(--ec-sys-color-warning);
    background: var(--ec-sys-color-warning-container);
    color: var(--ec-sys-color-on-warning-container);
  }

  .ec-feedback--critical {
    border-color: var(--ec-sys-color-error);
    background: var(--ec-sys-color-error-container);
    color: var(--ec-sys-color-on-error-container);
  }

  .ec-dialog {
    width: min(calc(100% - (2 * var(--ec-page-gutter))), 36rem);
    max-height: min(85vh, 48rem);
    padding: 0;
    border: 0;
    border-radius: var(--ec-comp-dialog-radius);
    background: var(--ec-sys-color-surface);
    color: var(--ec-sys-color-on-surface);
    box-shadow: var(--ec-elevation-4);
  }

  .ec-dialog::backdrop {
    background: var(--ec-sys-color-scrim);
  }

  .ec-dialog__header,
  .ec-dialog__body,
  .ec-dialog__actions {
    padding: var(--ec-space-5);
  }

  .ec-dialog__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--ec-space-3);
    border-top: var(--ec-border-width-thin) solid var(--ec-sys-color-divider);
  }

  .ec-dialog__actions .ec-button {
    width: 100%;
  }

  /* ≥30rem (antes: bloco max-width 479px, desktop-first — convertido sem mudar o resultado). */
  @media (min-width: 30rem) {
    .ec-button {
      min-height: var(--ec-comp-button-height);
    }

    .ec-card__header,
    .ec-card__body,
    .ec-card__footer {
      padding: var(--ec-comp-card-padding);
    }

    .ec-card__header {
      padding-block: var(--ec-comp-card-header-padding-block);
    }

    .ec-dialog__actions .ec-button:not(.ec-button--block) {
      width: auto;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ec-button__spinner {
      animation-duration: 1ms;
    }
  }
}