/* Componentes do design system reproduzidos em CSS (fonte: design/skill/components). */

/* Botão: pílula, rótulo condensado em caixa alta por CSS. */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--control-md); min-height: 44px; padding: 0 20px;
  border-radius: var(--radius-pill); border: 1px solid transparent;
  background: var(--navy-500); color: var(--text-inverse);
  font: var(--fw-medium) 16px/1 var(--font-display); text-transform: uppercase; letter-spacing: var(--ls-caps);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.botao:hover { background: var(--navy-700); color: var(--text-inverse); text-decoration: none; }
.botao:active:not(:disabled) { transform: scale(.97); }
.botao:disabled { opacity: .45; cursor: not-allowed; }
.botao .icone { width: 18px; height: 18px; }
.botao--primario { background: var(--brand-500); color: var(--text-on-brand); }
.botao--primario:hover { background: var(--brand-600); color: var(--text-on-brand); }
.botao--contorno { background: var(--surface-card); color: var(--text-strong); border-color: var(--border-default); }
.botao--contorno:hover { background: var(--neutral-25); color: var(--text-strong); }

/* Botão de ícone: círculo com borda sutil; aria-label e title sempre. */
.botao-icone {
  position: relative; width: 44px; height: 44px; flex-shrink: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--border-subtle);
  background: var(--surface-card); color: var(--text-strong); cursor: pointer; text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.botao-icone:hover { background: var(--neutral-25); color: var(--text-strong); text-decoration: none; }
.botao-icone:active { transform: scale(.94); }
.botao-icone[aria-current="page"], .botao-icone--ativo { background: var(--neutral-800); color: var(--text-inverse); border-color: transparent; }
.botao-icone--marca { width: 48px; height: 48px; background: var(--brand-500); color: var(--text-on-brand); border-color: transparent; }
.botao-icone--marca:hover { background: var(--brand-600); color: var(--text-on-brand); }
.botao-icone--marca .icone { width: 22px; height: 22px; }

/* Cartão: branco, raio 20, sem borda; flutua no hover (régua: todo cartão). */
.cartao {
  display: block; background: var(--surface-card); border-radius: var(--radius-lg); padding: var(--space-7);
  color: inherit; text-decoration: none;
  transition: transform var(--dur-slow) var(--mola), box-shadow var(--dur-slow) var(--ease-out);
}
.cartao:hover { transform: translate(-2px, -2px); box-shadow: 3px 3px 0 rgba(32, 37, 79, .07); text-decoration: none; color: inherit; }
.cartao__rotulo { font: var(--type-label); color: var(--text-muted); margin-bottom: var(--space-5); }

/* Pílula de estado: par suave, cor só de estado (vermelho da marca nunca é erro). */
.pilula {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px;
  border-radius: var(--radius-pill); background: var(--neutral-100); color: var(--text-body);
  font: var(--fw-medium) 12px/1 var(--font-sans); white-space: nowrap;
}
.pilula--sucesso { background: var(--status-success-bg); color: var(--status-success-fg); }
.pilula--info { background: var(--status-info-bg); color: var(--status-info-fg); }
.pilula--revisao { background: var(--status-review-bg); color: var(--status-review-fg); }
.pilula--alerta { background: var(--atraso-fundo); color: var(--atraso); }

/* Chip de filtro: contorno; selecionado = marinho; hover = contorno vermelho. */
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
  border-radius: var(--radius-pill); border: 1px solid var(--border-default);
  background: var(--surface-card); color: var(--text-strong); font: var(--type-body); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.chip:hover { border-color: var(--brand-500); }
.chip[aria-pressed="true"], .chip--ativo { background: var(--neutral-800); border-color: transparent; color: var(--text-inverse); }
.chip__qtd { color: inherit; opacity: .7; }

/* Campo: ladrilho com o rótulo dentro. */
.campo {
  display: flex; flex-direction: column; justify-content: center; gap: 6px; min-height: 60px; padding: 10px 14px;
  border-radius: var(--radius-md); background: var(--surface-card); border: 1px solid var(--border-subtle);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.campo:focus-within { border-color: var(--brand-400); box-shadow: 0 0 0 3px var(--brand-100); }
.campo__rotulo { font: var(--type-label); color: var(--text-muted); }
.campo input, .campo select, .campo textarea {
  width: 100%; min-width: 0; border: 0; outline: none; background: transparent; padding: 0;
  font: var(--type-body); font-size: 16px; color: var(--text-strong);
}
.campo--busca { flex-direction: row; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--radius-pill); gap: 8px; }
.campo--busca .icone { width: 16px; height: 16px; color: var(--text-body); }
.campo--erro { border-color: var(--atraso); }
.campo__erro { font: var(--type-body-sm); color: var(--atraso); padding-left: 4px; }

/* Atraso e erro: âmbar com ícone, nunca vermelho. */
.aviso-atraso { display: inline-flex; align-items: center; gap: 6px; color: var(--atraso); font: var(--fw-medium) 12px/1.3 var(--font-sans); }
.aviso-atraso .icone { width: 16px; height: 16px; }

/* Estado vazio: uma frase e a ação. */
.vazio {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-6); text-align: center;
  padding: var(--space-10) var(--space-6); border-radius: var(--radius-lg); background: var(--hatch-neutral), var(--surface-card);
  color: var(--text-body);
}

/* Aviso (toast marinho) com "desfazer". */
.aviso {
  display: flex; align-items: center; gap: 12px; width: 100%; max-width: 420px; padding: 12px 12px 12px 16px;
  border-radius: var(--radius-lg); background: var(--surface-inverse); color: var(--text-inverse); box-shadow: var(--shadow-lg);
  animation: aviso-entra var(--dur-base) var(--ease-out);
}
.aviso__texto { flex: 1; min-width: 0; font: var(--fw-medium) 14px/1.3 var(--font-sans); }
.aviso__desfazer {
  min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .12);
  color: inherit; font: var(--fw-medium) 14px/1 var(--font-display); text-transform: uppercase; letter-spacing: var(--ls-caps); cursor: pointer;
}
.aviso__desfazer:hover { background: rgba(255, 255, 255, .2); }
@keyframes aviso-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .cartao:hover { transform: none; }
  .botao:active, .botao-icone:active { transform: none; }
}