/*
  Sistema de botones y formularios (FR-006, FR-007).
  NOTA DE ALCANCE (research.md § 6): 001-home-page no tiene ningún CTA ni
  formulario, por lo que estos estilos no se usan visiblemente en el sitio
  todavía. Quedan listos para que 002-contact-news-helpdesk los consuma. La
  verificación de los Acceptance Scenarios de la Historia de Usuario 3 (ver
  spec.md) queda pendiente hasta que esa feature exista.

  Reglas de color (research.md § 2): --color-secondary (cian) y
  --color-accent (naranja) nunca se usan como texto ni borde de botón sobre
  fondo claro (fallan incluso el umbral de 3:1 de componente UI); todos los
  botones/borde usan --color-primary sobre fondo claro.
*/

/* Botón primario: relleno --color-primary + texto blanco (11.45:1, PASS) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
}

.btn-primary {
  background-color: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background-color: #0a2c4d;
  border-color: #0a2c4d;
}

/* Botón secundario/outline: borde y texto --color-primary (nunca cian, que
   falla 3:1 como borde sobre fondo claro) */
.btn-secondary {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  background-color: var(--color-primary);
  color: #ffffff;
}

/* Botón ghost: sin relleno ni borde visible hasta interacción */
.btn-ghost {
  background-color: transparent;
  color: var(--color-primary);
  border-color: transparent;
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  background-color: rgba(13, 59, 102, 0.08);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  background-color: var(--color-text-muted);
  border-color: var(--color-text-muted);
  color: #ffffff;
  cursor: not-allowed;
  opacity: 0.6;
}

.btn:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* Modo oscuro: el botón primario sigue siendo el relleno --color-primary,
   pero éste falla como TEXTO sobre --color-bg-dark (research.md § 2) — no
   aplica aquí porque el texto sigue siendo blanco sobre el relleno, no
   sobre el fondo de página. El botón secundario/ghost en modo oscuro usa
   blanco en vez de --color-primary, ya que --color-primary sobre
   --color-bg-dark falla (1.56:1). */
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn-ghost {
  color: #ffffff;
  border-color: #ffffff;
}

[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] .btn-secondary:focus-visible {
  background-color: #ffffff;
  color: var(--color-bg-dark);
}

[data-theme="dark"] .btn-ghost:hover,
[data-theme="dark"] .btn-ghost:focus-visible {
  background-color: rgba(255, 255, 255, 0.12);
}

/* Formularios */
.form-field {
  display: block;
  margin-bottom: var(--space-3);
}

.form-label {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--color-text);
}

.form-input {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  background-color: var(--color-bg);
  border: 1px solid var(--color-text-muted);
  border-radius: var(--radius-sm);
}

.form-input:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 1px;
  /* --color-link en vez de --color-primary: mismo motivo de layout.css (research.md § 2 de 003) */
  border-color: var(--color-link);
}

.form-input[aria-invalid="true"] {
  border-color: var(--color-error);
}

.form-error {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-error);
  font-size: 0.875rem;
}

.form-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 44px;
}

.form-checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
}