/*
  Sistema de botones, tarjetas y formularios (rediseño 2026).
  Reglas de color: --color-btn-primary-bg/--color-btn-primary-text ya
  resuelven el contraste correcto en cada modo (ver tokens.css). El botón
  outline usa --color-border + --color-text, nunca cian/naranja como borde
  de texto sobre fondo claro (2.29–2.61:1, ver tokens.css).
*/

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-sm {
  padding: 12px 22px;
  font-size: 0.875rem;
}

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

.btn-primary:hover,
.btn-primary:focus-visible {
  filter: brightness(0.92);
}

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

.btn-outline:hover,
.btn-outline:focus-visible {
  background-color: var(--color-surface-alt);
}

/* Pill del botón de acceso a HelpDesk en el header (FR de 002, frontera link-only) */
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background-color: var(--color-btn-primary-bg);
  color: var(--color-btn-primary-text);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  white-space: nowrap;
}

.btn-pill:hover,
.btn-pill:focus-visible {
  filter: brightness(0.92);
}

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

/* Tarjetas: formulario de contacto, tarjeta de noticia, tarjetas de producto */
.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* Insignia numerada de la sección "producto". El texto SIEMPRE usa color
   oscuro (#0a1119) sobre relleno cian/naranja: blanco falla AA sobre esos
   dos rellenos (2.46:1 / 2.61:1); sobre navy sí se usa blanco (11.45:1). */
.badge-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-family: var(--font-heading);
  font-weight: 700;
  margin-bottom: var(--space-3);
}

.badge-number--cyan {
  background-color: var(--color-secondary);
  color: #0a1119;
}

.badge-number--navy {
  background-color: var(--color-primary);
  color: #ffffff;
}

.badge-number--orange {
  background-color: var(--color-accent);
  color: #0a1119;
}

/* Formularios */
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.form-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

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

.form-input:focus-visible {
  outline: 3px solid var(--color-link);
  outline-offset: 1px;
  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;
}