/* components.css — botones, inputs, cards, badges */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.7rem 1.2rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1;
  border-radius: var(--radius-md);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color var(--transition-fast),
              color var(--transition-fast),
              border-color var(--transition-fast),
              transform var(--transition-fast);
  white-space: nowrap;
  user-select: none;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background-color: var(--accent);
  color: var(--accent-contrast);
}
.btn-primary:hover { background-color: var(--accent-hover); color: var(--accent-contrast); }

.btn-outline {
  background-color: transparent;
  color: var(--text-primary);
  border-color: var(--border-secondary);
}
.btn-outline:hover { background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-secondary); }

.btn-ghost {
  background-color: transparent;
  color: var(--text-primary);
}
.btn-ghost:hover { background-color: var(--bg-secondary); color: var(--text-primary); }

.btn-lg { padding: 0.95rem 1.6rem; font-size: 1rem; }
.btn-sm { padding: 0.5rem 0.9rem; font-size: 0.85rem; }
.btn-block { width: 100%; }

.input, .textarea, .select {
  display: block;
  width: 100%;
  padding: 0.7rem 0.9rem;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.input::placeholder, .textarea::placeholder { color: var(--text-tertiary); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.label {
  display: block;
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
  font-weight: 500;
}

.field { margin-bottom: var(--space-4); }
.field-help { font-size: 0.85rem; color: var(--text-tertiary); margin-top: var(--space-1); }
.field-error { font-size: 0.85rem; color: var(--danger); margin-top: var(--space-1); }

.card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-tertiary);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.card-elevated {
  background-color: var(--bg-primary);
  border: 1px solid var(--border-tertiary);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.25rem 0.6rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--radius-pill);
  background-color: var(--bg-tertiary);
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}
.badge-accent { background-color: var(--accent-soft); color: var(--accent); }
.badge-success { background-color: rgba(5, 150, 105, 0.12); color: var(--success); }
.badge-warning { background-color: rgba(217, 119, 6, 0.14); color: var(--warning); }
.badge-danger { background-color: rgba(220, 38, 38, 0.12); color: var(--danger); }

.alert {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-tertiary);
  background-color: var(--bg-secondary);
  margin-bottom: var(--space-4);
}
.alert-error { border-color: rgba(220, 38, 38, 0.3); background-color: rgba(220, 38, 38, 0.05); color: var(--danger); }
.alert-success { border-color: rgba(5, 150, 105, 0.3); background-color: rgba(5, 150, 105, 0.05); color: var(--success); }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-tertiary);
  background-color: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.theme-toggle:hover { background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-secondary); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }