@layer ec.components {
  .ec-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ec-space-2);
    min-height: var(--ec-comp-button-height);
    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);
  }

  .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-5);
  }

  .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-space-2);
  }

  .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-space-3) var(--ec-space-4);
    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);
  }

  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);
  }

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

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

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

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

  @media (max-width: 479px) {
    .ec-button {
      min-height: var(--ec-touch-target-min);
    }

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

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

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