/*
 * CriptoClaro — Components CSS
 * Utility classes built on theme.css variables
 */

/* ── Cards ─────────────────────────────────────────── */
.card {
  background: #ffffff;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 1.25rem;
  transition: box-shadow 0.15s ease;
}
.card:hover {
  box-shadow: var(--shadow-card-hover);
}

/* ── Buttons ────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary-600);
  color: #ffffff;
  font-size: var(--text-sm);
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-btn);
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.btn-primary:hover {
  background-color: var(--color-primary-700);
}
.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-accent-400);
  color: var(--color-neutral-900);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-btn);
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.btn-accent:hover {
  background-color: var(--color-accent-500);
}
.btn-accent:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  color: var(--color-primary-600);
  font-size: var(--text-sm);
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-btn);
  border: 1px solid var(--color-primary-600);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.btn-secondary:hover {
  background-color: var(--color-primary-50);
}

.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-error);
  color: #ffffff;
  font-size: var(--text-sm);
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-btn);
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.btn-danger:hover {
  background-color: #dc2626;
}
.btn-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Tables ─────────────────────────────────────────── */
.table-header {
  background-color: var(--color-neutral-100);
  color: var(--color-neutral-700);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--color-neutral-200);
}

.table-row {
  border-bottom: 1px solid var(--color-neutral-100);
  transition: background-color 0.1s ease;
}
.table-row:hover {
  background-color: var(--color-neutral-50);
}

.table-row-alt:nth-child(even) {
  background-color: var(--color-neutral-50);
}

/* ── Form inputs ────────────────────────────────────── */
.input {
  width: 100%;
  background: #ffffff;
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-input);
  padding: 0.5rem 0.75rem;
  font-size: var(--text-sm);
  color: var(--color-neutral-800);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input:focus {
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15);
}

/* ── Alerts ─────────────────────────────────────────── */
.alert-warning {
  background-color: var(--color-accent-100);
  color: var(--color-accent-700);
  border-left: 4px solid var(--color-accent-400);
  border-radius: 0.375rem;
  padding: 0.75rem 1rem;
  font-size: var(--text-sm);
}

.alert-success {
  background-color: var(--color-primary-100);
  color: var(--color-primary-700);
  border-left: 4px solid var(--color-primary-500);
  border-radius: 0.375rem;
  padding: 0.75rem 1rem;
  font-size: var(--text-sm);
}

.alert-error {
  background-color: #fee2e2;
  color: #b91c1c;
  border-left: 4px solid var(--color-error);
  border-radius: 0.375rem;
  padding: 0.75rem 1rem;
  font-size: var(--text-sm);
}

/* ── Badges ─────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: var(--text-xs);
  font-weight: 500;
}
.badge-primary {
  background-color: var(--color-primary-100);
  color: var(--color-primary-700);
}
.badge-accent {
  background-color: var(--color-accent-100);
  color: var(--color-accent-700);
}