/* ==========================================================================
   GRUPO GESA – Components
   Botones · Badges · Alertas · Elementos reutilizables
   ========================================================================== */

/* ========================================
   BOTONES
   ======================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 0.65rem var(--space-xl);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius-full);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Primario – relleno verde */
.btn--primary {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg-body);
}

.btn--primary:hover {
  background-color: var(--color-accent-light);
  border-color: var(--color-accent-light);
  color: var(--color-bg-body);
}

/* Brochure – cápsula, fill verde */
.btn--brochure {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: #1c2022;
  padding: 0.5rem 1.25rem;
  font-size: var(--text-sm);
}

.btn--brochure:hover {
  background-color: var(--color-accent-light);
  border-color: var(--color-accent-light);
  color: #1c2022;
}

/* Outline blanco (sobre fondos oscuros) */
.btn--outline-white {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.6);
  color: #ffffff;
}

.btn--outline-white:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: #ffffff;
}

/* Deshabilitado */
.btn[disabled],
.btn.is-loading {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* ========================================
   SECTION LABEL (etiqueta sobre títulos)
   ======================================== */

.section-label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

/* ========================================
   ALERTAS – feedback de formulario
   ======================================== */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  margin-bottom: var(--space-lg);
}

.alert--success {
  background-color: rgba(34, 197, 94, 0.12);
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.alert--error {
  background-color: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* ========================================
   DIVIDER decorativo
   ======================================== */

.divider {
  width: 56px;
  height: 3px;
  background-color: var(--color-accent);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-lg);
}